/* ═══════════════════════════════════════════════════════════
   SafaqatDZ — Theme V2BEE
   Charte : Navy #1e2a4a · Orange #ee7c2c · Blanc
   La bonne information, la bonne décision
   الصفقة الذكية تبدأ بالمعلومة الصحيحة
═══════════════════════════════════════════════════════════ */

:root {
  /* Palette principale */
  --sq-navy: #1e2a4a;
  --sq-navy-700: #2a3a66;
  --sq-navy-900: #131c33;
  --sq-orange: #ee7c2c;
  --sq-orange-600: #d96916;
  --sq-orange-50: #fff4ea;

  /* Neutres */
  --sq-bg: #f6f7fb;
  --sq-surface: #ffffff;
  --sq-border: #e6e9f2;
  --sq-text: #0f172a;
  --sq-muted: #5b6478;
  --sq-subtle: #8a93a8;

  /* Sémantique */
  --sq-success: #16a34a;
  --sq-danger: #dc2626;
  --sq-warning: #f59e0b;
  --sq-info: #2563eb;

  /* UI */
  --sq-radius-sm: 8px;
  --sq-radius: 14px;
  --sq-radius-lg: 22px;
  --sq-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --sq-shadow: 0 6px 24px rgba(15,23,42,.08);
  --sq-shadow-lg: 0 24px 48px rgba(15,23,42,.18);
  --sq-grad-hero: linear-gradient(135deg, #1e2a4a 0%, #2a3a66 55%, #ee7c2c 140%);

  --sq-font: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --sq-font-ar: 'Noto Naskh Arabic', 'Amiri', 'Segoe UI', sans-serif;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--sq-font);
  color: var(--sq-text);
  background: var(--sq-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sq-orange-600); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ─── Header global ──────────────────────────────────────── */
.sq-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--sq-border);
}
.sq-header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 84px;
}
.sq-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}
/* Phase 20 v2 (21/06/2026) - Logo Safqa360DZ encore agrandi (surtout mobile) */
.sq-brand img { height: 92px; width: auto; display: block; }
@media (max-width: 1100px) { .sq-brand img { height: 88px; } }
@media (max-width: 760px)  { .sq-brand img { height: 84px; } }
@media (max-width: 480px)  { .sq-brand img { height: 74px; } }
/* Taglines déjà intégrées dans le PNG → on masque les versions HTML */
.sq-brand .sq-brand-tagline { display: none !important; }

.sq-nav { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.sq-nav a {
  color: var(--sq-navy);
  font-weight: 600;
  font-size: .9rem;
  padding: 8px 12px;
  border-radius: var(--sq-radius-sm);
  text-decoration: none !important;
}
.sq-nav a:hover { background: var(--sq-orange-50); color: var(--sq-orange-600); }
.sq-nav a.sq-nav-cta {
  background: var(--sq-orange);
  color: #fff !important;
  padding: 9px 16px;
  border-radius: 999px;
}
.sq-nav a.sq-nav-cta:hover { background: var(--sq-orange-600); }

/* ─── Boutons ─────────────────────────────────────────────── */
.sq-btn {
  --bg: var(--sq-navy);
  --fg: #fff;
  --br: var(--sq-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--br);
  background: var(--bg);
  color: var(--fg);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s, border-color .2s, color .2s;
  text-decoration: none !important;
}
.sq-btn:hover { transform: translateY(-1px); box-shadow: var(--sq-shadow); }
.sq-btn:active { transform: translateY(0); }
.sq-btn-primary { --bg: var(--sq-orange); --br: var(--sq-orange); }
.sq-btn-primary:hover { --bg: var(--sq-orange-600); --br: var(--sq-orange-600); }
.sq-btn-ghost { --bg: transparent; --fg: var(--sq-navy); --br: var(--sq-border); }
.sq-btn-ghost:hover { --bg: var(--sq-orange-50); --br: var(--sq-orange); --fg: var(--sq-orange-600); }
.sq-btn-block { width: 100%; }
.sq-btn-sm { padding: 8px 14px; font-size: .82rem; }

/* ─── Cartes / surfaces ──────────────────────────────────── */
.sq-card {
  background: var(--sq-surface);
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow-sm);
}
.sq-card-pad { padding: 22px; }

/* ─── Formulaires ─────────────────────────────────────────── */
.sq-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--sq-navy);
  margin-bottom: 6px;
}
.sq-input, .sq-select, .sq-textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: .95rem;
  font-family: inherit;
  color: var(--sq-text);
  background: #fff;
  border: 1.5px solid var(--sq-border);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.sq-input:focus, .sq-select:focus, .sq-textarea:focus {
  outline: none;
  border-color: var(--sq-orange);
  box-shadow: 0 0 0 4px rgba(238,124,44,.15);
}
.sq-field { margin-bottom: 14px; }
.sq-help { font-size: .78rem; color: var(--sq-muted); margin-top: 6px; }
.sq-error { color: var(--sq-danger); font-size: .82rem; margin-top: 8px; }
.sq-success {
  color: #065f46;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .9rem;
  line-height: 1.5;
  margin-top: 8px;
  text-align: center;
}

/* ─── Formulaire témoignage (home.html, abonnés payants) ─── */
.sq-textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
  padding: 12px 14px;
}
.sq-field-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.sq-char-counter {
  font-size: .75rem;
  color: var(--sq-muted);
  font-variant-numeric: tabular-nums;
}
.sq-stars-input {
  display: inline-flex;
  gap: 4px;
}
.sq-stars-input .sq-star {
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: 1.8rem;
  line-height: 1;
  color: #cbd5e1;
  cursor: pointer;
  transition: color .15s, transform .1s;
}
.sq-stars-input .sq-star:hover {
  transform: scale(1.15);
}
.sq-stars-input .sq-star.active {
  color: #f59e0b;
}
.sq-stars-input .sq-star:focus-visible {
  outline: 2px solid var(--sq-primary, #2563eb);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Liste des règles de mot de passe (validation temps réel) ─── */
/* Apparaît sous le champ password au focus ou dès qu'il y a du texte.
   Chaque <li> passe de gris (○) à vert (✓) quand la règle est satisfaite.
   IMPORTANT : on force flex-direction: column avec !important pour éviter
   tout conflit avec une éventuelle cascade parente (form grid, columns…). */
ul.sq-pw-rules {
  list-style: none !important;
  margin: 8px 0 0 !important;
  padding: 10px 12px !important;
  background: rgba(15, 23, 42, .04);
  border: 1px solid var(--sq-border, #e2e8f0);
  border-radius: 8px;
  font-size: .78rem;
  color: var(--sq-muted, #64748b);
  display: none;
  column-count: 1 !important;
  columns: unset !important;
  grid-template-columns: 1fr !important;
}
ul.sq-pw-rules.open {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
}
ul.sq-pw-rules > li {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  width: 100% !important;
  flex: 1 1 100% !important;
  list-style: none !important;
  transition: color .15s;
}
ul.sq-pw-rules > li > .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #94a3b8;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}
ul.sq-pw-rules > li.ok { color: #16a34a; }
ul.sq-pw-rules > li.ok > .ico { background: #16a34a; color: #fff; }
ul.sq-pw-rules > li.ok strong { color: #15803d; }
/* Mobile : encore plus compact et bien lisible */
@media (max-width: 640px) {
  ul.sq-pw-rules { font-size: .76rem; padding: 8px 10px !important; }
  ul.sq-pw-rules > li { padding: 3px 0; }
  ul.sq-pw-rules > li > .ico { width: 16px; height: 16px; font-size: .68rem; }
}

/* ─── Champ en erreur (validation step 2) ─── */
.sq-field.has-error .sq-input,
.sq-field.has-error .sq-select {
  border-color: var(--sq-danger, #dc2626) !important;
  background: rgba(220, 38, 38, .04);
  animation: sq-shake .35s ease-in-out;
}
@keyframes sq-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.sq-sectors-toolbar.has-error {
  outline: 2px solid var(--sq-danger, #dc2626);
  outline-offset: 4px;
  border-radius: 8px;
  animation: sq-shake .35s ease-in-out;
}

/* Feedback succès sur boutons (login OK, etc.) */
.sq-btn-success,
.sq-btn-success:hover,
.sq-btn-success:focus {
  background: #16a34a !important;
  border-color: #15803d !important;
  color: #fff !important;
  transition: background .2s, border-color .2s;
}

/* Lien équipe interne sur la page login : discret mais visible */
.sq-login-staff-link {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--sq-border, #e2e8f0);
  text-align: center;
  font-size: .82rem;
}
.sq-login-staff-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sq-muted, #64748b);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.sq-login-staff-link a:hover {
  color: var(--sq-navy, #1e3a5f);
  background: rgba(15, 23, 42, .04);
}

/* ─── Hero ────────────────────────────────────────────────── */
.sq-hero {
  background: var(--sq-grad-hero);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.sq-hero::before {
  /* Silhouette BTP / chantier (SVG inline, très subtil, côté droit) */
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.5'><path d='M540 540 L540 180 L545 175 L750 175 L755 180 L755 540'/><path d='M540 180 L540 90 L760 90'/><path d='M620 180 L620 540 M700 180 L700 540 M540 260 L755 260 M540 340 L755 340 M540 420 L755 420'/><path d='M460 540 L460 300 L520 300 L520 540'/><path d='M460 340 L520 340 M460 380 L520 380 M460 420 L520 420 M460 460 L520 460 M460 500 L520 500'/><path d='M380 540 L380 380 L440 380 L440 540'/></g></svg>") right center/auto 100% no-repeat;
  pointer-events: none;
  opacity: .9;
}
.sq-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.08) 0, transparent 40%),
                    radial-gradient(circle at 80% 70%, rgba(238,124,44,.20) 0, transparent 55%);
  pointer-events: none;
}
.sq-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 20px 96px;
}
.sq-hero h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.5px;
  max-width: 760px;
}
.sq-hero h1 .accent { color: var(--sq-orange); }
.sq-hero p.lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  margin-top: 16px;
  max-width: 640px;
  opacity: .9;
}
.sq-hero .sq-hero-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.sq-hero .sq-hero-cta .sq-btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.sq-hero .sq-hero-cta .sq-btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
.sq-hero-tag-ar {
  margin-top: 18px;
  font-family: var(--sq-font-ar);
  direction: rtl;
  text-align: right;
  font-size: 1.05rem;
  opacity: .8;
  max-width: 760px;
}

/* ─── KPI cards ───────────────────────────────────────────── */
.sq-kpis {
  max-width: 1200px;
  margin: -56px auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.sq-kpi {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  padding: 20px;
  box-shadow: var(--sq-shadow);
  display: flex;
  gap: 14px;
  align-items: center;
}
.sq-kpi-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--sq-orange-50);
  color: var(--sq-orange-600);
  display: grid; place-items: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.sq-kpi-value { font-size: 1.5rem; font-weight: 800; color: var(--sq-navy); line-height: 1; }
.sq-kpi-label { font-size: .82rem; color: var(--sq-muted); margin-top: 4px; }

/* ─── Sections ────────────────────────────────────────────── */
.sq-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 20px;
}
.sq-section-title {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 800;
  color: var(--sq-navy);
  letter-spacing: -.3px;
  margin-bottom: 8px;
}
.sq-section-sub { color: var(--sq-muted); margin-bottom: 28px; }

.sq-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.sq-feature {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  padding: 22px;
  transition: transform .15s, box-shadow .2s, border-color .2s;
}
.sq-feature:hover { transform: translateY(-2px); box-shadow: var(--sq-shadow); border-color: var(--sq-orange); }
.sq-feature-icon { font-size: 1.6rem; color: var(--sq-orange); margin-bottom: 8px; }
.sq-feature h3 { font-size: 1.05rem; font-weight: 700; color: var(--sq-navy); margin-bottom: 6px; }
.sq-feature p { color: var(--sq-muted); font-size: .92rem; }

/* ─── Auth pages (login/register) ─────────────────────────── */
.sq-auth {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 960px) { .sq-auth { grid-template-columns: 1.05fr 1fr; } }
.sq-auth-aside {
  background: var(--sq-grad-hero);
  color: #fff;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.sq-auth-aside::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(238,124,44,.25), transparent 50%);
  pointer-events: none;
}
.sq-auth-aside-inner { position: relative; z-index: 1; }
.sq-auth-aside h2 {
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 14px;
}
.sq-auth-aside h2 .accent { color: var(--sq-orange); }
.sq-auth-aside p { opacity: .9; max-width: 420px; }
.sq-auth-aside .ar {
  margin-top: 14px;
  font-family: var(--sq-font-ar);
  direction: rtl;
  text-align: right;
  opacity: .8;
}
.sq-auth-aside ul.bullets { margin-top: 24px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sq-auth-aside ul.bullets li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; opacity: .92; }
.sq-auth-aside ul.bullets li::before { content: '✦'; color: var(--sq-orange); flex-shrink: 0; }

.sq-auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--sq-bg);
}
.sq-auth-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius-lg);
  padding: 36px 32px;
  box-shadow: var(--sq-shadow);
}
.sq-auth-card h1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sq-navy);
  letter-spacing: -.3px;
  margin-bottom: 6px;
}
.sq-auth-card .sub { color: var(--sq-muted); font-size: .92rem; margin-bottom: 22px; }
.sq-auth-card form { display: flex; flex-direction: column; gap: 4px; }
.sq-auth-card .sq-btn { margin-top: 8px; }
.sq-auth-foot {
  margin-top: 18px;
  font-size: .88rem;
  color: var(--sq-muted);
  text-align: center;
}
.sq-auth-foot a { color: var(--sq-orange-600); font-weight: 600; }
.sq-auth-team-link {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--sq-border);
  text-align: center;
  font-size: .85rem;
  color: var(--sq-muted);
}
.sq-auth-team-link a { color: var(--sq-navy); font-weight: 700; }

/* ─── Listing annonces ───────────────────────────────────── */
.sq-listing-shell { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.sq-listing-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.sq-search {
  flex: 1; min-width: 240px;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--sq-border);
  padding: 4px 4px 4px 14px; border-radius: 999px;
}
.sq-search:focus-within { border-color: var(--sq-orange); box-shadow: 0 0 0 4px rgba(238,124,44,.12); }
.sq-search input { border: 0; outline: 0; flex: 1; font-size: .95rem; background: transparent; }
.sq-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.sq-chip {
  padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--sq-border); background: #fff;
  font-size: .85rem; font-weight: 600; color: var(--sq-navy);
  cursor: pointer; transition: all .15s;
}
.sq-chip:hover { border-color: var(--sq-orange); color: var(--sq-orange-600); }
.sq-chip.active { background: var(--sq-navy); color: #fff; border-color: var(--sq-navy); }

.sq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.sq-tile {
  background: #fff; border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .2s, border-color .2s;
  text-decoration: none !important;
  color: inherit;
}
.sq-tile:hover { transform: translateY(-3px); box-shadow: var(--sq-shadow); border-color: var(--sq-orange); }
.sq-tile-thumb {
  aspect-ratio: 4/3;
  background: #f1f3f9 center/cover no-repeat;
  position: relative;
}
.sq-tile-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--sq-orange); color: #fff;
  font-size: .72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.sq-tile-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.sq-tile-sector { font-size: .76rem; color: var(--sq-muted); text-transform: uppercase; letter-spacing: .05em; }
.sq-tile-title { font-weight: 700; color: var(--sq-navy); font-size: 1rem; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sq-tile-meta { font-size: .82rem; color: var(--sq-muted); display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.sq-tile-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* ─── Détail annonce ─────────────────────────────────────── */
.sq-detail { max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; }
.sq-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sq-navy); font-weight: 600; font-size: .9rem;
  margin-bottom: 14px; text-decoration: none !important;
}
.sq-back:hover { color: var(--sq-orange-600); }
.sq-detail-head {
  display: grid; grid-template-columns: 1fr; gap: 22px;
}
@media (min-width: 880px) { .sq-detail-head { grid-template-columns: 1.2fr 1fr; } }
.sq-detail-img {
  background: #fff; border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  overflow: hidden;
  display: grid; place-items: center;
}
.sq-detail-img img { max-height: 520px; width: auto; max-width: 100%; }
.sq-detail-info { display: flex; flex-direction: column; gap: 14px; }
.sq-detail-info h1 {
  font-size: 1.5rem; font-weight: 800; color: var(--sq-navy); letter-spacing: -.3px;
}
.sq-meta-grid {
  background: #fff; border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius); padding: 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
}
.sq-meta-grid dt { font-size: .76rem; color: var(--sq-muted); text-transform: uppercase; letter-spacing: .05em; }
.sq-meta-grid dd { font-weight: 600; color: var(--sq-navy); font-size: .94rem; margin-top: 2px; }

/* ─── Footer ──────────────────────────────────────────────── */
.sq-footer {
  background: var(--sq-navy-900);
  color: #cbd2e2;
  padding: 36px 20px 20px;
  margin-top: 80px;
}
.sq-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .sq-footer-inner { grid-template-columns: 2fr 1fr 1fr; } }
.sq-footer h4 { color: #fff; font-size: .92rem; margin-bottom: 10px; }
.sq-footer a { color: #cbd2e2; font-size: .88rem; display: block; padding: 4px 0; }
.sq-footer a:hover { color: var(--sq-orange); }
.sq-footer-bottom {
  max-width: 1200px; margin: 24px auto 0; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .8rem; color: #8590a8;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
}

/* ─── Bandeau V2BEE INTÉGRÉ dans le subheader (plus de barre orange séparée) ─── */
/* L'ancien div #v2bee-banner standalone est masqué — l'indicateur V2BEE
   apparaît maintenant comme pastille à droite dans le subheader (local only) */
#v2bee-banner { display: none !important; }
body.has-v2bee-banner { padding-top: 0 !important; }

/* ─── Subheader : barre du HAUT (← → + fil d'Ariane + V2BEE notice) ─── */
.sq-subheader {
  background: #fff;
  border-bottom: 1px solid var(--sq-border);
  padding: 8px 24px;
  position: sticky;
  top: 0;      /* JS ajuste selon la vraie hauteur du header */
  z-index: 55;
}

/* Pastille V2BEE inline dans le subheader (alignée à droite) */
.sq-subheader-v2bee {
  margin-left: auto;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #1a1200;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
  display: none;
}
body.has-v2bee-banner .sq-subheader-v2bee { display: inline-block; }
.sq-subheader-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sq-nav-arrow {
  width: 32px; height: 32px;
  border: 1.5px solid var(--sq-border);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  display: inline-grid; place-items: center;
  color: var(--sq-navy);
  font-size: 1rem;
  line-height: 1;
  transition: all .15s;
  flex-shrink: 0;
  font-family: inherit;
}
.sq-nav-arrow:hover {
  border-color: var(--sq-orange);
  background: var(--sq-orange-50);
  color: var(--sq-orange-600);
}
.sq-nav-arrow:active { transform: scale(.92); }
.sq-subheader .sq-breadcrumb-trail {
  font-size: .85rem;
  color: var(--sq-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.sq-subheader .sq-breadcrumb-trail a {
  color: var(--sq-muted);
  text-decoration: none !important;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.sq-subheader .sq-breadcrumb-trail a:hover {
  color: var(--sq-orange-600);
  background: var(--sq-orange-50);
}
.sq-subheader .sq-breadcrumb-trail .sep {
  color: var(--sq-subtle);
  margin: 0 2px;
}
.sq-subheader .sq-breadcrumb-trail .current {
  color: var(--sq-navy);
  font-weight: 700;
}

/* ─── Carte titre d'annonce (page détail) ─── */
.sq-detail-title-card {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
  padding: 22px 26px;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 880px) {
  .sq-detail-title-card { grid-template-columns: 1fr auto; align-items: center; gap: 22px; }
}
.sq-detail-title-card h1 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  color: var(--sq-navy);
  letter-spacing: -.3px;
  line-height: 1.25;
  margin: 0;
}
.sq-detail-title-card .sq-badges {
  margin: 0;
  flex-wrap: wrap;
  gap: 8px;
}
.sq-detail-title-card .sq-badge {
  font-size: .82rem;
  padding: 5px 12px;
}

/* ═══════════════════════════════════════════════════════════
   LANDING — composants spécifiques home.html
═══════════════════════════════════════════════════════════ */

/* Sous-titre logo (sous le wordmark) */
.sq-brand-sub {
  font-size: .68rem;
  color: var(--sq-muted);
  margin-top: 2px;
  letter-spacing: .02em;
}

/* Lang toggle */
.sq-lang {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--sq-navy); font-weight: 600; font-size: .88rem;
  padding: 6px 10px; border-radius: var(--sq-radius-sm);
  cursor: pointer; background: transparent; border: 0;
}
.sq-lang:hover { background: var(--sq-orange-50); color: var(--sq-orange-600); }

/* ─── Hero split (texte + form) ─────────────────────────── */
.sq-hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
@media (min-width: 980px) { .sq-hero-split { grid-template-columns: 1.1fr 1fr; } }
.sq-hero-text p.lead { margin-top: 18px; max-width: 580px; }
.sq-hero-bullets {
  list-style: none;
  margin-top: 24px;
  display: flex; flex-direction: column; gap: 12px;
  max-width: 600px;
}
.sq-hero-bullets li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .94rem; line-height: 1.45;
  color: rgba(255,255,255,.92);
}
.sq-hero-bullets li::before {
  content: '✓';
  background: var(--sq-orange);
  color: #fff;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 800;
  flex-shrink: 0; margin-top: 2px;
}
.sq-social-proof {
  display: flex; align-items: center; gap: 12px;
  margin-top: 30px;
}
.sq-avatars { display: inline-flex; }
.sq-avatars .av {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2.5px solid var(--sq-navy);
  margin-left: -10px;
  background: #d9def0 center/cover no-repeat;
  display: grid; place-items: center;
  color: var(--sq-navy); font-weight: 700; font-size: .72rem;
}
.sq-avatars .av:first-child { margin-left: 0; }
.sq-social-proof-text { font-size: .9rem; line-height: 1.3; }
.sq-social-proof-text strong { color: var(--sq-orange); font-size: 1.05rem; display: block; }

/* Form card dans le hero */
.sq-form-card {
  background: #fff;
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: 0 30px 70px rgba(8,12,28,.45);
  color: var(--sq-text);
  position: relative;
  z-index: 2;
}
.sq-form-card h3 {
  font-size: 1.2rem;
  color: var(--sq-navy);
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -.2px;
}
.sq-form-card .form-sub {
  color: var(--sq-muted);
  font-size: .85rem;
  margin-bottom: 18px;
}
.sq-input-icon { position: relative; }
.sq-input-icon .sq-input { padding-right: 44px; }
.sq-input-icon .ico {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--sq-subtle);
  pointer-events: none;
  font-size: 1rem;
}
.sq-phone-row { display: grid; grid-template-columns: 100px 1fr; gap: 8px; }
.sq-form-foot {
  text-align: center;
  font-size: .78rem;
  color: var(--sq-muted);
  margin-top: 14px;
}
.sq-form-foot .dot { margin: 0 8px; color: var(--sq-subtle); }
.sq-form-login-link {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sq-border);
  text-align: center;
  font-size: .88rem;
  color: var(--sq-muted);
}
.sq-form-login-link a {
  color: var(--sq-primary, #ee7c2c);
  font-weight: 700;
  text-decoration: none;
}
.sq-form-login-link a:hover { text-decoration: underline; }

/* ─── Bandeau "Ils nous font confiance" ─────────────────── */
.sq-trust {
  padding: 36px 20px;
  background: #fff;
  border-bottom: 1px solid var(--sq-border);
}
.sq-trust-inner { max-width: 1200px; margin: 0 auto; }
.sq-trust-title {
  text-align: center;
  color: var(--sq-navy);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 26px;
}
.sq-trust-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 18px 36px;
}
@media (max-width: 900px) { .sq-trust-logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .sq-trust-logos { grid-template-columns: repeat(2, 1fr); } }
.sq-trust-logos .partner {
  color: var(--sq-navy);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .04em;
  opacity: .55;
  filter: grayscale(1);
  transition: opacity .2s, filter .2s;
  text-align: center;
  line-height: 1.1;
}
.sq-trust-logos .partner:hover { opacity: 1; filter: grayscale(0); }
.sq-trust-logos .partner small { display: block; font-size: .65rem; font-weight: 600; opacity: .8; }

/* ─── Marquee : carousel auto-défilant quand > N items ─── */
.sq-trust-logos.sq-marquee,
.sq-testimonials.sq-marquee {
  display: block;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
/* Le défilement est piloté par JS (translateX appliqué via requestAnimationFrame),
   pas par animation CSS. Ça permet les sauts manuels via les flèches ‹ / ›. */
.sq-marquee .sq-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
.sq-trust-logos.sq-marquee .sq-marquee-track { gap: 56px; }
.sq-trust-logos.sq-marquee .sq-marquee-track > * { flex-shrink: 0; }
.sq-trust-logos.sq-marquee .sq-marquee-track img { max-height: 60px; width: auto; }
.sq-testimonials.sq-marquee .sq-marquee-track {
  gap: 18px;
  padding: 4px 2px;
}
.sq-testimonials.sq-marquee .sq-marquee-track > .sq-testimonial {
  width: clamp(280px, 30vw, 380px);
  flex-shrink: 0;
}

/* Flèches de défilement manuel ‹ / › */
.sq-marquee-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  border: 1.5px solid var(--sq-border);
  color: var(--sq-navy);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  padding: 0;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.sq-marquee-arrow:hover {
  background: var(--sq-orange);
  color: #fff;
  border-color: var(--sq-orange);
  transform: translateY(-50%) scale(1.08);
}
.sq-marquee-arrow.prev { left: 6px; }
.sq-marquee-arrow.next { right: 6px; }
.sq-marquee-arrow > span { display: inline-block; transform: translateY(-2px); }

/* ─── "Pourquoi" et "Nos services" : cards centrées ──────── */
.sq-section-h-center { text-align: center; }
.sq-cards-5 {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.sq-card-feature {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  padding: 24px 20px;
  text-align: center;
  transition: transform .15s, box-shadow .2s, border-color .2s;
}
.sq-card-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--sq-shadow);
  border-color: var(--sq-orange);
}
.sq-card-feature .icon-bubble {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  background: var(--sq-orange-50);
  color: var(--sq-orange-600);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.4rem;
}
.sq-card-feature h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sq-navy);
  margin-bottom: 6px;
}
.sq-card-feature p {
  color: var(--sq-muted);
  font-size: .86rem;
  line-height: 1.5;
}

/* "Nos services" : card alignée à gauche avec icône carrée */
.sq-card-service {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  padding: 22px 20px;
  text-align: left;
  transition: transform .15s, box-shadow .2s, border-color .2s;
}
.sq-card-service:hover {
  transform: translateY(-3px);
  box-shadow: var(--sq-shadow);
  border-color: var(--sq-orange);
}
.sq-card-service .icon-square {
  width: 40px; height: 40px;
  background: var(--sq-orange-50);
  color: var(--sq-orange-600);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.sq-card-service h3 {
  font-size: .98rem;
  font-weight: 700;
  color: var(--sq-navy);
  margin-bottom: 4px;
}
.sq-card-service p {
  color: var(--sq-muted);
  font-size: .85rem;
  line-height: 1.5;
}

/* ─── Stats band ─────────────────────────────────────────── */
.sq-stats {
  background: var(--sq-navy);
  color: #fff;
  padding: 40px 30px;
  border-radius: 16px;
  max-width: 1200px;
  margin: 16px auto;
}
.sq-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  text-align: center;
}
.sq-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--sq-orange);
  line-height: 1;
}
.sq-stat-label {
  font-size: .82rem;
  opacity: .85;
  margin-top: 6px;
}

/* ─── Testimonials ───────────────────────────────────────── */
.sq-testimonials {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .sq-testimonials { grid-template-columns: 1fr; } }
.sq-testimonial {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  padding: 22px;
  box-shadow: var(--sq-shadow-sm);
}
.sq-testimonial .quote-mark {
  color: var(--sq-orange);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}
