/**
 * Styles spécifiques par page
 */

/* ============ Centre d'action ============ */
.page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: var(--cl-space-5); flex-wrap: wrap; gap: var(--cl-space-3);
}
.page-header h1 { font-size: var(--cl-fs-xl); }
.page-header__desc { color: var(--cl-gray-500); font-size: var(--cl-fs-sm); margin-top: 4px; }

.interaction-detail-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 480px; max-width: 100%;
  background: var(--cl-white); box-shadow: var(--cl-shadow-lg);
  z-index: var(--cl-z-modal); overflow-y: auto;
  animation: cl-fade-in var(--cl-transition-base);
}
[dir="rtl"] .interaction-detail-panel { right: auto; left: 0; }

/* ============ Pilotage ============ */
.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--cl-space-4); margin-bottom: var(--cl-space-6); }
.chart-card { padding: var(--cl-space-5); }
.chart-bars { display: flex; align-items: flex-end; gap: var(--cl-space-2); height: 180px; }
.chart-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.chart-bar { width: 100%; background: var(--cl-primary-400); border-radius: 4px 4px 0 0; transition: height var(--cl-transition-base); }
.chart-bar-label { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); }

.legend-list { display: flex; flex-direction: column; gap: var(--cl-space-2); }
.legend-item { display: flex; align-items: center; justify-content: space-between; font-size: var(--cl-fs-sm); }
.legend-item__label { display: flex; align-items: center; gap: 8px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; }
.legend-bar-track { flex: 1; height: 8px; background: var(--cl-gray-100); border-radius: var(--cl-radius-full); margin: 0 var(--cl-space-3); overflow: hidden; }
.legend-bar-fill { height: 100%; background: var(--cl-primary-400); border-radius: var(--cl-radius-full); }

/* ============ Fiche interaction ============ */
.interaction-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--cl-space-5); align-items: start; }
@media (max-width: 1000px) { .interaction-layout { grid-template-columns: 1fr; } }

.conversation-thread { display: flex; flex-direction: column; gap: var(--cl-space-3); max-height: 480px; overflow-y: auto; padding-right: var(--cl-space-2); }
.msg-bubble { max-width: 78%; padding: 10px 14px; border-radius: var(--cl-radius-md); font-size: var(--cl-fs-sm); }
.msg-bubble.in { background: var(--cl-gray-100); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-bubble.out { background: var(--cl-primary-100); align-self: flex-end; border-bottom-right-radius: 4px; }
[dir="rtl"] .msg-bubble.in { align-self: flex-end; }
[dir="rtl"] .msg-bubble.out { align-self: flex-start; }
.msg-bubble__meta { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); margin-top: 4px; }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cl-space-3); }
.info-item { display: flex; flex-direction: column; gap: 2px; }
.info-item__label { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); text-transform: uppercase; letter-spacing: 0.02em; }
.info-item__value { font-size: var(--cl-fs-sm); font-weight: var(--cl-fw-medium); color: var(--cl-gray-800); }

.suggested-reply-box { background: var(--cl-primary-050); border: 1px dashed var(--cl-primary-400); border-radius: var(--cl-radius-md); padding: var(--cl-space-4); font-size: var(--cl-fs-sm); }

.actions-row { display: flex; flex-wrap: wrap; gap: var(--cl-space-2); margin-top: var(--cl-space-4); }

/* ============ Rendez-vous ============ */
.rdv-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--cl-space-4); }
.rdv-card { padding: var(--cl-space-4); display: flex; flex-direction: column; gap: var(--cl-space-2); }
.rdv-card__row { display: flex; justify-content: space-between; font-size: var(--cl-fs-sm); }
.evidence-pill { font-size: var(--cl-fs-xs); padding: 2px 8px; border-radius: var(--cl-radius-full); }
.evidence-pill.calendar_event, .evidence-pill.ghl_confirmed_field, .evidence-pill.manual_audited_action { background: var(--cl-success-100); color: var(--cl-success-600); }
.evidence-pill.none { background: var(--cl-gray-100); color: var(--cl-gray-500); }

