/* ============================================================
   atlas® — Dashboard typologie (partagé) : centré + responsive
   Utilisé par services-marques / services-talents / services-designers
   Données : window.ATLAS_SERVICES (atlas.js) + window.ATLAS_SVC_GEN (services-data.js)
   Construit par assets/js/dashboard.js depuis .dash[data-aud]
============================================================ */
/* centré sous la nav : gap haut = gap bas (le haut inclut la hauteur de la nav fixe : 16+56) */
.svc-tool { display: flex; align-items: center; justify-content: center; min-height: 100svh;
  padding: calc(16px + 56px + 24px) clamp(16px,3vw,28px) 24px; }

.dash {
  --ac: #3b82f6;
  width: 100%; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 290px 1fr;
  height: 780px; min-height: 780px; max-height: 780px;     /* hauteur figée (plus haute), scroll interne */
  border: 1px solid var(--border-light); border-radius: var(--r-xl);
  overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-card);
}
.dash-side { background: var(--bg-secondary); border-right: 1px solid var(--border-light); overflow: auto; }

/* en-tête sidebar : logo + typologie + "Dashboard" */
.dash-head { position: sticky; top: 0; z-index: 1; background: var(--bg-secondary);
  padding: 22px 16px 14px; border-bottom: 1px solid var(--border-light); }
.dash-head .k { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-label);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ac); font-weight: 700; }
.dash-logo { height: 13px; width: auto; filter: invert(1); display: block; transform: translateY(1px); }
.dash-head .t { display: flex; align-items: center; gap: 9px; font-family: var(--font-display);
  font-size: 22px; letter-spacing: -.02em; margin-top: 6px; }
.dash-head .ico { display: inline-grid; grid-template-columns: repeat(2,5px); grid-auto-rows: 5px; gap: 3px; }
.dash-head .ico i { width: 5px; height: 5px; border-radius: 1.5px; background: var(--text-primary); }
.dash-head .ico i:nth-child(2) { background: var(--ac); }

.dash-nav { padding: 12px 12px 16px; }
.dash-grp { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none;
  border: 0; border-radius: var(--r-sm); padding: 10px 10px; cursor: pointer; font-size: 13.5px;
  color: var(--text-secondary); transition: background .12s, color .12s; }
.dash-grp:hover { background: rgba(0,0,0,.04); color: var(--text-primary); }
.dash-grp.on { background: var(--bg-card); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-sm); }
.dash-grp .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); flex: none; }
/* barre "stories" (concept responsive n°9) : ces éléments ne servent qu'en <=860px, masqués en desktop */
.dg-ring { display: none; }
.dg-short { display: none; }

.dash-main { padding: clamp(22px,2.5vw,34px); overflow-y: scroll; scrollbar-gutter: stable; }
.dash-main .crumb { font-family: var(--font-label); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.dash-main h3 { font-family: var(--font-label); font-size: clamp(22px,2.6vw,30px); letter-spacing: -.02em; }
.dash-main .lead2 { color: var(--text-secondary); font-size: 14px; margin-top: 6px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 14px; margin-top: 22px; }

.svc-card2 { border: 1px solid var(--border-light); border-radius: var(--r-lg); padding: 20px;
  transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s; }
.svc-card2:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); border-color: color-mix(in srgb, var(--ac) 35%, transparent); }
.svc-ic { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  color: var(--ac); background: color-mix(in srgb, var(--ac) 12%, transparent); }
.svc-ic svg { width: 25px; height: 25px; display: block; }
/* le NOM du service est le titre de la carte — police "label" (Helvetica Neue), majuscules, comme les titres typologie */
.svc-card2 .nm { font-family: var(--font-label); font-size: clamp(12.75px,1.02vw,14px); font-weight: 700;
  letter-spacing: 0; line-height: 1.25; text-transform: uppercase; color: var(--text-primary);
  display: block; margin: 14px 0 0; }