.sq-testimonial p {
  color: var(--sq-muted);
  font-size: .9rem;
  line-height: 1.55;
}
.sq-testimonial-author {
  display: flex; gap: 12px; align-items: center;
  margin-top: 14px;
}
.sq-testimonial-author .av {
  width: 44px; height: 44px; border-radius: 50%;
  background: #d9def0 center/cover no-repeat;
  display: grid; place-items: center;
  color: var(--sq-navy); font-weight: 700; font-size: .82rem;
  flex-shrink: 0;
}
.sq-testimonial-author .who { font-weight: 700; color: var(--sq-navy); font-size: .9rem; }
.sq-testimonial-author .who small {
  display: block; font-weight: 500;
  color: var(--sq-muted); font-size: .78rem;
}
.sq-stars {
  color: var(--sq-orange);
  margin-top: 12px;
  font-size: .92rem;
  letter-spacing: .1em;
}

/* ─── App mobile ─────────────────────────────────────────── */
.sq-app {
  background: var(--sq-navy);
  color: #fff;
  border-radius: 18px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.sq-app::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 80%, rgba(238,124,44,.18), transparent 55%);
  pointer-events: none;
}
@media (min-width: 880px) { .sq-app { grid-template-columns: 1.2fr 1fr; } }
.sq-app-text { position: relative; z-index: 1; }
.sq-app h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; letter-spacing: -.2px; }
.sq-app p { opacity: .85; margin-bottom: 18px; max-width: 460px; }
.sq-stores { display: flex; gap: 10px; flex-wrap: wrap; }
.sq-store {
  background: #000;
  color: #fff !important;
  padding: 10px 16px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.15);
  transition: transform .15s, border-color .2s;
}
.sq-store:hover { transform: translateY(-2px); border-color: var(--sq-orange); }
.sq-store small { display: block; opacity: .7; font-size: .65rem; font-weight: 500; }
.sq-store .icon { font-size: 1.4rem; line-height: 1; }
.sq-app-phones {
  position: relative; z-index: 1;
  display: flex; gap: 10px; justify-content: center;
}
.sq-app-phone {
  background: #fff;
  width: 200px; height: 400px;
  border-radius: 22px;
  border: 4px solid #111;
  box-shadow: 0 14px 28px rgba(0,0,0,.4);
  overflow: hidden;
}
.sq-app-phone.tall { height: 440px; transform: translateY(-15px); }
.sq-app-phone img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block; image-rendering: -webkit-optimize-contrast;
}

/* ─── Pricing ────────────────────────────────────────────── */
.sq-pricing {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .sq-pricing { grid-template-columns: repeat(3, 1fr); } }
.sq-plan {
  background: #fff;
  border: 1.5px solid var(--sq-border);
  border-radius: var(--sq-radius);
  padding: 28px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.sq-plan h3 {
  color: var(--sq-navy);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 14px;
  text-align: center;
}
.sq-plan .price {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 4px;
  line-height: 1;
}
.sq-plan .price small {
  font-size: .82rem;
  color: var(--sq-muted);
  font-weight: 500;
  margin-left: 4px;
}
.sq-plan ul {
  list-style: none;
  margin: 22px 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.sq-plan ul li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .88rem;
  color: var(--sq-text);
  line-height: 1.4;
}
.sq-plan ul li::before {
  content: '✓';
  color: var(--sq-success);
  font-weight: 700;
  flex-shrink: 0;
}
.sq-plan .sq-btn { margin-top: auto; }
.sq-plan.featured {
  border-color: var(--sq-orange);
  box-shadow: 0 12px 30px rgba(238,124,44,.18);
}
.sq-plan .badge-pop {
  position: absolute;
  top: 0; right: 0;
  background: var(--sq-orange);
  color: #fff;
  padding: 6px 16px;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 0 var(--sq-radius) 0 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ─── CTA band navy ──────────────────────────────────────── */
.sq-cta-band {
  background: var(--sq-navy);
  color: #fff;
  border-radius: 16px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 28px 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
}
.sq-cta-band h2 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.2px;
}
.sq-cta-band p { opacity: .82; font-size: .92rem; margin-top: 4px; }

/* ─── Footer 4 colonnes ──────────────────────────────────── */
.sq-footer-inner.cols-4 { grid-template-columns: 1fr; }
@media (min-width: 800px) {
  .sq-footer-inner.cols-4 { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}
.sq-footer-socials {
  display: flex; gap: 10px; margin-top: 14px;
}
.sq-footer-socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  color: #cbd2e2 !important;
  font-size: .92rem;
  padding: 0;
  transition: background .2s, color .2s;
}
.sq-footer-socials a:hover { background: var(--sq-orange); color: #fff !important; }
.sq-footer-bottom a { display: inline; padding: 0; }
.sq-footer-bottom a:hover { color: var(--sq-orange); }

/* ═══════════════════════════════════════════════════════════
   HEADER navy (variante landing connexion/inscription)
═══════════════════════════════════════════════════════════ */
.sq-header.dark {
  background: var(--sq-navy);
  border-bottom: 0;
  position: relative;
}
.sq-header.dark .sq-header-inner { padding: 14px 24px; min-height: 76px; }
.sq-header.dark .sq-brand { color: #fff; flex-direction: column; align-items: flex-start; gap: 0; }
/* Le PNG contient wordmark + 2 lignes de tagline. On masque les taglines en
   affichant l'image à pleine hauteur dans un wrapper qui ne montre que ~38 %
   du haut (le wordmark) — ainsi seule la partie "S + SafaqatDZ" reste visible.
   Le sous-titre "Le portail N°1…" est ajouté en HTML séparément. */
.sq-header.dark .sq-brand .logo-clip {
  display: block;
  overflow: hidden;
  height: 30px;
  width: 175px;       /* largeur du wordmark visible — à affiner si besoin */
  margin-bottom: 0;
}
.sq-header.dark .sq-brand .logo-clip img {
  display: block;
  height: 78px;       /* PNG affichée plus grande, seule la partie haute est visible */
  width: auto;
  filter: brightness(0) invert(1);
  margin-top: 2px;
  margin-left: -6px;
}
.sq-header.dark .sq-brand-sub {
  color: rgba(255,255,255,.78);
  font-size: .72rem;
  margin-top: 2px;
  letter-spacing: .01em;
}
.sq-header.dark .sq-nav { gap: 4px; }
.sq-header.dark .sq-nav a {
  color: #fff;
  font-weight: 600;
  font-size: .94rem;
  padding: 8px 14px;
}
.sq-header.dark .sq-nav a:hover { background: rgba(255,255,255,.08); color: var(--sq-orange); }
.sq-header.dark .sq-lang {
  color: #fff; background: transparent; border: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: .9rem; padding: 6px 10px;
}
.sq-header.dark .sq-lang .globe { font-size: 1.05rem; opacity: .9; }
.sq-header.dark .sq-lang:hover { background: rgba(255,255,255,.08); }
.sq-header.dark .sq-nav .sq-btn-ghost {
  color: #fff; border-color: rgba(255,255,255,.4); background: transparent;
}
.sq-header.dark .sq-nav .sq-btn-ghost:hover {
  background: rgba(255,255,255,.08); border-color: #fff; color: #fff;
}
.sq-header.dark .sq-nav .sq-btn-primary { box-shadow: 0 6px 16px rgba(238,124,44,.35); }

/* ═══════════════════════════════════════════════════════════
   LOGIN PAGE — split card style (refonte)
═══════════════════════════════════════════════════════════ */
.sq-login-wrap {
  background: #fff;
  padding: 36px 24px 24px;
  min-height: calc(100vh - 76px);
}
.sq-login-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: stretch;
}
/* Layout 2 colonnes : aside gauche plus étroite pour laisser plus de place aux étapes d'inscription à droite */
@media (min-width: 980px)  { .sq-login-grid { grid-template-columns: 320px 1fr; } }
@media (min-width: 1280px) { .sq-login-grid { grid-template-columns: 360px 1fr; } }

/* Aside gauche : carte navy avec photo chantier */
.sq-login-aside {
  position: relative;
  color: #fff;
  border-radius: 22px;
  overflow: hidden;
  padding: 36px 26px;
  min-height: 560px;
  background:
    linear-gradient(135deg, rgba(19,28,51,.92) 0%, rgba(30,42,74,.85) 60%, rgba(19,28,51,.92) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800' preserveAspectRatio='xMidYMid slice'><rect width='600' height='800' fill='%231e2a4a'/><g fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='2'><path d='M180 800 L180 220 L100 220 L100 215 L360 215 L360 220 L290 220'/><path d='M180 280 L290 280 M180 340 L290 340 M180 400 L290 400 M180 460 L290 460 M180 520 L290 520 M180 580 L290 580 M180 640 L290 640 M180 700 L290 700'/><path d='M100 215 L100 100 L370 100 L370 215'/><path d='M370 100 L470 100'/><line x1='370' y1='105' x2='470' y2='105'/><path d='M360 220 L460 220 L460 800'/><path d='M460 280 L530 280 M460 360 L530 360 M460 440 L530 440 M460 520 L530 520 M460 600 L530 600 M460 680 L530 680 M460 760 L530 760'/><path d='M530 280 L530 800'/><circle cx='90' cy='105' r='4' fill='rgba(238,124,44,0.7)'/><line x1='90' y1='105' x2='90' y2='220' stroke-dasharray='4 4'/></g></svg>")
    right center/cover no-repeat,
    var(--sq-navy);
}
.sq-login-aside h2 {
  font-size: clamp(1.65rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.4px;
  margin-bottom: 14px;
}
.sq-login-aside h2 .accent { color: var(--sq-orange); }
.sq-login-aside > p {
  font-size: .98rem;
  opacity: .85;
  line-height: 1.5;
  max-width: 460px;
  margin-bottom: 28px;
}
.sq-login-features {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}
.sq-login-features li {
  display: flex; gap: 14px;
  align-items: flex-start;
}
.sq-login-features .icon {
  width: 42px; height: 42px;
  background: rgba(238,124,44,.18);
  color: var(--sq-orange);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  border: 1.5px solid rgba(238,124,44,.35);
}
.sq-login-features h4 {
  font-size: .98rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.sq-login-features p {
  font-size: .85rem;
  opacity: .8;
  line-height: 1.45;
  max-width: 320px;
}
.sq-login-quote {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
}
.sq-login-quote::before {
  content: '❝';
  position: absolute;
  top: 8px; left: 14px;
  color: var(--sq-orange);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  opacity: .9;
}
.sq-login-quote p {
  padding-left: 24px;
  font-size: .9rem;
  line-height: 1.55;
  opacity: .9;
}
.sq-login-quote-foot {
  padding-left: 24px;
  display: flex; justify-content: space-between;
  align-items: flex-end;
  margin-top: 12px;
  gap: 12px;
}
.sq-login-quote-foot .who {
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
}
.sq-login-quote-foot .who small {
  display: block;
  font-weight: 500;
  opacity: .75;
  font-size: .8rem;
}
.sq-login-quote-foot .sq-stars {
  margin: 0;
  font-size: .95rem;
}

/* Form droite */
.sq-login-form-card {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 22px;
  padding: 56px 64px;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 720px) { .sq-login-form-card { padding: 40px 28px; } }
.sq-login-form-card h1 {
  text-align: center;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--sq-navy);
  letter-spacing: -.4px;
  margin-bottom: 8px;
}
.sq-login-form-card > .sub {
  text-align: center;
  color: var(--sq-muted);
  font-size: .94rem;
  margin-bottom: 28px;
}

/* Inputs avec icône à gauche */
.sq-field-icon {
  position: relative;
}
.sq-field-icon .lead-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--sq-subtle);
  font-size: 1rem;
  pointer-events: none;
}
.sq-field-icon .sq-input { padding-left: 44px; }
.sq-field-icon .trail-icon {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--sq-subtle);
  font-size: 1rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}
.sq-field-icon .trail-icon:hover { color: var(--sq-navy); background: var(--sq-bg); }

/* Row remember + forgot */
.sq-row-between {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .88rem; margin: 6px 0 18px;
}
.sq-check {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--sq-muted);
  user-select: none;
  cursor: pointer;
}
.sq-check input { width: 16px; height: 16px; accent-color: var(--sq-orange); }
.sq-forgot { color: var(--sq-info); font-weight: 600; }
.sq-forgot:hover { color: var(--sq-orange); }

/* Bouton CTA — version avec icône */
.sq-btn-cta {
  height: 50px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
}

/* Divider "ou continuer avec" */
.sq-divider {
  display: flex; align-items: center;
  margin: 22px 0 16px;
  color: var(--sq-muted);
  font-size: .85rem;
  gap: 14px;
}
.sq-divider::before, .sq-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sq-border);
}

/* SSO row */
.sq-sso-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 480px) { .sq-sso-row { grid-template-columns: 1fr 1fr; } }
.sq-sso-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 10px;
  height: 48px;
  border: 1.5px solid var(--sq-border);
  background: #fff;
  border-radius: 12px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--sq-text);
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
.sq-sso-btn:hover { border-color: var(--sq-orange); background: var(--sq-orange-50); transform: translateY(-1px); }
.sq-sso-btn .gico {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 4px;
  font-weight: 700;
  font-size: .82rem;
}
.sq-sso-btn .gico-google { background: #fff; border: 1px solid #e0e0e0; color: #4285F4; }
.sq-sso-btn .gico-linkedin { background: #0a66c2; color: #fff; }

/* Footer "vous n'avez pas de compte" */
.sq-login-bottom-link {
  text-align: center;
  margin-top: 22px;
  color: var(--sq-muted);
  font-size: .92rem;
}
.sq-login-bottom-link a {
  color: var(--sq-info);
  font-weight: 700;
}
.sq-login-bottom-link a:hover { color: var(--sq-orange); }

/* Bandeau confiance 4 colonnes */
.sq-trust-strip {
  max-width: 1280px;
  margin: 28px auto 0;
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 18px;
  padding: 22px 28px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.sq-trust-strip-item {
  display: flex; gap: 14px; align-items: center;
}
.sq-trust-strip-item .ico {
  width: 44px; height: 44px;
  background: var(--sq-bg);
  color: var(--sq-navy);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.sq-trust-strip-item h4 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--sq-navy);
  margin-bottom: 2px;
}
.sq-trust-strip-item p {
  font-size: .8rem;
  color: var(--sq-muted);
  line-height: 1.4;
}

/* Helpline en bas */
.sq-helpline {
  text-align: center;
  padding: 24px 16px 36px;
  color: var(--sq-muted);
  font-size: .92rem;
}
.sq-helpline a { color: var(--sq-info); font-weight: 600; }
.sq-helpline a:hover { color: var(--sq-orange); }

/* ═══════════════════════════════════════════════════════════
   REGISTER PAGE — wizard 2 étapes (étape1 actif + étape2 preview)
═══════════════════════════════════════════════════════════ */

/* Card droite : conteneur principal de l'inscription */
.sq-reg-card {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 22px;
  padding: 36px 38px 32px;
  min-height: 560px;
}
@media (max-width: 720px) { .sq-reg-card { padding: 28px 22px; } }

/* Stepper haut de carte */
.sq-stepper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--sq-border);
}
.sq-step {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.sq-step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--sq-bg);
  color: var(--sq-subtle);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  border: 2px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.sq-step.active .sq-step-num {
  background: var(--sq-orange);
  color: #fff;
}
.sq-step.done .sq-step-num {
  background: var(--sq-success);
  color: #fff;
}
.sq-step-label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--sq-navy);
  line-height: 1.25;
}
.sq-step-label small {
  display: block;
  font-weight: 500;
  font-size: .78rem;
  color: var(--sq-muted);
  margin-top: 2px;
}
.sq-step.muted .sq-step-label,
.sq-step.muted .sq-step-num + .sq-step-label { color: var(--sq-subtle); }
.sq-step.muted .sq-step-label small { color: var(--sq-subtle); }
.sq-stepper-divider {
  height: 2px;
  background: var(--sq-border);
  width: 80px;
  border-radius: 2px;
}
@media (max-width: 720px) {
  .sq-stepper { grid-template-columns: 1fr; gap: 18px; }
  .sq-stepper-divider { display: none; }
}

/* Layout interne : 2 colonnes (form étape1 + preview étape2) */
.sq-reg-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 880px) { .sq-reg-layout { grid-template-columns: 1.05fr 1fr; gap: 48px; } }

.sq-reg-pane h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sq-navy);
  letter-spacing: -.3px;
  margin-bottom: 4px;
}
.sq-reg-pane > .pane-sub {
  color: var(--sq-text);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.sq-reg-pane > .pane-desc {
  color: var(--sq-muted);
  font-size: .86rem;
  margin-bottom: 22px;
  line-height: 1.5;
}
.sq-reg-pane.muted h3,
.sq-reg-pane.muted .pane-sub { color: var(--sq-subtle); }

/* Phone row : indicatif + numéro avec icône à droite */
.sq-phone-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
}

/* Password rules (2 colonnes) */
.sq-pw-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  margin: 10px 0 18px;
}
.sq-pw-rules li {
  list-style: none;
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem;
  color: var(--sq-muted);
}
.sq-pw-rules li::before {
  content: '✓';
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sq-bg);
  color: var(--sq-subtle);
  display: inline-grid; place-items: center;
  font-size: .66rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.sq-pw-rules li.ok { color: var(--sq-success); }
.sq-pw-rules li.ok::before { background: var(--sq-success); color: #fff; }

/* Secure footer note */
.sq-reg-secure {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem;
  color: var(--sq-muted);
  margin-top: 14px;
  justify-content: center;
}

/* Étape 2 preview : liste icônes */
.sq-reg-preview {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.sq-reg-preview li {
  display: flex; gap: 14px;
  align-items: center;
  font-size: .94rem;
  color: var(--sq-subtle);
}
.sq-reg-preview .ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--sq-bg);
  display: grid; place-items: center;
  color: var(--sq-subtle);
  font-size: 1rem;
  flex-shrink: 0;
}

/* Callout orange "Pourquoi" */
.sq-callout {
  background: var(--sq-orange-50);
  border: 1px solid rgba(238,124,44,.25);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.sq-callout .award {
  width: 40px; height: 40px;
  background: #fff;
  border: 1.5px solid rgba(238,124,44,.4);
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--sq-orange);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.sq-callout h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--sq-navy);
  margin-bottom: 6px;
}
.sq-callout p {
  font-size: .85rem;
  color: var(--sq-text);
  line-height: 1.5;
}
.sq-callout p.highlight {
  color: var(--sq-orange-600);
  font-weight: 700;
  margin-top: 6px;
}

/* Bandeau stats inscription (4 colonnes avec icône à gauche) */
.sq-stats-strip {
  max-width: 1280px;
  margin: 28px auto 0;
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 18px;
  padding: 22px 28px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.sq-stats-strip-item {
  display: flex; gap: 14px; align-items: center;
  justify-content: center;
}
.sq-stats-strip-item .ico {
  width: 44px; height: 44px;
  background: var(--sq-bg);
  color: var(--sq-navy);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.sq-stats-strip-item .num {
  font-weight: 800;
  color: var(--sq-navy);
  font-size: 1.5rem;
  line-height: 1;
}
.sq-stats-strip-item .lbl {
  font-size: .8rem;
  color: var(--sq-muted);
  margin-top: 4px;
}

/* Badge sécurité dans aside */
.sq-aside-secure {
  display: flex; gap: 12px; align-items: center;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.sq-aside-secure .ico {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sq-aside-secure p {
  font-size: .82rem;
  opacity: .9;
  line-height: 1.45;
}

/* Sectors checklist (étape 2 réelle) */
.sq-sectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 8px 0 20px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.sq-sector-chip {
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1.5px solid var(--sq-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: .85rem;
  color: var(--sq-text);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s;
}
.sq-sector-chip:hover { border-color: var(--sq-orange); background: var(--sq-orange-50); }
.sq-sector-chip input { accent-color: var(--sq-orange); width: 16px; height: 16px; }
.sq-sector-chip.checked { border-color: var(--sq-orange); background: var(--sq-orange-50); color: var(--sq-orange-600); font-weight: 600; }

/* ─── Barre d'outils (recherche + compteur) au-dessus de la grille secteurs ─── */
.sq-sectors-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 8px;
  flex-wrap: wrap;
}
.sq-sectors-search {
  position: relative;
  flex: 1 1 240px;
  min-width: 220px;
}
.sq-sectors-search .ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .95rem;
  color: var(--sq-muted);
  pointer-events: none;
}
.sq-sectors-search input.sq-input {
  width: 100%;
  padding-left: 36px;
  height: 40px;
  font-size: .9rem;
}
.sq-sectors-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .85rem;
  color: var(--sq-muted);
  background: #f9fafb;
  border: 1.5px solid var(--sq-border);
  padding: 8px 14px;
  border-radius: 10px;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.sq-sectors-counter strong {
  color: var(--sq-orange-600, #c2410c);
  font-size: 1rem;
}
.sq-sectors-counter.is-max {
  background: var(--sq-orange-50, #fff7ed);
  border-color: var(--sq-orange, #ee7c2c);
  color: var(--sq-orange-600, #c2410c);
}
.sq-sectors-empty {
  padding: 16px;
  text-align: center;
  color: var(--sq-muted);
  background: #f9fafb;
  border: 1px dashed var(--sq-border);
  border-radius: 10px;
  margin: 4px 0 12px;
  font-size: .9rem;
}

/* Mobile : compacter la barre d'outils + grille 1 colonne sur petits écrans */
@media (max-width: 720px) {
  .sq-sectors-toolbar {
    gap: 8px;
    margin: 8px 0 6px;
  }
  .sq-sectors-search { min-width: 0; flex: 1 1 100%; }
  .sq-sectors-counter {
    flex: 1 1 100%;
    justify-content: center;
    padding: 8px 10px;
    font-size: .82rem;
  }
  .sq-sectors-grid {
    grid-template-columns: 1fr;
    max-height: 260px;
    gap: 8px;
    padding: 2px;
  }
  .sq-sector-chip {
    padding: 10px 12px;
    font-size: .88rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   ANNOUNCEMENTS PAGE — listing pro avec filtres et sidebar
═══════════════════════════════════════════════════════════ */

/* Logo dark header agrandi (cohérent avec la demande "logo plus grand") */
.sq-header.dark .sq-header-inner { padding: 12px 24px; min-height: 80px; }
.sq-header.dark .sq-brand .logo-clip {
  display: block;
  overflow: hidden;
  height: 38px;
  width: 210px;
  margin-bottom: 0;
}
.sq-header.dark .sq-brand .logo-clip img {
  display: block;
  height: 98px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-top: 2px;
  margin-left: -8px;
}
.sq-header.dark .sq-brand-sub {
  color: rgba(255,255,255,.78);
  font-size: .78rem;
  margin-top: 4px;
}
/* Nav item actif (lien souligné orange) */
.sq-header.dark .sq-nav a[aria-current="page"] {
  color: var(--sq-orange);
  position: relative;
}
.sq-header.dark .sq-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -4px;
  height: 3px;
  background: var(--sq-orange);
  border-radius: 2px;
}
.sq-header.dark .icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: #fff;
  display: inline-grid; place-items: center;
  cursor: pointer;
  font-size: 1rem;
  transition: background .15s, border-color .15s;
}
.sq-header.dark .icon-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--sq-orange);
  color: var(--sq-orange);
}

/* ─── Bandeau titre + barre de recherche ─────────────────── */
.sq-page-intro {
  background: linear-gradient(135deg, var(--sq-navy) 0%, var(--sq-navy-700) 60%, #2e3d6b 100%);
  color: #fff;
  border-bottom: 0;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
}
/* Texture subtile dans le coin droit (cohérent avec le hero de la home) */
.sq-page-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 90% 20%, rgba(238,124,44,.18), transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(255,255,255,.06), transparent 50%);
  pointer-events: none;
}
.sq-page-intro > * { position: relative; z-index: 1; }
.sq-page-intro-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}
/* Donne plus d'espace au titre/sous-titre (1.4fr) et moins à la recherche (1fr).
   La barre de recherche est aussi plafonnée par max-width pour rester compacte
   et laisser le sous-titre s'étaler sur 2 lignes max au lieu de 3+. */
@media (min-width: 980px) {
  .sq-page-intro-inner { grid-template-columns: 1.4fr 1fr auto; }
}
.sq-page-intro .sq-search-bar { max-width: 460px; }
.sq-page-intro h1 {
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
  margin-bottom: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.sq-page-intro p {
  color: rgba(255,255,255,.92);
  font-size: .95rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.sq-search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 14px;
  padding: 4px 4px 4px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: box-shadow .15s, transform .12s;
}
.sq-search-bar:focus-within {
  box-shadow: 0 0 0 4px rgba(238,124,44,.3), 0 8px 24px rgba(0,0,0,.18);
}
.sq-search-bar .ico { color: var(--sq-subtle); margin-right: 10px; font-size: 1rem; }
.sq-search-bar input {
  flex: 1;
  border: 0; outline: 0;
  background: transparent;
  font-size: .94rem;
  padding: 12px 0;
  color: var(--sq-text);
}
.sq-search-bar .sq-btn {
  padding: 10px 22px;
  border-radius: 10px;
  background: var(--sq-navy);
  border-color: var(--sq-navy);
  font-size: .92rem;
}
.sq-search-bar .sq-btn:hover { background: var(--sq-navy-700); border-color: var(--sq-navy-700); }
.sq-adv-link {
  color: rgba(255,255,255,.95);
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  text-decoration: none !important;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  transition: border-color .15s, color .15s;
}
.sq-adv-link:hover { color: var(--sq-orange); border-bottom-color: var(--sq-orange); }

/* ─── 3 colonnes : filtres + listing + sidebar ───────────── */
.sq-list-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 24px 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 900px)  { .sq-list-shell { grid-template-columns: 260px 1fr; } }
@media (min-width: 1200px) { .sq-list-shell { grid-template-columns: 260px 1fr 300px; } }

/* ─── Sidebar filtres ──────────────────────────────────────
   FIX (mai 2026) : on FORCE display:block ici pour annuler le `display:flex
   flex-wrap:wrap` hérité de la règle générique .sq-filters (ligne ~568, qui
   sert pour la barre de chips de la home). Sans ça, les .sq-filter-group
   essayaient de s'aligner côte à côte sur petit écran → mise en page
   "Statut + Secteurs en 2 colonnes" au lieu d'empilement vertical propre.
   La variante .sq-filters.compact (Type d'annonce avec chips) garde le flex. */
.sq-filters:not(.compact) {
  display: block;
}
.sq-filters:not(.compact) .sq-filter-group {
  width: 100%;
  flex: none;
}
.sq-filters {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 16px;
  padding: 20px;
  align-self: start;
  position: sticky;
  top: 100px;
  /* Crée un contexte de stacking au-dessus des cartes annonces, sinon le
     panel déroulant des multipicks (qui déborde sur la colonne listing)
     passe visuellement sous les .sq-ann (siblings DOM ultérieurs). */
  z-index: 20;
  /* Scroll INDÉPENDANT de la liste : la sidebar reste fixée à l'écran et
     son contenu interne peut scroller verticalement si elle dépasse la
     hauteur du viewport (utile car la liste annonces à droite peut être
     beaucoup plus longue). */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--sq-border) transparent;
}
.sq-filters::-webkit-scrollbar { width: 6px; }
.sq-filters::-webkit-scrollbar-track { background: transparent; }
.sq-filters::-webkit-scrollbar-thumb {
  background: var(--sq-border);
  border-radius: 3px;
}
.sq-filters::-webkit-scrollbar-thumb:hover { background: var(--sq-orange); }

/* Phase 46 — En desktop, afficher la sidebar filtres entièrement sans scroll interne.
   Mobile garde le scroll (max-height + overflow-y) car écran trop court. */
@media (min-width: 900px) {
  /* Phase 46 — Sidebar filtres entière + suit le scroll en desktop (≥ 1081px,
     au-dessus du breakpoint drawer mobile à 1080px).
     STICKY sur le PARENT #filters-column (pas les asides individuelles) pour
     que tout le bloc filtres reste collé en haut quand on scrolle la liste. */
  #filters-column {
    position: sticky !important;
    top: 100px !important;
    align-self: start !important;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
  }
  .sq-filters {
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    top: auto !important;
  }
}
.sq-filters-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.sq-filters-head h3 { font-size: 1rem; color: var(--sq-navy); font-weight: 800; }
.sq-filters-reset {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--sq-muted); font-size: .78rem; font-weight: 600;
  background: transparent; border: 0;
  padding: 4px 8px; border-radius: 6px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.sq-filters-reset:hover { color: var(--sq-orange-600); background: var(--sq-orange-50); }
.sq-filters-reset::before { content: '↻'; font-size: .9rem; }

/* Filtres date : TOUJOURS en 1 colonne dans la sidebar (260px de large)
   minmax(0, 1fr) au lieu de 1fr → permet au grid de shrink en dessous du
   min-content intrinsèque de l'input native date (sinon overflow). */
.sq-date-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px;
  width: 100%;
}
.sq-date-grid label {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  font-size: .78rem;
  color: var(--sq-muted);
  display: flex; flex-direction: column; gap: 5px;
}
/* Harmonise EXACTEMENT la taille avec les multipicks (Secteurs / Wilayas) */
.sq-date-grid input {
  min-width: 0 !important;
  width: 100%;
  max-width: 100%;
  font-size: .92rem;
  padding: 12px 14px;
  border: 1.5px solid var(--sq-border);
  border-radius: 12px;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--sq-navy);
  font-weight: 600;
  transition: border-color .15s, box-shadow .15s;
}
.sq-date-grid input:focus {
  outline: none;
  border-color: var(--sq-orange);
  box-shadow: 0 0 0 4px rgba(238,124,44,.12);
}
.sq-date-grid input::-webkit-calendar-picker-indicator {
  padding: 0; margin: 0;
  cursor: pointer;
}