/* ============ Qualité ============ */
.quality-list { display: flex; flex-direction: column; gap: var(--cl-space-3); }
.quality-item { padding: var(--cl-space-4); border: 1px solid var(--cl-border-color); border-radius: var(--cl-radius-md); background: var(--cl-white); }
.quality-item__title { font-weight: var(--cl-fw-semibold); font-size: var(--cl-fs-sm); margin-bottom: 4px; }
.quality-item__meta { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); }
.upload-zone { border: 2px dashed var(--cl-gray-300); border-radius: var(--cl-radius-lg); padding: var(--cl-space-8); text-align: center; color: var(--cl-gray-500); }

/* ============ Paramètres ============ */
.settings-section { margin-bottom: var(--cl-space-6); }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: var(--cl-space-3) 0; border-bottom: 1px solid var(--cl-border-color); font-size: var(--cl-fs-sm); }
.settings-row:last-child { border-bottom: none; }
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--cl-fw-medium); }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cl-gray-400); }
.status-dot.ok::before { background: var(--cl-success-600); }
.status-dot.off::before { background: var(--cl-danger-600); }
.status-dot.warn::before { background: var(--cl-warning-600); }

.tech-log { background: var(--cl-gray-900); color: #c9f4d6; font-family: "SFMono-Regular", Consolas, monospace; font-size: var(--cl-fs-xs); padding: var(--cl-space-4); border-radius: var(--cl-radius-md); max-height: 260px; overflow-y: auto; white-space: pre-wrap; }

/* ============ Commentaires ============ */
.comment-list { display: flex; flex-direction: column; gap: var(--cl-space-4); }
.comment-card { overflow: hidden; }
.comment-card.is-medical { border-color: var(--cl-critical-600); }
.comment-card__header { display: flex; flex-wrap: wrap; gap: var(--cl-space-2); padding: var(--cl-space-3) var(--cl-space-4); border-bottom: 1px solid var(--cl-border-color); background: var(--cl-gray-050); }
.comment-card__body { padding: var(--cl-space-4); display: flex; flex-direction: column; gap: var(--cl-space-2); }
.comment-card__meta { display: flex; flex-wrap: wrap; gap: var(--cl-space-3); font-size: var(--cl-fs-xs); color: var(--cl-gray-500); }
.comment-card__author { font-weight: var(--cl-fw-semibold); font-size: var(--cl-fs-sm); color: var(--cl-gray-800); }
.comment-card__content { font-size: var(--cl-fs-sm); color: var(--cl-gray-800); }

/* ============ Avis et réputation ============ */
.review-list { display: flex; flex-direction: column; gap: var(--cl-space-3); }
.review-card { padding: var(--cl-space-4); display: flex; flex-direction: column; gap: var(--cl-space-2); }
.review-card__stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.review-card__stars .star-filled { color: var(--cl-warning-600); }
.review-card__stars .star-filled svg { fill: currentColor; }
.review-card__stars .star-empty { color: var(--cl-gray-300); }
.review-card__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--cl-space-2); }

/* ============ Intégrations en attente ============ */
.integration-row { display: flex; justify-content: space-between; align-items: center; padding: var(--cl-space-3) 0; border-bottom: 1px solid var(--cl-border-color); font-size: var(--cl-fs-sm); }
.integration-row:last-child { border-bottom: none; }
.integration-status { font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-medium); color: var(--cl-warning-600); background: var(--cl-warning-100); padding: 3px 10px; border-radius: var(--cl-radius-full); }

/* ============ Rapport hebdomadaire ============
   Le rapport est un document autonome affiché dans un cadre de même origine.
   Il occupe toute la hauteur utile et défile dans son propre cadre : une
   seule barre de défilement à l'écran, et ses animations d'apparition
   (IntersectionObserver) continuent de fonctionner comme prévu, ce qui ne
   serait pas le cas avec un cadre étiré à la hauteur totale du document. */
.report-host { display: flex; flex-direction: column; gap: var(--cl-space-4); min-height: 0; flex: 1; }