.svc-card2 .ds { color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { font-size: 11px; color: var(--text-secondary); background: var(--bg-secondary); border-radius: var(--r-pill); padding: 4px 10px; }
/* chips format : même police que les chips d'usage (plus de mono), garde l'outline */
.chip.fmt { color: var(--text-tertiary); background: none; border: 1px solid var(--border-light); }

/* responsive : sidebar -> barre d'onglets horizontale, contenu dessous */
@media (max-width: 860px) {
  .svc-tool { display: block; min-height: 0; padding: calc(12px + 52px + 16px) 14px 40px; }
  .dash { grid-template-columns: 1fr; height: auto; min-height: 0; max-height: none; }
  .dash-side, .dash-main { min-width: 0; }
  .dash-side { border-right: 0; border-bottom: 1px solid var(--border-light); overflow: visible; position: sticky; top: 0; z-index: 2; }
  .dash-head { position: static; padding: 16px 16px 10px; }
  /* --- barre "stories" : cercles de catégories scrollables (concept responsive n°9) --- */
  /* les bulles se PARTAGENT la largeur (flex:1) → les 5 tiennent toujours, quel que
     soit l'écran, sans crop (avant : width:60px fixe + scroll → "Brand" coupé <430px). */
  .dash-nav { display: flex; gap: 8px; overflow-x: auto; padding: 8px clamp(10px,3vw,15px) 14px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; }
  .dash-nav::-webkit-scrollbar { display: none; }
  .dash-grp { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 7px;
    background: none; border: 0; border-radius: 0; padding: 2px 0; }
  .dash-grp:hover { background: none; color: var(--text-secondary); }
  .dash-grp.on { background: none; box-shadow: none; font-weight: 500; }
  .dash-grp .d { display: none; }
  .dg-ring { display: flex; width: clamp(44px,13vw,56px); height: clamp(44px,13vw,56px); border-radius: 50%; padding: 2.5px; flex: none;
    background: var(--border-medium); transition: background .18s var(--ease-out); }
  .dash-grp.on .dg-ring { background: linear-gradient(135deg, var(--ac), #8b5cf6); }
  .dg-ico { width: 100%; height: 100%; border-radius: 50%; background: var(--bg-card);
    display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: color .18s; }
  .dash-grp.on .dg-ico { color: var(--ac); }
  .dg-ico svg { width: clamp(20px,5.8vw,24px); height: clamp(20px,5.8vw,24px); }
  .dg-lab { display: block; width: 100%; }
  .dg-full { display: none; }
  .dg-short { display: block; font-size: clamp(8.5px,2.4vw,9.5px); line-height: 1.15; text-align: center;
    color: var(--text-secondary); font-weight: 500; }
  .dash-grp.on .dg-short { color: var(--text-primary); font-weight: 600; }
  .dash-main { overflow: visible; max-height: none; padding: 22px 16px 26px; }
  .dash-grid { grid-template-columns: minmax(0,1fr); }
}

/* ===== Bloc "Réalisations" (option 9 : bande scrollable de vignettes + flèche) ===== */
.svc-card2 { position: relative; }
.ex { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-light); }
.ex-label { font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 9px; }
.ex-stripwrap { display: flex; align-items: center; gap: 10px; }
.ex-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; flex: 1; min-width: 0; scrollbar-width: thin; }
.ex-strip::-webkit-scrollbar { height: 5px; }
.ex-strip::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 10px; }
.thumb { width: 64px; height: 64px; flex: none; position: relative; padding: 0; border-radius: var(--r-sm);
  overflow: hidden; cursor: pointer; border: 1px solid var(--border-light); background: var(--bg-secondary);
  appearance: none; -webkit-appearance: none; transition: transform .15s var(--ease-out), box-shadow .15s; }
.thumb:hover { transform: scale(1.04); box-shadow: var(--shadow-sm); z-index: 2; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.thumb:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.ex-go { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-medium); background: var(--bg-card);
  color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  flex: none; transition: background .12s, color .12s; }
.ex-go:hover { background: var(--ac); color: #fff; border-color: var(--ac); }
.ex-go svg { width: 16px; height: 16px; }

/* ===== Lightbox réalisations — flou Safari-safe : backdrop-filter UNIQUEMENT sur .open, jamais animé ===== */
.lb { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: clamp(16px,4vw,48px); }
.lb.open { display: flex; background: rgba(10,10,12,.78); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.lb-stage { position: relative; max-width: min(1100px,100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lb-media { max-width: 100%; max-height: 78vh; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); background: #111; line-height: 0; }
.lb-media img { display: block; max-width: min(88vw,1000px); max-height: 78vh; width: auto; height: auto; object-fit: contain;
  -webkit-user-drag: none; user-select: none; }
.lb-cap { font-family: var(--font-label); font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 12px; }
.lb-cap .ttl { font-weight: 600; }
.lb-count { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.6); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: #fff; opacity: .78; padding: 10px; transition: opacity .12s, transform .12s; }
.lb-nav:hover { opacity: 1; }
.lb-nav svg { width: 30px; height: 30px; }
.lb-prev { left: -6px; } .lb-next { right: -6px; }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }
.lb-close { position: fixed; top: 18px; right: 20px; background: none; border: 0; color: #fff; opacity: .8; cursor: pointer; padding: 8px; }
.lb-close:hover { opacity: 1; }
.lb-close svg { width: 24px; height: 24px; }
@media (max-width: 640px) {
  .lb-nav { padding: 6px; } .lb-nav svg { width: 24px; height: 24px; }
  .lb-prev { left: -2px; } .lb-next { right: -2px; }
}