/* Rendu déclaratif des objets Synex : réemploie les variables de l'hôte, avec des repli sûrs. */

/* ── Variables de repli (surchargées par styles.css ou hostContext) ── */
:root {
  --v-fond: var(--bg-app, var(--fond, #ffffff));
  --v-texte: var(--text-primary, var(--texte, #1b1b1b));
  --v-surface: var(--bg-surface, color-mix(in srgb, var(--v-texte) 6%, var(--v-fond)));
  --v-discret: var(--text-secondary, var(--discret, #5c5c5c));
  --v-muted: var(--text-muted, var(--discret, #8a8a8a));
  --v-accent: var(--accent, #7c6cff);
  --v-sur-accent: var(--sur-accent, #ffffff);
  --v-bord: var(--border-controle, var(--bord, #8a8a8a));
  --v-subtle: var(--border-subtle, rgba(0,0,0,.12));
  --v-plein: var(--bg-surface, var(--plein-repli, #ffffff));
  --v-rayon-plateau: var(--rayon-plateau, 22px);
  --v-rayon-case: var(--rayon-case, 16px);
  --v-espace-1: var(--espace-1, 4px);
  --v-espace-2: var(--espace-2, 8px);
  --v-espace-3: var(--espace-3, 12px);
  --v-espace-4: var(--espace-4, 16px);
  --v-titre-case: var(--t-titre-case, 15px);
  --v-texte-size: var(--t-texte, 14px);
  --v-aide: var(--t-aide, 12px);
  --v-repere: var(--t-repere, 11px);

  /* Palette de données dérivée de l'accent de l'hôte (teinte conservée, ajustée par la garde). */
  --c1: color-mix(in oklab, var(--v-accent) 45%, #0f9d8a);
  --c2: color-mix(in oklab, var(--v-accent) 45%, #e8590c);
  --c3: color-mix(in oklab, var(--v-accent) 45%, #3b82f6);
  --c4: color-mix(in oklab, var(--v-accent) 45%, #8b5cf6);
  --c5: color-mix(in oklab, var(--v-accent) 45%, #e11d74);
  --c6: color-mix(in oklab, var(--v-accent) 45%, #65a30d);
  --c7: color-mix(in oklab, var(--v-accent) 45%, #d97706);
  --c8: color-mix(in oklab, var(--v-accent) 45%, #0891b2);
}

/* ── Verre en trois couches ── */
.vue-decl {
  display: flex; flex-direction: column; gap: var(--v-espace-3);
  padding: var(--v-espace-4);
  border-radius: var(--v-rayon-plateau);
  /* Le plateau est transparent : le fond uni mesurable est celui de la page (body).
     Les dégradés et halos sont réservés aux pseudo-éléments décoratifs (invariant I6). */
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--v-bord) 35%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 24px 60px -18px rgba(0,0,0,.35);
  position: relative;
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
}
/* Couche 1 (ambiance) : halo/dégradé décoratif, jamais sur l'élément mesuré. */
.vue-decl::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(160deg, color-mix(in srgb, var(--v-surface) 90%, transparent), color-mix(in srgb, var(--v-surface) 70%, transparent));
}
/* Couche 2 (liseré) : dégradé blanc découpé par masque. */
.vue-decl::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.vue-decl .case,
.vue-decl__section,
.vue-decl__saisie,
.vue-decl__filtres,
.vue-decl__onglets,
.vue-decl__callout,
.vue-decl__kpi,
.vue-decl__tableau-wrap,
.vue-decl__graphique {
  /* Transparent par défaut : le fond uni mesurable est le body (invariant I6).
     Les bordures et ombres conservent la hiérarchie visuelle. */
  background: transparent;
  border: 1px solid var(--v-subtle);
  border-radius: var(--v-rayon-case);
  padding: var(--v-espace-3);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.2);
}

/* ── Composants /2 inchangés ── */
.vue-decl__titre { margin: 0; font-size: var(--v-titre-case); font-weight: 700; color: var(--v-texte); }
.vue-decl__texte { white-space: pre-wrap; margin: 0; font-size: var(--v-texte-size); color: var(--v-discret); }
.vue-decl__champs { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: 4px var(--v-espace-3); margin: 0; font-size: var(--v-texte-size); }
.vue-decl .pastille { align-self: flex-start; }
.vue-decl__champs dt { overflow-wrap: anywhere; font-size: var(--v-aide); color: var(--v-muted); }
.vue-decl__champs dd { white-space: pre-wrap; margin: 0; color: var(--v-texte); overflow-wrap: anywhere; }
.vue-decl__boutons { display: flex; flex-wrap: wrap; gap: var(--v-espace-2); }
.vue-decl__inconnu { margin: 0; font-size: var(--v-aide); color: var(--v-muted); }
.vue-decl__etapes { margin: 0; padding-left: var(--v-espace-4); font-size: var(--v-texte-size); color: var(--v-discret); }
.vue-decl__etapes [aria-current] { color: var(--v-texte); font-weight: 700; }
.vue-decl__jauge, .vue-decl__saisie, .vue-decl__saisie label { display: flex; flex-direction: column; gap: var(--v-espace-2); font-size: var(--v-texte-size); }
.vue-decl__jauge progress { width: 100%; accent-color: var(--v-texte); }
.vue-decl__section { font-size: var(--v-texte-size); color: var(--v-texte); }
.vue-decl__section summary { cursor: pointer; margin-bottom: var(--v-espace-2); }
.vue-decl__lien { color: var(--v-texte); font-size: var(--v-texte-size); text-underline-offset: 3px; }
.vue-decl__saisie textarea, .vue-decl__saisie input, .vue-decl__saisie select {
  font: inherit; color: var(--v-texte); background: var(--v-fond);
  border: 1px solid var(--v-bord); border-radius: var(--v-rayon-case); padding: var(--v-espace-2);
  resize: vertical; max-width: 100%; box-sizing: border-box;
}
.vue-decl__saisie small, .vue-decl__erreur { font-size: var(--v-aide); color: var(--v-discret); }
.vue-decl__erreur:empty { display: none; }

.vue-decl .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--v-espace-2);
  padding: var(--v-espace-2) var(--v-espace-4); border-radius: var(--v-rayon-case);
  font: inherit; font-size: var(--v-texte-size); font-weight: 600;
  background: var(--v-fond); border: 1px solid var(--v-bord); color: var(--v-texte); cursor: pointer;
}
.vue-decl .bouton--plein { background: var(--v-accent); border-color: var(--v-accent); color: var(--v-sur-accent); }
.vue-decl .bouton:disabled { opacity: .6; cursor: default; }

/* ── Présence (collègue vivant) ── */
.vue-decl__presence {
  display: flex; align-items: center; gap: var(--v-espace-3);
  --tint: var(--v-accent);
}
.presence__figure {
  position: relative; width: 80px; height: 80px; flex: none;
  display: grid; place-items: end center;
}
.presence__figure--sans-image { background: color-mix(in srgb, var(--tint) 20%, transparent); border-radius: 50%; }
.presence__img {
  width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  border-radius: 50%; opacity: 1; transition: opacity .45s cubic-bezier(.2,.8,.2,1), filter .4s;
  animation: respire 5.2s ease-in-out infinite;
}
.presence__sol {
  position: absolute; left: 50%; bottom: 2%; width: 70%; height: 8%; translate: -50% 0;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.32), transparent);
}
.presence__halo {
  position: absolute; inset: -8%; border-radius: 50%; border: 2px solid var(--tint);
  opacity: 0; pointer-events: none;
}
.presence__pense, .presence__frappe, .presence__bulles, .presence__badge, .presence__eclats {
  position: absolute; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.presence__pense { right: -2%; top: 10%; display: flex; gap: 3px; }
.presence__pense i { width: 6px; height: 6px; border-radius: 50%; background: var(--v-texte); opacity: .35; }
.presence__frappe { right: -8%; bottom: 28%; display: flex; gap: 3px; padding: 4px 7px; border-radius: 99px;
  background: var(--v-plein); border: 1px solid var(--v-subtle); }
.presence__frappe i { width: 4px; height: 4px; border-radius: 50%; background: var(--tint); }
.presence__bulles { left: -10%; top: 6%; width: 120%; }
.presence__bulles b { position: absolute; padding: 3px 6px; border-radius: 10px 10px 10px 2px;
  background: var(--v-plein); border: 1px solid var(--v-subtle); display: flex; gap: 2px; }
.presence__bulles b:nth-child(2) { right: 0; top: 10px; border-radius: 10px 10px 2px 10px; }
.presence__bulles i { width: 3px; height: 3px; border-radius: 50%; background: var(--v-discret); }
.presence__badge {
  right: -4%; top: -2%; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--v-plein);
  box-shadow: 0 3px 8px -3px rgba(0,0,0,.35);
}
.presence__badge svg { width: 13px; height: 13px; }
.presence__eclats { inset: 0; }
.presence__eclats b { position: absolute; width: 7px; height: 7px; background: #ffd65a;
  clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); opacity: 0; }
.presence__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.presence__nom { font-size: var(--v-texte-size); font-weight: 700; color: var(--v-texte); }
.presence__mot { font-size: var(--v-aide); color: var(--v-discret); }
.presence__avec { font-size: var(--v-aide); color: var(--v-muted); }

/* États */
.vue-decl__presence[data-etat="attend"] .presence__halo { opacity: 1; animation: halo 2s ease-out infinite; }
.vue-decl__presence[data-etat="attend"] .presence__img { animation-name: penche; }
.vue-decl__presence[data-etat="reflechit"] .presence__pense,
.vue-decl__presence[data-etat="reflechit"] .presence__pense i { opacity: 1; }
.vue-decl__presence[data-etat="reflechit"] .presence__pense i { animation: point 1.3s infinite; }
.vue-decl__presence[data-etat="reflechit"] .presence__pense i:nth-child(2) { animation-delay: .2s; }
.vue-decl__presence[data-etat="reflechit"] .presence__pense i:nth-child(3) { animation-delay: .4s; }
.vue-decl__presence[data-etat="reflechit"] .presence__img { animation-name: songe; }
.vue-decl__presence[data-etat="travaille"] .presence__frappe { opacity: 1; }
.vue-decl__presence[data-etat="travaille"] .presence__frappe i { animation: point .9s infinite; }
.vue-decl__presence[data-etat="travaille"] .presence__frappe i:nth-child(2) { animation-delay: .15s; }
.vue-decl__presence[data-etat="travaille"] .presence__frappe i:nth-child(3) { animation-delay: .3s; }
.vue-decl__presence[data-etat="travaille"] .presence__img { animation-name: bosse; }
.vue-decl__presence[data-etat="ecoute"] .presence__img,
.vue-decl__presence[data-etat="reunion"] .presence__img { animation-name: penche-doux; }
.vue-decl__presence[data-etat="reunion"] .presence__bulles { opacity: 1; }
.vue-decl__presence[data-etat="reunion"] .presence__bulles b:nth-child(1) i { animation: point 1.6s infinite; }
.vue-decl__presence[data-etat="reunion"] .presence__bulles b:nth-child(2) i { animation: point 1.6s .8s infinite; }
.vue-decl__presence[data-etat="reussi"] .presence__badge { opacity: 1; background: #2fbf71; color: #fff; animation: pop .5s cubic-bezier(.2,.8,.2,1) both; }
.vue-decl__presence[data-etat="reussi"] .presence__eclats b { animation: eclat 1.1s cubic-bezier(.2,.8,.2,1) both; }
.vue-decl__presence[data-etat="echec"] .presence__badge { opacity: 1; background: #ffb02e; color: #fff; animation: pop .5s cubic-bezier(.2,.8,.2,1) both; }
.vue-decl__presence[data-etat="echec"] .presence__img { animation: secoue .5s 1, respire 5.2s 1s ease-in-out infinite; filter: saturate(.55) brightness(.94); }
.vue-decl__presence[data-etat="pause"] .presence__badge { opacity: 1; background: #6f7794; color: #fff; }
.vue-decl__presence[data-etat="pause"] .presence__img { animation-duration: 9s; filter: brightness(.82); }
.vue-decl__presence[data-etat="hors"] .presence__badge { opacity: 1; background: #454b66; color: #fff; }
.vue-decl__presence[data-etat="hors"] .presence__img { animation: none; filter: grayscale(1) brightness(.7); }

@keyframes respire { 0%,100% { scale: 1 1 } 50% { scale: 1.008 1.014 } }
@keyframes songe { 0%,100% { rotate: -.5deg } 50% { rotate: .6deg } }
@keyframes bosse { 0%,100% { translate: 0 0 } 50% { translate: 0 -1.5px } }
@keyframes penche { 0%,100% { rotate: 0deg; translate: 0 0 } 50% { rotate: .9deg; translate: 1px -2px } }
@keyframes penche-doux { 0%,100% { rotate: -.4deg } 50% { rotate: .4deg } }
@keyframes halo { 0% { scale: .74; opacity: .8 } 100% { scale: 1.2; opacity: 0 } }
@keyframes point { 0%,60%,100% { opacity: .3; translate: 0 0 } 30% { opacity: 1; translate: 0 -3px } }
@keyframes pop { from { scale: 0; rotate: -30deg } }
@keyframes eclat { 0% { opacity: 0; scale: .2 } 40% { opacity: 1; scale: 1.3 } 100% { opacity: 0; scale: .9; translate: 0 -8px } }
@keyframes secoue { 0%,100% { translate: 0 0 } 20% { translate: -3px 0 } 40% { translate: 3px 0 } 60% { translate: -2px 0 } 80% { translate: 2px 0 } }

/* ── KPI ── */
.vue-decl__kpi { display: flex; flex-direction: column; gap: var(--v-espace-1); }
.kpi__valeur { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--v-texte); }
.kpi__meta { display: flex; align-items: center; gap: var(--v-espace-2); font-size: var(--v-aide); color: var(--v-discret); }
.kpi__evolution { font-weight: 700; }
.kpi__evolution--hausse { color: #2fbf71; }
.kpi__evolution--baisse { color: #e8590c; }
.kpi__evolution--stable { color: var(--v-discret); }

/* ── Tableau ── */
.vue-decl__tableau-wrap { overflow-x: auto; }
.vue-decl__tableau { width: 100%; border-collapse: collapse; font-size: var(--v-aide); }
.vue-decl__tableau th, .vue-decl__tableau td { padding: 6px 8px; border-top: 1px solid var(--v-subtle); text-align: left; vertical-align: top; color: var(--v-texte); }
.vue-decl__tableau th { color: var(--v-discret); font-weight: 600; border-top: 0; }
.vue-decl__cell--droite { text-align: right; }
.vue-decl__cell--centre { text-align: center; }
.vue-decl__cell--tri::after { content: " ▼"; font-size: 10px; opacity: .7; }
.vue-decl__tableau-suite { margin: var(--v-espace-2) 0 0; font-size: var(--v-aide); color: var(--v-discret); }

/* ── Graphique ── */
.vue-decl__graphique { margin: 0; }
.graphique__zone { width: 100%; }
.graphique__svg { display: block; max-width: 100%; height: auto; color: var(--v-texte); overflow: visible; }
.graphique__axe { stroke: var(--v-bord); stroke-width: 1; }
.graphique__grille { stroke: var(--v-subtle); stroke-width: 1; stroke-dasharray: 2 3; }
.graphique__ligne { stroke: currentColor; stroke-linejoin: round; }
.graphique__aire { stroke: none; }
.graphique__point { stroke: var(--v-plein); stroke-width: 1.5; }
.graphique__barre { stroke: currentColor; stroke-width: 1; }
.graphique__secteur { stroke: var(--v-plein); stroke-width: 1; }
.graphique__label { fill: var(--v-discret); font-size: 12px; }
.graphique__valeur { fill: var(--v-texte); font-size: 12px; font-weight: 600; }
.graphique__valeur--survol { opacity: 0; }
.graphique__groupe:hover .graphique__valeur--survol, .graphique__groupe:focus .graphique__valeur--survol { opacity: 1; }
.graphique__groupe:hover .graphique__barre, .graphique__groupe:focus .graphique__barre { stroke-width: 2.5; }
.graphique__groupe:hover .graphique__point, .graphique__groupe:focus .graphique__point { stroke-width: 3; }
.graphique__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.graphique__legende { position: relative; display: flex; flex-wrap: wrap; gap: var(--v-espace-2) var(--v-espace-3); margin-top: var(--v-espace-2); font-size: var(--v-aide); color: var(--v-discret); }
.graphique__legende-item { display: inline-flex; align-items: center; gap: 4px; }
.graphique__echantillon svg { display: block; border-radius: 3px; }

/* ── Filtres ── */
.vue-decl__filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--v-espace-2); }
.filtres__controle { display: flex; flex-direction: column; gap: 2px; font-size: var(--v-aide); color: var(--v-discret); }
.filtres__controle input, .filtres__controle select { min-width: 120px; padding: 6px 8px; }

/* ── Onglets ── */
.vue-decl__onglets { padding: 0; border: 0; background: transparent; box-shadow: none; }
.onglets__tete { display: flex; gap: 4px; border-bottom: 1px solid var(--v-subtle); padding: 0 var(--v-espace-2); }
.onglets__btn { padding: 8px 12px; border-radius: var(--v-rayon-case) var(--v-rayon-case) 0 0;
  background: transparent; border: 1px solid transparent; border-bottom: 0;
  font: inherit; font-size: var(--v-texte-size); color: var(--v-discret); cursor: pointer; }
.onglets__btn[aria-selected="true"] { background: var(--v-fond); border-color: var(--v-subtle); color: var(--v-texte); }
.onglets__panneau { padding: var(--v-espace-3); background: var(--v-fond); border: 1px solid var(--v-subtle); border-radius: 0 0 var(--v-rayon-case) var(--v-rayon-case); }

/* ── Callout ── */
.vue-decl__callout { display: flex; align-items: flex-start; gap: var(--v-espace-2); font-size: var(--v-texte-size); }
.callout__signe { flex: none; font-weight: 700; }
.callout--info { border-left: 3px solid var(--v-accent); }
.callout--attention { border-left: 3px solid #ffb02e; }
.callout--succes { border-left: 3px solid #2fbf71; }
.callout--echec { border-left: 3px solid #e8590c; }

.vue-decl__capture { margin: 0; }
.vue-decl__capture img { display: block; width: 100%; height: auto; border: 1px solid var(--v-subtle); border-radius: var(--v-rayon-case); }

/* ── Dégradations ── */
@media (prefers-reduced-transparency: reduce) {
  .vue-decl { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--v-fond); box-shadow: 0 0 0 1px var(--v-subtle); }
  .vue-decl::before, .vue-decl::after { display: none; }
  .vue-decl .case, .vue-decl__section, .vue-decl__saisie, .vue-decl__filtres,
  .vue-decl__onglets, .vue-decl__callout, .vue-decl__kpi, .vue-decl__tableau-wrap, .vue-decl__graphique,
  .bouton:not(.bouton--plein), .vue-decl__saisie textarea, .vue-decl__saisie input, .vue-decl__saisie select,
  .onglets__btn[aria-selected="true"], .onglets__panneau { background: var(--v-fond); }
}
@media (prefers-reduced-motion: reduce) {
  .presence__img, .presence__halo, .presence__pense i, .presence__frappe i,
  .presence__bulles i, .presence__eclats b, .presence__badge { animation: none !important; transition: none !important; }
  .vue-decl__presence[data-etat="echec"] .presence__img { animation: none; }
  .vue-decl__presence[data-etat="reussi"] .presence__eclats b { opacity: 1; }
}
@media (forced-colors: active) {
  .vue-decl { border: 2px solid CanvasText; background: Canvas; }
  .bouton--plein { border: 2px solid Highlight; }
  .graphique__ligne, .graphique__point, .graphique__barre, .graphique__secteur, .graphique__aire { forced-color-adjust: none; }
}