.report-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--cl-space-4); flex-wrap: wrap;
}
.report-toolbar__id { display: flex; align-items: center; gap: var(--cl-space-3); min-width: 0; }
.report-toolbar__badge {
  font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cl-accent-600); background: var(--cl-accent-100);
  padding: 4px 10px; border-radius: var(--cl-radius-full); white-space: nowrap;
}
.report-toolbar__label {
  font-size: var(--cl-fs-lg); font-weight: var(--cl-fw-semibold);
  color: var(--cl-gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.report-toolbar__actions { display: flex; gap: var(--cl-space-2); flex-shrink: 0; }

.report-frame-wrap {
  flex: 1; min-height: 0; position: relative;
  border: 1px solid var(--cl-border-color);
  border-radius: var(--cl-radius-lg);
  overflow: hidden;
  background: var(--cl-white);
  box-shadow: var(--cl-shadow-sm);
}
.report-frame {
  display: block; width: 100%; height: 100%; border: 0;
  opacity: 0; transition: opacity 0.35s ease;
}
.report-frame.is-ready { opacity: 1; }

.report-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--cl-space-3); padding: var(--cl-space-8) 0; color: var(--cl-gray-500);
}
.report-loading__spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--cl-border-color); border-top-color: var(--cl-accent-500);
  animation: report-spin 0.8s linear infinite;
}
.report-loading__text { font-size: var(--cl-fs-sm); margin: 0; }
@keyframes report-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .report-loading__spinner { animation-duration: 2.4s; }
  .report-frame { transition: none; }
}

/* Hauteur utile : uniquement là où la barre latérale est déjà verrouillée à
   la hauteur de la fenêtre (voir .sidebar). En dessous, la barre latérale
   passe à l'horizontale et la page reprend un défilement normal. */
@media (min-width: 901px) {
  body.report-page .app-shell { height: 100vh; min-height: 100vh; overflow: hidden; }
  body.report-page .app-content--report {
    max-width: none; display: flex; flex-direction: column;
    min-height: 0; overflow: hidden;
  }
}
/* En dessous de 901px, la coquille reprend un défilement de page normal :
   le conteneur n'a plus de hauteur imposée, donc `flex: 1` s'effondrerait.
   La hauteur du cadre devient explicite. */
@media (max-width: 900px) {
  .report-host { display: block; }
  .report-frame-wrap { flex: none; height: 78vh; min-height: 520px; margin-top: var(--cl-space-4); }
  .report-toolbar__label { font-size: var(--cl-fs-base); }
}

/* ============ Pilotage — cockpit opérationnel ============
   Refonte visuelle uniquement (voir js/pages/pilotage.js) : hiérarchie de
   lecture par sections numérotées, encodage sémantique des niveaux de délai,
   et tunnel enfin proportionnel. Aucun calcul, aucune définition métier. */

.pilot-eyebrow {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-bold);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cl-accent-600);
}
.pilot-eyebrow b { font-weight: var(--cl-fw-bold); opacity: 0.55; }
.pilot-eyebrow--light { color: var(--cl-accent-500); }