/* Section "Type d'annonce" séparée visuellement de la sidebar Filtres */
.sq-filters + .sq-filters { margin-top: 14px; }
.sq-filters.compact { padding: 16px 18px; }
.sq-filters.compact .sq-filters-head h3 { font-size: .95rem; }
.sq-filters.compact .sq-filter-group { margin-bottom: 0; }

/* Badge secteur sur la carte annonce (orange clair) */
.sq-badge.sector {
  background: #e0e7ff;
  color: #3730a3;
}

/* ─── Chips secteurs : pastilles colorées par catégorie + icône ─────────
   Chaque secteur a sa couleur thématique (sq-sc-<color>). Les chips
   s'enroulent élégamment sur plusieurs lignes si besoin. Un compteur
   compact "X secteurs" peut être ajouté à la fin.
*/
.sq-sector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0;
}
.sq-sector-chip-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 4px 12px 4px 10px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
  /* Le libellé long doit pouvoir wrapper et ne JAMAIS déborder de la carte
     parente. Sinon le chip force la grille à s'élargir → bouton "Voir les
     détails" qui dépasse à son tour. */
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  transition: filter .15s;
}
.sq-sector-chip-pill .ico { font-size: 1em; line-height: 1; }
.sq-sector-chip-pill:hover { filter: brightness(.97); }

/* ─── Highlight des secteurs PRÉFÉRENCES utilisateur ───
   Quand une annonce couvre plusieurs secteurs et qu'un (ou plusieurs) de
   ces secteurs sont dans les préférences du compte connecté, ils sont :
     1. Triés en PREMIER dans la liste des chips
     2. Visuellement renforcés (border épaissie + étoile ★ avant le label)
   Cf. announcements.html → renderTile() → sq-sc-mine */
.sq-sector-chip-pill.sq-sc-mine {
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .35);   /* ring ambre subtil */
  border-color: #f59e0b !important;
  position: relative;
}
.sq-sector-chip-pill.sq-sc-mine .ico:first-child {
  color: #f59e0b;
  font-size: .85em;
  margin-right: 2px;
}