/* --- Bandeau d'entête --- */
.pilot-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--cl-primary-900) 0%, var(--cl-primary-800) 55%, var(--cl-primary-750) 100%);
  color: var(--cl-white);
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-8) var(--cl-space-8) var(--cl-space-6);
  margin-bottom: var(--cl-space-8);
  box-shadow: var(--cl-shadow-lg);
}
.pilot-hero__glow {
  position: absolute; top: -160px; right: -120px; width: 380px; height: 380px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(63, 143, 139, 0.38) 0%, rgba(63, 143, 139, 0) 68%);
}
.pilot-hero__head { position: relative; max-width: 640px; }
.pilot-hero__title {
  font-size: var(--cl-fs-2xl); color: var(--cl-white);
  margin: var(--cl-space-2) 0 var(--cl-space-2);
}
.pilot-hero__desc { margin: 0; font-size: var(--cl-fs-sm); color: rgba(255, 255, 255, 0.74); line-height: 1.55; }
.pilot-hero__figures {
  position: relative; display: grid; gap: var(--cl-space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--cl-space-6); padding-top: var(--cl-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pilot-figure { display: flex; flex-direction: column; gap: 2px; }
.pilot-figure__value {
  font-size: 2.25rem; font-weight: var(--cl-fw-bold); line-height: 1.05;
  color: var(--cl-white); letter-spacing: -0.02em;
}
.pilot-figure__label { font-size: var(--cl-fs-sm); color: rgba(255, 255, 255, 0.8); }
.pilot-figure__note { font-size: var(--cl-fs-xs); color: rgba(255, 255, 255, 0.5); }

/* --- Sections --- */
.pilot-section { margin-bottom: var(--cl-space-8); }
.pilot-section__head { margin-bottom: var(--cl-space-4); }
.pilot-section__desc { margin: 6px 0 0; font-size: var(--cl-fs-sm); color: var(--cl-gray-500); }

.pilot-section.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.pilot-section.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pilot-section.reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Cartes --- */
.pilot-card {
  background: var(--cl-white); border: 1px solid var(--cl-border-color);
  border-radius: var(--cl-radius-lg); padding: var(--cl-space-5);
  box-shadow: var(--cl-shadow-sm);
}
.pilot-card__title {
  font-size: var(--cl-fs-sm); font-weight: var(--cl-fw-semibold);
  color: var(--cl-gray-900); margin-bottom: var(--cl-space-4);
}
.pilot-card--focus {
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  background: linear-gradient(160deg, var(--cl-accent-100) 0%, var(--cl-white) 70%);
  border-color: var(--cl-accent-500);
}
.pilot-card__icon { color: var(--cl-accent-600); margin-bottom: var(--cl-space-2); }
.pilot-card__figure {
  font-size: 2.25rem; font-weight: var(--cl-fw-bold); line-height: 1.05;
  color: var(--cl-primary-900); letter-spacing: -0.02em;
}
.pilot-card__caption { font-size: var(--cl-fs-sm); font-weight: var(--cl-fw-medium); color: var(--cl-gray-800); }
.pilot-card__hint { margin: 6px 0 0; font-size: var(--cl-fs-xs); color: var(--cl-gray-500); }
.pilot-empty { margin: 0; font-size: var(--cl-fs-sm); color: var(--cl-gray-500); }

.pilot-split { display: grid; gap: var(--cl-space-4); grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: stretch; }
.pilot-grid-3 { display: grid; gap: var(--cl-space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.pilot-tiles { display: grid; gap: var(--cl-space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Vignettes --- */
.pilot-tile {
  background: var(--cl-white); border: 1px solid var(--cl-border-color);
  border-radius: var(--cl-radius-lg); padding: var(--cl-space-4) var(--cl-space-5);
  display: flex; flex-direction: column; gap: 2px; box-shadow: var(--cl-shadow-sm);
  border-left: 3px solid var(--cl-accent-500);
}
.pilot-tile__value { font-size: var(--cl-fs-xl); font-weight: var(--cl-fw-bold); color: var(--cl-primary-900); line-height: 1.15; }
.pilot-tile__label { font-size: var(--cl-fs-sm); color: var(--cl-gray-600); }
.pilot-tile__note { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); }
/* Indicateur sans source exploitable : présent, mais visuellement en retrait —
   il ne doit jamais peser autant qu'un chiffre réellement mesuré. */
.pilot-tile--muted { border-left-color: var(--cl-gray-300); background: var(--cl-gray-050); }
.pilot-tile--muted .pilot-tile__value { font-size: var(--cl-fs-base); color: var(--cl-gray-500); font-weight: var(--cl-fw-medium); }

/* --- Tunnel de conversion --- */
.pilot-funnel { display: flex; flex-direction: column; gap: var(--cl-space-3); }
.pilot-funnel__row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 48px; align-items: center; gap: var(--cl-space-3); }
.pilot-funnel__label { font-size: var(--cl-fs-sm); color: var(--cl-gray-700); }
.pilot-funnel__track { height: 26px; background: var(--cl-gray-100); border-radius: var(--cl-radius-sm); overflow: hidden; }
.pilot-funnel__bar {
  height: 100%; border-radius: var(--cl-radius-sm);
  background: linear-gradient(90deg, var(--cl-primary-700) 0%, var(--cl-accent-500) 100%);
  animation: pilot-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transform-origin: left center;
}
.pilot-funnel__value { font-size: var(--cl-fs-sm); font-weight: var(--cl-fw-semibold); color: var(--cl-gray-900); text-align: right; }
@keyframes pilot-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .pilot-funnel__bar { animation: none; } }

/* --- Niveaux de délai : couleurs sémantiques déjà en vigueur --- */
.pilot-sla { display: flex; flex-direction: column; gap: var(--cl-space-3); }
.pilot-sla__row { display: grid; grid-template-columns: 132px minmax(0, 1fr) 48px; align-items: center; gap: var(--cl-space-3); }
.pilot-sla__chip {
  font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-semibold);
  padding: 3px 10px; border-radius: var(--cl-radius-full); text-align: center;
}
.pilot-sla__chip--critique { background: var(--sla-critique-bg); color: var(--sla-critique-fg); }
.pilot-sla__chip--en_retard { background: var(--sla-retard-bg); color: var(--sla-retard-fg); }
.pilot-sla__chip--a_surveiller { background: var(--sla-surveiller-bg); color: var(--sla-surveiller-fg); }
.pilot-sla__chip--nouveau { background: var(--sla-nouveau-bg); color: var(--sla-nouveau-fg); }
.pilot-sla__chip--traite { background: var(--sla-traite-bg); color: var(--sla-traite-fg); }
.pilot-sla__track { height: 20px; background: var(--cl-gray-100); border-radius: var(--cl-radius-sm); overflow: hidden; }
.pilot-sla__bar { height: 100%; border-radius: var(--cl-radius-sm); background: var(--cl-gray-400); }
.pilot-sla__bar--critique { background: var(--sla-critique-fg); }
.pilot-sla__bar--en_retard { background: var(--sla-retard-fg); }
.pilot-sla__bar--a_surveiller { background: var(--sla-surveiller-fg); }
.pilot-sla__bar--nouveau { background: var(--sla-nouveau-fg); }
.pilot-sla__bar--traite { background: var(--sla-traite-fg); }
.pilot-sla__value { font-size: var(--cl-fs-sm); font-weight: var(--cl-fw-semibold); color: var(--cl-gray-900); text-align: right; }

/* --- Répartitions --- */
.pilot-legend { display: flex; flex-direction: column; gap: var(--cl-space-2); }
.pilot-legend__row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 32px; align-items: center; gap: var(--cl-space-2); }
.pilot-legend__label { font-size: var(--cl-fs-sm); color: var(--cl-gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilot-legend__track { height: 6px; background: var(--cl-gray-100); border-radius: var(--cl-radius-full); overflow: hidden; }
.pilot-legend__bar { height: 100%; border-radius: var(--cl-radius-full); background: var(--cl-primary-400); }
.pilot-legend__value { font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-semibold); color: var(--cl-gray-600); text-align: right; }

@media (max-width: 1100px) {
  .pilot-split { grid-template-columns: minmax(0, 1fr); }
  .pilot-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilot-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pilot-hero { padding: var(--cl-space-6) var(--cl-space-5) var(--cl-space-5); }
  .pilot-hero__figures { grid-template-columns: minmax(0, 1fr); gap: var(--cl-space-3); }
  .pilot-grid-3, .pilot-tiles { grid-template-columns: minmax(0, 1fr); }
  .pilot-funnel__row { grid-template-columns: 108px minmax(0, 1fr) 40px; }
  .pilot-sla__row { grid-template-columns: 104px minmax(0, 1fr) 40px; }
  .pilot-figure__value, .pilot-card__figure { font-size: 1.9rem; }
}

/* ============ Avis Google — cockpit réputation ============ */
.avis-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--cl-space-8);
  background: linear-gradient(135deg, var(--cl-primary-900) 0%, var(--cl-primary-800) 58%, var(--cl-primary-750) 100%);
  color: var(--cl-white); border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-8); margin-bottom: var(--cl-space-6); box-shadow: var(--cl-shadow-lg);
}
.avis-hero__glow { position: absolute; top: -170px; right: -110px; width: 380px; height: 380px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(63,143,139,0.36) 0%, rgba(63,143,139,0) 68%); }
.avis-hero__score { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding-right: var(--cl-space-6); border-right: 1px solid rgba(255,255,255,0.14); }
.avis-hero__value { font-size: 4.25rem; font-weight: var(--cl-fw-bold); line-height: 1; letter-spacing: -0.03em; }
.avis-hero__sur { font-size: var(--cl-fs-sm); color: rgba(255,255,255,0.6); margin-top: 2px; }
.avis-hero__stars { display: inline-flex; gap: 3px; margin: var(--cl-space-3) 0 6px; font-size: 1.25rem; }
.avis-hero__total { font-size: var(--cl-fs-sm); color: rgba(255,255,255,0.82); }
.avis-hero__side { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.avis-hero__title { font-size: var(--cl-fs-2xl); color: var(--cl-white); margin: 2px 0 4px; }
.avis-hero__maj { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--cl-fs-sm); color: rgba(255,255,255,0.78); }
.avis-hero__note { margin: var(--cl-space-3) 0 0; font-size: var(--cl-fs-sm); color: rgba(255,255,255,0.7); line-height: 1.55; max-width: 62ch; }
.avis-hero__soon { margin: var(--cl-space-2) 0 0; font-size: var(--cl-fs-xs); color: rgba(255,255,255,0.45); }

.avis-star { color: rgba(255,255,255,0.22); }
.avis-star.is-on { color: var(--avis-etoile-claire); }
.avis-carte__stars .avis-star, .avis-dist__label .avis-star { color: var(--cl-gray-300); }
.avis-carte__stars .avis-star.is-on, .avis-dist__label .avis-star.is-on { color: var(--avis-etoile); }

.avis-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cl-space-4); margin-bottom: var(--cl-space-6); }
.avis-kpi { background: var(--cl-white); border: 1px solid var(--cl-border-color); border-left: 3px solid var(--cl-accent-500);
  border-radius: var(--cl-radius-lg); padding: var(--cl-space-4) var(--cl-space-5); display: flex; flex-direction: column; gap: 2px; box-shadow: var(--cl-shadow-sm); }
.avis-kpi--alerte { border-left-color: var(--cl-corail-600); background: linear-gradient(160deg, var(--avis-alerte-fond) 0%, var(--cl-white) 70%); }
.avis-kpi__value { font-size: var(--cl-fs-xl); font-weight: var(--cl-fw-bold); color: var(--cl-primary-900); line-height: 1.15; }
.avis-kpi__label { font-size: var(--cl-fs-sm); color: var(--cl-gray-600); }
.avis-kpi__note { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); }

.avis-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--cl-space-4); margin-bottom: var(--cl-space-6); }
.avis-dist { display: flex; flex-direction: column; gap: var(--cl-space-3); }
.avis-dist__row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 34px 44px; align-items: center; gap: var(--cl-space-3); }
.avis-dist__label { display: inline-flex; align-items: center; gap: 3px; font-size: var(--cl-fs-sm); color: var(--cl-gray-700); }
.avis-dist__track { height: 18px; background: var(--cl-gray-100); border-radius: var(--cl-radius-sm); overflow: hidden; }
.avis-dist__bar { height: 100%; border-radius: var(--cl-radius-sm); background: var(--cl-accent-500); transition: width 0.5s ease; }
.avis-dist__bar--5 { background: var(--avis-note-5); } .avis-dist__bar--4 { background: var(--avis-note-4); }
.avis-dist__bar--3 { background: var(--avis-note-3); } .avis-dist__bar--2 { background: var(--avis-note-2); } .avis-dist__bar--1 { background: var(--cl-corail-600); }
.avis-dist__value { font-size: var(--cl-fs-sm); font-weight: var(--cl-fw-semibold); color: var(--cl-gray-900); text-align: right; }
.avis-dist__pct { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); text-align: right; }