/* ─── Palette thématique pastel : fond clair, texte foncé (style badge sector) ─── */
.sq-sc-slate    { background:#e2e8f0; color:#334155; border-color:#cbd5e1; }
.sq-sc-gray     { background:#f3f4f6; color:#374151; border-color:#e5e7eb; }
.sq-sc-zinc     { background:#f4f4f5; color:#3f3f46; border-color:#e4e4e7; }
.sq-sc-stone    { background:#f5f5f4; color:#44403c; border-color:#e7e5e4; }
.sq-sc-red      { background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.sq-sc-orange   { background:#ffedd5; color:#c2410c; border-color:#fed7aa; }
.sq-sc-amber    { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.sq-sc-yellow   { background:#fef9c3; color:#854d0e; border-color:#fde047; }
.sq-sc-lime     { background:#ecfccb; color:#3f6212; border-color:#d9f99d; }
.sq-sc-green    { background:#dcfce7; color:#15803d; border-color:#bbf7d0; }
.sq-sc-emerald  { background:#d1fae5; color:#065f46; border-color:#a7f3d0; }
.sq-sc-teal     { background:#ccfbf1; color:#0f766e; border-color:#99f6e4; }
.sq-sc-cyan     { background:#cffafe; color:#155e75; border-color:#a5f3fc; }
.sq-sc-sky      { background:#e0f2fe; color:#075985; border-color:#bae6fd; }
.sq-sc-blue     { background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe; }
.sq-sc-indigo   { background:#e0e7ff; color:#3730a3; border-color:#c7d2fe; }
.sq-sc-violet   { background:#ede9fe; color:#5b21b6; border-color:#ddd6fe; }
.sq-sc-fuchsia  { background:#fae8ff; color:#86198f; border-color:#f5d0fe; }
.sq-sc-pink     { background:#fce7f3; color:#9d174d; border-color:#fbcfe8; }
.sq-sc-rose     { background:#ffe4e6; color:#9f1239; border-color:#fecdd3; }

/* Chip compteur (X secteurs) : neutre, plus petit */
.sq-sector-chip-pill.sq-sc-count {
  background: transparent;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-weight: 500;
  font-size: .72rem;
  padding: 3px 10px;
}

/* ─── Bouton "+X autres secteurs" (clickable, toggle expand) ───────────── */
.sq-sector-chip-pill.sq-sc-more {
  background: transparent;
  border: 1px dashed var(--sq-orange, #ee7c2c);
  color: var(--sq-orange-600, #c2410c);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: .72rem;
  padding: 3px 12px;
  transition: background .15s, color .15s, border-color .15s;
}
.sq-sector-chip-pill.sq-sc-more:hover {
  background: var(--sq-orange-50, #fff7ed);
  border-style: solid;
}
.sq-sector-chip-pill.sq-sc-more[aria-expanded="true"] {
  background: var(--sq-orange-50, #fff7ed);
  border-style: solid;
}

/* Wrapper des chips cachés : display: contents quand visible
   (les chips deviennent enfants directs du flex parent) */
.sq-sector-chips-hidden { display: contents; }
.sq-sector-chips-hidden[hidden] { display: none; }

/* Variante "carte de la liste" : un peu plus compacte */
.sq-sector-chips-card {
  margin: 8px 0 6px;
  gap: 5px;
}
.sq-sector-chips-card .sq-sector-chip-pill {
  font-size: .73rem;
  padding: 3px 10px 3px 8px;
}

/* Variante "page détail" : layout 75% titre / 25% secteurs (aside à droite)
   On force le grid-template-columns avec !important pour neutraliser
   l'ancienne règle .sq-detail-title-card qui définissait "1fr auto". */
.sq-detail-title-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px;
  align-items: start;
}
@media (min-width: 880px) {
  .sq-detail-title-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) !important;  /* 75% / 25% */
    gap: 24px;
  }
}
.sq-detail-title-main h1 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 800;
  color: var(--sq-navy);
  letter-spacing: -.4px;
  line-height: 1.2;
  margin: 0 0 14px;
}
.sq-detail-title-main .sq-badges {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sq-detail-sectors-aside {
  min-width: 0;
  padding-top: 4px;
}
@media (min-width: 880px) {
  .sq-detail-sectors-aside {
    border-left: 2px solid #f1f5f9;
    padding-left: 18px;
  }
}
.sq-sector-chips-detail {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
/* Chips détail : plus petits (puisque dans 25% de la ligne) */
.sq-sector-chips-detail .sq-sector-chip-pill {
  font-size: .72rem;
  line-height: 1.3;
  padding: 3px 10px 3px 8px;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

/* Mobile : encore plus compact */
@media (max-width: 720px) {
  .sq-sector-chip-pill { font-size: .72rem; padding: 3px 9px 3px 7px; }
  .sq-sector-chips-card { gap: 4px; }
  .sq-sector-chips-detail { flex-direction: row; flex-wrap: wrap; }
}

/* ─── Loader page liste annonces ─────────────────────────────────────── */
.sq-listing-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  padding: 80px 20px;
  color: var(--sq-muted, #6b7280);
  font-size: .92rem;
}
.sq-listing-loader-spinner {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid #e5e7eb;
  border-top-color: var(--sq-orange, #ee7c2c);
  animation: sq-spin .8s linear infinite;
}
@keyframes sq-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   Multi-pick : dropdown avec recherche + checkboxes
═══════════════════════════════════════════════════════════ */
.sq-multipick { position: relative; }
.sq-multipick-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  background: #fff;
  border: 1.5px solid var(--sq-border);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: .92rem;
  color: var(--sq-text);
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
  /* Hauteur stable : ne grandit jamais quand le label change */
  min-height: 44px;
  /* Anti-ghost-click Android : désactive le délai de 300ms et le double-tap-to-zoom
     qui causaient des click fantômes refermant la liste après ouverture. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.sq-multipick-btn .caret { margin-top: 0; }
.sq-multipick-btn:hover { border-color: var(--sq-orange); }
.sq-multipick-btn .label {
  flex: 1;
  min-width: 0;
  color: var(--sq-navy);
  font-weight: 600;
  /* TOUJOURS sur 1 ligne pour garder le bouton à hauteur stable.
     Si on a 2+ items sélectionnés, le JS affiche "N secteurs sélectionnés"
     qui tient sur 1 ligne ; si 1 seul item, ellipsis sur les libellés longs. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.sq-multipick-btn .label.empty { color: var(--sq-muted); font-weight: 500; }
.sq-multipick-btn .caret {
  flex-shrink: 0;
  color: var(--sq-subtle);
  font-size: .8rem;
  transition: transform .15s;
}
.sq-multipick.open .sq-multipick-btn .caret { transform: rotate(180deg); }
.sq-multipick.open .sq-multipick-btn {
  border-color: var(--sq-orange);
  box-shadow: 0 0 0 4px rgba(238,124,44,.12);
}
.sq-multipick-count {
  display: inline-block;
  background: var(--sq-orange);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
  white-space: nowrap;
}
.sq-multipick-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  /* Plus large que la sidebar (260 px) pour les libellés BOMOP longs.
     Sur grand écran : panel à 380 px (chevauche légèrement le listing).
     Sur petit écran : capé à la largeur du viewport moins marges. */
  width: 380px;
  min-width: 100%;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(15,23,42,.22);
  z-index: 999;
  overflow: hidden;
  /* Flex column : search + options scrollable + actions fixes en bas.
     Garantit que les boutons "Tout désélectionner" / "Fermer" restent
     toujours visibles, même quand la liste d'options déborde la max-height. */
  flex-direction: column;
}
.sq-multipick.open .sq-multipick-panel { display: flex; }
/* Le portal vers <body> casse le sélecteur descendant `.sq-multipick.open .panel` :
   on définit donc un fallback générique qui s'applique même hors du multipick. */
.sq-multipick-panel[style*="position: fixed"] { display: flex !important; }
.sq-multipick-panel > .sq-multipick-search { flex: 0 0 auto; }
.sq-multipick-panel > .sq-multipick-options { flex: 1 1 auto; min-height: 0; }
.sq-multipick-panel > .sq-multipick-actions { flex: 0 0 auto; }
.sq-multipick-search {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--sq-border);
  padding: 10px 14px;
  font-size: .88rem;
  outline: none;
}
.sq-multipick-search:focus { background: var(--sq-orange-50); }
.sq-multipick-options {
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
}
.sq-multipick-options label {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: .87rem;
  color: var(--sq-text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;       /* nom de secteur/wilaya sur 1 seule ligne */
  overflow: hidden;
  text-overflow: ellipsis;
}
.sq-multipick-options label > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sq-multipick-options label:hover { background: var(--sq-orange-50); }
.sq-multipick-options input { accent-color: var(--sq-orange); width: 16px; height: 16px; }
.sq-multipick-options .empty {
  padding: 14px;
  text-align: center;
  color: var(--sq-muted);
  font-size: .85rem;
}
.sq-multipick-actions {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--sq-border);
  background: var(--sq-bg);
}
.sq-multipick-actions button {
  background: transparent;
  border: 0;
  color: var(--sq-info);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.sq-multipick-actions button:hover { background: rgba(37,99,235,.08); }
.sq-multipick-actions button.clear { color: var(--sq-danger); }
.sq-multipick-actions button.clear:hover { background: #fee2e2; }

/* Compteur d'annonces à côté des checkboxes annonceurs */
.sq-check-list .count {
  margin-left: auto;
  font-size: .72rem;
  color: var(--sq-muted);
  background: var(--sq-bg);
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
  flex-shrink: 0;
}
.sq-check-list label {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.35;
  overflow: hidden;     /* clipping de sécurité */
}
.sq-check-list label input { flex-shrink: 0; }
/* Le nom de l'annonceur : 1 ligne stricte + ellipsis si trop long */
.sq-check-list label .ann-name {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;       /* indispensable pour que text-overflow fonctionne */
}

/* ─── Recherches enregistrées ─── */
.sq-saved-searches {
  background: var(--sq-orange-50);
  border: 1px solid rgba(238,124,44,.25);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.sq-saved-searches.empty { display: none; }
.sq-saved-searches[data-count="0"] .clear-all { display: none; }
.sq-saved-searches[data-count="1"] .clear-all { display: none; }
.sq-saved-searches h4 {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .76rem; font-weight: 700;
  color: var(--sq-orange-600);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
  gap: 6px;
}
.sq-saved-searches h4 .count {
  background: var(--sq-orange);
  color: #fff;
  font-size: .68rem;
  padding: 1px 7px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}
.sq-saved-searches h4 .clear-all {
  background: transparent;
  border: 0;
  color: var(--sq-danger);
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  padding: 4px 6px;
  border-radius: 4px;
}
.sq-saved-searches h4 .clear-all:hover { background: #fee2e2; }
.sq-saved-list {
  display: flex; flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
}
.sq-saved-item {
  display: flex; align-items: flex-start; gap: 8px;
  background: #fff;
  border: 1px solid rgba(238,124,44,.2);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .82rem;
  cursor: pointer;
  transition: all .15s;
  min-width: 0;
}
.sq-saved-item:hover {
  border-color: var(--sq-orange);
  background: #fff;
  box-shadow: 0 2px 6px rgba(238,124,44,.15);
}
.sq-saved-item .ico {
  color: var(--sq-orange-600);
  flex-shrink: 0;
  font-size: .9rem;
  margin-top: 1px;
}
/* Conteneur du nom + sous-titre meta (flex column, 1 ligne chacun) */
.sq-saved-item .content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
/* Nom du modèle : 1 ligne stricte avec ellipsis (limite 30 car. côté JS) */
.sq-saved-item .name {
  font-weight: 600;
  color: var(--sq-navy);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sq-saved-item .meta {
  font-weight: 500;
  font-size: .7rem;
  color: var(--sq-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sq-saved-item .del {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: var(--sq-danger);
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border-radius: 6px;
  flex-shrink: 0;
  transition: all .15s;
}
.sq-saved-item .del:hover {
  background: var(--sq-danger);
  border-color: var(--sq-danger);
  color: #fff;
  transform: scale(1.08);
}
.sq-saved-item .del:active { transform: scale(.95); }

/* Toast de confirmation */
.sq-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--sq-navy);
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(15,23,42,.35);
  z-index: 10000;
  display: flex; gap: 10px; align-items: center;
  animation: sq-toast-in .25s ease;
  max-width: 360px;
}
.sq-toast.success { background: var(--sq-success); }
.sq-toast.error   { background: var(--sq-danger); }
@keyframes sq-toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Filtre Lu/Non-lu : pastilles */
.sq-radio-list { display: flex; flex-direction: column; gap: 6px; }
.sq-radio-list label {
  display: flex; gap: 8px; align-items: center;
  font-size: .88rem;
  color: var(--sq-text);
  cursor: pointer;
  user-select: none;
}
.sq-radio-list input { accent-color: var(--sq-orange); width: 16px; height: 16px; }
.sq-radio-list .pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  margin-left: 4px;
}
.sq-radio-list .pill.unread  { background: var(--sq-orange);  color: #fff; }
.sq-radio-list .pill.read    { background: var(--sq-bg);      color: var(--sq-muted); }
.sq-radio-list .pill.ongoing { background: var(--sq-success); color: #fff; }
.sq-radio-list .pill.expired { background: var(--sq-danger);  color: #fff; }

/* ─── Composant repliable (utilisé pour Type d'annonce) ─── */
.sq-collapsible-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  background: #fff;
  border: 1.5px solid var(--sq-border);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--sq-navy);
  text-align: left;
  transition: border-color .15s, background .15s;
  min-height: 44px;
}
.sq-collapsible-trigger:hover {
  border-color: var(--sq-orange);
  background: var(--sq-orange-50);
}
.sq-collapsible-trigger[aria-expanded="true"] {
  border-color: var(--sq-orange);
  background: var(--sq-orange-50);
}
.sq-collapsible-arrow {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--sq-orange);
  border-radius: 50%;
  background: rgba(238,124,44,.1);
  transition: transform .25s ease, background .15s;
  font-weight: 700;
  flex-shrink: 0;
}
.sq-collapsible-trigger[aria-expanded="true"] .sq-collapsible-arrow {
  transform: rotate(45deg);
  background: var(--sq-orange);
  color: #fff;
}
.sq-collapsible-content {
  display: none;
  margin-top: 8px;
}
.sq-collapsible-content.open { display: block; }
.sq-collapsible-content .sq-check-list {
  background: var(--sq-bg);
  padding: 10px 12px;
  border-radius: 10px;
}

/* Bouton "voir plus / voir moins" sous une liste de checkboxes */
.sq-show-more-btn {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  background: transparent;
  border: 1px dashed var(--sq-border);
  border-radius: 8px;
  color: var(--sq-info);
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.sq-show-more-btn:hover {
  border-color: var(--sq-orange);
  color: var(--sq-orange-600);
  background: var(--sq-orange-50);
}

/* ─── Filtre Statut : liste simple "nom + case à cocher" ─── */
.sq-status-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sq-status-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--sq-text);
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}
.sq-status-list input {
  accent-color: var(--sq-orange);
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.sq-status-list .cnt {
  margin-left: auto;
  font-size: .72rem;
  color: var(--sq-muted);
  background: var(--sq-bg);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.sq-status-list label:hover { color: var(--sq-orange-600); }

/* ─── Ancien design chips (gardé pour compat éventuelle) ─── */
.sq-status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}
.sq-status-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border: 1.5px solid var(--sq-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: var(--sq-navy);
  transition: all .15s;
  font-family: inherit;
  text-align: left;
  line-height: 1.2;
  min-width: 0;
}
.sq-status-chip .lbl {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sq-status-chip .cnt {
  background: var(--sq-bg);
  color: var(--sq-muted);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.sq-status-chip:hover {
  border-color: var(--sq-orange);
  background: var(--sq-orange-50);
}
/* "Tous" : pleine largeur, centré */
.sq-status-chip.full {
  grid-column: 1 / -1;
  justify-content: center;
}
/* États actifs colorés par sémantique */
.sq-status-chip.active[data-status=""] {
  background: var(--sq-navy);
  border-color: var(--sq-navy);
  color: #fff;
}
.sq-status-chip.active[data-status="unread"] {
  background: var(--sq-orange);
  border-color: var(--sq-orange);
  color: #fff;
}
.sq-status-chip.active[data-status="read"] {
  background: var(--sq-muted);
  border-color: var(--sq-muted);
  color: #fff;
}
.sq-status-chip.active[data-status="ongoing"] {
  background: var(--sq-success);
  border-color: var(--sq-success);
  color: #fff;
}
.sq-status-chip.active[data-status="expired"] {
  background: var(--sq-danger);
  border-color: var(--sq-danger);
  color: #fff;
}
.sq-status-chip.active .cnt {
  background: rgba(255,255,255,.25);
  color: #fff;
}

/* Indicateur "non-lu" sur la carte annonce (petit point orange) */
.sq-ann.unread h3::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sq-orange);
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}
.sq-ann.read { opacity: .82; }
.sq-ann.read h3 { font-weight: 600; color: var(--sq-text); }

/* Toggle vue actif/inactif fonctionnel */
.sq-listing.view-list .sq-ann {
  grid-template-columns: 1fr 160px;
  gap: 12px;
  padding: 12px 14px;
}
.sq-listing.view-list .sq-ann h3 { font-size: .95rem; padding-right: 36px; }
.sq-listing.view-list .sq-ann .sq-ann-meta { font-size: .78rem; }
.sq-listing.view-list .sq-ann .sq-ann-lock { display: none; }
.sq-listing.view-list .sq-ann .sq-ann-cta .label { display: none; }
.sq-listing.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
  gap: 14px;
}
/* Sur écrans assez larges, on revient au minmax(320px, 1fr) pour que les
   cartes ne deviennent pas microscopiques. Sur écrans étroits, c'est
   minmax(0, 1fr) qui prend le dessus (voir media query mobile). */
@media (min-width: 540px) {
  .sq-listing.view-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}
.sq-listing.view-grid .sq-ann {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.sq-listing.view-grid .sq-ann-cta {
  flex-direction: row;
  justify-content: space-between;
}

/* Responsive inscription : 2 colonnes → 1 colonne plus aérée sur tablette */
@media (max-width: 1200px) {
  .sq-reg-card { padding: 30px 28px; }
  .sq-reg-layout { gap: 32px; }
}
@media (max-width: 880px) {
  .sq-reg-card { padding: 24px 18px; }
  .sq-reg-layout { grid-template-columns: 1fr; gap: 36px; }
  /* Sur mobile l'étape 2 preview perd un peu d'importance */
  .sq-reg-pane.muted { background: var(--sq-bg); border-radius: 14px; padding: 22px; }
  .sq-stepper { grid-template-columns: 1fr auto 1fr; gap: 10px; padding-bottom: 18px; margin-bottom: 22px; }
  .sq-step-label { font-size: .82rem; }
  .sq-step-label small { font-size: .7rem; }
  .sq-stepper-divider { width: 24px; }
  .sq-stepper { display: flex; flex-wrap: nowrap; align-items: center; }
  .sq-stepper-divider { flex: 1; }
}
@media (max-width: 480px) {
  .sq-stepper { flex-wrap: wrap; }
  .sq-stepper-divider { display: none; }
  .sq-step { flex: 1 1 100%; }
}
.sq-filter-group {
  margin-bottom: 18px;
  min-width: 0;
  max-width: 100%;
  /* ⚠️ PAS de overflow:hidden ici : ça clipperait les panels déroulants des
     multipicks Secteurs/Wilayas qui pop en absolute en dessous du bouton.
     Le confinement des annonceurs longs est géré au niveau .sq-check-list. */
}
.sq-filter-group h4 {
  font-size: .82rem;
  color: var(--sq-navy);
  font-weight: 700;
  margin-bottom: 8px;
}
.sq-filter-group select.sq-input,
.sq-filter-group input.sq-input {
  padding: 12px 14px;
  font-size: .92rem;
  border-radius: 12px;
  border-width: 1.5px;
  width: 100%;
  box-sizing: border-box;
}
/* Annule l'apparence native du search input (pas de bouton X / icône loupe différents) */
.sq-filter-group input[type="search"].sq-input {
  -webkit-appearance: none;
  appearance: none;
}
.sq-filter-group input[type="search"].sq-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.sq-check-list {
  display: flex; flex-direction: column; gap: 8px;
  /* Empêche les noms d'annonceurs longs de pousser la sidebar */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.sq-check-list label {
  display: flex; gap: 8px; align-items: center;
  font-size: .88rem;
  color: var(--sq-text);
  cursor: pointer;
  user-select: none;
}
.sq-check-list input { accent-color: var(--sq-orange); width: 16px; height: 16px; }
.sq-date-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.sq-date-grid label {
  font-size: .72rem; color: var(--sq-muted);
  display: flex; flex-direction: column; gap: 4px;
}
.sq-date-grid input {
  padding: 8px 10px;
  font-size: .82rem;
  border: 1.5px solid var(--sq-border);
  border-radius: 8px;
  width: 100%;
}
.sq-filters .sq-btn-block {
  margin-bottom: 8px;
  /* Compact dans la sidebar 260px : police plus petite, padding réduit, pas de wrap */
  padding: 10px 10px;
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.1px;
}

/* ─── Listing toolbar ────────────────────────────────────── */
.sq-list-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
}
.sq-list-toolbar .count {
  font-weight: 700;
  color: var(--sq-navy);
  font-size: 1.05rem;
}
.sq-list-toolbar .right {
  display: flex; gap: 12px; align-items: center;
  font-size: .88rem; color: var(--sq-muted);
}
.sq-list-toolbar select {
  padding: 8px 12px;
  font-size: .85rem;
  border: 1.5px solid var(--sq-border);
  border-radius: 10px;
  background: #fff;
}
.sq-view-toggle {
  display: inline-flex;
  border: 1.5px solid var(--sq-border);
  border-radius: 10px;
  overflow: hidden;
}
.sq-view-toggle button {
  width: 36px; height: 36px;
  border: 0; background: #fff;
  color: var(--sq-subtle);
  cursor: pointer;
  font-size: .9rem;
  transition: background .15s;
}
.sq-view-toggle button.active { background: var(--sq-navy); color: #fff; }
.sq-view-toggle button:not(.active):hover { background: var(--sq-bg); color: var(--sq-navy); }

/* ─── Carte annonce ──────────────────────────────────────── */
.sq-listing { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sq-ann {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 14px;
  padding: 18px 20px;
  display: grid;
  /* minmax(0, …) sur les 2 colonnes → autorise le shrink sous min-content
     pour empêcher les contenus longs (chips secteur, refs GROUP_…) de
     forcer la carte à dépasser de la grille auto-fill */
  grid-template-columns: minmax(0, 1fr) minmax(0, 180px);
  gap: 18px;
  align-items: center;
  position: relative;
  transition: border-color .15s, box-shadow .15s;
  min-width: 0;
  overflow: hidden;
}
.sq-ann > * { min-width: 0; max-width: 100%; }
.sq-ann:hover { border-color: var(--sq-orange); box-shadow: 0 4px 12px rgba(15,23,42,.06); }

/* ─── Annonce EXPIRÉE : contour rouge + texte estompé ─── */
.sq-ann.expired {
  border: 2px solid var(--sq-danger);
  background: linear-gradient(to right, #fef2f2 0%, #ffffff 60%);
  opacity: .82;
}
.sq-ann.expired h3 {
  color: var(--sq-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(220, 38, 38, .5);
}
.sq-ann.expired .sq-ann-meta-top { color: var(--sq-muted); }
.sq-ann.expired:hover { border-color: var(--sq-danger); opacity: 1; }

/* ─── Annonce URGENTE (≤ 72h) : contour orange + pulse ─── */
.sq-ann.urgent {
  border: 2px solid var(--sq-orange);
  background: linear-gradient(to right, #fff4ea 0%, #ffffff 55%);
  box-shadow: 0 0 0 1px rgba(238,124,44,.18);
}
.sq-ann.urgent:hover {
  border-color: var(--sq-orange-600);
  box-shadow: 0 8px 24px rgba(238,124,44,.25);
}

/* ─── Badges spéciaux d'état temporel ─── */
.sq-badge.status-expired {
  background: var(--sq-danger);
  color: #fff;
  letter-spacing: .04em;
}
.sq-badge.status-urgent {
  background: var(--sq-orange);
  color: #fff;
  letter-spacing: .04em;
  animation: sq-urgent-pulse 2s ease-in-out infinite;
}
@keyframes sq-urgent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(238,124,44,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(238,124,44,0); }
}

/* Date limite mise en avant si urgent ou expirée */
.sq-ann.urgent  .sq-ann-meta .deadline { color: var(--sq-orange-600); font-weight: 700; }
.sq-ann.expired .sq-ann-meta .deadline { color: var(--sq-danger);    font-weight: 700; }

/* Champ "réservé aux abonnés" (annonceur ou date limite cachée pour non abonnés) */
.sq-locked-info {
  color: var(--sq-muted) !important;
  font-style: italic;
  font-weight: 500;
  background: var(--sq-bg);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sq-locked-info .ico { color: var(--sq-orange-600); }
/* Quand la carte est en mode "urgent" ou "expired", le placeholder garde son style */
.sq-ann.urgent .sq-locked-info,
.sq-ann.expired .sq-locked-info { background: rgba(255,255,255,.7); }
@media (max-width: 640px) { .sq-ann { grid-template-columns: 1fr; } }

/* L'étoile est placée en HAUT À DROITE de la colonne CTA, alignée à droite
   pour ne pas perturber le contenu centré (lock + label + bouton). */
.sq-ann-bookmark {
  /* ★ 2026-07-20 — Repositionnée en absolute top-right de la carte,
     hors de la colonne CTA, pour être visible sans conflit avec les chips secteurs. */
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--sq-border);
  color: var(--sq-subtle);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: grid; place-items: center;
  transition: all .15s;
  flex-shrink: 0;
  padding: 0;
}
.sq-ann-bookmark:hover {
  color: var(--sq-orange);
  border-color: var(--sq-orange);
  background: var(--sq-orange-50);
  transform: scale(1.1);
}
.sq-ann-bookmark.active {
  color: var(--sq-orange);
  border-color: var(--sq-orange);
  background: var(--sq-orange-50);
}
/* Animation "pop" lors de l'ajout aux favoris */
.sq-ann-bookmark.pop { animation: sq-fav-pop .35s ease; }
@keyframes sq-fav-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.55); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1.1); }
}

.sq-badges {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
  align-items: center;
}
.sq-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
/* Types de marché (Travaux/Fournitures…) — encore utilisé en interne */
.sq-badge.type-travaux       { background: #fff4ea; color: #c2410c; }
.sq-badge.type-fournitures   { background: #f3e8ff; color: #6b21a8; }
.sq-badge.type-services      { background: #dbeafe; color: #1e40af; }
.sq-badge.type-etudes        { background: #ccfbf1; color: #115e59; }
.sq-badge.type-prestations   { background: #fce7f3; color: #9d174d; }
.sq-badge.type-fournitures-2 { background: #fef9c3; color: #854d0e; }
.sq-badge.new                { background: #dcfce7; color: #166534; }

/* ─── Badges TYPE D'ANNONCE (BOMOP) ─── */
.sq-badge.ann-ao  { background: #fff4ea; color: #c2410c; }  /* Appels d'offres — orange */
.sq-badge.ann-co  { background: #dbeafe; color: #1e40af; }  /* Consultations — bleu */
.sq-badge.ann-at  { background: #dcfce7; color: #166534; }  /* Attributions — vert */
.sq-badge.ann-pr  { background: #fef3c7; color: #854d0e; }  /* Prorogations — jaune */
.sq-badge.ann-an  { background: #fee2e2; color: #991b1b; }  /* Annulations — rouge clair */
.sq-badge.ann-inf { background: #f3f4f6; color: #374151; }  /* Infructuosités — gris */
.sq-badge.ann-mid { background: #1e2a4a; color: #ffffff; }  /* Mises en demeure — navy */
.sq-badge.ann-cn  { background: #f3e8ff; color: #6b21a8; }  /* Concours — violet */
.sq-badge.ann-res { background: #fecaca; color: #7f1d1d; }  /* Résiliations — rouge foncé */
.sq-badge.ann-ven { background: #fef9c3; color: #854d0e; }  /* Ventes aux enchères — moutarde */

.sq-ann h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sq-navy);
  letter-spacing: -.1px;
  margin-bottom: 8px;
  padding-right: 8px;
  line-height: 1.35;
  /* Max 2 lignes + ellipsis si vraiment trop long (cas extrême) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.sq-ann-meta-top {
  display: flex; gap: 6px; align-items: center;
  font-size: .88rem;
  color: var(--sq-muted);
  margin-bottom: 8px;
}
.sq-ann-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: .82rem;
  color: var(--sq-muted);
}
.sq-ann-meta span { display: inline-flex; align-items: center; gap: 6px; }
.sq-ann-meta .ico { color: var(--sq-subtle); }

.sq-ann-cta {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  align-self: end;   /* ★ 2026-07-20 — Pousse le bouton "Voir détails" en bas à droite */
}
.sq-ann-lock {
  width: 44px; height: 44px;
  background: var(--sq-bg);
  color: var(--sq-subtle);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.1rem;
}
.sq-ann-cta .label {
  font-size: .74rem;
  color: var(--sq-muted);
  font-weight: 600;
}
.sq-ann-cta .sq-btn-sm { width: 100%; padding: 9px 14px; font-size: .85rem; }
/* Si user connecté + abonné : on enlève le cadenas et on agrandit le bouton */
body.sq-user-subscribed .sq-ann-lock,
body.sq-user-subscribed .sq-ann-cta .label { display: none; }

/* ─── Pagination ─────────────────────────────────────────── */
.sq-pagination {
  display: flex; justify-content: center;
  gap: 6px;
  margin: 24px 0 0;
  flex-wrap: wrap;
}
.sq-pagination button {
  min-width: 36px; height: 36px;
  border: 1.5px solid var(--sq-border);
  background: #fff;
  color: var(--sq-navy);
  border-radius: 10px;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  padding: 0 10px;
  transition: all .15s;
}
.sq-pagination button:hover:not(:disabled) { border-color: var(--sq-orange); color: var(--sq-orange-600); }
.sq-pagination button.active {
  background: var(--sq-orange);
  border-color: var(--sq-orange);
  color: #fff;
}
.sq-pagination button:disabled { opacity: .4; cursor: not-allowed; }

/* ─── Sidebar droite : CTA abonnement (non connecté) ─────── */
.sq-aside-right { display: flex; flex-direction: column; gap: 18px; }
.sq-sub-cta {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
}
.sq-sub-cta .lock-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--sq-bg);
  color: var(--sq-navy);
  margin: 0 auto 16px;
  display: grid; place-items: center;
  font-size: 1.4rem;
}
.sq-sub-cta h3 {
  font-size: 1.15rem;
  color: var(--sq-navy);
  font-weight: 800;
  letter-spacing: -.2px;
  margin-bottom: 8px;
  line-height: 1.25;
}
.sq-sub-cta p {
  color: var(--sq-muted);
  font-size: .85rem;
  line-height: 1.5;
  margin-bottom: 16px;
}
.sq-sub-cta ul {
  list-style: none;
  text-align: left;
  margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.sq-sub-cta ul li {
  display: flex; gap: 8px;
  font-size: .88rem;
  color: var(--sq-text);
  align-items: center;
}
.sq-sub-cta ul li::before {
  content: '✓';
  color: var(--sq-success);
  font-weight: 800;
  flex-shrink: 0;
}

/* ─── Sidebar droite : Mots clés populaires ──────────────── */
.sq-keywords-card {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 16px;
  padding: 22px;
}
.sq-keywords-card h3 {
  font-size: .95rem;
  color: var(--sq-navy);
  font-weight: 700;
  margin-bottom: 14px;
}
.sq-keywords-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sq-tag {
  background: var(--sq-bg);
  color: var(--sq-navy);
  border: 1px solid var(--sq-border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: all .15s;
}
.sq-tag:hover { background: var(--sq-orange-50); border-color: var(--sq-orange); color: var(--sq-orange-600); }
.sq-keywords-more {
  display: block;
  margin-top: 14px;
  color: var(--sq-info);
  font-size: .85rem;
  font-weight: 700;
}

/* ─── Sidebar droite : Mon espace (connecté) ─────────────── */
.sq-myspace {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 16px;
  overflow: hidden;
}
.sq-myspace-head {
  background: linear-gradient(135deg, var(--sq-navy) 0%, var(--sq-navy-700) 100%);
  color: #fff;
  padding: 22px 20px;
  display: flex; gap: 12px; align-items: center;
}
.sq-myspace-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sq-orange);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.3);
}
.sq-myspace-who { font-weight: 800; font-size: .98rem; line-height: 1.2; }
.sq-myspace-who small {
  display: block;
  font-weight: 500;
  opacity: .8;
  font-size: .78rem;
  margin-top: 2px;
}
.sq-myspace-section {
  padding: 18px 20px;
  border-bottom: 1px solid var(--sq-border);
}
.sq-myspace-section:last-child { border-bottom: 0; }
.sq-myspace-section h4 {
  font-size: .78rem;
  color: var(--sq-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.sq-sub-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.sq-sub-badge.gratuit { background: var(--sq-bg); color: var(--sq-navy); }
.sq-sub-badge.demo { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.sq-sub-badge.standard { background: var(--sq-orange-50); color: var(--sq-orange-600); }
.sq-sub-badge.premium { background: linear-gradient(90deg, #fde68a, #fbbf24); color: #78350f; }
.sq-myspace-expiry {
  font-size: .85rem;
  color: var(--sq-text);
}
.sq-myspace-expiry strong { color: var(--sq-navy); font-weight: 800; }
.sq-myspace-expiry.warn strong { color: var(--sq-danger); }
.sq-myspace-bar {
  margin-top: 10px;
  height: 6px;
  background: var(--sq-bg);
  border-radius: 999px;
  overflow: hidden;
}
.sq-myspace-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sq-success), var(--sq-orange));
  border-radius: 999px;
}
.sq-myspace-renew { margin-top: 12px; width: 100%; }
.sq-myspace-menu { list-style: none; display: flex; flex-direction: column; }
.sq-myspace-menu li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  font-size: .9rem;
  color: var(--sq-navy);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
}
.sq-myspace-menu li:hover { color: var(--sq-orange-600); }
.sq-myspace-menu li .ico { width: 22px; text-align: center; }
.sq-myspace-menu li.danger { color: var(--sq-danger); }
.sq-myspace-menu li.danger:hover { color: #991b1b; }

/* ─── User menu dropdown (header connecté) ───────────────── */
.sq-user-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.25);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
  transition: border-color .15s, background .15s;
}
.sq-user-btn:hover { border-color: var(--sq-orange); background: rgba(255,255,255,.05); }
.sq-user-btn .av {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sq-orange);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: .82rem;
}
.sq-user-menu {
  position: absolute;
  top: 100%; right: 24px;
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 14px;
  box-shadow: var(--sq-shadow-lg);
  width: 260px;
  padding: 8px;
  z-index: 70;
  display: none;
}
.sq-user-menu.open { display: block; }
.sq-user-menu .head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--sq-border);
  margin-bottom: 8px;
}
.sq-user-menu .head .name { font-weight: 800; color: var(--sq-navy); font-size: .94rem; }
.sq-user-menu .head .email { font-size: .78rem; color: var(--sq-muted); margin-top: 2px; }
.sq-user-menu a, .sq-user-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: .9rem;
  color: var(--sq-navy);
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
}
.sq-user-menu a:hover, .sq-user-menu button:hover { background: var(--sq-orange-50); color: var(--sq-orange-600); }
.sq-user-menu .ico { width: 22px; text-align: center; }
.sq-user-menu .sep { height: 1px; background: var(--sq-border); margin: 6px 0; }
.sq-user-menu button.danger { color: var(--sq-danger); }
.sq-user-menu button.danger:hover { background: #fee2e2; color: #991b1b; }

/* ─── Bandeau bas annonces ───────────────────────────────── */
.sq-page-bottom {
  background: var(--sq-bg);
  border-top: 1px solid var(--sq-border);
  padding: 22px 24px;
}
.sq-page-bottom-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 980px) { .sq-page-bottom-inner { grid-template-columns: 1.4fr 1fr; } }
.sq-page-bottom-text {
  display: flex; gap: 16px; align-items: center;
}
.sq-page-bottom-text .ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--sq-border);
  display: grid; place-items: center;
  font-size: 1.2rem;
  color: var(--sq-orange);
  flex-shrink: 0;
}
.sq-page-bottom-text h4 { font-size: 1rem; color: var(--sq-navy); font-weight: 800; margin-bottom: 4px; }
.sq-page-bottom-text p { font-size: .85rem; color: var(--sq-muted); line-height: 1.5; }
.sq-page-bottom-feat {
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
.sq-page-bottom-feat .item {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 6px;
}
.sq-page-bottom-feat .ico {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--sq-orange-50);
  color: var(--sq-orange-600);
  display: grid; place-items: center;
}
.sq-page-bottom-feat .lbl { font-size: .8rem; font-weight: 600; color: var(--sq-navy); line-height: 1.3; }

/* ═══════════════════════════════════════════════════════════
   ANNOUNCEMENT DETAIL PAGE
═══════════════════════════════════════════════════════════ */

/* Header bell + avatar (variante header blanc home) */
.sq-bell-btn {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--sq-border);
  background: #fff;
  display: inline-grid; place-items: center;
  cursor: pointer;
  font-size: 1.05rem;
  color: var(--sq-navy);
  transition: border-color .15s, background .15s;
}
.sq-bell-btn:hover { border-color: var(--sq-orange); color: var(--sq-orange-600); }
.sq-bell-btn .badge {
  position: absolute;
  top: -3px; right: -3px;
  background: var(--sq-orange);
  color: #fff;
  font-size: .68rem; font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  border: 2px solid #fff;
}
.sq-header-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ee7c2c);
  color: #fff;
  display: inline-grid; place-items: center;
  font-weight: 800;
  font-size: .92rem;
  cursor: pointer;
  text-decoration: none !important;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--sq-border);
  transition: transform .15s, box-shadow .15s;
}
.sq-header-avatar:hover { transform: scale(1.05); box-shadow: 0 0 0 2px var(--sq-orange); }

/* ─── Pastille Bienvenue + nom (état connecté) ─── */
.sq-welcome {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 14px;
  background: linear-gradient(135deg, var(--sq-orange-50) 0%, #fff 60%);
  border: 1.5px solid rgba(238,124,44,.35);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, transform .12s, box-shadow .2s;
  text-decoration: none !important;
  position: relative;
}
.sq-welcome:hover {
  border-color: var(--sq-orange);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(238,124,44,.18);
}
/* ═══════════════════════════════════════════════════════════════════
   VARIANTES DE LA PASTILLE BIENVENUE — par type d'abonnement
   ──────────────────────────────────────────────────────────────────
   Chaque type de compte a sa palette pour que le commercial / l'user
   identifie en un coup d'œil son statut depuis le header.

   Type             | Couleur dominante | Sémantique
   ─────────────────|───────────────────|──────────────────────────────
   (par défaut)     | 🟠 orange         | abonné actif (Basic→Illimité)
   demo             | 🔵 bleu           | en exploration, découverte
   essai_premium    | 🟣 violet         | période d'essai gratuit
   fin_essai_premium| 🔴 rouge saumon   | essai expiré → relance chaude
   fin_abonnement   | ⚫ anthracite      | ex-abonné → relance possible
   ─────────────────────────────────────────────────────────────────── */

/* ── DÉMO : bleu (découverte) ── */
body.sq-user-demo .sq-welcome {
  background: linear-gradient(135deg, #dbeafe 0%, #fff 60%);
  border-color: rgba(29,78,216,.35);
}
body.sq-user-demo .sq-welcome:hover {
  border-color: #1d4ed8;
  box-shadow: 0 6px 16px rgba(29,78,216,.18);
}
body.sq-user-demo .sq-welcome .who small { color: #1d4ed8; }
body.sq-user-demo .sq-welcome .sq-header-avatar {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-color: #93c5fd;
}

/* ── ESSAI PREMIUM : violet (essai gratuit, statut spécial temporaire) ── */
body.sq-user-essai-premium .sq-welcome {
  background: linear-gradient(135deg, #ede9fe 0%, #fff 60%);
  border-color: rgba(124,58,237,.40);
}
body.sq-user-essai-premium .sq-welcome:hover {
  border-color: #7c3aed;
  box-shadow: 0 6px 16px rgba(124,58,237,.22);
}
body.sq-user-essai-premium .sq-welcome .who small { color: #6d28d9; }
body.sq-user-essai-premium .sq-welcome .sq-header-avatar {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  border-color: #c4b5fd;
}

/* ── FIN ESSAI PREMIUM : rouge saumon (relance chaude) ── */
body.sq-user-fin-essai-premium .sq-welcome {
  background: linear-gradient(135deg, #fee2e2 0%, #fff 60%);
  border-color: rgba(220,38,38,.40);
  /* Bordure pointillée discrète : signal "période expirée" */
  border-style: dashed;
}
body.sq-user-fin-essai-premium .sq-welcome:hover {
  border-color: #dc2626;
  box-shadow: 0 6px 16px rgba(220,38,38,.18);
}
body.sq-user-fin-essai-premium .sq-welcome .who small {
  color: #b91c1c;
  /* Petit indicateur visuel "ex-essai" */
}
body.sq-user-fin-essai-premium .sq-welcome .sq-header-avatar {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  border-color: #fca5a5;
}

/* ── FIN ABONNEMENT : gris anthracite (ancien client) ── */
body.sq-user-fin-abonnement .sq-welcome {
  background: linear-gradient(135deg, #e5e7eb 0%, #fff 60%);
  border-color: rgba(55,65,81,.40);
  border-style: dashed;
}
body.sq-user-fin-abonnement .sq-welcome:hover {
  border-color: #374151;
  box-shadow: 0 6px 16px rgba(55,65,81,.18);
}
body.sq-user-fin-abonnement .sq-welcome .who small { color: #374151; }
body.sq-user-fin-abonnement .sq-welcome .sq-header-avatar {
  background: linear-gradient(135deg, #6b7280, #374151);
  color: #fff;
  border-color: #d1d5db;
}
.sq-welcome .wave {
  font-size: 1.05rem;
  display: inline-block;
  transform-origin: 70% 70%;
  animation: sq-wave 2.5s ease-in-out infinite;
}
@keyframes sq-wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(-12deg); }
  20%, 40% { transform: rotate(12deg); }
}
.sq-welcome .who {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  margin-right: 4px;
  min-width: 0;
  max-width: 220px;
}
.sq-welcome .who small {
  font-size: .66rem;
  font-weight: 600;
  color: var(--sq-orange-600);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.sq-welcome .who strong {
  font-size: .88rem;
  font-weight: 800;
  color: var(--sq-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sq-welcome .sq-header-avatar {
  width: 36px; height: 36px;
  font-size: .82rem;
  border-width: 2px;
  box-shadow: none;
}
@media (max-width: 760px) {
  /* Sur mobile (barre principale) : on garde juste l'avatar, on masque le texte
     pour économiser de la place. MAIS dans le drawer (nav détachée), on a tout
     l'espace dispo → on remet le texte visible. */
  .sq-welcome .who { display: none; }
  .sq-welcome .wave { display: none; }
  .sq-welcome { padding: 4px; border: 0; background: transparent; }

  /* Dans le drawer mobile : affichage complet du welcome (avatar + nom) */
  .sq-nav.sq-nav-detached .sq-welcome {
    padding: 10px 14px !important;
    border: 1.5px solid var(--sq-orange, #ee7c2c) !important;
    background: linear-gradient(135deg, #fff7ed 0%, #fff 60%) !important;
    border-radius: 12px !important;
    gap: 10px;
  }
  body.sq-user-demo .sq-nav.sq-nav-detached .sq-welcome {
    border-color: rgba(29,78,216,.35) !important;
    background: linear-gradient(135deg, #dbeafe 0%, #fff 60%) !important;
  }
  /* Drawer mobile — variantes par type (cf. version desktop ci-dessus) */
  body.sq-user-essai-premium .sq-nav.sq-nav-detached .sq-welcome {
    border-color: rgba(124,58,237,.40) !important;
    background: linear-gradient(135deg, #ede9fe 0%, #fff 60%) !important;
  }
  body.sq-user-fin-essai-premium .sq-nav.sq-nav-detached .sq-welcome {
    border-color: rgba(220,38,38,.40) !important;
    background: linear-gradient(135deg, #fee2e2 0%, #fff 60%) !important;
    border-style: dashed !important;
  }
  body.sq-user-fin-abonnement .sq-nav.sq-nav-detached .sq-welcome {
    border-color: rgba(55,65,81,.40) !important;
    background: linear-gradient(135deg, #e5e7eb 0%, #fff 60%) !important;
    border-style: dashed !important;
  }
  .sq-nav.sq-nav-detached .sq-welcome .who,
  .sq-nav.sq-nav-detached .sq-welcome .wave {
    display: inline-flex !important;
  }
  .sq-nav.sq-nav-detached .sq-welcome .who {
    flex-direction: column;
    line-height: 1.2;
  }
}

/* Breadcrumb */
.sq-breadcrumb {
  max-width: 1280px; margin: 0 auto;
  padding: 14px 24px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--sq-muted);
  flex-wrap: wrap; gap: 8px;
}
.sq-breadcrumb-trail a { color: var(--sq-muted); text-decoration: none !important; }
.sq-breadcrumb-trail a:hover { color: var(--sq-orange); }
.sq-breadcrumb-trail .sep { margin: 0 8px; color: var(--sq-subtle); }
.sq-breadcrumb-trail .current { color: var(--sq-navy); font-weight: 700; }
.sq-breadcrumb-back {
  color: var(--sq-info); font-weight: 700;
  text-decoration: none !important;
  font-size: .88rem;
}
.sq-breadcrumb-back:hover { color: var(--sq-orange); }

/* Shell */
.sq-detail-shell { max-width: 1280px; margin: 0 auto; padding: 22px 24px 40px; }

/* En-tête : badges + titre + annonceur */
.sq-detail-head { margin-bottom: 22px; }
.sq-detail-head .sq-badges { margin-bottom: 14px; }
.sq-detail-head h1 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800; color: var(--sq-navy);
  letter-spacing: -.5px;
  margin-bottom: 18px;
  line-height: 1.2;
}
.sq-detail-head { padding: 18px 0; }
@media (min-width: 1080px) {
  .sq-detail-head h1 { max-width: 90%; }
}

/* Bloc "Accès restreint" pour visiteurs/démo */
.sq-restricted-notice {
  background: var(--sq-orange-50);
  border: 1px solid rgba(238,124,44,.3);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex; gap: 14px;
  align-items: flex-start;
}
.sq-restricted-notice .ico {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--sq-orange-600);
  display: grid; place-items: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  border: 1.5px solid rgba(238,124,44,.3);
}
.sq-restricted-notice h3 {
  font-size: 1rem; font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 6px;
}
.sq-restricted-notice p {
  font-size: .9rem; color: var(--sq-text);
  line-height: 1.5;
}
.sq-restricted-notice a {
  color: var(--sq-orange-600); font-weight: 700;
}
.sq-detail-annonceur {
  display: inline-flex; gap: 8px; align-items: center;
  background: var(--sq-orange-50);
  color: var(--sq-orange-600);
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 600; font-size: .92rem;
}

/* Info bar (5 cellules) */
.sq-info-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--sq-bg);
  border: 1px solid var(--sq-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 22px;
}
@media (min-width: 720px)  { .sq-info-bar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .sq-info-bar { grid-template-columns: repeat(5, 1fr); } }
.sq-info-cell {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border-right: 1px solid var(--sq-border);
}
.sq-info-cell:last-child { border-right: 0; }
@media (max-width: 1079px) {
  .sq-info-cell { border-right: 0; border-bottom: 1px solid var(--sq-border); }
  .sq-info-cell:last-child { border-bottom: 0; }
}
.sq-info-cell .lbl {
  display: flex; gap: 6px; align-items: center;
  font-size: .8rem; color: var(--sq-muted);
  font-weight: 500;
}
.sq-info-cell .val {
  font-weight: 700; font-size: .94rem; color: var(--sq-navy);
}
.sq-info-cell.locked .val {
  color: var(--sq-muted); font-weight: 600;
  display: flex; gap: 6px; align-items: center;
}

/* Tabs */
.sq-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--sq-border);
  margin: 4px 0 22px;
  overflow-x: auto;
}
.sq-tab {
  padding: 12px 22px;
  font-weight: 700; font-size: .92rem;
  color: var(--sq-muted);
  background: transparent; border: 0;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color .15s;
}
.sq-tab.active { color: var(--sq-orange); border-bottom-color: var(--sq-orange); }
.sq-tab:hover:not(.active) { color: var(--sq-navy); }

/* Grille détail : 2 colonnes */
.sq-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
@media (min-width: 1080px) { .sq-detail-grid { grid-template-columns: 1fr 360px; } }

/* Cards de section */
.sq-section-card {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 18px;
}
.sq-section-card h2 {
  font-size: 1.1rem; font-weight: 800;
  color: var(--sq-navy); letter-spacing: -.2px;
  margin-bottom: 14px;
}
.sq-section-card p { color: var(--sq-text); font-size: .92rem; line-height: 1.6; }

/* Bullets avec checks oranges */
.sq-check-bullets {
  margin-top: 14px;
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.sq-check-bullets li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .92rem; color: var(--sq-text);
}
.sq-check-bullets li::before {
  content: '✓';
  background: var(--sq-orange);
  color: #fff;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: .74rem; font-weight: 800;
  flex-shrink: 0;
}

/* Table info (label / value) */
.sq-info-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.sq-info-table .row {
  display: grid;
  grid-template-columns: 220px 1fr;
  padding: 12px 0;
  border-bottom: 1px solid var(--sq-border);
  gap: 14px;
}
.sq-info-table .row:last-child { border-bottom: 0; }
.sq-info-table .lbl {
  display: flex; gap: 8px; align-items: center;
  color: var(--sq-muted); font-size: .88rem;
}
.sq-info-table .lbl .ico { color: var(--sq-subtle); font-size: 1rem; }
.sq-info-table .val { font-weight: 600; color: var(--sq-navy); font-size: .92rem; }
@media (max-width: 640px) {
  .sq-info-table .row { grid-template-columns: 1fr; gap: 2px; }
}

/* Doc preview (PDF/image officielle) */
.sq-doc-preview {
  background: #f3f4f6;
  border: 1px solid var(--sq-border);
  border-radius: 12px;
  padding: 28px 32px 56px;
  position: relative;
  font-family: 'Times New Roman', Georgia, serif;
  color: #0f172a;
  line-height: 1.5;
  min-height: 420px;
}
/* ─── Image officielle annonce avec logo SafaqatDZ en arrière-plan ─── */
/* Le logo apparaît comme filigrane derrière l'image (visible si bordures
   blanches ou image avec transparence). Pour les annonces AM, l'image
   source contient un watermark "algeriemarches" gravé que l'on ne peut
   pas retirer côté front — on peut juste superposer le logo SafaqatDZ. */
.sq-doc-preview-img {
  background-image: url('/assets/safaqatdz-logo.png?v=20260517');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  background-color: #ffffff;
}
/* Logo SafaqatDZ en bas à droite, semi-transparent (par-dessus l'image
   officielle). Permet de marquer la consultation comme provenant de
   SafaqatDZ même si le watermark AM est gravé dans l'image. */
.sq-doc-preview-img::after {
  content: '';
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 110px;
  height: 36px;
  background-image: url('/assets/safaqatdz-logo.png?v=20260517');
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  opacity: 0.45;
  pointer-events: none;
  z-index: 2;
}
.sq-doc-preview h4, .sq-doc-preview h3, .sq-doc-preview h5 {
  text-align: center;
  text-transform: uppercase;
  font-family: inherit;
}
.sq-doc-preview h4 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; letter-spacing: .04em; }
.sq-doc-preview h5 { font-size: .9rem; font-weight: 700; margin-bottom: 14px; }
.sq-doc-preview .wilaya-head { font-size: .92rem; font-weight: 700; margin-bottom: 4px; }
.sq-doc-preview h3 { font-size: 1.15rem; font-weight: 800; margin: 18px 0 6px; }
.sq-doc-preview .ref-line { text-align: center; font-weight: 700; margin-bottom: 18px; }
.sq-doc-preview .title-bold { font-weight: 800; text-align: center; margin: 12px 0; font-size: 1rem; }
.sq-doc-preview ul.doc-list { list-style: disc; padding-left: 22px; margin: 10px 0; }
.sq-doc-preview ul.doc-list li { margin-bottom: 8px; font-size: .9rem; }
/* Effet "flou" pour les zones réservées aux abonnés */
.sq-doc-preview .blur { filter: blur(4px); user-select: none; }
.sq-doc-zoom {
  position: absolute;
  bottom: 14px; right: 14px;
  display: flex; gap: 0;
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 8px;
  overflow: hidden;
}
.sq-doc-zoom button {
  width: 34px; height: 30px;
  background: transparent; border: 0;
  cursor: pointer;
  color: var(--sq-navy);
  font-weight: 700;
  font-size: 1rem;
}
.sq-doc-zoom button:hover { background: var(--sq-bg); }
.sq-doc-zoom .lvl { padding: 0 10px; align-self: center; font-size: .82rem; color: var(--sq-muted); border-left: 1px solid var(--sq-border); border-right: 1px solid var(--sq-border); display: grid; place-items: center; min-width: 50px; }
.sq-doc-download {
  position: absolute;
  bottom: 14px;
  right: 160px;
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: .85rem;
  color: var(--sq-navy);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sq-doc-download:hover { background: var(--sq-bg); color: var(--sq-orange-600); border-color: var(--sq-orange); }

/* Sidebar : carte navy "Contenu réservé" */
.sq-locked-card {
  background: var(--sq-navy);
  color: #fff;
  border-radius: 14px;
  padding: 30px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}
.sq-locked-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 20%, rgba(238,124,44,.22), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.06), transparent 50%);
  pointer-events: none;
}
.sq-locked-card > * { position: relative; z-index: 1; }
.sq-locked-card .lock-circle {
  width: 70px; height: 70px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.5rem;
  margin: 0 auto 18px;
}
.sq-locked-card h3 {
  font-size: 1.15rem; font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -.2px;
}
.sq-locked-card > p {
  font-size: .86rem; opacity: .85;
  line-height: 1.5; margin-bottom: 18px;
}
.sq-locked-card ul {
  list-style: none; text-align: left;
  margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: .88rem;
}
.sq-locked-card ul li {
  display: flex; gap: 10px; align-items: center;
  opacity: .95;
}
.sq-locked-card ul li::before {
  content: '✓';
  color: var(--sq-orange);
  font-weight: 800;
  flex-shrink: 0;
}
.sq-locked-card .sq-btn-block { width: 100%; }
.sq-locked-card .other-account {
  text-align: center;
  font-size: .85rem; opacity: .85;
  margin: 16px 0 10px;
}
.sq-locked-card .sub-cta-ghost {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff !important;
}
.sq-locked-card .sub-cta-ghost:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Sidebar : Informations complémentaires */
.sq-info-extra {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 14px;
}
.sq-info-extra h3 {
  font-size: 1rem; font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 14px;
}
.sq-info-extra dl {
  display: flex; flex-direction: column;
  font-size: .85rem;
  margin: 0;
}
.sq-info-extra dl > div {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--sq-border);
  gap: 14px;
}
.sq-info-extra dl > div:last-child { border-bottom: 0; }
.sq-info-extra dt { color: var(--sq-muted); flex-shrink: 0; }
.sq-info-extra dd {
  color: var(--sq-navy); font-weight: 600;
  text-align: right; word-break: break-word;
  margin: 0;
}

/* Sidebar : Partage */
.sq-share-card {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 14px;
}
.sq-share-card h3 {
  font-size: 1rem; font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 12px;
}
.sq-share-icons {
  display: flex; gap: 10px;
}
.sq-share-icons a {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff !important;
  font-size: 1rem;
  text-decoration: none !important;
  transition: transform .15s;
  font-weight: 800;
}
.sq-share-icons a:hover { transform: translateY(-2px); }
.sq-share-icons .fb { background: #1877f2; }
.sq-share-icons .li { background: #0a66c2; }
.sq-share-icons .tw { background: #1da1f2; }
.sq-share-icons .em { background: var(--sq-orange); }
.sq-share-icons .wa { background: #25d366; }

/* Bouton "Ajouter aux favoris" */
.sq-fav-btn {
  background: #fff;
  border: 1.5px solid var(--sq-border);
  border-radius: 14px;
  width: 100%;
  padding: 14px 20px;
  display: flex; gap: 12px; align-items: center; justify-content: center;
  font-weight: 700;
  color: var(--sq-navy);
  cursor: pointer;
  font-size: .92rem;
  transition: border-color .15s, color .15s, background .15s, transform .12s;
}
.sq-fav-btn .star { font-size: 1.3rem; line-height: 1; transition: color .15s; }
.sq-fav-btn:hover {
  border-color: var(--sq-orange);
  color: var(--sq-orange-600);
  background: var(--sq-orange-50);
  transform: translateY(-1px);
}
.sq-fav-btn.active {
  color: var(--sq-orange-600);
  border-color: var(--sq-orange);
  background: var(--sq-orange-50);
}
.sq-fav-btn.active .star { color: var(--sq-orange); }

/* Annonces similaires */
.sq-similar-shell { max-width: 1280px; margin: 0 auto; padding: 28px 24px 40px; }
.sq-similar-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
}
.sq-similar-head h2 {
  font-size: 1.4rem; font-weight: 800;
  color: var(--sq-navy);
  letter-spacing: -.3px;
}
.sq-similar-nav { display: flex; gap: 8px; }
.sq-similar-nav button {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--sq-border);
  background: #fff;
  cursor: pointer;
  color: var(--sq-navy);
  font-size: 1rem;
  transition: all .15s;
}
.sq-similar-nav button:hover:not(:disabled) { border-color: var(--sq-orange); color: var(--sq-orange-600); }
.sq-similar-nav button:disabled { opacity: .35; cursor: not-allowed; }
.sq-similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.sq-similar-card {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex; flex-direction: column;
  gap: 6px;
  text-decoration: none !important;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.sq-similar-card:hover {
  border-color: var(--sq-orange);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
.sq-similar-card h4 {
  font-size: .95rem; font-weight: 700;
  color: var(--sq-navy); line-height: 1.35;
  min-height: 2.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sq-similar-card .annonceur { font-size: .82rem; color: var(--sq-muted); }
.sq-similar-card .locked {
  display: flex; gap: 6px; align-items: center;
  margin-top: 6px;
  font-size: .82rem; color: var(--sq-muted);
}
.sq-similar-card .foot {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-size: .78rem; color: var(--sq-muted);
}

/* Footer enrichi (newsletter colonne 4) */
.sq-footer-inner.cols-5 { grid-template-columns: 1fr; }
@media (min-width: 800px) {
  .sq-footer-inner.cols-5 { grid-template-columns: 1.5fr 1fr 1fr 1.4fr 1.4fr; }
}
.sq-footer-newsletter {
  display: flex; gap: 8px; margin-top: 10px;
}
.sq-footer-newsletter input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .88rem;
  outline: 0;
}
.sq-footer-newsletter input::placeholder { color: rgba(255,255,255,.5); }
.sq-footer-newsletter input:focus { border-color: var(--sq-orange); }
.sq-footer-newsletter button {
  background: var(--sq-orange);
  color: #fff;
  border: 0;
  width: 44px; height: 44px;
  border-radius: 10px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .15s;
}
.sq-footer-newsletter button:hover { background: var(--sq-orange-600); }
.sq-footer-news-note { font-size: .78rem; opacity: .65; margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════
   ACCOUNT PAGES — profil, préférences, favoris, abonnement
═══════════════════════════════════════════════════════════ */

.sq-account-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px 24px 60px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 980px) { .sq-account-shell { grid-template-columns: 260px 1fr; } }

/* Sidebar nav compte */
.sq-account-nav {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 16px;
  padding: 14px;
  align-self: start;
  position: sticky; top: 110px;
}
.sq-account-nav .user-head {
  display: flex; gap: 12px; align-items: center;
  padding: 14px;
  background: var(--sq-bg);
  border-radius: 12px;
  margin-bottom: 10px;
}
.sq-account-nav .av {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--sq-orange);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  flex-shrink: 0;
}
.sq-account-nav .who { font-weight: 800; font-size: .9rem; color: var(--sq-navy); }
.sq-account-nav .who small { display: block; font-weight: 500; font-size: .75rem; color: var(--sq-muted); margin-top: 2px; word-break: break-all; }
.sq-account-nav ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sq-account-nav ul a {
  display: flex; gap: 10px; align-items: center;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: .9rem; font-weight: 600;
  color: var(--sq-navy);
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sq-account-nav ul a:hover { background: var(--sq-orange-50); color: var(--sq-orange-600); }
.sq-account-nav ul a.active {
  background: var(--sq-orange-50);
  color: var(--sq-orange-600);
}
.sq-account-nav ul a .ico { width: 22px; text-align: center; font-size: 1rem; }
.sq-account-nav ul li.sep { height: 1px; background: var(--sq-border); margin: 6px 8px; }
.sq-account-nav ul .danger a { color: var(--sq-danger); }
.sq-account-nav ul .danger a:hover { background: #fee2e2; color: #991b1b; }

/* Contenu principal */
.sq-account-main h1 {
  font-size: 1.5rem; font-weight: 800;
  color: var(--sq-navy);
  letter-spacing: -.3px;
  margin-bottom: 4px;
}
.sq-account-main .sub {
  color: var(--sq-muted);
  font-size: .92rem;
  margin-bottom: 22px;
}
.sq-account-card {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 14px;
  padding: 26px 28px;
  margin-bottom: 18px;
}
.sq-account-card h2 {
  font-size: 1.05rem; font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 14px;
}
.sq-account-card .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) { .sq-account-card .form-row { grid-template-columns: 1fr; } }
.sq-account-card .actions {
  display: flex; gap: 10px;
  margin-top: 16px;
}

/* Préférences : grille secteurs/wilayas/types */
.sq-pref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
}
.sq-pref-chip {
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1.5px solid var(--sq-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .88rem;
  color: var(--sq-text);
  cursor: pointer;
  user-select: none;
  transition: all .15s;
}
.sq-pref-chip:hover { border-color: var(--sq-orange); background: var(--sq-orange-50); }
.sq-pref-chip input { accent-color: var(--sq-orange); width: 16px; height: 16px; }
.sq-pref-chip.checked { border-color: var(--sq-orange); background: var(--sq-orange-50); color: var(--sq-orange-600); font-weight: 600; }
.sq-pref-meta {
  display: flex; justify-content: space-between;
  margin: 10px 0 12px;
  font-size: .82rem; color: var(--sq-muted);
}
.sq-pref-meta strong { color: var(--sq-navy); font-weight: 800; }

/* Favoris : grille */
.sq-fav-empty {
  text-align: center; padding: 60px 24px;
  background: #fff;
  border: 1px dashed var(--sq-border);
  border-radius: 14px;
  color: var(--sq-muted);
}
.sq-fav-empty .ico { font-size: 2.5rem; margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════
   ABONNEMENT — 4 packs (Démo + 3 payants) + payment methods
═══════════════════════════════════════════════════════════ */

.sq-plans-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 32px;
}
@media (min-width: 700px) { .sq-plans-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sq-plans-4 { grid-template-columns: repeat(4, 1fr); } }
.sq-plan-card {
  background: #fff;
  border: 1.5px solid var(--sq-border);
  border-radius: 16px;
  padding: 26px 22px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .15s, box-shadow .2s;
}
.sq-plan-card:hover { transform: translateY(-3px); box-shadow: var(--sq-shadow); }
.sq-plan-card.featured {
  border-color: var(--sq-orange);
  box-shadow: 0 16px 32px rgba(238,124,44,.2);
}
.sq-plan-card .badge-pop {
  position: absolute; top: -10px; right: 16px;
  background: var(--sq-orange);
  color: #fff;
  padding: 5px 14px;
  font-size: .72rem; font-weight: 800;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sq-plan-card .icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.4rem;
  margin-bottom: 14px;
}
.sq-plan-card.demo .icon { background: var(--sq-bg); color: var(--sq-navy); }
.sq-plan-card.essentiel .icon { background: #ccfbf1; color: #115e59; }
.sq-plan-card.pro .icon { background: var(--sq-orange-50); color: var(--sq-orange-600); }
.sq-plan-card.illimite .icon { background: linear-gradient(135deg,#fde68a,#fbbf24); color: #78350f; }
.sq-plan-card h3 {
  font-size: 1.15rem; font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 6px;
}
.sq-plan-card .tagline {
  font-size: .82rem;
  color: var(--sq-muted);
  margin-bottom: 16px;
  min-height: 38px;
}
.sq-plan-card .price {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 18px;
}
.sq-plan-card .price .num {
  font-size: 1.9rem; font-weight: 800;
  color: var(--sq-navy);
  line-height: 1;
}
.sq-plan-card .price .unit {
  font-size: .8rem; color: var(--sq-muted);
}
.sq-plan-card ul {
  list-style: none;
  margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.sq-plan-card ul li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .85rem; color: var(--sq-text);
  line-height: 1.4;
}
.sq-plan-card ul li::before {
  content: '✓';
  color: var(--sq-success);
  font-weight: 800;
  flex-shrink: 0;
}
.sq-plan-card ul li.no::before { content: '✕'; color: var(--sq-subtle); }
.sq-plan-card ul li.no { color: var(--sq-subtle); }
.sq-plan-card .sq-btn { margin-top: auto; }
.sq-plan-card .sq-btn-cta { width: 100%; }

/* Payment methods */
.sq-payments {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 16px;
  padding: 28px;
}
.sq-payments h2 {
  font-size: 1.2rem; font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 6px;
}
.sq-payments .sub {
  color: var(--sq-muted); font-size: .92rem;
  margin-bottom: 22px;
}
.sq-payment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.sq-payment-card {
  background: var(--sq-bg);
  border: 1px solid var(--sq-border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex; gap: 14px; align-items: flex-start;
}
.sq-payment-card .ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: #fff;
  display: grid; place-items: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.sq-payment-card h4 {
  font-size: .98rem; font-weight: 700;
  color: var(--sq-navy);
  margin-bottom: 4px;
}
.sq-payment-card p {
  font-size: .82rem; color: var(--sq-muted);
  line-height: 1.5;
}
.sq-payment-card .ref {
  display: block;
  margin-top: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--sq-orange-600);
}

/* ═══════════════════ Toolbar Imprimer / Télécharger PDF (page détail) ═══════════════════ */
.sq-doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.sq-doc-head h2 { margin: 0; }
.sq-doc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sq-doc-actions .sq-btn { white-space: nowrap; }

/* État pendant export PDF : on cache les contrôles UI pour ne pas les capturer */
body.pdf-export .no-print,
body.pdf-export .sq-subheader,
body.pdf-export .sq-header,
body.pdf-export .sq-similar-shell,
body.pdf-export .sq-footer,
body.pdf-export aside,
body.pdf-export #v2bee-banner,
body.pdf-export .sq-restricted-notice { display: none !important; }
body.pdf-export {
  background: #fff !important;
  padding-top: 0 !important;
  margin: 0 !important;
}
body.pdf-export main,
body.pdf-export .sq-detail-shell {
  max-width: 760px !important;
  width: 760px !important;
  margin: 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}
body.pdf-export .sq-detail-grid {
  display: block !important;
  grid-template-columns: none !important;
}
body.pdf-export .sq-detail-grid > * { width: 100% !important; }
body.pdf-export .sq-doc-preview {
  transform: none !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}
body.pdf-export .sq-info-bar {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
body.pdf-export .sq-section-card,
body.pdf-export .sq-detail-title-card {
  page-break-inside: avoid;
  break-inside: avoid;
  box-shadow: none !important;
}

/* ═══════════════════ Print stylesheet ═══════════════════ */
@media print {
  /* Cache toute la chrome de l'app */
  .sq-subheader,
  .sq-header,
  .sq-footer,
  .sq-similar-shell,
  aside,
  #v2bee-banner,
  .sq-restricted-notice,
  .sq-fav-btn,
  .sq-share-card,
  .sq-locked-card,
  .sq-myspace,
  .no-print { display: none !important; }

  body {
    padding-top: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }
  main, .sq-detail-shell {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .sq-detail-grid {
    display: block !important;
    grid-template-columns: none !important;
  }
  .sq-section-card,
  .sq-detail-title-card,
  .sq-info-bar {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
  }
  .sq-info-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .sq-doc-preview {
    transform: none !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }
  .sq-doc-preview .blur { filter: none !important; }
  a { color: #000 !important; text-decoration: none !important; }
  h1, h2, h3 { color: #000 !important; }

  @page { size: A4; margin: 14mm; }
}

/* ═══════════════════ Dialogues stylisés (sqAlert / sqConfirm / sqDialog) ═══════════════════ */
.sq-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .16s ease-out;
  pointer-events: none;
}
.sq-dialog-overlay.open { opacity: 1; pointer-events: auto; }
.sq-dialog {
  position: relative;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  width: 100%;
  max-width: 460px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: sq-dialog-pop .22s ease-out;
}
@keyframes sq-dialog-pop {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.sq-dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 1.2rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  z-index: 2;
  transition: background .15s, color .15s, border-color .15s;
}
.sq-dialog-close:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.sq-dialog-head {
  padding: 24px 26px 6px;
  text-align: center;
}
.sq-dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 1.7rem;
  margin: 0 auto 10px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  color: var(--sq-orange-600, #c2410c);
  box-shadow: 0 6px 16px rgba(238, 124, 44, .12);
}
.sq-dialog-kind-info     .sq-dialog-icon { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; box-shadow: 0 6px 16px rgba(29, 78, 216, .12); }
.sq-dialog-kind-success  .sq-dialog-icon { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #166534; box-shadow: 0 6px 16px rgba(22, 101, 52, .12); }
.sq-dialog-kind-warning  .sq-dialog-icon { background: linear-gradient(135deg, #fff7ed, #fed7aa); color: #c2410c; box-shadow: 0 6px 16px rgba(238, 124, 44, .14); }
.sq-dialog-kind-danger   .sq-dialog-icon { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #b91c1c; box-shadow: 0 6px 16px rgba(185, 28, 28, .12); }
.sq-dialog-kind-question .sq-dialog-icon { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); color: #6b21a8; box-shadow: 0 6px 16px rgba(107, 33, 168, .12); }
.sq-dialog-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
}
.sq-dialog-body {
  padding: 6px 26px 18px;
  text-align: center;
}
.sq-dialog-msg {
  margin: 0;
  color: #475569;
  font-size: .95rem;
  line-height: 1.55;
}
.sq-dialog-body a { color: var(--sq-orange-600, #c2410c); font-weight: 600; }
.sq-dialog-foot {
  padding: 14px 22px 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.sq-dialog-foot .sq-btn {
  min-width: 110px;
  padding: 10px 20px;
  font-size: .92rem;
}
.sq-dialog-foot .sq-btn-danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  border: 1px solid transparent;
}
.sq-dialog-foot .sq-btn-danger:hover { filter: brightness(1.05); }

@media (max-width: 480px) {
  .sq-dialog-overlay { padding: 12px; }
  .sq-dialog { border-radius: 14px; }
  .sq-dialog-head { padding: 20px 18px 4px; }
  .sq-dialog-body { padding: 4px 18px 14px; }
  .sq-dialog-foot {
    padding: 12px 16px 16px;
    flex-direction: column-reverse;
  }
  .sq-dialog-foot .sq-btn { width: 100%; min-width: 0; }
}

/* ═══════════════════ Modal générique (popup finalisation inscription) ═══════════════════ */
.sq-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.sq-modal-overlay.open { display: flex; }
.sq-modal {
  position: relative;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: sq-modal-pop .22s ease-out;
}
.sq-modal-lg { max-width: 880px; }
@keyframes sq-modal-pop {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sq-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 1.4rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  z-index: 2;
  transition: background .15s, color .15s, border-color .15s;
}
.sq-modal-close:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.sq-modal-head {
  padding: 28px 32px 18px;
  text-align: center;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
  border-bottom: 1px solid #e5e7eb;
}
.sq-modal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  font-size: 1.8rem;
  margin-bottom: 10px;
  box-shadow: 0 6px 16px rgba(29, 78, 216, .15);
}
.sq-modal-head h3 {
  margin: 0 0 6px;
  font-size: 1.4rem;
  color: #0f172a;
}
.sq-modal-sub {
  margin: 0;
  color: #475569;
  font-size: .94rem;
  line-height: 1.5;
}
.sq-modal-sub strong {
  color: #1d4ed8;
  background: #dbeafe;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
}
.sq-modal-body {
  padding: 22px 32px 8px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.sq-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.sq-modal-grid .sq-field-full { grid-column: 1 / -1; }
.sq-modal-sectors-head {
  margin: 22px 0 10px;
  padding-top: 18px;
  border-top: 1px dashed #e5e7eb;
}
.sq-modal-sectors-head h4 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: #0f172a;
}
.sq-modal-sectors-head p {
  margin: 0;
  font-size: .85rem;
  color: #6b7280;
}
.sq-modal-foot {
  padding: 16px 32px 22px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid #f1f5f9;
  background: #fafbfd;
}
.sq-modal-foot .sq-btn { padding: 11px 22px; font-size: .94rem; }
/* Dans la modale, le scroll est porté par .sq-modal-body — on désactive
   le scroll interne de la grille pour éviter le double scroll. */
.sq-modal .sq-sectors-grid {
  max-height: none;
  overflow: visible;
}

@media (max-width: 720px) {
  .sq-modal-overlay { padding: 0; align-items: stretch; }
  .sq-modal {
    max-width: none;
    max-height: 100vh;
    border-radius: 0;
    height: 100vh;
  }
  .sq-modal-head { padding: 22px 18px 14px; }
  .sq-modal-head h3 { font-size: 1.2rem; }
  .sq-modal-body { padding: 16px 18px 6px; }
  .sq-modal-grid { grid-template-columns: 1fr; gap: 12px; }
  .sq-modal-foot {
    padding: 14px 18px 18px;
    flex-direction: column-reverse;
    gap: 8px;
  }
  .sq-modal-foot .sq-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════ Lightbox image originale (page détail) ═══════════════════ */
.sq-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .85);
  z-index: 10000;
  display: none;
  flex-direction: column;
}
.sq-lightbox.open { display: flex; }
/* Toolbar verticale à droite — design haute visibilité (fond sombre, accent orange) */
.sq-lightbox-toolbar {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 14px 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .96) 0%, rgba(15, 23, 42, .92) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.sq-lb-nav-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.sq-lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1.5px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
  font-family: inherit;
  min-height: 40px;
  min-width: 110px;
  white-space: nowrap;
  letter-spacing: .01em;
}
.sq-lb-btn:hover {
  background: var(--sq-orange);
  border-color: var(--sq-orange);
  color: #fff;
  transform: translateX(-2px);
  box-shadow: 0 6px 18px rgba(234, 88, 12, .35);
}
.sq-lb-btn.sq-lb-close {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
  margin-top: 6px;
  font-size: 1rem;
}
.sq-lb-btn.sq-lb-close:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  transform: translateX(-2px);
}
.sq-lb-zoom-level {
  min-width: 56px;
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  padding: 4px 6px;
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
  letter-spacing: .02em;
}
.sq-lb-counter {
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  padding: 4px 6px;
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
}
.sq-lb-sep {
  height: 1px;
  width: auto;
  background: rgba(255, 255, 255, .12);
  margin: 4px 2px;
}
.sq-lightbox-stage {
  flex: 1;
  overflow: auto;
  padding: 32px 170px 32px 24px; /* marge droite réservée pour la toolbar verticale */
  display: flex;
  justify-content: center;
  align-items: center;  /* ★ Phase 38e — vertical center pour que l'image fit ne soit pas en haut */
}
.sq-lightbox-content {
  transform-origin: top center;
  transition: transform .2s ease-out;
  flex-shrink: 0;
}
/* Mode "Clarifier" — désature la teinte papier crème/jaune et booste le
   contraste pour rendre les scans de presse beaucoup plus lisibles.
   Activé par défaut, désactivable via le bouton 🪄 Clarifier de la toolbar. */
.sq-lightbox-content.sq-clean img {
  filter: saturate(0) contrast(1.32) brightness(1.08);
  transition: filter .25s ease;
}
.sq-lightbox-content img {
  transition: filter .25s ease;
}
/* État actif des boutons toggle de la toolbar (Clarifier ON) */
.sq-lb-btn.sq-lb-active {
  background: var(--sq-orange);
  border-color: var(--sq-orange);
  color: #fff;
  box-shadow: 0 4px 14px rgba(234, 88, 12, .35);
}
.sq-lb-btn.sq-lb-active:hover {
  background: #c2410c;
  border-color: #c2410c;
}

/* Flèches overlay (gauche / droite) au-dessus de l'image dans la lightbox */
.sq-lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  border: 1.5px solid rgba(0, 0, 0, .08);
  color: var(--sq-navy);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
  transition: background .15s, color .15s, transform .15s, opacity .15s;
  font-family: inherit;
  padding: 0;
  user-select: none;
}
.sq-lb-arrow:hover:not(:disabled) {
  background: var(--sq-orange);
  color: #fff;
  border-color: var(--sq-orange);
  transform: translateY(-50%) scale(1.08);
}
.sq-lb-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.sq-lb-arrow-prev { left: 24px; }
.sq-lb-arrow-next { right: 170px; } /* décalée pour laisser la place à la toolbar verticale */
.sq-lb-arrow-prev > span,
.sq-lb-arrow-next > span { display: inline-block; transform: translateY(-2px); }
@media (max-width: 640px) {
  .sq-lb-arrow { width: 44px; height: 44px; font-size: 1.6rem; }
  .sq-lb-arrow-prev { left: 8px; }
  .sq-lb-arrow-next { right: 8px; }
}
@media (max-width: 900px) {
  /* ════════ TABLETTE/MOBILE — Refonte complète de la lightbox ════════
     Objectifs :
     - Image adaptée à la largeur écran (pas de scroll horizontal forcé)
     - Toolbar bottom-sheet épinglée en bas avec safe-area iOS
     - Boutons larges (44×44 min) pour cibles tactiles confortables
     - Bouton ✕ rouge plein dans coin haut-droit (toujours accessible) */

  /* Stage : padding bas adapté pour laisser de la place à la toolbar */
  .sq-lightbox-stage {
    padding: 14px 10px 130px;
    align-items: center;
  }
  .sq-lightbox-content { max-width: 100%; }

  /* Bouton ✕ Fermer extrait de la toolbar → coin haut-droit fixe.
     Le JS déplace le bouton hors de la toolbar (.sq-lb-close-detached).
     CSS forcé en !important pour tous les cas. */
  .sq-lightbox > .sq-lb-btn.sq-lb-close,
  .sq-lightbox .sq-lb-btn.sq-lb-close.sq-lb-close-detached,
  .sq-lightbox-toolbar .sq-lb-btn.sq-lb-close,
  .sq-lb-btn.sq-lb-close {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 1.4rem !important;
    background: #dc2626 !important;
    border: 2px solid #fff !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55) !important;
    z-index: 99999 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Hover/tap feedback */
  .sq-lightbox .sq-lb-btn.sq-lb-close:hover,
  .sq-lightbox .sq-lb-btn.sq-lb-close:active {
    background: #b91c1c !important;
    transform: scale(.95);
  }

  /* Toolbar : barre du bas large et confortable */
  .sq-lightbox-toolbar {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(15, 23, 42, .96));
    border: none;
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .5);
    scrollbar-width: thin;
  }
  .sq-lightbox-toolbar::-webkit-scrollbar { height: 4px; }
  .sq-lightbox-toolbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

  /* Bloc navigation pages : reste en haut à gauche */
  .sq-lb-nav-wrap { flex-direction: row; gap: 6px; flex-shrink: 0; }

  /* Boutons : cibles tactiles confortables (44px Apple HIG / 48px Material) */
  .sq-lb-btn {
    min-width: 48px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: .82rem;
    flex-shrink: 0;
    border-radius: 10px;
  }
  .sq-lb-btn:hover { transform: none; }
  .sq-lb-btn:active { transform: scale(.95); }

  /* Compteur et niveau zoom : compacts mais lisibles */
  .sq-lb-counter,
  .sq-lb-zoom-level {
    font-size: .8rem;
    padding: 8px 10px;
    flex-shrink: 0;
  }

  /* Séparateurs verticaux à nouveau (toolbar horizontale) */
  .sq-lb-sep { width: 1px; height: 24px; margin: 0 4px; background: rgba(255, 255, 255, .12); flex-shrink: 0; }

  /* Flèches navigation : décalées en haut pour ne pas masquer le contenu */
  .sq-lb-arrow {
    top: auto;
    bottom: 90px;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    transform: none;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  }
  .sq-lb-arrow-prev { left: 12px; }
  .sq-lb-arrow-next { right: 12px; }
  .sq-lb-arrow:hover:not(:disabled) { transform: scale(1.05); }
}

/* Mobile très étroit (≤ 380 px) : encore plus compact */
@media (max-width: 380px) {
  .sq-lb-btn {
    padding: 8px 9px;
    font-size: .74rem;
    min-width: 44px;
  }
  .sq-lightbox-toolbar { gap: 6px; padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* Curseur zoom-in sur l'aperçu cliquable */
.sq-doc-preview { cursor: zoom-in; }

/* ═══════════════════ Pièces jointes (cards) ═══════════════════ */
.sq-doc-preview-hidden { display: none !important; }
/* Conteneur des sources d'aperçu : masqué à l'écran, déplié en impression. */
.sq-doc-sources { display: none; }
.sq-att-source { background: #fff; }
.sq-doc-page-banner {
  display: inline-block;
  background: var(--sq-orange-50);
  color: var(--sq-orange-600);
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
  letter-spacing: .02em;
}
.sq-doc-page-banner.rtl { direction: rtl; }
@media print {
  /* En impression : on déplie TOUTES les sources, on masque la liste de cards. */
  .sq-doc-sources { display: block !important; }
  .sq-attachments-list { display: none !important; }
  /* Chaque pièce jointe sur sa propre page A4 — pas de coupure possible. */
  .sq-att-source { page-break-before: always; break-before: page; page-break-inside: avoid; break-inside: avoid; }
  /* Première pièce jointe : pas besoin du page-break avant si elle suit la description */
  .sq-att-source:first-child { /* on garde quand même la cassure pour homogénéité */ page-break-before: always; }

  /* ⚡ Fix 08/06/2026 — Empêche les grandes images d'être coupées en 2 pages.
     Avant : l'image n'avait que max-width:100%, donc une image très haute
     (verticale) dépassait la page A4 et le navigateur la coupait au milieu
     pour la mettre sur la page suivante. Le PDF (jsPDF) gérait déjà bien
     grâce à son helper ensureRoom() ; le print n'avait pas son équivalent CSS.
     Solution : max-height en cm calculé pour rester dans une page A4 portrait
     avec marges 14mm + banner ~1cm. */
  .sq-att-source img {
    max-width: 100% !important;
    /* A4 = 29.7cm ; margin print 14mm × 2 = 26.9cm dispo ; banner ~1cm → 25cm safe */
    max-height: 25cm !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  /* Le wrapper preview image ne doit pas non plus déborder de la page */
  .sq-doc-preview-img {
    max-height: 27cm !important;
    overflow: hidden !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}
.sq-att-page {
  font-weight: 700;
  color: var(--sq-orange-600);
}
.sq-attachments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sq-attachment-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--sq-border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
  width: 100%;
}
.sq-attachment-card:hover {
  border-color: var(--sq-orange);
  background: var(--sq-orange-50);
  box-shadow: 0 4px 14px rgba(238, 124, 44, .12);
}
.sq-attachment-card:focus-visible {
  outline: 2px solid var(--sq-orange);
  outline-offset: 2px;
}
.sq-att-thumb {
  position: relative;
  width: 52px;
  height: 64px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fff4ea 0%, #fde4cf 100%);
  border: 1px solid var(--sq-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sq-att-thumb-icon {
  font-size: 1.6rem;
  filter: grayscale(.1);
}
.sq-att-thumb-tag {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: var(--sq-navy);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.sq-att-info { flex: 1; min-width: 0; }
.sq-att-label {
  font-weight: 700;
  color: var(--sq-navy);
  font-size: .95rem;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sq-att-label[dir="rtl"] { text-align: right; }
.sq-att-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--sq-muted);
  flex-wrap: wrap;
}
.sq-att-flag { font-size: 1rem; line-height: 1; }
.sq-att-dot { opacity: .5; }
.sq-att-fname {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .72rem;
  color: var(--sq-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sq-att-action {
  flex-shrink: 0;
  color: var(--sq-orange-600);
  font-weight: 700;
  font-size: .85rem;
  padding-left: 8px;
}
.sq-attachment-card:hover .sq-att-action {
  transform: translateX(2px);
}

/* Lightbox : compteur + boutons prev/next */
.sq-lb-counter {
  min-width: 48px;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  color: var(--sq-navy);
  padding: 0 6px;
}
.sq-lb-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.sq-lb-btn:disabled:hover {
  background: #fff;
  border-color: var(--sq-border);
  color: var(--sq-navy);
}
.sq-lb-nav-wrap { display: inline-flex; align-items: center; gap: 6px; }

/* Variante RTL de l'aperçu document (version arabe) */
.sq-doc-preview-ar {
  direction: rtl;
  text-align: right;
  font-family: "Segoe UI", "Noto Naskh Arabic", "Amiri", system-ui, sans-serif;
}
.sq-doc-preview-ar h3, .sq-doc-preview-ar h4, .sq-doc-preview-ar h5 { text-align: center; }
.sq-doc-preview-ar .ref-line { text-align: center; }
.sq-doc-preview-ar .title-bold { text-align: center; font-weight: 700; margin: 12px 0; }

@media (max-width: 640px) {
  .sq-attachment-card { padding: 10px 12px; gap: 10px; }
  .sq-att-thumb { width: 44px; height: 56px; }
  .sq-att-label { font-size: .88rem; white-space: normal; }
  .sq-att-action { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE CONTACT — /contact.html
═══════════════════════════════════════════════════════════ */
.sq-contact-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 24px 60px;
}

/* Hero : 2 colonnes (infos + formulaire) */
.sq-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
  align-items: start;
}
@media (max-width: 980px) {
  .sq-contact-grid { grid-template-columns: 1fr; gap: 24px; }
}

.sq-contact-left { display: flex; flex-direction: column; }

.sq-contact-breadcrumb {
  font-size: .82rem;
  color: var(--sq-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sq-contact-breadcrumb a {
  color: var(--sq-muted);
  text-decoration: none !important;
  transition: color .15s;
}
.sq-contact-breadcrumb a:hover { color: var(--sq-orange-600); }
.sq-contact-breadcrumb .current { color: var(--sq-navy); font-weight: 700; }
.sq-contact-breadcrumb span[aria-hidden] { opacity: .5; }

.sq-contact-title {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--sq-navy);
  line-height: 1.15;
  letter-spacing: -.4px;
  margin-bottom: 14px;
}
.sq-contact-title .accent { color: var(--sq-orange); }

.sq-contact-sub {
  font-size: .98rem;
  color: var(--sq-muted);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 560px;
}

/* Cartes infos contact (2×2) */
.sq-contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 540px) { .sq-contact-cards { grid-template-columns: 1fr; } }

.sq-contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 14px;
  padding: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.sq-contact-info-card:hover {
  border-color: var(--sq-orange);
  box-shadow: 0 4px 14px rgba(238, 124, 44, .1);
}
.sq-contact-info-card .ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.sq-contact-info-card h4 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--sq-navy);
  margin-bottom: 4px;
}
.sq-contact-info-card .main {
  font-size: .9rem;
  color: var(--sq-text);
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}
.sq-contact-info-card .main a {
  color: inherit;
  text-decoration: none !important;
  transition: color .15s;
}
.sq-contact-info-card .main a:hover { color: var(--sq-orange-600); }
.sq-contact-info-card .sub {
  font-size: .78rem;
  color: var(--sq-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Palette des icônes (mêmes teintes que les badges packs) */
.sq-contact-shell .ico.orange { background: #fff4ea; color: #d96916; }
.sq-contact-shell .ico.blue   { background: #dbeafe; color: #1e40af; }
.sq-contact-shell .ico.green  { background: #dcfce7; color: #166534; }
.sq-contact-shell .ico.pink   { background: #fce7f3; color: #9d174d; }
.sq-contact-shell .ico.indigo { background: #e0e7ff; color: #3730a3; }

/* Formulaire (colonne droite) */
.sq-contact-form-card {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 6px 22px rgba(15, 23, 42, .06);
  position: sticky;
  top: 110px;
}
@media (max-width: 980px) { .sq-contact-form-card { position: static; } }
.sq-contact-form-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.sq-contact-form-head .ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.sq-contact-form-head h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 4px;
}
.sq-contact-form-head p {
  font-size: .86rem;
  color: var(--sq-muted);
  line-height: 1.4;
}
.sq-contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) { .sq-contact-form-row { grid-template-columns: 1fr; } }
.sq-contact-form-card .sq-field { margin-bottom: 14px; }
.sq-contact-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.sq-contact-textarea {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
}
.sq-contact-submit {
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 4px;
}
.sq-contact-form-foot {
  text-align: center;
  font-size: .8rem;
  color: var(--sq-muted);
  margin-top: 14px;
}

/* Carte + visite */
.sq-contact-map-wrap {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin-bottom: 36px;
}
@media (max-width: 980px) { .sq-contact-map-wrap { grid-template-columns: 1fr; } }

.sq-contact-map {
  background: #e2e8f0;
  border: 1px solid var(--sq-border);
  border-radius: 16px;
  overflow: hidden;
  min-height: 280px;
}
.sq-contact-map iframe {
  width: 100%; height: 100%;
  min-height: 280px;
  border: 0;
  display: block;
}

.sq-contact-visit {
  background: linear-gradient(135deg, #eef2ff 0%, #fff 70%);
  border: 1px solid #c7d2fe;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sq-contact-visit .ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 14px;
}
.sq-contact-visit h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 8px;
}
.sq-contact-visit p {
  font-size: .88rem;
  color: var(--sq-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* 4 features (bandeau du bas) */
.sq-contact-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 980px) { .sq-contact-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sq-contact-features { grid-template-columns: 1fr; } }

.sq-contact-feature {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.sq-contact-feature:hover {
  border-color: var(--sq-orange);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
}
.sq-contact-feature .ico {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 14px;
}
.sq-contact-feature h4 {
  font-size: .95rem;
  font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 6px;
}
.sq-contact-feature p {
  font-size: .82rem;
  color: var(--sq-muted);
  line-height: 1.5;
}

.sq-contact-help {
  text-align: center;
  font-size: .9rem;
  color: var(--sq-muted);
  margin-top: 6px;
}
.sq-contact-help a {
  color: var(--sq-orange-600);
  font-weight: 700;
  text-decoration: none;
  transition: color .15s;
}
.sq-contact-help a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   PAGE SERVICES — /services.html (Nos services / Pourquoi nous choisir)
═══════════════════════════════════════════════════════════ */
.sq-services-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 24px 60px;
}

/* Palette des icônes (sections services + pourquoi) */
.sq-services-shell .ico.orange      { background: #fff4ea; color: #d96916; }
.sq-services-shell .ico.orange-soft { background: #fef3c7; color: #d97706; }
.sq-services-shell .ico.blue        { background: #dbeafe; color: #1e40af; }
.sq-services-shell .ico.green       { background: #dcfce7; color: #166534; }
.sq-services-shell .ico.pink        { background: #fce7f3; color: #9d174d; }
.sq-services-shell .ico.violet      { background: #ede9fe; color: #6d28d9; }
.sq-services-shell .ico.indigo      { background: #e0e7ff; color: #3730a3; }

.sq-services-shell .kicker {
  display: inline-block;
  color: var(--sq-orange-600);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* ─── HERO ──────────────────────────────────────────────── */
.sq-services-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
}
@media (max-width: 980px) { .sq-services-hero { grid-template-columns: 1fr; } }
.sq-services-hero-text h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: var(--sq-navy);
  line-height: 1.15;
  letter-spacing: -.4px;
  margin-bottom: 16px;
}
.sq-services-hero-text h1 .accent { color: var(--sq-orange); }
.sq-services-hero-text p {
  font-size: 1rem;
  color: var(--sq-muted);
  line-height: 1.65;
  max-width: 540px;
}
.sq-services-hero-text .orange-divider {
  width: 56px; height: 3px;
  background: var(--sq-orange);
  border-radius: 2px;
  margin-top: 22px;
}
.sq-services-hero-illu svg { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; }

/* ─── 6 SERVICE CARDS ───────────────────────────────────── */
.sq-services-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 56px;
}
@media (max-width: 980px) { .sq-services-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sq-services-cards { grid-template-columns: 1fr; } }

.sq-service-card {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, transform .12s, box-shadow .2s;
}
.sq-service-card:hover {
  border-color: var(--sq-orange);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}
.sq-service-card .ico {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 16px;
}
.sq-service-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 10px;
}
.sq-service-card p {
  font-size: .9rem;
  color: var(--sq-muted);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 14px;
}
.sq-service-card .link {
  font-size: .88rem;
  font-weight: 700;
  color: var(--sq-orange-600);
  text-decoration: none;
  transition: color .15s, transform .15s;
}
.sq-service-card .link:hover { color: var(--sq-orange); transform: translateX(3px); }

/* ─── POURQUOI NOUS CHOISIR ─────────────────────────────── */
.sq-why-choose {
  background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
  border: 1px solid var(--sq-border);
  border-radius: 22px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 36px;
  align-items: start;
  margin-bottom: 0;
}
@media (max-width: 980px) { .sq-why-choose { grid-template-columns: 1fr; padding: 26px; } }
.sq-why-text h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  color: var(--sq-navy);
  line-height: 1.2;
  margin-bottom: 14px;
}
.sq-why-text p {
  font-size: .96rem;
  color: var(--sq-muted);
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 420px;
}
.sq-why-cta { padding: 12px 24px; font-weight: 700; }

.sq-why-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .sq-why-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sq-why-features { grid-template-columns: 1fr; } }

.sq-why-feature {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 12px;
  padding: 18px;
  transition: border-color .15s, box-shadow .15s;
}
.sq-why-feature:hover {
  border-color: var(--sq-orange);
  box-shadow: 0 4px 14px rgba(238, 124, 44, .1);
}
.sq-why-feature .ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 12px;
}
.sq-why-feature h4 {
  font-size: .92rem;
  font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 6px;
}
.sq-why-feature p {
  font-size: .82rem;
  color: var(--sq-muted);
  line-height: 1.45;
  margin: 0;
}

/* ─── BANDEAU STATS NAVY ────────────────────────────────── */
.sq-stats-band {
  background: linear-gradient(135deg, var(--sq-navy) 0%, var(--sq-navy-700) 100%);
  border-radius: 22px;
  padding: 36px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 40px 0 56px;
  color: #fff;
}
@media (max-width: 780px) { .sq-stats-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .sq-stats-band { grid-template-columns: 1fr; } }

.sq-stat-item {
  text-align: center;
  padding: 8px;
}
.sq-stat-item .ico {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 14px;
}
.sq-stat-item .num {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -.4px;
  margin-bottom: 4px;
}
.sq-stat-item .lbl {
  font-size: .85rem;
  opacity: .85;
}

/* ─── CAS CLIENTS (carousel) ─────────────────────────────── */
.sq-case-clients { margin-bottom: 56px; }
.sq-case-head { text-align: center; margin-bottom: 28px; }
.sq-case-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 8px;
}
.sq-case-head p {
  color: var(--sq-muted);
  font-size: .96rem;
  max-width: 580px;
  margin: 0 auto;
}

.sq-case-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  gap: 14px;
  align-items: center;
}
.sq-case-viewport { overflow: hidden; }
.sq-case-track {
  display: flex;
  transition: transform .4s ease;
}
.sq-case-card {
  flex: 0 0 calc((100% - 32px) / 3);
  margin-right: 16px;
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}
.sq-case-card:last-child { margin-right: 0; }
@media (max-width: 899px) { .sq-case-card { flex: 0 0 calc((100% - 16px) / 2); } }
@media (max-width: 720px)  { .sq-case-card { flex: 0 0 100%; margin-right: 0; } }
.sq-case-card .quote-mark {
  color: var(--sq-orange);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
}
.sq-case-card > p {
  font-size: .9rem;
  color: var(--sq-text);
  line-height: 1.55;
  margin-bottom: 18px;
}
.sq-case-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--sq-border);
}
.sq-case-logo .logo-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.sq-case-logo .logo-mark.orange { background: #fff4ea; color: #d96916; }
.sq-case-logo .logo-mark.blue   { background: #dbeafe; color: #1e40af; }
.sq-case-logo .logo-mark.green  { background: #dcfce7; color: #166534; }
.sq-case-logo .logo-mark.pink   { background: #fce7f3; color: #9d174d; }
.sq-case-logo strong { color: var(--sq-navy); font-size: .9rem; }
.sq-case-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.sq-case-author strong { color: var(--sq-navy); font-size: .92rem; }
.sq-case-author .badge-stat {
  background: #dcfce7;
  color: #166534;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.sq-case-card .role {
  font-size: .78rem;
  color: var(--sq-muted);
}

.sq-case-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--sq-border);
  color: var(--sq-navy);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.sq-case-arrow:hover {
  background: var(--sq-orange);
  color: #fff;
  border-color: var(--sq-orange);
}

.sq-case-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.sq-case-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 0;
  background: var(--sq-border);
  cursor: pointer;
  transition: background .15s, transform .15s;
  padding: 0;
}
.sq-case-dot.active { background: var(--sq-orange); transform: scale(1.3); }

/* ─── FAQ ACCORDION ─────────────────────────────────────── */
.sq-faq { margin-bottom: 56px; }
.sq-faq-head { text-align: center; margin-bottom: 28px; }
.sq-faq-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  color: var(--sq-navy);
  margin-bottom: 8px;
}
.sq-faq-head p {
  color: var(--sq-muted);
  font-size: .96rem;
  max-width: 580px;
  margin: 0 auto;
}
.sq-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) { .sq-faq-grid { grid-template-columns: 1fr; } }

.sq-faq-item {
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.sq-faq-item:hover { border-color: var(--sq-orange); }
.sq-faq-item[open] {
  border-color: var(--sq-orange);
  box-shadow: 0 4px 14px rgba(238, 124, 44, .08);
}
.sq-faq-item summary {
  cursor: pointer;
  padding: 16px 18px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--sq-navy);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sq-faq-item summary::-webkit-details-marker { display: none; }
.sq-faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--sq-orange);
  flex-shrink: 0;
  transition: transform .25s ease;
}
.sq-faq-item[open] summary::after { transform: rotate(45deg); }
.sq-faq-item p {
  padding: 0 18px 16px;
  margin: 0;
  font-size: .88rem;
  color: var(--sq-muted);
  line-height: 1.6;
}
.sq-faq-item p a { color: var(--sq-orange-600); font-weight: 600; }

/* ─── CTA FINAL ─────────────────────────────────────────── */
.sq-cta-final {
  background: linear-gradient(135deg, var(--sq-navy) 0%, var(--sq-navy-700) 100%);
  border-radius: 22px;
  padding: 48px 24px;
  margin-bottom: 36px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sq-cta-final::before, .sq-cta-final::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(238, 124, 44, .12);
  pointer-events: none;
}
.sq-cta-final::before { top: -80px; right: -60px; }
.sq-cta-final::after  { bottom: -80px; left: -60px; }
.sq-cta-final-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.sq-cta-final h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
}
.sq-cta-final h2 .accent { color: var(--sq-orange); }
.sq-cta-final p {
  font-size: 1rem;
  opacity: .88;
  margin-bottom: 24px;
  line-height: 1.6;
}
.sq-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.sq-cta-actions .sq-btn-cta {
  padding: 13px 26px;
  font-size: .95rem;
  font-weight: 700;
}
.sq-cta-actions .sq-btn-light {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .35);
  color: #fff;
}
.sq-cta-actions .sq-btn-light:hover {
  background: rgba(255, 255, 255, .08);
  border-color: #fff;
}

/* ─── FOOTER FEATURES (bandeau bas) ─────────────────────── */
.sq-services-foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--sq-border);
}
@media (max-width: 880px) { .sq-services-foot { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .sq-services-foot { grid-template-columns: 1fr; } }
.sq-services-foot-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sq-services-foot-item .ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--sq-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.sq-services-foot-item strong {
  display: block;
  color: var(--sq-navy);
  font-size: .92rem;
  font-weight: 800;
  margin-bottom: 2px;
}
.sq-services-foot-item small {
  display: block;
  color: var(--sq-muted);
  font-size: .8rem;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════
   SOUS-MENU "ANNONCES" — dropdown header
═══════════════════════════════════════════════════════════ */
.sq-nav .sq-has-submenu {
  position: relative;
  display: inline-block;
}
.sq-nav .sq-has-submenu > a::after {
  content: '▾';
  display: inline-block;
  margin-left: 4px;
  font-size: .65rem;
  transform: translateY(-1px);
  opacity: .7;
}
.sq-nav .sq-submenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
  padding: 8px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 70;
}
.sq-nav .sq-has-submenu:hover .sq-submenu,
.sq-nav .sq-has-submenu:focus-within .sq-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sq-nav .sq-submenu a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 14px !important;
  font-size: .88rem !important;
  color: var(--sq-navy) !important;
  transition: background .12s, color .12s;
  white-space: nowrap;
  font-weight: 600 !important;
}
.sq-nav .sq-submenu a:hover {
  background: var(--sq-orange-50);
  color: var(--sq-orange-600) !important;
}
.sq-nav .sq-submenu a::after { content: none !important; }
.sq-nav .sq-submenu .ico {
  width: 22px;
  text-align: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE GLOBAL — burger menu + drawer mobile
   Le bouton est injecté par safaqatdz-header.js sur toutes les pages.
═══════════════════════════════════════════════════════════ */
.sq-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--sq-border);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  z-index: 210;
  color: var(--sq-navy);
  position: relative;
  vertical-align: middle;
  transition: background .15s, border-color .15s, color .15s;
}
.sq-burger:hover { background: var(--sq-orange-50); border-color: var(--sq-orange); color: var(--sq-orange-600); }
.sq-burger:active { transform: scale(.96); }
.sq-burger-bars {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.sq-burger-bars .bar {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.sq-burger-bars .bar-1 { top: 13px; }
.sq-burger-bars .bar-2 { top: 20.75px; }
.sq-burger-bars .bar-3 { top: 28.5px; }
body.sq-nav-open .sq-burger {
  background: var(--sq-orange);
  border-color: var(--sq-orange);
  color: #fff;
}
body.sq-nav-open .sq-burger-bars .bar-1 { top: 20.75px; transform: rotate(45deg); }
body.sq-nav-open .sq-burger-bars .bar-2 { opacity: 0; }
body.sq-nav-open .sq-burger-bars .bar-3 { top: 20.75px; transform: rotate(-45deg); }

/* Breakpoint : ≤ 920px → drawer mobile */
@media (max-width: 920px) {
  .sq-burger { display: block !important; }

  /* Phase 20 v3 (21/06/2026) - Logo Safqa360DZ visible sur mobile (était 40px = trop petit avec le slogan) */
  .sq-header .sq-brand img { height: 80px !important; }

  /* Header au-dessus de l'overlay quand le drawer est ouvert.
     `backdrop-filter` sur .sq-header crée un stacking context qui doit dominer le ::before */
  body.sq-nav-open .sq-header {
    z-index: 300 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
  }
  body.sq-nav-open .sq-header-inner {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--sq-border);
  }

  /* La nav devient un drawer latéral droit. La nav est détachée du header par JS
     (déplacée en enfant direct de body) pour échapper au containing block créé
     par le backdrop-filter du header. */
  .sq-nav.sq-nav-detached {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: -360px;
    width: min(340px, 86vw);
    max-width: 340px;
    height: 100vh;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 80px 18px 24px !important;
    margin: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    transition: right .28s ease;
    box-shadow: -12px 0 32px rgba(15, 23, 42, .16);
    z-index: 305 !important;
    box-sizing: border-box;
  }
  body.sq-nav-open .sq-nav.sq-nav-detached { right: 0 !important; }
  body.sq-nav-open .sq-burger {
    position: fixed !important;
    top: 12px !important;
    right: 16px !important;
    z-index: 310 !important;  /* au-dessus du drawer */
  }
  body.sq-nav-open { overflow: hidden; }

  /* Overlay sombre derrière le drawer */
  body.sq-nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 200;
    backdrop-filter: blur(2px);
  }

  /* Liens nav dans le drawer (la nav est détachée → enfant direct de body) */
  .sq-nav.sq-nav-detached > a,
  .sq-nav.sq-nav-detached > div.sq-has-submenu > a {
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border-bottom: 1px solid var(--sq-border) !important;
    color: var(--sq-navy) !important;
    background: transparent !important;
  }
  .sq-nav.sq-nav-detached > a:hover,
  .sq-nav.sq-nav-detached > div.sq-has-submenu > a:hover {
    background: var(--sq-orange-50) !important;
  }

  /* Sous-menu : déplié inline quand .open */
  .sq-nav .sq-has-submenu { position: static !important; width: 100%; }
  .sq-nav .sq-has-submenu > a::after {
    content: '▾';
    float: right;
    transition: transform .2s;
  }
  .sq-nav .sq-has-submenu.open > a::after { transform: rotate(180deg); }
  .sq-nav .sq-submenu {
    position: static !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 0 0 16px !important;
    margin: 0 !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease;
  }
  .sq-nav .sq-has-submenu.open .sq-submenu {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 540px;
    padding: 4px 0 8px 16px !important;
  }
  .sq-nav .sq-submenu a {
    padding: 8px 10px !important;
    font-size: .85rem !important;
    border: 0 !important;
  }

  /* Search "Recherche rapide" : masqué dans le drawer mobile (la barre de recherche
     est déjà dans le hero des pages concernées). */
  .sq-nav.sq-nav-detached #header-search-btn { display: none !important; }

  /* Bell + auth-in : alignement vertical dans le drawer */
  .sq-nav.sq-nav-detached .sq-bell-btn {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: var(--sq-bg) !important;
    margin: 0 !important;
    height: auto !important;
  }
  .sq-nav.sq-nav-detached .sq-bell-btn::before {
    content: attr(aria-label);
    margin-left: 8px;
    font-size: .9rem;
    color: var(--sq-navy);
    font-weight: 600;
  }
  .sq-nav.sq-nav-detached #auth-in { width: 100% !important; display: block !important; }
  .sq-nav.sq-nav-detached #auth-in .sq-welcome { width: 100%; justify-content: flex-start; }
  .sq-nav.sq-nav-detached .sq-user-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    width: 100% !important;
    margin-top: 6px !important;
    padding: 0 0 0 16px !important;
  }
  .sq-nav.sq-nav-detached #cta-login,
  .sq-nav.sq-nav-detached #cta-register {
    width: 100% !important;
    text-align: center !important;
    padding: 12px !important;
    margin: 6px 0 !important;
  }

  /* ─── Cohérence mobile drawer — force l'état selon la session ─────────
     Empêche le bug "avatar visible + CTAs visibles en même temps" en
     forçant via CSS l'affichage attendu, indépendamment des style.display
     inline qui peuvent rater (race condition, scripts tiers, etc.) */
  /* Utilisateur connecté (viewer) : on cache les CTAs, on montre auth-in */
  body.sq-auth-viewer .sq-nav.sq-nav-detached #cta-login,
  body.sq-auth-viewer .sq-nav.sq-nav-detached #cta-register {
    display: none !important;
  }
  body.sq-auth-viewer .sq-nav.sq-nav-detached #auth-in {
    display: block !important;
  }
  /* Utilisateur non connecté : on cache auth-in, on montre les CTAs */
  body:not(.sq-auth-viewer) .sq-nav.sq-nav-detached #auth-in {
    display: none !important;
  }
  body:not(.sq-auth-viewer) .sq-nav.sq-nav-detached #cta-login,
  body:not(.sq-auth-viewer) .sq-nav.sq-nav-detached #cta-register {
    display: block !important;
  }
}

/* Search bar (page Annonces) : responsive mobile — empile input + bouton */
@media (max-width: 720px) {
  .sq-search-bar {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: stretch !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }
  .sq-search-bar input,
  .sq-search-bar .sq-btn {
    width: 100% !important;
    padding: 9px 10px !important;
    font-size: .88rem !important;
  }
  /* Hero "Annonces" : version mobile plus compacte */
  .sq-page-intro { padding: 16px 14px !important; }
  .sq-page-intro-inner { gap: 10px !important; padding: 0 !important; }
  .sq-page-intro h1 {
    font-size: 1.1rem !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  .sq-page-intro p {
    font-size: .8rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }
  .sq-page-intro .sq-adv-link { font-size: .78rem !important; }
  /* Fix mobile 2026-07-17 : barre de recherche pleine largeur, pas de décalage */
  .sq-page-intro .sq-search-bar {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .sq-page-intro-inner > div,
  .sq-page-intro-inner .sq-search-bar,
  .sq-page-intro-inner .sq-adv-link {
    justify-self: stretch !important;
    max-width: 100% !important;
  }
}

/* ─── Responsive : ajustements globaux pages publiques ─── */
@media (max-width: 720px) {
  /* Footer 4 colonnes → 2 sur tablette, 1 sur mobile (déjà géré pour beaucoup mais on uniformise) */
  .sq-footer-inner.cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .sq-footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  /* Subheader : on cache la pastille V2BEE sur très petits écrans */
  .sq-subheader-v2bee { display: none !important; }
  /* Breadcrumb : taille réduite */
  .sq-subheader .sq-breadcrumb-trail { font-size: .78rem; }
}
@media (max-width: 480px) {
  .sq-footer-inner.cols-4 { grid-template-columns: 1fr !important; }
  /* Subheader plus compact */
  .sq-subheader { padding: 6px 12px; }
  .sq-nav-arrow { width: 28px; height: 28px; font-size: .9rem; }
  /* Body padding global réduit */
  main { padding-left: 14px !important; padding-right: 14px !important; }
}

/* Page Hero (home) : compactage mobile — on masque les bullets et la social-proof pour
   réduire drastiquement la hauteur du hero. L'utilisateur scrolle directement vers le
   formulaire d'inscription. */
@media (max-width: 720px) {
  .sq-hero { padding: 18px 14px !important; }
  .sq-hero h1 {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }
  .sq-hero h1 br { display: none; } /* enlève les retours forcés (mise en page mobile naturelle) */
  .sq-hero .lead {
    font-size: .85rem !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
  }
  .sq-hero-bullets { display: none !important; }
  .sq-social-proof { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   PRÉFÉRENCES — toolbar de chaque card (search + tout sélectionner)
═══════════════════════════════════════════════════════════ */
.sq-pref-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
  flex-wrap: wrap;
}
.sq-pref-search {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.sq-pref-search .ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .95rem;
  pointer-events: none;
  opacity: .65;
}
.sq-pref-search input.sq-input {
  width: 100%;
  padding: 9px 14px 9px 38px;
  font-size: .9rem;
  border-radius: 10px;
  border: 1.5px solid var(--sq-border);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.sq-pref-search input.sq-input:focus {
  outline: none;
  border-color: var(--sq-orange);
  box-shadow: 0 0 0 3px rgba(238, 124, 44, .15);
}
.sq-pref-toggleall {
  flex-shrink: 0;
  padding: 9px 14px !important;
  font-size: .85rem !important;
  white-space: nowrap;
}
.sq-pref-toggleall .lbl-select   { display: inline; }
.sq-pref-toggleall .lbl-deselect { display: none; }
.sq-pref-toggleall.is-all-selected .lbl-select   { display: none; }
.sq-pref-toggleall.is-all-selected .lbl-deselect { display: inline; }
#sectors-show-all {
  flex-shrink: 0;
  padding: 9px 14px !important;
  font-size: .85rem !important;
  white-space: nowrap;
}
#sectors-show-all .lbl-default { display: inline; }
#sectors-show-all .lbl-active  { display: none; }
#sectors-show-all.is-active .lbl-default { display: none; }
#sectors-show-all.is-active .lbl-active  { display: inline; }
#sectors-show-all.is-active {
  background: var(--sq-orange-50) !important;
  color: var(--sq-orange-600) !important;
  border-color: var(--sq-orange) !important;
}
#sectors-none-chosen {
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  border: 1.5px dashed var(--sq-orange);
  color: var(--sq-text);
  padding: 14px 18px;
  border-radius: 12px;
  margin-top: 8px;
  font-size: .92rem;
  text-align: center;
}
#sectors-none-chosen strong { color: var(--sq-orange-600); }

.sq-pref-toggleall.is-all-selected {
  background: var(--sq-orange-50) !important;
  color: var(--sq-orange-600) !important;
  border-color: var(--sq-orange) !important;
}
.sq-pref-empty {
  padding: 14px 16px;
  text-align: center;
  font-size: .88rem;
  color: var(--sq-muted);
  background: var(--sq-bg);
  border: 1px dashed var(--sq-border);
  border-radius: 10px;
  margin-top: 4px;
}

/* Pages connexion (login.html) + inscription (register.html) :
   aside gauche compactée sur mobile, features visibles avec espaces optimisés.
   Le témoignage .sq-login-quote est déplacé en bas de page via JS (safaqatdz-header.js). */
@media (max-width: 720px) {
  .sq-login-aside {
    padding: 22px 18px !important;
    border-radius: 16px !important;
  }
  .sq-login-aside h2 {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }
  .sq-login-aside h2 br { display: none; }
  .sq-login-aside > p {
    font-size: .85rem !important;
    line-height: 1.45 !important;
    margin-bottom: 18px !important;
  }
  /* Features : compactées (icône plus petite, gap réduit, h4 + p plus serrés) */
  .sq-login-features { gap: 12px !important; margin-bottom: 0 !important; }
  .sq-login-features li {
    gap: 10px !important;
    padding: 0 !important;
  }
  .sq-login-features li .icon {
    width: 36px !important;
    height: 36px !important;
    font-size: .95rem !important;
    flex-shrink: 0;
  }
  .sq-login-features li h4 {
    font-size: .88rem !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
  }
  .sq-login-features li > div > p {
    font-size: .78rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
  /* Bloc sécurité (register.html uniquement) : compact */
  .sq-aside-secure {
    margin-top: 14px !important;
    padding: 10px 12px !important;
    font-size: .8rem !important;
  }
  /* Préférences : toolbar mobile (search + bouton) — surcharges spécifiques au mobile */
  .sq-pref-toolbar { gap: 8px; }
  .sq-pref-search input.sq-input { font-size: .85rem; padding: 8px 12px 8px 36px; }
  .sq-pref-toggleall { width: 100%; }
  #sectors-show-all { width: 100%; }

  /* Quote détaché : style standalone après le formulaire */
  .sq-login-quote.sq-quote-detached {
    margin: 14px 14px 22px !important;
    background: #fff;
    border: 1px solid var(--sq-border);
    border-radius: 14px;
    padding: 18px 18px 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
  }
  .sq-login-quote.sq-quote-detached p {
    color: var(--sq-text);
    font-size: .9rem;
    line-height: 1.55;
    margin-bottom: 12px;
  }
  .sq-login-quote.sq-quote-detached p::before { content: '❝ '; color: var(--sq-orange); font-weight: 700; font-size: 1.1em; }
  .sq-login-quote.sq-quote-detached .sq-login-quote-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
  .sq-login-quote.sq-quote-detached .who { color: var(--sq-navy); font-size: .85rem; font-weight: 700; }
  .sq-login-quote.sq-quote-detached .who small { display: block; font-weight: 400; color: var(--sq-muted); font-size: .76rem; margin-top: 2px; }
  .sq-login-quote.sq-quote-detached .sq-stars { color: #f59e0b; letter-spacing: 1px; }
}

/* Cards 5-grid (Pourquoi choisir SafaqatDZ ?) → 2 cols tablette, 1 col mobile */
.sq-cards-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 899px) { .sq-cards-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .sq-cards-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .sq-cards-5 { grid-template-columns: 1fr; } }

/* Plans 4 (Démo/Essentiel/Pro/Illimité) */
.sq-plans-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 899px) { .sq-plans-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .sq-plans-4 { grid-template-columns: 1fr; } }

/* Listing announcements : 3 col (filtres | listing | aside) → 1 col mobile */
@media (max-width: 899px) {
  .sq-page-grid,
  .sq-list-shell {
    grid-template-columns: 1fr !important;
  }
  .sq-filters,
  .sq-aside-right {
    position: static !important;
    /* Désactive le scroll interne sur mobile : la sidebar redevient un
       bloc pleine hauteur dans le flux normal (panneau repliable). */
    max-height: none !important;
    overflow: visible !important;
  }
  /* Filtres deviennent un panneau repliable */
  .sq-filters {
    background: #fff;
    border-radius: 12px;
  }
}

/* ─── Bouton mobile "Filtres" : ouvre/ferme la colonne ─── */
.sq-filters-mobile-toggle-wrap {
  display: none;
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 24px 0;
}
.sq-filters-mobile-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid var(--sq-border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--sq-navy);
  transition: background .15s, border-color .15s;
}
.sq-filters-mobile-toggle:hover {
  background: var(--sq-orange-50);
  border-color: var(--sq-orange);
}
.sq-filters-mobile-toggle .sq-filters-mobile-toggle-icon {
  width: 18px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
}
.sq-filters-mobile-toggle .bar {
  position: absolute;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.sq-filters-mobile-toggle .bar:nth-child(1) { top: 1px;  left: 0; right: 0; }
.sq-filters-mobile-toggle .bar:nth-child(2) { top: 6px;  left: 3px; right: 3px; }
.sq-filters-mobile-toggle .bar:nth-child(3) { top: 11px; left: 6px; right: 6px; }
.sq-filters-mobile-toggle .label { flex: 1; text-align: left; }
.sq-filters-mobile-toggle .badge {
  display: none;
  background: var(--sq-orange);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 22px;
  align-items: center;
  justify-content: center;
}
.sq-filters-mobile-toggle .chev {
  font-size: .9rem;
  color: var(--sq-muted);
  transition: transform .2s;
}
body.sq-filters-open .sq-filters-mobile-toggle .chev { transform: rotate(180deg); }
body.sq-filters-open .sq-filters-mobile-toggle {
  background: var(--sq-orange-50);
  border-color: var(--sq-orange);
  color: var(--sq-orange-600);
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPORTEMENT MOBILE — Drawer bottom-sheet pour les filtres
   ───────────────────────────────────────────────────────────────────────
   ≤ 1080 px : la colonne filtres devient un drawer plein écran qui glisse
   depuis le bas, avec backdrop sombre + sticky header (titre + ✕) + body
   scrollable + sticky footer (Appliquer). Pattern natif mobile.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .sq-filters-mobile-toggle-wrap { display: block !important; }

  /* État fermé par défaut : drawer caché en bas */
  #filters-column {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 88vh;
    max-height: 88vh;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -16px 50px rgba(0, 0, 0, .3);
    z-index: 9999;
    overflow: hidden auto;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.32, .72, 0, 1);
    margin: 0 !important;
    padding: 0 !important;
    /* Scroll iOS smooth */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body.sq-filters-open #filters-column { transform: translateY(0); }

  /* Backdrop sombre derrière le drawer */
  body.sq-filters-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 9998;
    animation: sq-fade-in .25s ease;
  }
  @keyframes sq-fade-in { from { opacity: 0; } to { opacity: 1; } }
  body.sq-filters-open { overflow: hidden; }

  /* Pilule de drag visuelle en haut */
  #filters-column::before {
    content: '';
    display: block;
    width: 48px;
    height: 5px;
    background: #cbd5e1;
    border-radius: 3px;
    margin: 12px auto 6px;
    flex-shrink: 0;
  }
  /* Section "Type d'annonce" : sticky en haut, design soft, séparée */
  #filters-column > aside.sq-filters.compact {
    position: relative;
    top: 0;
    z-index: 3;
    background: #fff;
    margin: 0 16px 12px;
    border: 1px solid var(--sq-border);
    border-radius: 12px;
    padding: 14px 16px;
  }
  /* Section principale des filtres : padding aéré, full width */
  #filters-column > aside.sq-filters:not(.compact) {
    margin: 0 16px;
    border-radius: 12px;
    padding: 18px 16px 120px; /* padding-bottom = place pour le sticky CTA */
    box-shadow: none;
    border: 1px solid var(--sq-border);
  }
  /* Espace généreux entre chaque groupe de filtres */
  #filters-column .sq-filter-group { margin-bottom: 22px !important; }
  #filters-column .sq-filter-group:last-of-type { margin-bottom: 16px !important; }
  /* En-têtes de section : plus grands et bien visibles */
  #filters-column .sq-filter-group h4 {
    font-size: .92rem;
    margin-bottom: 10px;
    color: var(--sq-navy);
    font-weight: 700;
  }
  /* Titre "Filtres" : caché dans le drawer (la pilule de drag + drawer suffisent) */
  #filters-column > aside.sq-filters:not(.compact) > .sq-filters-head { display: none; }
  /* Statut : cases à cocher en pleine largeur, espacées */
  #filters-column .sq-status-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #filters-column .sq-status-list label {
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid var(--sq-border);
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
  }
  /* Liste de chips (annonceurs, types d'annonces) : meilleurs touch-targets */
  #filters-column .sq-check-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid var(--sq-border);
    font-size: .9rem;
    margin-bottom: 6px;
    min-height: 44px;
  }
  /* Boutons multipick (Secteurs / Wilayas) : pleine largeur, hauteur confortable */
  #filters-column .sq-multipick-btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font-size: .95rem;
  }
  /* ─── Panel multipick : layout INLINE uniquement sur VRAI mobile (<768px).
       Sur mobile : INLINE pour rester dans le flux scrollable du drawer
         (sinon le panel sort du drawer ou se fait clipper par overflow:auto).
       Sur tablette/laptop (768-1080px) : OVERLAY (position:absolute) pour
         éviter le "décalage" visuel des filtres dessous quand on clique. ─── */
  #filters-column .sq-multipick.open .sq-multipick-panel {
    position: static;       /* annule position:absolute du desktop */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-top: 8px;
    box-shadow: none;
    border-radius: 10px;
    border: 1px solid var(--sq-border);
  }
  #filters-column .sq-multipick-options {
    max-height: 280px;      /* un peu plus haut sur mobile pour 8-10 options visibles */
  }
  #filters-column .sq-multipick-options label {
    padding: 12px 14px;
    min-height: 44px;       /* touch-target conforme WCAG 2.5.5 (44×44 min) */
    font-size: .92rem;
    border-bottom: 1px solid #f1f5f9;
  }
  #filters-column .sq-multipick-options label:last-child { border-bottom: none; }
  #filters-column .sq-multipick-actions {
    padding: 10px 12px;
    border-top: 1px solid var(--sq-border);
    gap: 8px;
  }
  #filters-column .sq-multipick-actions button {
    min-height: 40px;
    padding: 8px 14px;
    font-size: .85rem;
    flex: 1;
  }
  #filters-column .sq-multipick-search {
    min-height: 44px;
    font-size: .95rem;
    padding: 12px 14px;
  }
  /* Date inputs : pleine largeur, plus de respiration */
  #filters-column .sq-date-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  #filters-column .sq-date-grid label {
    font-size: .82rem;
    color: var(--sq-muted);
    font-weight: 600;
  }
  #filters-column .sq-date-grid input {
    min-height: 48px;
    padding: 12px 14px;
  }
  /* CTA "Appliquer" : sticky en bas, bien visible */
  #filters-column #apply-filters {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: 18px 16px 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
    padding: 16px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    width: calc(100% - 32px);
  }
  /* Bouton enregistrer modèle : full-width sous CTA */
  #filters-column #save-search {
    margin: 10px 16px 0;
    width: calc(100% - 32px);
    padding: 12px !important;
  }
  /* Bouton réinitialiser : discret en bas */
  #filters-column #reset-filters {
    margin: 10px 16px 16px !important;
    padding: 12px !important;
    width: calc(100% - 32px) !important;
  }

  /* Champ "Mot-clé" : touch-target confort + bordure douce */
  #filters-column #f-keyword {
    min-height: 48px;
    padding: 12px 14px;
    font-size: .95rem;
    border-radius: 10px;
  }
  /* Recherches enregistrées : empilement vertical propre */
  #filters-column .sq-saved-searches .sq-saved-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  #filters-column .sq-saved-searches .sq-saved-item {
    padding: 10px 12px;
    min-height: 44px;
    font-size: .88rem;
  }
  /* Lorsque drawer ouvert : transformer le bouton toggle en "Fermer" rouge */
  body.sq-filters-open .sq-filters-mobile-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    left: auto;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
    z-index: 10001;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    justify-content: center;
  }
  body.sq-filters-open .sq-filters-mobile-toggle .sq-filters-mobile-toggle-icon,
  body.sq-filters-open .sq-filters-mobile-toggle .label,
  body.sq-filters-open .sq-filters-mobile-toggle .badge,
  body.sq-filters-open .sq-filters-mobile-toggle .chev { display: none; }
  body.sq-filters-open .sq-filters-mobile-toggle::after {
    content: '✕';
    font-size: 1.3rem;
    font-weight: 700;
  }
}

/* ─── Vue grille mobile forcée : 1 carte par ligne avec style "card" ─── */
@media (max-width: 720px) {
  .sq-listing.view-grid,
  .sq-listing.view-list {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 12px;
  }
}
@media (min-width: 721px) and (max-width: 1080px) {
  .sq-listing.view-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Detail page : 2 col → 1 col mobile */
@media (max-width: 899px) {
  .sq-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .sq-detail-grid > aside {
    margin-top: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Tablette / laptop (768–1080px) — multipick en OVERLAY (pas inline)
   ───────────────────────────────────────────────────────────────────────
   Sur tablette/laptop, le drawer mobile s'active mais on garde l'overlay
   pour éviter que l'ouverture du multipick fasse "descendre" tous les
   filtres suivants (effet de décalage visuel). Sur vrai mobile (<768px),
   le panel reste INLINE pour la fluidité du scroll au pouce.
═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1080px) {
  #filters-column .sq-multipick.open .sq-multipick-panel {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    width: max(320px, 100%) !important;
    max-width: calc(100vw - 48px) !important;
    min-width: 100% !important;
    margin-top: 0 !important;
    box-shadow: 0 16px 36px rgba(15,23,42,.22) !important;
    border-radius: 12px !important;
    border: 1px solid var(--sq-border) !important;
    z-index: 1000 !important;
    max-height: 60vh;
    overflow-y: auto;
  }
  /* Assure que le wrapper du multipick est position-relative pour ancrer
     le panel correctement (au cas où une règle parente ait reset). */
  #filters-column .sq-multipick { position: relative !important; }
}

/* Info-bar 5 cells → 2 cols tablette, 1 col mobile */
@media (max-width: 900px) {
  .sq-info-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
}
@media (max-width: 480px) {
  .sq-info-bar { grid-template-columns: 1fr !important; }
}

/* Toolbar listing : trier + view-toggle empilés mobile */
@media (max-width: 540px) {
  .sq-list-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
  }
  .sq-list-toolbar .right {
    justify-content: space-between !important;
    flex-wrap: wrap;
  }
}

/* Modales superadmin : full-screen mobile */
@media (max-width: 640px) {
  .sa-modal-box {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  /* Tableaux superadmin : scroll horizontal natif */
  .sa-table-wrap table { display: block; overflow-x: auto; }
}

/* Pages compte (mon-profil, préférences, favoris) : sidebar nav → stack */
@media (max-width: 880px) {
  .sq-account-shell {
    grid-template-columns: 1fr !important;
  }
  .sq-account-nav {
    position: static !important;
  }
}

/* Form rows (login / register / mon-profil) : grid-template-columns: 1fr 1fr → 1fr mobile */
@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr !important;
  }
}

/* Subscription badges : on garde lisible sur petits écrans */
@media (max-width: 480px) {
  .sq-sub-badge { font-size: .72rem !important; padding: 4px 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ▓▓▓  INTERNATIONALISATION — Sélecteur de langue + RTL Arabe  ▓▓▓
   ───────────────────────────────────────────────────────────────────────
   Bouton 🌐 FR ▾ dans le header avec menu déroulant Français / العربية /
   English. Bascule complète en RTL pour l'arabe avec polices Cairo
   (titres) et Tajawal (corps).
═══════════════════════════════════════════════════════════════════════ */

/* ─── Sélecteur de langue (header) ─── */
.sq-lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}
.sq-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1.5px solid var(--sq-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: var(--sq-navy);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  min-height: 36px;
}
.sq-lang-btn:hover {
  background: var(--sq-orange-50);
  border-color: var(--sq-orange);
  color: var(--sq-orange-600);
}
.sq-lang-globe { font-size: 1rem; }
.sq-lang-caret { font-size: .8rem; transition: transform .2s; }
.sq-lang-switcher.open .sq-lang-caret { transform: rotate(180deg); }
.sq-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .15);
  padding: 6px;
  display: none;
  z-index: 200;
}
.sq-lang-switcher.open .sq-lang-menu { display: block; }
.sq-lang-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--sq-navy);
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s;
}
.sq-lang-menu button:hover {
  background: var(--sq-orange-50);
  color: var(--sq-orange-600);
}
.sq-lang-menu button.active {
  background: var(--sq-orange);
  color: #fff;
}
.sq-lang-menu .flag { font-size: 1rem; }

/* En RTL : le menu déroulant ouvre à gauche du bouton */
body.sq-rtl .sq-lang-menu { right: auto; left: 0; }
body.sq-rtl .sq-lang-menu button { text-align: right; }
body.sq-rtl .sq-lang-switcher { margin-left: 0; margin-right: 6px; }

/* Pour mobile : le sélecteur reste accessible dans le menu burger */
@media (max-width: 920px) {
  .sq-lang-switcher { order: -1; margin: 12px 0; }
  .sq-lang-btn { width: 100%; justify-content: center; padding: 12px; font-size: 1rem; }
}

/* ─── Anti-FOUC sur les CTA login/register du header ────────────────────────
   Les pages HTML ont `<a id="cta-login" style="display:none;">` pour éviter
   un flash inverse chez les utilisateurs connectés. Mais pour les visiteurs
   NON connectés (95% des cas), ça créait un "flash" : page sans boutons →
   apparition après ~100ms (fetch session.php async).

   Solution : on override l'inline style via CSS conditionnel sur la classe
   `body.sq-auth-viewer` (toggled par safaqatdz-header.js après auth resolution).
     - Pas de classe → on est en mode visiteur (par défaut) → CTA visibles
     - .sq-auth-viewer → on est connecté → CTA cachés, auth-in visible
*/
body:not(.sq-auth-viewer) #cta-login,
body:not(.sq-auth-viewer) #cta-register {
  display: inline-block !important;
}
body.sq-auth-viewer #cta-login,
body.sq-auth-viewer #cta-register {
  display: none !important;
}
body:not(.sq-auth-viewer) #auth-in {
  display: none !important;
}
body.sq-auth-viewer #auth-in {
  display: inline-block !important;
}

/* ─── Cacher les blocs d'inscription/connexion pour utilisateurs connectés.
   N'importe quel élément avec la classe `sq-hide-when-viewer` est masqué
   quand body.sq-auth-viewer est posé par safaqatdz-header.js. Utilisé pour :
     - formulaire hero d'inscription (home.html)
     - bannières CTA "Créer mon compte" sur autres pages
*/
body.sq-auth-viewer .sq-hide-when-viewer {
  display: none !important;
}
/* Côté symétrique : éléments visibles uniquement pour utilisateurs connectés */
body:not(.sq-auth-viewer) .sq-show-when-viewer {
  display: none !important;
}

/* ─── Polices arabes : Cairo (titres) + Tajawal (corps) ─── */
/* ⚠️ Poids 500 + 600 ajoutés pour améliorer la lisibilité du texte courant */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

/* ─── BASCULE RTL : appliqué quand <html dir="rtl"> ou body.sq-rtl ─── */
html[dir="rtl"] body,
body.sq-rtl {
  font-family: 'Tajawal', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  text-align: right;
  /* ⚠️ L'arabe doit être en weight 600 minimum pour la lisibilité (Tajawal
     Regular est trop fin, même à 500). Couleur foncée forcée pour contraste. */
  font-weight: 600;
  color: #0f172a;
}

/* Boost ciblé sur tous les éléments de texte courant — assure une lisibilité
   uniforme en arabe (weight 600 + couleur foncée). */
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] span,
html[dir="rtl"] td,
html[dir="rtl"] th,
html[dir="rtl"] label,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] div,
body.sq-rtl p,
body.sq-rtl li,
body.sq-rtl span,
body.sq-rtl td,
body.sq-rtl th,
body.sq-rtl label,
body.sq-rtl input,
body.sq-rtl select,
body.sq-rtl textarea {
  font-weight: 600;
}

/* Menu de navigation principal : Cairo + weight 700 + couleur navy foncée
   (le menu était presque illisible en Tajawal Regular). */
html[dir="rtl"] .sq-nav a,
html[dir="rtl"] .sq-nav-link,
html[dir="rtl"] .sq-submenu a,
html[dir="rtl"] .sq-subnav a,
body.sq-rtl .sq-nav a,
body.sq-rtl .sq-nav-link,
body.sq-rtl .sq-submenu a,
body.sq-rtl .sq-subnav a {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  font-weight: 700;
  color: var(--sq-navy);
}
/* Boutons CTA / actions : Cairo 700 pour bien marquer */
html[dir="rtl"] button,
html[dir="rtl"] .sq-btn,
html[dir="rtl"] .sq-cta,
body.sq-rtl button,
body.sq-rtl .sq-btn,
body.sq-rtl .sq-cta {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  font-weight: 700;
}
/* Liens dans le contenu : poids 600 pour rester lisibles */
html[dir="rtl"] a,
body.sq-rtl a {
  font-weight: 600;
}

/* Couleurs grises (muted) forcées en plus foncé pour le contraste en arabe.
   Le gris moyen var(--sq-muted) = #5b6478 devient illisible avec Tajawal —
   on le force à #334155 (slate-700, lisible mais discret). */
html[dir="rtl"] .sq-muted,
html[dir="rtl"] .muted,
html[dir="rtl"] small,
html[dir="rtl"] .sq-detail-aside-meta,
html[dir="rtl"] .sq-card-meta,
html[dir="rtl"] [class*="-muted"],
body.sq-rtl .sq-muted,
body.sq-rtl .muted,
body.sq-rtl small,
body.sq-rtl [class*="-muted"] {
  color: #334155 !important;
  font-weight: 600;
}

/* Titres + éléments emphasis (strong, b) en Cairo bold */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] strong,
html[dir="rtl"] b,
body.sq-rtl h1,
body.sq-rtl h2,
body.sq-rtl h3,
body.sq-rtl h4,
body.sq-rtl h5,
body.sq-rtl h6,
body.sq-rtl strong,
body.sq-rtl b {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0; /* l'arabe n'aime pas le letter-spacing négatif */
}

/* Inversions logiques pour le layout principal */
body.sq-rtl .sq-header-inner,
body.sq-rtl .sq-subheader-inner,
body.sq-rtl .sq-footer-inner { direction: rtl; }
body.sq-rtl .sq-breadcrumb-trail { direction: rtl; }
body.sq-rtl .sq-nav { flex-direction: row-reverse; }
body.sq-rtl .sq-submenu { left: auto; right: 0; }

/* Flèches de pagination/breadcrumb : on inverse les caractères ‹ › */
body.sq-rtl .sq-nav-arrow[onclick*="back"]::before { content: '→'; }
body.sq-rtl .sq-nav-arrow[onclick*="forward"]::before { content: '←'; }
body.sq-rtl .sq-nav-arrow[onclick*="back"] { font-size: 0; }
body.sq-rtl .sq-nav-arrow[onclick*="forward"] { font-size: 0; }
body.sq-rtl .sq-nav-arrow[onclick*="back"]::before,
body.sq-rtl .sq-nav-arrow[onclick*="forward"]::before { font-size: 1.2rem; }

/* Champs formulaires : icônes leading deviennent trailing en RTL */
body.sq-rtl .sq-field-icon .lead-icon { left: auto; right: 14px; }
body.sq-rtl .sq-field-icon .sq-input { padding-left: 14px; padding-right: 44px; }
body.sq-rtl .sq-input-icon .ico { right: auto; left: 14px; }
body.sq-rtl .sq-input-icon .sq-input { padding-right: 14px; padding-left: 44px; }

/* Listings annonces : pas d'inversion structurelle (les cartes gardent le même
   layout), juste le texte qui s'aligne à droite */
body.sq-rtl .sq-ann h3,
body.sq-rtl .sq-ann-meta,
body.sq-rtl .sq-ann-meta-top { text-align: right; }

/* Sidebar filtres : conserve son ordre (à gauche du listing) — c'est le
   pattern admin standard en arabe aussi */

/* Boutons avec flèches "→" : on les inverse en arabe */
body.sq-rtl .sq-btn-cta span[aria-hidden] { transform: scaleX(-1); display: inline-block; }

/* Lightbox arabe : la toolbar verticale reste à droite (côté ouverture de
   lecture) — pas d'inversion ici */

/* Évite le FOUC : avant le chargement du dict, on a déjà posé dir=rtl sur <html> */
html.sq-rtl-preload body { font-family: 'Tajawal', sans-serif; }

/* ─── RTL : corrections spécifiques pour les chiffres et carousels ─── */
/* Les chiffres (25 000+, +500, 98%) doivent rester en lecture latine
   même en arabe. On force LTR sur les valeurs numériques. */
body.sq-rtl .sq-stat-value,
body.sq-rtl .sq-plan-card .price,
body.sq-rtl .sq-plan-card .price .num,
body.sq-rtl .sq-plan-card .price .unit,
body.sq-rtl .sq-stat-item .num,
body.sq-rtl .sq-stats-strip-item .num {
  direction: ltr;
  unicode-bidi: embed;
  text-align: center;
}

/* Témoignages carousel en RTL :
   ⚠️ NE PAS appliquer `direction: rtl` sur .sq-marquee ni .sq-marquee-track.
   Le track est piloté en JS via translateX négatif (assume un flow LTR),
   un bascule en RTL casse la position de départ et coupe la 1ʳᵉ carte
   sur la gauche. On garde donc l'infrastructure carousel en LTR
   et on ne bascule en RTL QUE le contenu interne des cartes. */
body.sq-rtl .sq-testimonials,
body.sq-rtl .sq-marquee,
body.sq-rtl .sq-marquee-track {
  direction: ltr;
}
/* Contenu de chaque témoignage : lisible naturellement en arabe */
body.sq-rtl .sq-testimonial,
body.sq-rtl .sq-testimonial p,
body.sq-rtl .sq-testimonial .who,
body.sq-rtl .sq-testimonial .sq-testimonial-author {
  direction: rtl;
  text-align: right;
}
/* L'auteur (avatar + nom) : avatar à droite, texte aligné à droite */
body.sq-rtl .sq-testimonial .sq-testimonial-author {
  flex-direction: row-reverse;
}
/* Flèches du carousel : on garde leur position d'origine (prev à gauche,
   next à droite) puisque le track reste en LTR. On inverse juste le
   chevron pour qu'il pointe dans le bon sens visuel en RTL. */
body.sq-rtl .sq-marquee-arrow.prev span,
body.sq-rtl .sq-marquee-arrow.next span { transform: scaleX(-1); display: inline-block; }

/* Grille de stats : direction RTL pour que l'ordre lecture suive la langue */
body.sq-rtl .sq-stats-grid,
body.sq-rtl .sq-stats-band,
body.sq-rtl .sq-stats-strip { direction: rtl; }

/* Multipick (filtres Secteurs / Wilayas) en RTL :
   - Le panel est ancré à droite du bouton (pas à gauche), sinon ses 380px
     débordent hors écran quand le bouton est proche du bord droit du viewport
     (la sidebar des filtres bascule à droite en RTL).
   - Les boutons d'action (Tout désélectionner / Fermer) restent en place.
   - La barre de recherche garde son alignement texte naturel (text-align:right
     hérité du dir=rtl du body). */
body.sq-rtl .sq-multipick-panel {
  left: auto;
  right: 0;
}
body.sq-rtl .sq-multipick-search { text-align: right; }
body.sq-rtl .sq-multipick-options label {
  flex-direction: row-reverse;
  text-align: right;
}
body.sq-rtl .sq-multipick-actions {
  flex-direction: row-reverse;
}

/* Plans tarifaires : ordre inversé en RTL pour cohérence visuelle */
body.sq-rtl .sq-plans-4 { direction: rtl; }
body.sq-rtl .sq-plan-card { text-align: right; }
body.sq-rtl .sq-plan-card ul li { text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════
   FIX CARTES ANNONCES — DÉBORDEMENT MOBILE
   ───────────────────────────────────────────────────────────────────────
   Sur viewport étroit (≤640px), les cartes .sq-ann avaient tendance à
   déborder à cause :
   - du grid-template-columns: 1fr 180px qui ne shrinkait pas vraiment
   - de min-width auto sur les enfants (Refs très longues type GROUP_…)
   - du padding 18px 20px trop large
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .sq-list-shell {
    padding: 14px 12px 30px !important;
  }
  .sq-listing.view-grid,
  .sq-listing.view-list,
  .sq-listing {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
  }
  .sq-ann {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 14px 14px !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    min-width: 0;
  }
  /* Tous les enfants des cartes : pas de min-width auto qui déborde */
  .sq-ann > *,
  .sq-ann *:not(.sq-ann-cta button):not(input) {
    min-width: 0;
    max-width: 100%;
  }
  /* Long IDs et refs : casser les mots longs */
  .sq-ann .sq-ann-meta,
  .sq-ann .sq-ann-meta-top,
  .sq-ann h3 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Titre : taille adaptée et tronquage propre */
  .sq-ann h3 {
    font-size: .95rem;
    line-height: 1.3;
  }
  /* CTA "Voir les détails" : pleine largeur sur mobile */
  .sq-ann .sq-ann-cta,
  .sq-ann button.sq-btn {
    width: 100%;
    justify-content: center;
  }
  /* Badges : ne dépassent jamais leur parent */
  .sq-ann .sq-badge,
  .sq-ann .sq-pill {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ▓▓▓  FILET DE SÉCURITÉ MOBILE GLOBAL  ▓▓▓
   ───────────────────────────────────────────────────────────────────────
   Bloc placé en fin de feuille pour gagner la cascade. Applique des règles
   défensives sur l'ensemble des pages pour garantir une bonne expérience
   mobile, même quand le code spécifique d'une page oublie un cas.
═══════════════════════════════════════════════════════════════════════ */

/* 1. Empêche tout scroll horizontal indésirable sur la page (cause #1 des
      bugs mobile : un élément qui dépasse fait basculer la page entière).
      On garde overflow:auto sur les conteneurs qui en ont vraiment besoin. */
html, body {
  max-width: 100%;
  overflow-x: clip; /* clip = comme hidden mais autorise position:sticky */
}

/* 2. Boîtes prévisibles partout (évite que padding/border fasse déborder) */
*, *::before, *::after { box-sizing: border-box; }

/* 3. Images et médias : jamais plus larges que leur conteneur */
img, video, iframe, canvas, svg, object { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 4. iOS auto-zoom : tout input < 16px déclenche un zoom à la saisie.
        On force 16px minimum sur les contrôles de formulaire. */
  input, select, textarea, .sq-input, .sq-select {
    font-size: 16px !important;
  }
  /* 5. Cibles tactiles : 44×44px minimum (Apple HIG) sur tous les boutons */
  button, .sq-btn, a.sq-btn {
    min-height: 44px;
  }
  /* 6. Boutons en pleine largeur dans les cartes formulaire (UX mobile pure) */
  .sq-form-card .sq-btn-block,
  .sq-form-card button[type=submit],
  .sq-login-form-card .sq-btn-block,
  .sq-account-card .sq-btn-block {
    width: 100%;
  }

  /* 7. Padding/marge réduits sur les cartes pour gagner de l'espace */
  .sq-form-card,
  .sq-login-form-card,
  .sq-account-card { padding: 18px 16px !important; }

  /* 8. Hero : titres plus compacts */
  .sq-hero h1 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; line-height: 1.15; }
  .sq-hero .lead { font-size: .95rem !important; }
  .sq-hero { padding: 28px 16px !important; }

  /* 9. Liste des règles password : force toujours 1 colonne, même en cas
        de cascade mal calibrée */
  ul.sq-pw-rules,
  ul.sq-pw-rules.open {
    column-count: 1 !important;
    columns: unset !important;
    grid-template-columns: 1fr !important;
  }
  ul.sq-pw-rules > li { width: 100% !important; flex: 1 1 100% !important; }

  /* 10. Modales : padding intérieur réduit, sticky footer respiré */
  .sq-modal { padding: 14px !important; max-width: calc(100vw - 16px) !important; }
  .sq-modal-grid { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* 11. Tables : scroll horizontal contrôlé plutôt que casse de la page */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* 12. Boutons des toolbars compactes : padding réduit */
  .sq-modal-foot { flex-wrap: wrap; gap: 8px; }
  .sq-modal-foot .sq-btn { flex: 1 1 auto; }

  /* 13. Liens de pied de carte (créer compte / équipe interne) : centrés */
  .sq-login-bottom-link,
  .sq-login-staff-link { font-size: .85rem; }

  /* 14. Header : éviter que les longs noms de compte cassent la mise en page */
  .sq-welcome .who strong { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 15. Footer : remettre les colonnes en mode liste empilée */
  .sq-footer-inner { gap: 18px !important; }

  /* 16. Sub-header (breadcrumb) : réduire pour laisser place au contenu */
  .sq-subheader { padding: 6px 12px; font-size: .82rem; }

  /* 17. Pricing / abonnements : 1 colonne avec scroll vertical naturel */
  .sq-pricing,
  .sq-plans-4 { grid-template-columns: 1fr !important; }

  /* 18. Sticky toolbars / barres d'action : respect safe-area iOS */
  .sq-lightbox-toolbar,
  #filters-column #apply-filters {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  }
}

/* Très petit (≤ 380 px) : encore plus compact */
@media (max-width: 380px) {
  .sq-form-card,
  .sq-login-form-card,
  .sq-account-card { padding: 14px 12px !important; border-radius: 14px !important; }
  .sq-hero h1 { font-size: 1.45rem !important; }
  .sq-hero .lead { font-size: .88rem !important; }
  .sq-btn { font-size: .88rem; padding: 10px 14px; }
}




/* ═══════════════════════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER (safaqatdz-cookies.js)
   ─────────────────────────────────────────────────────────────────────────── */
#sq-cookies-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: #fff;
  border-top: 1px solid var(--sq-border, #e2e8f0);
  box-shadow: 0 -10px 32px rgba(15, 23, 42, .12);
  padding: 14px 18px;
  transform: translateY(110%);
  transition: transform .25s ease;
}
#sq-cookies-banner.open { transform: translateY(0); }
.sq-cookies-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.sq-cookies-text { flex: 1 1 420px; min-width: 0; }
.sq-cookies-text strong {
  display: block;
  color: var(--sq-navy, #1e2a4a);
  font-size: .95rem;
  margin-bottom: 4px;
}
.sq-cookies-text p {
  margin: 0;
  color: var(--sq-muted, #64748b);
  font-size: .82rem;
  line-height: 1.5;
}
.sq-cookies-text p a {
  color: var(--sq-orange-600, #ea7016);
  text-decoration: none;
  font-weight: 600;
}
.sq-cookies-text p a:hover { text-decoration: underline; }
.sq-cookies-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sq-cookies-link {
  color: var(--sq-muted, #64748b);
  font-size: .82rem;
  text-decoration: none;
  padding: 6px 4px;
}
.sq-cookies-link:hover { color: var(--sq-orange-600, #ea7016); text-decoration: underline; }
@media (max-width: 720px) {
  #sq-cookies-banner { padding: 12px 14px; }
  .sq-cookies-actions { width: 100%; justify-content: flex-end; }
  .sq-cookies-actions .sq-btn { flex: 1 1 auto; }
}
body.sq-rtl #sq-cookies-banner { direction: rtl; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES LÉGALES (CGU + Politique de confidentialité)
   ─────────────────────────────────────────────────────────────────────────── */
.sq-legal-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 24px 60px;
}
.sq-legal-hero {
  background: linear-gradient(135deg, #1e2a4a 0%, #2a3a66 100%);
  color: #fff;
  border-radius: 16px;
  padding: 38px 36px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.sq-legal-hero::before {
  content: "";
  position: absolute;
  inset: -50% -20% auto auto;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(238,124,44,.25), transparent 70%);
  pointer-events: none;
}
.sq-legal-hero .sq-legal-eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f59e0b;
  margin-bottom: 8px;
}
.sq-legal-hero h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.4px;
  margin: 0 0 10px;
  position: relative;
}
.sq-legal-hero p {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.55;
  opacity: .92;
  max-width: 720px;
  position: relative;
}
.sq-legal-hero .sq-legal-updated {
  display: inline-block;
  margin-top: 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  position: relative;
}
.sq-legal-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) { .sq-legal-grid { grid-template-columns: 1fr; } }
.sq-legal-toc {
  position: sticky;
  top: 90px;
  background: #fff;
  border: 1px solid var(--sq-border, #e2e8f0);
  border-radius: 14px;
  padding: 18px 16px;
  font-size: .88rem;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.sq-legal-toc h4 {
  font-size: .78rem;
  font-weight: 700;
  color: var(--sq-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 10px;
}
.sq-legal-toc a {
  display: block;
  padding: 6px 10px;
  margin-bottom: 2px;
  color: var(--sq-navy, #1e2a4a);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.sq-legal-toc a:hover {
  background: var(--sq-orange-50, #fff7ee);
  border-left-color: var(--sq-orange-600, #ea7016);
  color: var(--sq-orange-700, #c95a0e);
}
@media (max-width: 900px) {
  .sq-legal-toc { position: static; max-height: none; }
}
.sq-legal-content {
  background: #fff;
  border: 1px solid var(--sq-border, #e2e8f0);
  border-radius: 14px;
  padding: 32px 36px;
}
@media (max-width: 720px) { .sq-legal-content { padding: 22px 18px; } }
.sq-legal-content section { scroll-margin-top: 100px; }
.sq-legal-content section + section { margin-top: 28px; }
.sq-legal-content h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--sq-navy, #1e2a4a);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sq-orange-50, #fff7ee);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.sq-legal-content h2 .num {
  color: var(--sq-orange-600, #ea7016);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.sq-legal-content h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sq-navy, #1e2a4a);
  margin: 18px 0 8px;
}
.sq-legal-content p,
.sq-legal-content li {
  color: #334155;
  font-size: .92rem;
  line-height: 1.65;
}
.sq-legal-content p { margin: 0 0 12px; }
.sq-legal-content ul, .sq-legal-content ol {
  margin: 6px 0 14px 20px;
  padding: 0;
}
.sq-legal-content li { margin-bottom: 6px; }
.sq-legal-content strong { color: var(--sq-navy, #1e2a4a); }
.sq-legal-content a {
  color: var(--sq-orange-600, #ea7016);
  text-decoration: none;
  font-weight: 600;
}
.sq-legal-content a:hover { text-decoration: underline; }
.sq-legal-callout {
  background: var(--sq-orange-50, #fff7ee);
  border-left: 4px solid var(--sq-orange-600, #ea7016);
  padding: 14px 16px;
  border-radius: 0 10px 10px 0;
  margin: 14px 0;
  font-size: .9rem;
  color: var(--sq-navy, #1e2a4a);
}
.sq-legal-callout strong { display: block; margin-bottom: 4px; }
.sq-legal-back-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  padding: 8px 16px;
  background: var(--sq-bg, #f8fafc);
  border: 1px solid var(--sq-border, #e2e8f0);
  border-radius: 8px;
  color: var(--sq-navy, #1e2a4a);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}
.sq-legal-back-top:hover { background: var(--sq-orange-50, #fff7ee); }
body.sq-rtl .sq-legal-toc a { border-left: 0; border-right: 3px solid transparent; }
body.sq-rtl .sq-legal-toc a:hover { border-right-color: var(--sq-orange-600, #ea7016); }
body.sq-rtl .sq-legal-callout { border-left: 0; border-right: 4px solid var(--sq-orange-600, #ea7016); border-radius: 10px 0 0 10px; }


/* ═══════════════════════════════════════════════════════════
   Phase 34 (27/06/2026) — Fix débordement mobile hero
   Cause : <h1> flex column avec span FR + span AR (RTL) qui ne
   s'enroulait pas correctement → poussait tout le hero hors viewport.
   Solution : forcer max-width 100%, overflow-wrap, isolate RTL.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  body { overflow-x: hidden; }
  .sq-hero,
  .sq-hero-inner,
  .sq-hero-text,
  .sq-form-card {
    max-width: 100%;
    box-sizing: border-box;
  }
  .sq-hero h1,
  .sq-hero h1 span,
  .sq-hero p.lead {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .sq-hero h1 .hero-ar {
    text-align: right;
    direction: rtl;
    unicode-bidi: isolate;
  }
}

/* ═══════════════════════════════════════════════════════════
   Phase 34b (28/06/2026) — Fix anti-débordement UNIVERSEL
   Empêche tout scroll horizontal accidentel, peu importe modèle/taille.
   ═══════════════════════════════════════════════════════════ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}
img, video, iframe, table, pre, code {
  max-width: 100%;
}
.sq-hero,
.sq-hero-inner,
.sq-hero-text,
.sq-hero-split,
.sq-form-card,
.sq-login-form-card {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* ═══════════════════════════════════════════════════════════
   Phase 34c (28/06/2026) — Fix CENTRAGE mobile hero
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .sq-hero { padding: 18px 16px !important; }
  .sq-hero-inner {
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  .sq-hero-split {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .sq-hero h1 .hero-ar {
    display: block;
    text-align: right;
    direction: rtl;
    unicode-bidi: isolate;
    width: 100%;
    box-sizing: border-box;
  }
  .sq-form-card,
  .sq-login-form-card,
  .sq-account-card {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .sq-hero h1 .hero-fr {
    display: block;
    text-align: left;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   Phase 38c (28/06/2026) — Lightbox mobile FIT-TO-SCREEN FORCÉ
   CSS pur, indépendant du JS transform. L'image remplit 95vw / 80vh.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .sq-lightbox-stage {
    padding: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
  }
  .sq-lightbox-content {
    width: 95vw !important;
    max-width: 95vw !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform-origin: center center !important;
  }
  .sq-lightbox-content img {
    max-width: 100% !important;
    max-height: calc(100vh - 160px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

/* Phase 38d : force transform scale(1) initial sur mobile (le scale > 1 du
   user via boutons + reste autorisé, mais le scale auto reste neutre) */
@media (max-width: 720px) {
  .sq-lightbox-content[style*="transform"] {
    /* L'override JS lbContent.style.transform sera respecté pour user-zoom */
  }
  /* Assure que par défaut sans transform, le CSS fit-to-screen marche */
  .sq-lightbox.open .sq-lightbox-content {
    transform-origin: center center !important;
  }
}

/* ⚡ FIX FINAL — Menu seul en fixed (subheader restauré 2026-07-13 — fil d'Ariane) */
/* .sq-subheader { display: none !important; } — désactivé 2026-07-13 */
.sq-subheader-embedded { display: flex !important; align-items: center; gap: 10px; padding: 4px 24px; font-size: .82rem; border-top: 1px solid var(--sq-border,#e6e9f2); background: #fafafa; }
.sq-subheader-embedded .sq-subheader-inner { padding: 0 !important; display: flex; align-items: center; gap: 10px; width: 100%; }
.sq-subheader-embedded .sq-subheader-v2bee { display: none; }
.sq-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
}
/* Padding-top géré dynamiquement par sticky-sync.js selon présence du bandeau */

/* Header 100% opaque (plus de blur qui fait flou) */
.sq-header { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Titre hero announcements plus compact (1 ligne) */
[data-i18n="announcements_page.title"] { font-size: clamp(1.4rem, 2.6vw, 2rem) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 0 6px 0 !important; }
[data-i18n="announcements_page.subtitle"] { font-size: .95rem !important; margin: 0 0 12px 0 !important; }

/* ⚡ Bandeau démo mobile compact */
@media (max-width: 640px) {
  #sq-demo-counter { padding: 4px 8px !important; font-size: .78rem !important; gap: 6px !important; }
  #sq-demo-counter a { padding: 4px 10px !important; font-size: .75rem !important; }
  #sq-demo-counter span:first-child { font-size: .9rem !important; }
}

/* Padding-top base pour compenser le menu fixed */
body { padding-top: 90px; }
@media (max-width: 640px) { body { padding-top: 80px; } }


/* BODY_PUSH_UNDER_HEADER_v1 SUPPRIMÉE 2026-07-17 (conflit avec fix ci-dessus) */

/* Sub-header en position static (visible naturellement en haut, disparait au scroll) */
body.has-sub-header .sq-subheader {
  position: fixed !important;
  top: 108px;
  left: 0; right: 0;
  z-index: 55 !important;
}
body.has-sub-header { padding-top: 148px !important; }
@media (max-width: 760px) {
  body.has-sub-header .sq-subheader { top: 100px; }
  body.has-sub-header { padding-top: 200px !important; }
}
@media (max-width: 480px) {
  body.has-sub-header .sq-subheader { top: 88px; }
  body.has-sub-header { padding-top: 220px !important; }
}


/* ═══ FIX MOBILE FORCE 2026-07-17 — Hero Annonces search bar ═══ */
@media (max-width: 720px) {
  .sq-page-intro {
    padding: 16px 12px !important;
    box-sizing: border-box !important;
  }
  .sq-page-intro-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .sq-page-intro-inner > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  .sq-page-intro .sq-search-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}



}





/* ═══ TEST 2026-07-17 — Masquer fil d'Ariane pour identifier la cause ═══ */
/* TEST 2026-07-17 : sub-header caché pour vérifier si titre hero mobile visible */
html body.has-sub-header nav.sq-subheader { display: none !important; }
html body.has-sub-header { padding-top: 100px !important; }
@media (max-width: 760px) { html body.has-sub-header { padding-top: 90px !important; } }


/* ★ Padding pour ne pas chevaucher l'étoile favoris (top-right) */
.sq-sector-chips-card{padding-right:52px}


/* ★ 2026-07-26 — FIX affichage toolbar lightbox mobile (bug boutons invisibles) */
@media (max-width: 900px) {
  .sq-lightbox.open .sq-lightbox-toolbar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99998 !important;
    pointer-events: auto !important;
  }
  .sq-lightbox.open .sq-lightbox-toolbar .sq-lb-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Padding stage augmenté pour ne pas masquer la toolbar */
  .sq-lightbox.open .sq-lightbox-stage {
    padding-bottom: 100px !important;
  }
}


/* ★ 2026-07-30 — Masquer bottom-nav mobile quand la lightbox est ouverte */
body:has(.sq-lightbox.open) .sq-bottom-nav,
body:has(#img-lightbox.open) .sq-bottom-nav,
.sq-lightbox.open ~ .sq-bottom-nav {
  display: none !important;
}
/* Fallback JS : classe posée sur body quand lightbox active */
body.sq-lb-open .sq-bottom-nav,
body.sq-lb-open [class*="bottom-nav"],
body.sq-lb-open .safqa360-bottom-nav { display: none !important; }


/* ★ 2026-07-30 — Toolbar lightbox en HAUT sur mobile (au lieu de bas — bottom-nav conflict) */
@media (max-width: 900px) {
  .sq-lightbox.open .sq-lightbox-toolbar {
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    bottom: auto !important;
    left: 8px !important;
    right: 72px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    contain: paint !important;   /* force le clipping des enfants */
    -webkit-overflow-scrolling: touch !important;
  }
  /* Cacher le bouton Partager sur très petits écrans pour éviter overflow */
  @media (max-width: 480px) {
    
  }
  /* Stage : padding-top augmenté pour ne pas passer sous la toolbar */
  .sq-lightbox.open .sq-lightbox-stage {
    padding-top: 90px !important;
    padding-bottom: 20px !important;
  }
  /* Bouton close reste en haut à droite, mais on l'écarte de la toolbar */
  .sq-lightbox .sq-lb-btn.sq-lb-close {
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: 8px !important;
    z-index: 999999 !important;
  }
  /* Flèches nav : en bas au-dessus de la bottom-nav */
  .sq-lightbox .sq-lb-arrow {
    bottom: 90px !important;
  }
}


/* ★ Supprimer bouton "Télécharger PNG" (JPEG suffit) */
#lb-dl-png { display: none !important; }


/* ★ 2026-07-30 v3 — Toolbar mobile : icônes seules, gap 10px, clicks OK */
@media (max-width: 900px) {
  .sq-lightbox.open .sq-lightbox-toolbar {
    gap: 10px !important;
    padding: 6px 8px !important;
    justify-content: center !important;
    overflow: visible !important;      /* pas de clip = clicks OK */
  }
  .sq-lightbox.open .sq-lightbox-toolbar .sq-lb-btn {
    min-width: 38px !important;
    width: 38px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
    pointer-events: auto !important;
  }
  /* Masquer texte des boutons composés (garder emoji uniquement) */
  .sq-lightbox.open .sq-lightbox-toolbar .lb-lbl {
    display: none !important;
  }
  /* Masquer compteur, % zoom, séparateurs */
  .sq-lightbox.open .sq-lightbox-toolbar .sq-lb-counter,
  .sq-lightbox.open .sq-lightbox-toolbar .sq-lb-zoom-level,
  .sq-lightbox.open .sq-lightbox-toolbar .sq-lb-sep {
    display: none !important;
  }
}


/* ★ 2026-07-31 — APK iOS : activer l'appui long natif sur les images de la lightbox */
.sq-lightbox img,
.sq-lightbox-content img,
.sq-lightbox-stage img {
  -webkit-touch-callout: default !important;
  -webkit-user-select: auto !important;
  user-select: auto !important;
  -webkit-user-drag: auto !important;
  pointer-events: auto !important;
}