.avis-chart { width: 100%; overflow-x: auto; }
.avis-chart svg { width: 100%; min-width: 420px; height: auto; display: block; }
.avis-legende { display: flex; gap: var(--cl-space-4); margin-top: var(--cl-space-3); font-size: var(--cl-fs-xs); color: var(--cl-gray-500); }
.avis-legende__item { display: inline-flex; align-items: center; gap: 6px; }
.avis-legende__puce { width: 10px; height: 10px; border-radius: 2px; }
.avis-legende__puce--vol { background: var(--cl-primary-400); opacity: 0.4; }
.avis-legende__puce--note { background: var(--cl-accent-500); border-radius: 50%; }

.avis-barre { display: flex; align-items: center; justify-content: space-between; gap: var(--cl-space-4); flex-wrap: wrap; margin-bottom: var(--cl-space-3); }
.avis-barre__droite { display: flex; gap: var(--cl-space-2); }
.avis-barre__droite input { min-width: 220px; }
.avis-onglets { display: flex; gap: 6px; flex-wrap: wrap; }
.avis-onglet { border: 1px solid var(--cl-border-color); background: var(--cl-white); color: var(--cl-gray-700);
  border-radius: var(--cl-radius-full); padding: 6px 14px; font-size: var(--cl-fs-sm); cursor: pointer; transition: all 0.15s ease; }
.avis-onglet:hover { border-color: var(--cl-accent-500); color: var(--cl-accent-600); }
.avis-onglet.is-active { background: var(--cl-primary-900); border-color: var(--cl-primary-900); color: var(--cl-white); }
.avis-compte { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); margin-bottom: var(--cl-space-3); }

.avis-liste { display: flex; flex-direction: column; gap: var(--cl-space-3); }
.avis-carte { background: var(--cl-white); border: 1px solid var(--cl-border-color); border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-4) var(--cl-space-5); box-shadow: var(--cl-shadow-sm); }
.avis-carte--prioritaire { border-left: 3px solid var(--cl-corail-600); }
.avis-carte__tete { display: flex; align-items: center; gap: var(--cl-space-3); flex-wrap: wrap; margin-bottom: var(--cl-space-3); }
.avis-carte__pastille { width: 34px; height: 34px; border-radius: 50%; background: var(--cl-primary-800); color: var(--cl-white);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-semibold); flex-shrink: 0; }
.avis-carte__ident { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.avis-carte__auteur { font-size: var(--cl-fs-sm); font-weight: var(--cl-fw-semibold); color: var(--cl-gray-900); }
.avis-carte__date { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); }
.avis-carte__stars { display: inline-flex; gap: 2px; font-size: var(--cl-fs-sm); }
.avis-statut { font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-semibold); padding: 3px 10px; border-radius: var(--cl-radius-full); white-space: nowrap; }
.avis-statut--repondu { background: var(--cl-success-100); color: var(--cl-success-600); }
.avis-statut--attente { background: var(--cl-warning-100); color: var(--cl-warning-600); }
.avis-carte__texte { margin: 0; font-size: var(--cl-fs-sm); color: var(--cl-gray-700); line-height: 1.6; white-space: pre-line; }
.avis-carte__texte--vide { color: var(--cl-gray-400); font-style: italic; }
.avis-reponse { margin-top: var(--cl-space-3); padding: var(--cl-space-3) var(--cl-space-4); background: var(--cl-gray-050);
  border-left: 2px solid var(--cl-accent-500); border-radius: var(--cl-radius-sm); }
.avis-reponse--suggeree { border-left-style: dashed; border-left-color: var(--cl-gray-400); background: var(--cl-white); }
.avis-reponse__tete { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cl-fs-xs);
  font-weight: var(--cl-fw-semibold); color: var(--cl-accent-600); margin-bottom: 4px; }
.avis-reponse--suggeree .avis-reponse__tete { color: var(--cl-gray-600); }
.avis-reponse__texte { margin: 0; font-size: var(--cl-fs-sm); color: var(--cl-gray-700); line-height: 1.55; }

@media (max-width: 1100px) {
  .avis-hero { grid-template-columns: minmax(0, 1fr); gap: var(--cl-space-5); }
  .avis-hero__score { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.14); padding: 0 0 var(--cl-space-4); }
  .avis-grid { grid-template-columns: minmax(0, 1fr); }
  .avis-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .avis-hero { padding: var(--cl-space-5); }
  .avis-hero__value { font-size: 3.25rem; }
  .avis-kpis { grid-template-columns: minmax(0, 1fr); }
  .avis-barre__droite { width: 100%; flex-direction: column; }
  .avis-barre__droite input, .avis-barre__droite select { width: 100%; }
  .avis-dist__row { grid-template-columns: 38px minmax(0, 1fr) 30px 40px; }
  .avis-carte__tete { gap: var(--cl-space-2); }
}