:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-page-start: #ffffff;
  --bg-page-end: #f8f9fb;
  --text: #202124;
  --text-muted: #5f6368;
  --border: #dfe1e5;
  --border-hover: #dfe1e5;
  --shadow: rgba(32, 33, 36, 0.28);
  --shadow-soft: rgba(32, 33, 36, 0.1);
  --btn-bg: #f8f9fa;
  --btn-border: #f8f9fa;
  --btn-hover-border: #dadce0;
  --link: #1a73e8;
  --link-tint: rgba(26, 115, 232, 0.06);
  --danger: #c5221f;
  --danger-bg: #fce8e6;
  --success: #137333;
  --success-bg: #e6f4ea;
  --warning: #b06000;
  --warning-bg: #fef7e0;
  --shadow-elevated: rgba(32, 33, 36, 0.16);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #202124;
  --bg-page-start: #202124;
  --bg-page-end: #202124;
  --text: #e8eaed;
  --text-muted: #9aa0a6;
  --border: #3c4043;
  --border-hover: #5f6368;
  --shadow: rgba(0, 0, 0, 0.6);
  --shadow-soft: rgba(0, 0, 0, 0.35);
  --btn-bg: #303134;
  --btn-border: #303134;
  --btn-hover-border: #5f6368;
  --link: #8ab4f8;
  --link-tint: rgba(138, 180, 248, 0.14);
  --danger: #f28b82;
  --danger-bg: #3c2321;
  --success: #81c995;
  --success-bg: #1e3a26;
  --warning: #fdd663;
  --warning-bg: #3d3320;
  --shadow-elevated: rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #202124;
    --bg-page-start: #202124;
    --bg-page-end: #202124;
    --text: #e8eaed;
    --text-muted: #9aa0a6;
    --border: #3c4043;
    --border-hover: #5f6368;
    --shadow: rgba(0, 0, 0, 0.6);
    --shadow-soft: rgba(0, 0, 0, 0.35);
    --btn-bg: #303134;
    --btn-border: #303134;
    --btn-hover-border: #5f6368;
    --link: #8ab4f8;
    --link-tint: rgba(138, 180, 248, 0.14);
    --danger: #f28b82;
    --danger-bg: #3c2321;
    --success: #81c995;
    --success-bg: #1e3a26;
    --warning: #fdd663;
    --warning-bg: #3d3320;
    --shadow-elevated: rgba(0, 0, 0, 0.45);
  }
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: linear-gradient(180deg, var(--bg-page-start) 0%, var(--bg-page-end) 100%);
  color: var(--text);
  font-family: arial, sans-serif;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s var(--ease);
}

a:hover {
  text-decoration: underline;
}

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  padding: 20px 24px 0;
}

.topbar-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.topbar-links a:hover {
  color: var(--text);
  text-decoration: none;
}

.search-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  margin-top: -80px;
}

.logo {
  width: min(272px, 60vw);
  margin-bottom: 32px;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.2s var(--ease);
}

.logo:hover {
  transform: scale(1.015);
}

.search-box-wrapper {
  position: relative;
  width: min(584px, 90vw);
}

.search-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 1px 3px var(--shadow-soft);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.search-panel:hover,
.search-panel:focus-within {
  box-shadow: 0 2px 12px var(--shadow);
  border-color: transparent;
}

.search-panel.open {
  box-shadow: 0 4px 16px var(--shadow);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 46px;
  padding: 0 16px 0 20px;
}

.search-box-icon {
  width: 20px;
  height: 20px;
  fill: var(--text-muted);
  flex-shrink: 0;
}

#search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

#search-input::placeholder {
  color: var(--text-muted);
}

.suggestions {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}

.suggestions.hidden {
  display: none;
}

.suggestions li {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-size: 15px;
}

.suggestions li:hover,
.suggestions li.active {
  background: var(--btn-bg);
}

.suggestion-icon {
  width: 18px;
  height: 18px;
  fill: var(--text-muted);
  flex-shrink: 0;
}

.panel-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

.panel-footer.hidden {
  display: none;
}

.panel-footer .search-buttons {
  margin: 0;
}

.learn-more {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 11px;
  color: var(--link);
}

#standalone-buttons.hidden {
  display: none;
}

.suggestions li .site-desc {
  color: var(--text-muted);
  font-size: 12px;
}

.search-buttons {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  padding: 0 20px;
  height: 38px;
  cursor: pointer;
  transition: box-shadow 0.15s var(--ease), border-color 0.15s var(--ease),
    transform 0.1s var(--ease), background-color 0.15s var(--ease);
}

.btn:hover {
  text-decoration: none;
  border-color: var(--btn-hover-border);
  box-shadow: 0 1px 6px var(--shadow-soft);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.shortcuts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40px;
  max-width: 560px;
}

.shortcut-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 13px;
  transition: box-shadow 0.15s var(--ease), border-color 0.15s var(--ease),
    transform 0.1s var(--ease), color 0.15s var(--ease);
}

.shortcut-chip:hover {
  border-color: transparent;
  box-shadow: 0 2px 10px var(--shadow-soft);
  color: var(--text);
  text-decoration: none;
}

.shortcut-chip:active {
  transform: scale(0.98);
}

.shortcut-chip-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--link);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer {
  background: var(--btn-bg);
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-muted);
}

.footer-links a:hover {
  color: var(--text);
  text-decoration: none;
}

.footer a {
  color: var(--text-muted);
}

.footer-top {
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-links {
  display: flex;
  gap: 24px;
}

.gtaw-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 12px auto 20px;
  padding: 8px 14px;
  background: transparent;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 0.15s var(--ease);
}

.gtaw-badge:hover {
  text-decoration: none;
  background: var(--btn-bg);
}

.gtaw-badge-logo {
  height: 20px;
  width: auto;
  display: block;
}

.gtaw-badge-text {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Page de résultats */

.results-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px 0;
}

.results-logo {
  width: 110px;
  flex-shrink: 0;
}

.results-search-form {
  flex: 1;
  min-width: 0;
  max-width: 760px;
}

.results-search-box {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 50px;
  padding: 0 18px 0 22px;
  border: 1px solid var(--border);
  border-radius: 25px;
  background: var(--btn-bg);
}

.results-search-box:hover,
.results-search-box:focus-within {
  box-shadow: 0 1px 6px var(--shadow);
  border-color: transparent;
  background: var(--bg);
}

.results-search-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}

#results-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  fill: var(--text-muted);
  flex-shrink: 0;
  transition: background-color 0.15s var(--ease), fill 0.15s var(--ease);
}

.icon-btn:hover {
  fill: var(--text);
  background-color: var(--btn-bg);
}

.results-search-submit {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.results-search-submit svg {
  width: 20px;
  height: 20px;
  fill: var(--link);
}

.results-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  flex-shrink: 0;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4285f4, #34a853, #fbbc05, #ea4335);
}

.tabs {
  display: flex;
  align-items: center;
  min-height: 46px;
  gap: 32px;
  padding: 0 24px 0 158px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.tabs a {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding-bottom: 2px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.tabs a:hover {
  color: var(--text);
  text-decoration: none;
}

.tabs a.active {
  color: var(--text);
  border-bottom-color: var(--link);
}

.tabs a .tabs-chevron {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.results-stats {
  margin: 20px 0 0;
  padding: 0 24px 0 158px;
  font-size: 13px;
  color: var(--text-muted);
}

.results-main-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0 24px 0 158px;
}

.results-main-row.hidden {
  display: none;
}

.results-list {
  max-width: 660px;
  margin: 8px 0 60px;
  flex: 1;
  min-width: 0;
}

.results-sponsored-top-wrap {
  margin: 8px 0 0;
  padding: 0 24px 0 158px;
}

.results-list.hidden {
  display: none;
}

.results-images-wrap {
  padding: 20px 24px 60px 158px;
}

.results-images-wrap.hidden {
  display: none;
}

.knowledge-panel {
  width: 380px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
  border-left: 1px solid var(--border);
  padding: 4px 0 40px 32px;
  margin: 8px 0 60px;
}

.knowledge-panel.hidden {
  display: none;
}

.knowledge-panel-title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

.knowledge-panel-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.knowledge-panel-category {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.knowledge-panel-collage {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--border);
}

.knowledge-panel-collage-2,
.knowledge-panel-collage-3 {
  height: 230px;
}

.knowledge-panel-collage-2 {
  grid-template-columns: 2fr 1fr;
}

.knowledge-panel-collage-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.knowledge-panel-collage-item {
  position: relative;
  background: var(--btn-bg);
}

.knowledge-panel-collage-2 .knowledge-panel-collage-item img,
.knowledge-panel-collage-3 .knowledge-panel-collage-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
}

/* Une seule image (logo, capture...) : pas de hauteur imposée qui forcerait
   un recadrage ou des bandes vides selon ses proportions — elle garde sa
   forme naturelle, largeur pleine. */
.knowledge-panel-collage-1 .knowledge-panel-collage-item img {
  width: 100% !important;
  height: auto !important;
  max-height: 320px;
  object-fit: contain !important;
  display: block;
}

.knowledge-panel-collage-main {
  grid-row: 1 / -1;
}

.knowledge-panel-collage-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.knowledge-panel-collage-badge svg {
  width: 13px;
  height: 13px;
}

.knowledge-panel-desc {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}

.knowledge-panel-source {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.knowledge-panel-source a {
  color: var(--link);
  text-decoration: underline;
}

.knowledge-panel-facts {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.knowledge-panel-fact-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 12px;
  padding: 16px;
  border-radius: 10px;
  background: var(--btn-bg);
  font-size: 13px;
}

.knowledge-panel-fact-label {
  color: var(--text-muted);
}

.knowledge-panel-fact-value {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent);
}

/* Sous 1360px, plus la place pour une vraie colonne latérale : le panneau se
   repositionne proprement sous les résultats plutôt que de disparaître ou de
   forcer un défilement horizontal. */
@media (max-width: 1360px) {
  .results-main-row {
    flex-direction: column;
    gap: 0;
  }

  .knowledge-panel {
    width: 100%;
    max-width: 500px;
    position: static;
    border-left: none;
    border-bottom: 1px solid var(--border);
    padding: 4px 0 24px;
    margin: 0 0 32px;
    order: -1;
  }
}

/* Rangée de suggestions visuelles (mots-clés réels des sites trouvés) */

.image-suggestions {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}

.image-suggestions.hidden {
  display: none;
}

.image-suggestion-chip {
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.image-suggestion-chip:hover {
  background: var(--link-tint);
  border-color: var(--link);
  color: var(--link);
  text-decoration: none;
}

/* Sections sponsorisées (sites + produits Store), alignées sur une même ligne */

.store-sponsored {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.store-sponsored.hidden {
  display: none;
}

.results-sponsored-top-wrap.hidden {
  display: none;
}

.store-sponsored-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.store-sponsored-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.store-sponsored-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  position: relative;
  min-width: 0;
  transition: box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}

.store-sponsored-card:hover {
  box-shadow: 0 2px 10px var(--shadow-soft);
  border-color: var(--border-hover);
  text-decoration: none;
}

.store-sponsored-badge {
  align-self: flex-start;
  font-size: 10px;
  padding: 2px 8px;
}

.store-sponsored-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--btn-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: var(--text-muted);
}

.store-sponsored-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-sponsored-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-sponsored-price {
  font-size: 13px;
  color: var(--text);
}

.store-sponsored-old-price {
  color: var(--text-muted);
  font-weight: normal;
}

.store-sponsored-stock {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Version compacte du bloc "Contenu sponsorisé", utilisée sur l'onglet
   "Tous" : cartes plus petites pour occuper peu de hauteur dans le flux. */

.store-sponsored-compact {
  margin-bottom: 20px;
  padding-bottom: 16px;
}

.store-sponsored-compact .store-sponsored-title {
  font-size: 13px;
  margin-bottom: 10px;
}

.store-sponsored-compact .store-sponsored-grid {
  display: flex;
  overflow-x: auto;
  gap: 10px;
}

.store-sponsored-compact .store-sponsored-card {
  flex: 0 0 104px;
  padding: 8px;
  gap: 4px;
}

.store-sponsored-compact .store-sponsored-name {
  font-size: 12px;
}

.store-sponsored-compact .store-sponsored-price,
.store-sponsored-compact .store-sponsored-stock {
  font-size: 10.5px;
}

/* Grille masonry des images (CSS columns, pas de librairie JS) */

.results-images-grid {
  column-count: 2;
  column-gap: 12px;
}

@media (min-width: 620px) {
  .results-images-grid {
    column-count: 3;
  }
}

@media (min-width: 900px) {
  .results-images-grid {
    column-count: 4;
  }
}

@media (min-width: 1300px) {
  .results-images-grid {
    column-count: 5;
  }
}

@media (min-width: 1700px) {
  .results-images-grid {
    column-count: 6;
  }
}

.results-images-empty {
  color: var(--text-muted);
  font-size: 14px;
}

.results-images-empty.hidden {
  display: none;
}

.image-card {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin: 0 0 12px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  border-radius: 12px;
  overflow: hidden;
}

.image-card-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--btn-bg);
  border-radius: 12px;
  overflow: hidden;
}

.image-card-thumb.skeleton {
  background: linear-gradient(100deg, var(--btn-bg) 30%, var(--border) 50%, var(--btn-bg) 70%);
  background-size: 200% 100%;
  animation: image-card-shimmer 1.4s ease-in-out infinite;
}

@keyframes image-card-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.image-card-thumb.broken {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-card-thumb.broken::after {
  content: "Image indisponible";
  font-size: 12px;
  color: var(--text-muted);
}

.image-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s var(--ease);
}

.image-card:hover .image-card-thumb img {
  transform: scale(1.03);
}

.image-card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}

.image-card:hover .image-card-overlay,
.image-card:focus-visible .image-card-overlay {
  opacity: 1;
}

.image-card-overlay-title {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-card-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px 0;
}

.image-card-favicon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1a73e8;
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.image-card-favicon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-card-caption-text {
  min-width: 0;
}

.image-card-caption-domain {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.results-images-sentinel {
  height: 1px;
}

.results-images-more {
  display: block;
  margin: 8px auto 0;
}

.results-images-more.hidden {
  display: none;
}

.image-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(640px, 45vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px var(--shadow);
  z-index: 30;
  display: flex;
  flex-direction: column;
  border-radius: 16px 0 0 16px;
}

.image-panel.hidden {
  display: none;
}

.image-panel-backdrop {
  display: none;
}

.image-panel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.image-panel-source {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
  min-width: 0;
}

.image-panel-favicon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1a73e8;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.image-panel-favicon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-panel-topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.image-panel-scroll {
  flex: 1;
  overflow-y: auto;
}

.image-panel-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--btn-bg);
}

.image-panel-body img {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 4px;
}

.image-panel-info {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.image-panel-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-panel-description {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.image-panel-description.hidden {
  display: none;
}

.image-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.image-panel-report-link {
  font-size: 13px;
  color: var(--text-muted);
}

.image-panel-similar {
  padding: 16px 20px 24px;
}

.image-panel-similar.hidden {
  display: none;
}

.image-panel-similar h3 {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 12px;
}

.image-panel-similar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.image-panel-similar-thumb {
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--btn-bg);
}

.image-panel-similar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .image-panel {
    width: 100%;
    border-radius: 0;
  }

  .image-panel-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 29;
  }

  .image-panel-backdrop.hidden {
    display: none;
  }
}

body.image-panel-open-body {
  overflow: hidden;
}

@media (min-width: 901px) {
  .results-images-area.panel-open {
    margin-right: min(640px, 45vw);
    transition: margin-right 0.15s var(--ease);
  }
}

.results-tous-extra {
  max-width: 900px;
  margin: 0 0 60px 158px;
  padding-right: 24px;
}

.results-tous-extra.hidden {
  display: none;
}

.related-searches h2 {
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 20px;
}

.related-searches-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 40px;
}

.related-search-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 14px;
}

.related-search-chip:hover {
  background: var(--btn-bg);
  text-decoration: none;
}

.related-search-chip svg {
  width: 18px;
  height: 18px;
  fill: var(--text-muted);
  flex-shrink: 0;
}

.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
}

.pagination-track {
  display: flex;
  align-items: flex-start;
  gap: 1px;
  font-family: "Poppins", arial, sans-serif;
}

.pagination-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pagination-letter {
  color: var(--text-muted);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
}

.pagination-letter:hover {
  color: var(--text-muted);
  text-decoration: none;
}

.pagination-letter.pagination-page.active {
  color: var(--link);
  font-weight: bold;
}

.pagination-letter.pagination-page.active:hover {
  color: var(--link);
}

.pagination-arrow {
  width: 20px;
  height: 20px;
  fill: var(--text-muted);
  margin-top: 10px;
}

.pagination-num {
  font-size: 14px;
  color: var(--link);
}

.pagination-num.active {
  color: var(--text);
  font-weight: bold;
}

.pagination-next {
  font-size: 14px;
  color: var(--link);
  font-weight: 500;
}

.results-bottom-bar {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.results-bottom-bar a {
  color: var(--text-muted);
}

.results-bottom-note {
  margin: 0 0 12px;
}

.results-bottom-location {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}

.results-bottom-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--link);
  flex-shrink: 0;
}

.results-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

@media (max-width: 700px) {
  .results-tous-extra {
    margin-left: 24px;
  }

  .related-searches-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .tabs {
    padding-left: 24px;
  }

  .results-stats {
    padding-left: 24px;
  }

  .results-main-row {
    padding-left: 24px;
  }

  .results-sponsored-top-wrap {
    padding-left: 24px;
  }

  .results-images-wrap {
    padding-left: 24px;
    padding-right: 16px;
  }

  .results-images-grid {
    column-count: 2;
    column-gap: 8px;
  }

  .store-sponsored-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .results-header {
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 16px 16px 0;
  }

  .results-logo {
    width: 88px;
  }

  .results-search-form {
    order: 3;
    flex-basis: 100%;
    max-width: 100%;
  }

  .results-header-right svg.icon-btn {
    display: none;
  }
}

.result {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.result-content {
  min-width: 0;
  flex: 1;
}

.result-thumb {
  width: 92px;
  height: 92px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.result-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 480px;
  margin: 12px 0 0;
}

.result-gallery img {
  width: 100%;
  height: 130px;
  border-radius: 8px;
  background: var(--btn-bg);
  object-fit: cover;
  display: block;
  transition: opacity 0.15s var(--ease);
}

.result-gallery img:hover {
  opacity: 0.85;
}

.result-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.result-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  flex-shrink: 0;
  overflow: hidden;
}

.result-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-sitename {
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
}

.result-url {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.3;
}

.result-meta-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.8;
}

.result-meta-menu svg {
  width: 18px;
  height: 18px;
}

.result-title {
  display: block;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--link);
  margin: 4px 0 6px;
  width: fit-content;
}

a.result-title:hover {
  text-decoration: underline;
}

div.result-title {
  cursor: default;
}

.result-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  overflow-wrap: break-word;
  max-width: 640px;
}

.result-report-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.result-sublinks {
  margin-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.result-sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
}

.result-sublink + .result-sublink {
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.result-sublink-text {
  min-width: 0;
}

.result-sublink-title {
  color: var(--link);
  font-size: 16px;
}

.result-sublink:hover .result-sublink-title {
  text-decoration: underline;
}

.result-sublink-desc {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-sublink-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.7;
}

.result-sublink-chevron svg {
  width: 16px;
  height: 16px;
  display: block;
}

.result-sponsored-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  vertical-align: middle;
}

.result-parent-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--btn-bg);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: normal;
  vertical-align: middle;
}

/* Widget compte (header) */

.account-widget {
  position: relative;
}

.avatar-btn {
  border: none;
  cursor: pointer;
  background: #1a73e8;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  transition: box-shadow 0.15s var(--ease);
}

.avatar-btn:hover {
  box-shadow: 0 0 0 4px var(--btn-bg);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.account-login-btn {
  text-decoration: none;
  white-space: nowrap;
}

.account-unread-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ea4335;
  border: 2px solid var(--bg);
  pointer-events: none;
}

.account-menu {
  position: absolute;
  top: 48px;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--bg);
  color: var(--text);
  border: none;
  border-radius: 28px;
  box-shadow: 0 1px 3px var(--shadow-soft), 0 16px 36px -8px var(--shadow), 0 4px 12px var(--shadow-soft);
  padding: 20px 0 16px;
  z-index: 20;
  transform-origin: top right;
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s linear 0s;
}

.account-menu.hidden {
  opacity: 0;
  transform: scale(0.94) translateY(-6px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.12s var(--ease), transform 0.12s var(--ease), visibility 0s linear 0.12s;
}

.account-menu-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 44px 0 24px;
  margin-bottom: 12px;
}

.account-menu-email {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color 0.12s var(--ease);
}

.account-menu-close:hover {
  background: var(--btn-bg);
}

.account-menu-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px 20px;
}

.account-menu-avatar-link {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}

.account-menu-avatar {
  width: 80px;
  height: 80px;
  font-size: 30px;
}

.account-menu-avatar-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--btn-bg);
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s var(--ease);
}

.account-menu-avatar-link:hover .account-menu-avatar-badge {
  background: var(--btn-hover-border);
}

.account-menu-avatar-badge svg {
  width: 14px;
  height: 14px;
  fill: var(--text-muted);
}

.account-menu-greeting {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 16px;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.account-menu-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0 16px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.account-menu-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ea4335;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.account-menu-account-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 999px;
  background: #ea4335;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.account-menu-pill:hover {
  background: var(--btn-bg);
  box-shadow: 0 1px 2px var(--shadow-soft);
  text-decoration: none;
}

.account-menu-pill:focus-visible,
.account-menu-close:focus-visible,
.account-menu-account-row:focus-visible,
.account-menu-signout:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Sections (liste des autres comptes, ajout d'adresse) : chacune séparée du
   bloc précédent par un simple filet, jamais par des bordures de tableau. */
.account-menu-accounts {
  padding: 4px 12px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.account-menu-account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  margin: 2px 0;
  border: none;
  background: none;
  border-radius: 12px;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s var(--ease);
}

.account-menu-account-row:hover {
  background: var(--btn-bg);
  text-decoration: none;
}

.account-menu-account-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.account-menu-account-avatar-add {
  background: var(--btn-bg);
  border: 1px solid var(--border);
}

.account-menu-account-avatar-add svg {
  width: 16px;
  height: 16px;
  fill: var(--text-muted);
}

.account-menu-account-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.account-menu-account-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-account-email {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-footer {
  padding: 12px 12px 0;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}

.account-menu-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 20px;
  background: var(--btn-bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s var(--ease);
}

.account-menu-signout:hover {
  background: var(--btn-hover-border);
  text-decoration: none;
}

/* Lanceur d'applications (icône grille, façon Google Apps) */

.apps-launcher {
  position: relative;
}

.apps-launcher-menu {
  position: absolute;
  top: 40px;
  right: 0;
  width: 288px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px var(--shadow);
  padding: 20px;
  z-index: 30;
}

.apps-launcher-menu.hidden {
  display: none;
}

/* Sur petit écran, le panneau (position:absolute, ancré sur le bouton grille
   large de ~36px) débordait hors de l'écran à gauche : le bouton n'est pas
   au bord droit exact du viewport (l'avatar du compte le suit), donc
   "right: 0" relatif à ce petit bouton pousse un panneau large de 288px
   au-delà du bord gauche sur les écrans < ~400px. On rattache le panneau au
   .topbar (déjà position:relative, pleine largeur) au lieu du bouton, en
   désactivant le contexte de positionnement de .apps-launcher, pour un
   panneau qui respecte toujours les bords de l'écran. */
@media (max-width: 480px) {
  .apps-launcher {
    position: static;
  }

  .apps-launcher-menu {
    top: 64px;
    left: 16px;
    right: 16px;
    width: auto;
  }
}

.apps-launcher-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.apps-launcher-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--link);
}

.apps-launcher-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--text-muted);
}

.apps-launcher-edit svg {
  width: 14px;
  height: 14px;
}

.apps-launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.apps-launcher-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.12s var(--ease);
}

.apps-launcher-item:hover {
  background: var(--btn-bg);
  text-decoration: none;
  color: var(--text);
}

.apps-launcher-item-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.apps-launcher-item-icon svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

.apps-launcher-item-icon-mail {
  background: #1a73e8;
}

.apps-launcher-item-icon-contacts {
  background: #34a853;
}

.apps-launcher-item-icon-search {
  background: #ea4335;
}

.apps-launcher-item-icon-store {
  background: #9334e6;
}

.apps-launcher-item-icon-entreprise {
  background: #fbbc05;
}

.apps-launcher-item-icon-video {
  background: #ea4335;
}

.apps-launcher-item-icon-matic {
  background: #e1306c;
}

/* Page Contacts */

.contacts-page {
  flex: 1;
  width: min(640px, 100%);
  margin: 40px auto 60px;
  padding: 0 16px;
}

.contacts-page h1 {
  font-size: 24px;
  margin: 0 0 4px;
}

.contacts-lead {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 24px;
}

.contacts-add-section {
  margin-bottom: 24px;
}

.contacts-add-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.contacts-add-form input {
  flex: 1;
  min-width: 140px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}

.contacts-add-form input:focus {
  outline: none;
  border-color: var(--link);
}

.contacts-row-delete {
  flex-shrink: 0;
}

.contacts-search-input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

.contacts-search-input:focus {
  outline: none;
  border-color: var(--link);
}

.contacts-empty,
.contacts-row-none {
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  padding: 24px 0;
}

.contacts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.contacts-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}

.contacts-row.hidden {
  display: none;
}

.contacts-row-none.hidden {
  display: none;
}

.contacts-row-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}

.contacts-row-info {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.contacts-row-name {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-row-email {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-row-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Pages de contenu (À propos, Eyefind Store) */

.content-page {
  flex: 1;
  width: min(760px, 100%);
  margin: 0 auto 60px;
  padding: 40px 16px 0;
  text-align: center;
}

.content-page-logo {
  width: 96px;
  margin-bottom: 20px;
}

.content-page h1 {
  font-size: 28px;
  margin: 0 0 8px;
}

.content-page-lead {
  color: var(--text-muted);
  font-size: 15px;
  margin: 0 0 40px;
}

.content-section {
  text-align: left;
  border-top: 1px solid var(--border);
  padding: 24px 0;
}

.content-section h2 {
  font-size: 18px;
  margin: 0 0 12px;
}

.content-section p {
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.content-list {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.9;
}

.content-page-back {
  display: inline-block;
  margin-top: 32px;
}

.content-page-note {
  color: var(--text-muted);
  font-size: 13px;
  margin: 24px 0 0;
}

/* Pages institutionnelles/légales : variantes additives du composant
   .content-page déjà utilisé par a-propos.php (sommaire, encadrés, étapes,
   fil d'Ariane, accordéons natifs, champ honeypot). */

.content-page-wide {
  width: min(880px, 100%);
}

.content-breadcrumb {
  text-align: left;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 20px;
}

.content-breadcrumb a {
  color: var(--text-muted);
}

.content-breadcrumb a:hover {
  color: var(--text);
  text-decoration: underline;
}

.content-toc {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 0 0 32px;
}

.content-toc-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.content-toc ol {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.9;
}

.content-toc a {
  color: var(--link);
}

.content-notice {
  text-align: left;
  border: 1px solid var(--border);
  border-left: 4px solid var(--link);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  padding: 16px 20px;
  margin: 0 0 32px;
  font-size: 14px;
  color: var(--text);
}

.content-notice p {
  margin: 0 0 6px;
}

.content-notice p:last-child {
  margin-bottom: 0;
}

.content-notice-warning {
  border-left-color: var(--danger);
}

.content-notice-success {
  border-left-color: var(--success);
}

.content-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 4px;
}

.content-step {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.content-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--link-tint);
  color: var(--link);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

.content-step h3 {
  font-size: 15px;
  margin: 0 0 6px;
}

.content-step p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.content-page details {
  text-align: left;
  border-top: 1px solid var(--border);
  padding: 16px 0;
}

.content-page details summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--text);
  list-style: none;
}

.content-page details summary::-webkit-details-marker {
  display: none;
}

.content-page details summary::before {
  content: "+";
  display: inline-block;
  width: 16px;
  color: var(--text-muted);
}

.content-page details[open] summary::before {
  content: "−";
}

.content-page details p {
  margin: 10px 0 0 16px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
}

.account-form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   Store — refonte premium (Google Store / Apple Store / Discord Shop)
   Tout repose sur les variables de thème existantes (--bg, --text,
   --text-muted, --border, --border-hover, --shadow-soft, --btn-bg,
   --link, --link-tint, --danger(-bg), --success(-bg), --radius-*).
   ============================================================ */

.store-page {
  width: min(1280px, 100%);
  margin: 0 auto 80px;
  padding: 0 24px;
}

.store-page-narrow {
  width: min(820px, 100%);
  margin: 0 auto 80px;
  padding: 0 24px;
}

.store-page h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 8px 0 28px;
}

.store-footer-actions {
  text-align: center;
  margin-top: 40px;
}

/* Fil d'Ariane */

.store-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin: 24px 0 8px;
}

.store-breadcrumb a {
  color: var(--link);
  font-size: 12px;
}

.store-breadcrumb span[aria-hidden] {
  color: var(--text-muted);
}

/* Hero */

.store-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 84px 32px;
  margin: 8px 0 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--link-tint), transparent 70%);
}

.store-hero-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--link);
  font-weight: 700;
}

.store-hero h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.store-hero-logo {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
}

.store-hero p {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0;
  line-height: 1.6;
}

.store-hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.store-hero-actions .btn {
  border-radius: 999px;
  padding: 0 28px;
  height: 44px;
  font-size: 15px;
}

/* Pills de catégories (horizontales, centrées) */

.store-categories-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 0 56px;
}

.store-category-pill {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.store-category-pill:hover {
  border-color: var(--border-hover);
  background: var(--btn-bg);
  text-decoration: none;
}

.store-category-pill.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.store-category-pill.hidden {
  display: none;
}

.store-categories-toggle {
  padding: 10px 18px;
  border: none;
  background: none;
  color: var(--link);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.store-categories-toggle:hover {
  text-decoration: underline;
}

/* Toolbar recherche/tri — discrète, alignée à droite au-dessus d'une grille */

.store-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.store-search-input,
.store-sort-select {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.store-sort-wrap {
  position: relative;
  display: inline-flex;
}

.store-sort-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 34px;
  cursor: pointer;
}

.store-sort-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.store-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.store-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--link);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  vertical-align: middle;
}

/* Sections (Nouveautés, Populaires, Promotions, Abonnements...) */

.store-section {
  margin-bottom: 64px;
  scroll-margin-top: 24px;
}

.store-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
}

.store-section-header h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.store-section-header a {
  font-size: 13px;
  color: var(--link);
  white-space: nowrap;
}

.store-section-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin: -18px 0 24px;
  max-width: 620px;
}

.store-empty {
  color: var(--text-muted);
  font-size: 15px;
  text-align: center;
  padding: 64px 0;
}

/* "Pourquoi choisir Eyefind Premium ?" — bloc éditorial statique */

.store-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.store-feature {
  text-align: center;
  padding: 4px;
}

.store-feature-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--link-tint);
  color: var(--link);
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-feature-icon svg {
  width: 26px;
  height: 26px;
}

.store-feature h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
}

.store-feature p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Grille produits + cartes */

.product-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 28px;
}

@media (min-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1180px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

.product-grid-scroll {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 4px 4px 14px;
}

.product-grid-scroll .product-card {
  flex: 0 0 250px;
}

.product-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background: var(--bg);
  overflow: hidden;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.product-card:hover {
  box-shadow: 0 18px 40px var(--shadow-soft);
  transform: translateY(-4px);
  border-color: var(--border);
}

.product-card-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--link-tint), var(--btn-bg));
  overflow: hidden;
}

.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 26px;
  display: block;
}

.product-card-media-fallback {
  width: 88px;
  height: 88px;
  color: var(--link);
  opacity: 0.85;
}

.product-card-media-fallback svg {
  width: 100%;
  height: 100%;
}

.product-card-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.product-badge {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
}

.product-badge-promo { background: var(--danger); }
.product-badge-bestseller { background: #b06000; }
.product-badge-new { background: var(--success); }
.product-badge-limited { background: #9334e6; }
.product-badge-sponsored { background: var(--link); }

.product-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.product-card-category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.product-card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.product-card-name:hover {
  color: var(--link);
  text-decoration: none;
}

.product-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.product-card-price {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
}

.product-card-old-price {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: line-through;
}

.product-card-discount {
  font-size: 11px;
  font-weight: bold;
  color: var(--danger);
}

.product-card-stock {
  font-size: 11.5px;
  color: var(--success);
}

.product-card-stock.low {
  color: var(--danger);
}

.product-card-cta {
  margin-top: 12px;
  width: 100%;
  font-weight: 600;
  border-radius: 999px;
}

/* Cartes "Abonnement" mises en avant */

.subscription-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.subscription-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.subscription-card:hover {
  box-shadow: 0 18px 40px var(--shadow-soft);
  transform: translateY(-3px);
}

.subscription-card-icon {
  width: 48px;
  height: 48px;
  color: var(--link);
  margin-bottom: 16px;
}

.subscription-card-icon svg {
  width: 100%;
  height: 100%;
}

.subscription-card-name {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 10px;
}

.subscription-card-price {
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.subscription-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.subscription-card-features li {
  font-size: 13.5px;
  color: var(--text-muted);
  padding-left: 22px;
  position: relative;
  text-align: left;
}

.subscription-card-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}

.subscription-card-details {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Fiche produit : galerie | infos | buybox */

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
  margin: 8px 0 64px;
}

@media (max-width: 1100px) {
  .product-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .product-detail-buybox-col { grid-column: 1 / -1; max-width: 420px; }
}

@media (max-width: 800px) {
  .product-detail { grid-template-columns: 1fr; }
  .product-detail-buybox-col { max-width: none; }
}

.product-detail-buybox-col {
  position: sticky;
  top: 24px;
}

.product-detail-gallery-main {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--link-tint), var(--btn-bg));
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 32px;
}

.product-detail-gallery-main .product-card-media-fallback {
  width: 160px;
  height: 160px;
}

.product-detail-gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
}

.product-detail-gallery-thumbs img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s var(--ease);
}

.product-detail-gallery-thumbs img:hover {
  opacity: 1;
}

.product-detail-category {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.product-detail-info h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.product-detail-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.product-detail-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 16px 0 20px;
  flex-wrap: wrap;
}

.product-detail-price {
  font-size: 32px;
  font-weight: 700;
}

.product-detail-old-price {
  font-size: 18px;
  color: var(--text-muted);
  text-decoration: line-through;
}

.product-detail-desc {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.75;
  margin-bottom: 28px;
}

.product-detail-buybox {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-detail-stock {
  font-size: 13px;
}

.product-specs {
  margin: 8px 0 48px;
}

.product-specs h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px;
}

.product-specs dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 16px;
  margin: 0;
  max-width: 520px;
}

.product-specs dt {
  font-size: 13px;
  color: var(--text-muted);
}

.product-specs dd {
  font-size: 13px;
  color: var(--text);
  margin: 0;
}

/* Stepper quantité (fiche produit + panier) */

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  width: fit-content;
}

.qty-stepper button {
  width: 34px;
  height: 34px;
  border: none;
  background: var(--btn-bg);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.qty-stepper button:hover {
  background: var(--link-tint);
  color: var(--link);
}

.qty-stepper input {
  width: 42px;
  height: 34px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 14px;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Panier */

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
  margin: 8px 0 64px;
}

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-item-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
  transition: box-shadow 0.2s var(--ease);
}

.cart-item-card:hover {
  box-shadow: 0 8px 24px var(--shadow-soft);
}

.cart-item-thumb {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(160deg, var(--link-tint), var(--btn-bg));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.cart-item-thumb .product-card-media-fallback {
  width: 44px;
  height: 44px;
}

.cart-item-info {
  flex: 1;
  min-width: 160px;
}

.cart-item-name {
  font-weight: 600;
  font-size: 14.5px;
}

.cart-item-price {
  font-size: 13px;
  color: var(--text-muted);
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  margin-left: auto;
}

.cart-item-line-total {
  font-weight: bold;
  font-size: 15px;
  min-width: 70px;
  text-align: right;
  transition: color 0.2s var(--ease);
}

.cart-item-remove {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.cart-item-remove:hover {
  text-decoration: underline;
}

.cart-summary {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cart-summary h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-muted);
}

.cart-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 21px;
  font-weight: 700;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.cart-summary-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  font-size: 13px;
}

.cart-summary-balance.insufficient {
  background: var(--danger-bg);
  color: var(--danger);
}

.cart-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.cart-summary-actions .btn-primary {
  border-radius: 999px;
  height: 46px;
}

.cart-summary-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-align: center;
}

.cart-summary-clear:hover {
  text-decoration: underline;
}

/* Mes commandes */

.order-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 8px 0 40px;
}

.order-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  flex-wrap: wrap;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.order-card:hover {
  border-color: var(--border-hover);
  text-decoration: none;
  box-shadow: 0 10px 28px var(--shadow-soft);
  transform: translateY(-2px);
}

.order-card-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-card-number {
  font-weight: 600;
  font-size: 14.5px;
}

.order-card-date {
  font-size: 12px;
  color: var(--text-muted);
}

.order-card-items {
  font-size: 12px;
  color: var(--text-muted);
}

.order-card-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.order-card-total {
  font-weight: bold;
  font-size: 16px;
}

.order-detail-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}

.order-detail-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.order-detail-item-name {
  flex: 1;
  font-size: 14px;
}

.order-detail-item-qty {
  font-size: 13px;
  color: var(--text-muted);
}

.order-detail-item-total {
  font-weight: 600;
  font-size: 14px;
}

@media (max-width: 700px) {
  .store-hero {
    padding: 56px 24px;
  }

  .store-hero-logo {
    max-width: 280px;
  }
}

/* Page d'erreur (404) */

.error-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 16px;
}

.error-logo {
  width: 120px;
  margin-bottom: 24px;
}

.error-code {
  font-size: 72px;
  font-weight: 700;
  color: var(--link);
  line-height: 1;
  margin-bottom: 8px;
}

.error-page h1 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 8px;
  max-width: 480px;
}

.error-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 28px;
  max-width: 420px;
}

/* Pages compte (connexion / inscription) */

.account-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.account-logo {
  width: 120px;
  margin-bottom: 24px;
}

.account-card {
  width: min(420px, 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
}

.account-card h1 {
  font-size: 22px;
  margin: 0 0 4px;
  text-align: center;
}

.account-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 24px;
}

.account-errors {
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: 13px;
  list-style: none;
}

.account-errors li + li {
  margin-top: 4px;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.account-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.account-form input,
.account-form textarea {
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
}

.account-form input {
  height: 40px;
}

.account-form textarea {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.5;
  resize: vertical;
}

.account-form input:focus,
.account-form textarea:focus {
  outline: none;
  border-color: var(--link);
}

.account-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.account-link {
  color: var(--link);
  font-size: 14px;
  font-weight: 600;
}

.btn-primary {
  background: var(--link);
  border-color: var(--link);
  color: #fff;
  font-weight: 600;
  padding: 0 24px;
}

.btn-primary:hover {
  background: #1765cc;
  border-color: #1765cc;
}

.account-success {
  background: var(--success-bg);
  color: var(--success);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: 13px;
}

.oauth-gtaw-actions {
  justify-content: center;
}

.oauth-gtaw-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.oauth-character-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oauth-character-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}

.oauth-character-choice:has(input:checked) {
  border-color: var(--link);
  background: var(--link-tint);
}

.oauth-character-choice input {
  accent-color: var(--link);
}

/* Page profil — façon Google Account : nav latérale + contenu centré */

.profile-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1180px;
  padding: 28px 24px 0;
}

.profile-page-header-logo {
  font-family: "Poppins", arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
}

.profile-page-header-logo span {
  color: var(--link);
}

.profile-page-header-logo:hover {
  text-decoration: none;
}

.profile-page-header-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
}

.profile-page-header-title {
  font-size: 22px;
  color: var(--text-muted);
}

.profile-shell {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 24px 24px 60px;
}

.profile-nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 16px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.profile-nav-toggle svg {
  width: 18px;
  height: 18px;
}

.profile-nav {
  width: 272px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - 160px);
}

.profile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-nav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
}

.profile-nav-link:hover {
  background: var(--btn-bg);
  text-decoration: none;
}

.profile-nav-link.active {
  background: var(--link-tint);
  color: var(--link);
  font-weight: 500;
}

.profile-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--profile-icon-color, var(--text-muted));
  background: color-mix(in srgb, var(--profile-icon-color, var(--text-muted)) 16%, transparent);
}

.profile-nav-icon svg {
  width: 20px;
  height: 20px;
}

.profile-nav-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 16px 20px 0;
  color: var(--text-muted);
  font-size: 12px;
}

.profile-nav-footer a {
  color: var(--text-muted);
  font-size: 12px;
}

.profile-nav-footer a:hover {
  color: var(--text);
  text-decoration: underline;
}

.profile-main {
  flex: 1;
  min-width: 0;
  max-width: 600px;
  margin: 0 auto;
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin: 24px 0 40px;
}

.profile-header-avatar-wrap {
  position: relative;
  margin-bottom: 16px;
}

.profile-header-avatar-wrap .profile-avatar-preview {
  width: 96px;
  height: 96px;
  font-size: 34px;
  box-shadow: 0 0 0 4px var(--link-tint);
}

.profile-header-avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--btn-bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.profile-header-avatar-edit svg {
  width: 17px;
  height: 17px;
}

.profile-header-name {
  font-size: 30px;
  font-weight: 500;
  margin: 0;
}

.profile-header-email {
  color: var(--text-muted);
  font-size: 15px;
  margin: 0;
}

.profile-header-character {
  color: var(--text-muted);
  font-size: 14px;
  margin: 6px 0 0;
}

.profile-search {
  position: relative;
  margin: 0 0 32px;
}

.profile-search svg {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--text-muted);
}

.profile-search input {
  width: 100%;
  height: 48px;
  padding: 0 20px 0 52px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.profile-search input:focus {
  outline: none;
  background: var(--bg);
  box-shadow: 0 1px 4px var(--shadow-soft);
}

.profile-search-results {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  box-shadow: 0 4px 16px var(--shadow-soft);
}

.profile-search-results.hidden {
  display: none;
}

.profile-search-result {
  padding: 10px 18px;
  color: var(--text);
  font-size: 14px;
}

.profile-search-result:hover {
  background: var(--btn-bg);
  text-decoration: none;
}

.profile-shortcuts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.profile-shortcut {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
}

.profile-shortcut:hover {
  background: var(--btn-bg);
  text-decoration: none;
}

.profile-primary-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--btn-bg);
  padding: 28px;
  margin-bottom: 40px;
}

.profile-primary-card.hidden {
  display: none;
}

.profile-primary-card-main {
  display: flex;
  gap: 20px;
}

.profile-primary-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--link-tint);
  color: var(--link);
}

.profile-primary-card-icon svg {
  width: 24px;
  height: 24px;
}

.profile-primary-card-text {
  min-width: 0;
}

.profile-primary-card-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
}

.profile-primary-card-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.profile-primary-card-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
}

.profile-primary-card-dismiss {
  border: none;
  background: none;
  padding: 0;
  color: var(--link);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.profile-primary-card-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 20px 0 0;
  padding-top: 20px;
  width: 100%;
  border: none;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--link);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.profile-primary-card-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s var(--ease);
}

.profile-primary-card-toggle.open svg {
  transform: rotate(180deg);
}

.profile-more {
  margin-top: 4px;
}

.profile-more.hidden {
  display: none;
}

.profile-more-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: 13px;
}

.profile-more-row + .profile-more-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.profile-more-label {
  color: var(--text-muted);
}

.profile-more-value {
  color: var(--text);
  text-align: right;
}

/* Composant carte générique (profile_render_card()) : pas utilisé sur
   l'accueil actuel (remplacé par la grande carte + "Voir plus" ci-dessus),
   conservé stylé pour une réutilisation future ailleurs sur la page. */
.profile-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}

.profile-card-title {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.profile-card-body p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

.profile-card-footer {
  margin-top: 12px;
  font-size: 13px;
}

.profile-section {
  border-top: 1px solid var(--border);
  padding: 40px 0;
}

.profile-section h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 20px;
}

.profile-subsection-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 28px 0 14px;
}

#infos .profile-subsection-title:first-of-type {
  margin-top: 0;
}

.profile-section textarea {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  resize: vertical;
}

.profile-section textarea:focus {
  outline: none;
  border-color: var(--link);
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.profile-avatar-preview {
  width: 80px;
  height: 80px;
  font-size: 30px;
  flex-shrink: 0;
}

.profile-inline-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.login-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.login-history-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.login-history-date {
  color: var(--text);
  min-width: 130px;
}

.login-history-character {
  color: var(--text-muted);
  flex: 1;
}

.login-history-current {
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .profile-page-header {
    padding: 20px 16px 0;
  }

  .profile-shell {
    flex-direction: column;
    gap: 0;
    padding: 16px 16px 60px;
  }

  .profile-nav-toggle {
    display: flex;
  }

  .profile-nav {
    width: 100%;
    min-height: 0;
    position: static;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }

  .profile-nav.hidden {
    display: none;
  }

  .profile-main,
  .admin-page {
    max-width: 100%;
  }

  .profile-primary-card {
    padding: 20px;
  }

  .profile-primary-card-main {
    flex-direction: column;
    gap: 14px;
  }

  .profile-shortcuts {
    justify-content: flex-start;
  }
}

.theme-switch {
  display: inline-flex;
  padding: 4px;
  border-radius: 20px;
  background: var(--btn-bg);
  gap: 4px;
}

.theme-switch button {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 16px;
  cursor: pointer;
  transition: background-color 0.12s var(--ease), color 0.12s var(--ease);
}

.theme-switch button:hover {
  color: var(--text);
}

.theme-switch button.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 3px var(--shadow-soft);
}

/* Administration (même esprit visuel que la page "Gérer mon compte" :
   colonne centrée, sections séparées par un simple filet plutôt que des
   cartes encadrées, mêmes tailles de titres) */

.admin-page {
  flex: 1;
  min-width: 0;
  max-width: 680px;
  margin: 0 auto;
}

.admin-form-section,
.admin-list-section {
  border-top: 1px solid var(--border);
  padding: 32px 0;
  margin: 0;
}

.admin-form-section:first-child,
.admin-list-section:first-child {
  border-top: none;
  padding-top: 8px;
}

.admin-form-section h2,
.admin-list-section h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 20px;
}

.admin-folder-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
}

.admin-folder-tab {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-muted);
}

.admin-folder-tab:hover {
  background: var(--btn-bg);
  text-decoration: none;
}

.admin-folder-tab.active {
  background: var(--link-tint);
  color: var(--link);
  font-weight: 500;
}

.admin-message-body {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 16px 0 24px;
  white-space: pre-wrap;
  line-height: 1.6;
}

/* Panneau de confirmation pleine largeur (bannissement, suspension...),
   rendu à part au-dessus du tableau plutôt qu'en <details> repliable dans
   une cellule d'actions étroite — ça cassait la mise en page du tableau. */
.admin-confirm-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--btn-bg);
  padding: 20px;
  margin: 16px 0 20px;
}

.admin-confirm-panel-danger {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.admin-confirm-panel .account-form {
  max-width: 360px;
}

.admin-confirm-panel p {
  margin: 0 0 12px;
}

.admin-site-form {
  max-width: 480px;
}

.admin-icon-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.admin-icon-preview {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.admin-icon-preview-sm {
  width: 22px;
  height: 22px;
  display: block;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table th {
  text-align: left;
  font-size: 12px;
  color: var(--text-muted);
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--border);
}

.admin-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.admin-table-url {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 12px;
}

.admin-table-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  white-space: nowrap;
}

.admin-table-actions form {
  display: inline;
}

/* Certaines colonnes (Admin/Statut/Actions) n'ont presque jamais de contenu
   sur plusieurs lignes, contrairement à Pseudo/Personnage qui peuvent
   wrapper sur un nom long — les laisser en vertical-align:top (hérité de
   .admin-table td) créait un vide au-dessus du texte court et donnait
   l'impression que les lignes du tableau ne s'alignaient pas entre elles. */
.admin-table-vmid {
  vertical-align: middle;
}

.admin-delete-btn {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.admin-delete-btn:hover {
  text-decoration: underline;
}

.admin-table-note {
  color: var(--text-muted);
  font-size: 13px;
}

.admin-toggle-btn {
  background: none;
  border: none;
  color: var(--link);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.admin-toggle-btn:hover {
  text-decoration: underline;
}

.admin-toggle-btn-danger {
  color: var(--danger);
}

/* Espace Entreprise (+ back-office Store) */

.company-layout {
  flex: 1;
  width: min(1200px, 100%);
  margin: 32px auto 60px;
  padding: 0 16px;
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.company-sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.company-nav-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 6px 10px;
}

.company-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.company-nav-link {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
}

.company-nav-link:hover {
  background: var(--link-tint);
  text-decoration: none;
}

.company-nav-link.active {
  background: var(--link-tint);
  color: var(--link);
  font-weight: bold;
}

.company-main {
  flex: 1;
  min-width: 0;
}

.company-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.company-header h1 {
  font-size: 22px;
  margin: 0 0 4px;
}

.company-header-subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

.company-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.company-stat-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.company-stat-card-label {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.company-stat-card-value {
  font-size: 26px;
  font-weight: bold;
  margin: 0;
}

.company-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.company-section h2 {
  font-size: 16px;
  margin: 0 0 16px;
}

.company-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.company-filters input,
.company-filters select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.company-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 14px;
}

.company-section-attention {
  border-color: var(--warning);
}

.company-attention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.company-attention-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}

.company-attention-list a:hover {
  background: var(--btn-bg);
}

.company-attention-list a::after {
  content: "→";
  color: var(--text-muted);
}

.company-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.company-badge-neutral { background: var(--btn-bg); color: var(--text-muted); }
.company-badge-info { background: var(--link-tint); color: var(--link); }
.company-badge-success { background: var(--success-bg); color: var(--success); }
.company-badge-warning { background: var(--warning-bg); color: var(--warning); }
.company-badge-danger { background: var(--danger-bg); color: var(--danger); }

.company-notice {
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 18px;
}

.company-notice-success {
  background: var(--success-bg);
  color: var(--success);
}

.company-notice-error {
  background: var(--danger-bg);
  color: var(--danger);
}

.company-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}

.company-pagination a,
.company-pagination span {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.company-pagination .active {
  background: var(--link-tint);
  color: var(--link);
}

@media (max-width: 760px) {
  .company-layout {
    flex-direction: column;
  }
  .company-sidebar {
    position: static;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .company-nav-links {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Eyefind Vidéo — plateforme vidéo façon YouTube (embeds YouTube uniquement,
   voir includes/video/*.php). Utilise exclusivement les variables de thème
   existantes définies en haut de ce fichier (--bg, --text, --border, etc.).
   ========================================================================== */

/* Le header EyefindTube reste visible en permanence à l'écran (comme la
   sidebar, déjà "collée") au lieu de défiler avec le reste de la page —
   appliqué à .video-header uniquement (pas à .topbar tout court, qui est
   partagé avec tout le reste du site) : n'affecte que les pages video/*.php.
   position:fixed (pas sticky) : sort complètement du flux normal, donc
   .video-shell compense avec un padding-top égal à la hauteur réelle du
   header (voir plus bas) pour que rien ne passe dessous. */
.video-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--bg);
}
.video-header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  color: var(--text);
}
.video-header-logo img {
  height: 68px;
  width: auto;
}

.video-header-search {
  display: flex;
  flex: 1;
  max-width: 560px;
  margin: 0 16px;
}
.video-header-search input {
  flex: 1;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 999px 0 0 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
.video-header-search input:focus {
  outline: none;
  border-color: var(--link);
}
.video-header-search button {
  width: 56px;
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 999px 999px 0;
  background: var(--btn-bg);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video-header-search button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.video-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  border-radius: 999px;
}
.video-sidebar-toggle:hover {
  background: var(--btn-bg);
}
.video-sidebar-toggle svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* padding-top compense .video-header, qui est en position:fixed (donc hors
   du flux normal) : sans ça, le contenu se retrouverait caché sous le header. */
.video-shell {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 100px 24px 60px;
  gap: 24px;
}

.video-sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 116px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.video-sidebar.compact {
  width: 72px;
}
.video-sidebar.compact .video-sidebar-label,
.video-sidebar.compact .video-sidebar-title {
  display: none;
}
.video-sidebar.compact .video-sidebar-link {
  flex-direction: column;
  gap: 6px;
  padding: 12px 4px;
  font-size: 10px;
}
.video-sidebar-title {
  padding: 8px 12px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.video-sidebar-link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
}
.video-sidebar-link:hover {
  background: var(--btn-bg);
}
.video-sidebar-link.active {
  background: var(--link-tint);
  color: var(--link);
  font-weight: 600;
}
.video-sidebar-link svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex-shrink: 0;
}
.video-sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 4px;
}

.video-main {
  flex: 1;
  min-width: 0;
}

.video-category-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: 8px;
}
.video-category-chip {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}
.video-category-chip.active {
  background: var(--text);
  color: var(--bg);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 32px 20px;
}

/* Fond teinté au survol, dérivé de la couleur moyenne de l'avatar de la
   chaîne (assets/js/video.js calcule --card-glow en JS via <canvas>, pas de
   librairie externe). --card-glow a une valeur neutre par défaut tant que le
   calcul n'a pas encore eu lieu (image pas chargée, ou avatar-lettre sans
   image réelle). Ni bordure ni padding : la taille de la vignette ne change
   jamais, au repos comme au survol. */
.video-card {
  --card-glow: 120, 120, 120;
  display: flex;
  flex-direction: column;
  color: var(--text);
  border-radius: var(--radius-md);
  transition: background-color 0.25s var(--ease);
}
.video-card:hover {
  background: rgba(var(--card-glow), 0.16);
}
.video-card-thumb-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.video-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--btn-bg);
}
.video-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-card-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.video-card-thumb-fallback svg {
  width: 40px;
  height: 40px;
}
.video-card-duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
}
.video-card-body {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.video-card-channel-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--link);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-decoration: none;
}
.video-card-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.video-card-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.video-card-channel,
.video-card-stats {
  font-size: 12.5px;
  color: var(--text-muted);
}
.video-card-channel {
  text-decoration: none;
  width: fit-content;
}
.video-card-channel:hover {
  color: var(--text);
  text-decoration: underline;
}

.video-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Page de lecture */

.watch-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.watch-main {
  flex: 2;
  min-width: 320px;
}
.video-player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.video-player-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-watch-title {
  font-size: 20px;
  font-weight: 600;
  margin: 16px 0 8px;
}
.video-watch-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.video-watch-stats {
  color: var(--text-muted);
  font-size: 14px;
}
.video-watch-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.video-like-group {
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: var(--btn-bg);
  overflow: hidden;
}
.video-like-group button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  color: var(--text);
  padding: 0 16px;
  height: 38px;
  font-size: 13px;
  cursor: pointer;
}
.video-like-group button.active {
  color: var(--link);
}
.video-like-group button + button {
  border-left: 1px solid var(--border);
}
.video-like-group svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.video-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 0 16px;
  height: 38px;
  font-size: 13px;
}
.video-action-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.video-action-btn.active {
  background: var(--link-tint);
  color: var(--link);
}

/* Sélecteur de playlist (formulaire "Ajouter à la playlist") : sans
   appearance:none, le <select> gardait le chevron/l'encart natif du
   navigateur par-dessus le style pilule de .video-action-btn — même bug que
   .store-sort-select corrige déjà pour le tri du Store, même solution. */
.video-playlist-select-wrap {
  position: relative;
  display: inline-flex;
}
.video-playlist-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 30px;
  cursor: pointer;
}
.video-playlist-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.video-channel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.video-channel-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.video-channel-avatar-lg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--link);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.video-channel-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.video-channel-subs {
  font-size: 12.5px;
  color: var(--text-muted);
}
.video-subscribe-btn {
  border-radius: 999px;
  padding: 0 20px;
  height: 38px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  font-size: 13px;
  border: none;
}
.video-subscribe-btn.subscribed {
  background: var(--btn-bg);
  color: var(--text);
}

.video-description-box {
  background: var(--btn-bg);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 14px;
  font-size: 14px;
  white-space: pre-line;
  word-break: break-word;
}

.video-comments-section {
  margin-top: 24px;
}
.video-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.video-comments-count {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.video-comments-sort-btn {
  gap: 6px;
}
.video-comments-sort-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Menu déroulant "Trier par" façon YouTube (accueil des commentaires et
   panneau de commentaires des Shorts) : le déclencheur reste toujours
   libellé "Trier par" (n'affiche pas le choix courant) — c'est l'option
   surlignée dans le menu qui indique le tri actif. */
.video-comments-sort-wrapper {
  position: relative;
}
.video-comments-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  width: 280px;
  max-width: calc(100vw - 32px);
  background: var(--bg);
  border-radius: 12px;
  box-shadow: 0 4px 24px var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.video-comments-sort-menu.hidden {
  display: none;
}
.video-comments-sort-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.video-comments-sort-option:hover {
  background: var(--btn-bg);
}
.video-comments-sort-option.active {
  background: var(--btn-bg);
}
.video-comments-sort-option-title {
  font-size: 14px;
  font-weight: 600;
}
.video-comments-sort-option-desc {
  font-size: 12.5px;
  color: var(--text-muted);
}
.comment-form {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
}
.comment-form-body {
  flex: 1;
  min-width: 0;
}
.comment-form textarea {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-size: 14px;
  resize: none;
  min-height: 22px;
  max-height: 160px;
  overflow-y: auto;
  padding: 4px 0;
  font-family: inherit;
}
.comment-form textarea:focus {
  outline: none;
  border-bottom-color: var(--link);
}
.comment-form-actions {
  display: none;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.comment-form-actions.visible {
  display: flex;
}
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.comment-item {
  display: flex;
  gap: 14px;
}
/* Trait vertical reliant un commentaire à ses réponses (façon YouTube/Reddit) :
   part du bas de l'avatar du commentaire parent, descend jusqu'au bas du bloc
   de réponses. Chaque réponse a son propre "coude" horizontal qui rejoint ce
   trait vertical jusqu'au centre de son propre avatar. Purement décoratif :
   currentColor/var(--border), suit le thème sans changement de logique. */
.comment-item-has-replies {
  position: relative;
}
/* Le trait vertical n'existe que lorsque les réponses sont dépliées
   (classe .replies-open ajoutée par assets/js/video.js au clic sur le
   bouton "N réponses") — sinon il pointerait vers un bloc masqué. */
.comment-item-has-replies.replies-open::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: var(--border);
  z-index: 0;
}
.comment-replies > .comment-item {
  position: relative;
}
.comment-replies.hidden {
  display: none;
}
.comment-replies-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 10px 0 0 50px;
  border: none;
  background: none;
  color: var(--link);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.comment-replies-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform 0.15s var(--ease);
}
.comment-replies-toggle.open svg {
  transform: rotate(180deg);
}
/* Coude arrondi (pas d'angle droit) qui rejoint le trait vertical ci-dessus
   au centre de l'avatar de la réponse : bordure gauche + bordure basse d'une
   boîte invisible, avec seulement le coin bas-gauche arrondi. */
.comment-replies > .comment-item::before {
  content: "";
  position: absolute;
  left: -82px;
  top: 2px;
  width: 100px;
  height: 16px;
  border-left: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  border-bottom-left-radius: 12px;
  z-index: 0;
}
.comment-avatar,
.video-card-channel-avatar,
.video-channel-avatar-lg {
  overflow: hidden;
}
.comment-avatar {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--link);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.comment-body-col {
  flex: 1;
  min-width: 0;
}
/* Badge "Épinglé par..." (comme YouTube) : identité de la chaîne de la
   vidéo, jamais celle de l'auteur du commentaire. */
.comment-pinned-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.comment-pinned-label svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.comment-author-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.comment-author {
  font-weight: 600;
  color: var(--text);
}
.comment-time {
  color: var(--text-muted);
  font-size: 12px;
}
.comment-text {
  font-size: 14px;
  margin: 4px 0 6px;
  white-space: pre-line;
  word-break: break-word;
}
.comment-actions {
  display: flex;
  gap: 16px;
  font-size: 12.5px;
}
.comment-actions button,
.comment-actions a {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
}
.comment-actions button:hover,
.comment-actions a:hover {
  color: var(--text);
}
.comment-like-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}
.comment-like-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  transition: transform 0.15s var(--ease);
}
.comment-like-btn.active {
  color: var(--link);
}
.comment-like-btn.pop svg {
  animation: video-like-pop 0.28s var(--ease);
}
.comment-like-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.comment-like-static {
  color: var(--text-muted);
  font-size: 12.5px;
}
@media (prefers-reduced-motion: reduce) {
  .comment-like-btn.pop svg {
    animation: none;
  }
}
.comment-replies {
  margin: 14px 0 0 50px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.comment-reply-form {
  margin: 10px 0 0 50px;
}
.comment-reply-form.hidden {
  display: none;
}

.video-recommend-col {
  flex: 1;
  min-width: 280px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.video-recommend-item {
  display: flex;
  gap: 10px;
  color: var(--text);
}
.video-recommend-thumb {
  position: relative;
  width: 168px;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--btn-bg);
}
.video-recommend-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-recommend-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.video-recommend-title {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-recommend-channel,
.video-recommend-stats {
  font-size: 12px;
  color: var(--text-muted);
}

/* Page chaîne */

.channel-banner {
  width: 100%;
  aspect-ratio: 7 / 1;
  border-radius: var(--radius-md);
  background: linear-gradient(120deg, var(--link-tint), var(--btn-bg));
  overflow: hidden;
  margin-top: 16px;
}
.channel-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.channel-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
}
.channel-avatar-lg {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--link);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.channel-identity-col {
  flex: 1;
  min-width: 200px;
}
.channel-name {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}
.channel-handle {
  color: var(--text-muted);
  font-size: 13.5px;
  margin-top: 2px;
}
.channel-stats {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 6px;
}
.channel-description {
  color: var(--text-muted);
  font-size: 13.5px;
  margin-top: 6px;
  max-width: 640px;
}
.channel-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.channel-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.channel-tab {
  padding: 14px 12px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.channel-tab:hover {
  color: var(--text);
}
.channel-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}
.channel-tab-panel.hidden {
  display: none;
}
.channel-about-box {
  max-width: 640px;
}
.channel-about-description {
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
}
.channel-about-since {
  color: var(--text-muted);
  font-size: 13px;
  margin: 16px 0;
}
.channel-about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.channel-about-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.channel-about-stat-value {
  font-size: 18px;
  font-weight: 700;
}
.channel-about-stat-label {
  font-size: 12.5px;
  color: var(--text-muted);
}

.analytics-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 24px;
}
.analytics-chart {
  display: block;
  width: 100%;
  height: 120px;
}
.analytics-chart-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Formulaires (publier / paramètres chaîne) */

.video-form-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: -8px;
}
.video-thumbnail-preview {
  width: 240px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--btn-bg);
}
.video-thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Playlists / historique / favoris */

.video-list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.video-list-row .video-recommend-thumb {
  width: 130px;
}
.video-list-row-meta {
  flex: 1;
  min-width: 0;
}
.video-list-row-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .video-shell {
    /* Le header passe généralement sur 2 lignes sur mobile (barre de
       recherche pleine largeur sous le logo) : padding-top plus généreux
       que sur desktop pour ne rien cacher dessous. */
    padding: 170px 16px 48px;
  }
  .video-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    width: 260px;
    background: var(--bg);
    padding: 170px 12px 24px;
    box-shadow: 2px 0 16px var(--shadow);
    transform: translateX(-100%);
    transition: transform 0.2s var(--ease);
    overflow-y: auto;
  }
  .video-sidebar.mobile-open {
    transform: translateX(0);
  }
  .video-sidebar.compact .video-sidebar-label {
    display: inline;
  }
  .video-sidebar.compact .video-sidebar-link {
    flex-direction: row;
    padding: 10px 12px;
    font-size: 14px;
  }
  .video-header-search {
    max-width: none;
  }
  .video-recommend-col {
    max-width: none;
  }
}

.video-sidebar-backdrop {
  display: none;
}
@media (max-width: 900px) {
  .video-sidebar-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 30;
  }
}

/* ==========================================================================
   Certification (badge), animation des likes, feedback d'erreur — ajoutés
   pour la certification de chaînes + interactions instantanées. Toujours à
   partir des variables de thème existantes (currentColor / var(--*)) : suit
   automatiquement le clair/sombre/auto, aucun nouveau système de couleurs.
   ========================================================================== */

.video-name-with-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.video-verified-badge {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--link);
}
.video-verified-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.channel-name .video-verified-badge svg,
.video-channel-name .video-verified-badge svg {
  width: 18px;
  height: 18px;
}

@keyframes video-like-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.video-like-group button svg,
.video-action-btn svg {
  transition: transform 0.15s var(--ease);
}
.video-like-group button.pop svg,
.video-action-btn.pop svg {
  animation: video-like-pop 0.28s var(--ease);
}
.video-like-group button:disabled,
.video-action-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .video-like-group button.pop svg,
  .video-action-btn.pop svg {
    animation: none;
  }
}

.video-action-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  max-width: 320px;
  display: none;
}

/* Bulle "robot d'aide" annonçant la bêta sur la page d'accueil (index.php
   uniquement) — repliée par défaut (juste le rond), le message ne s'affiche
   qu'au clic. bottom est calculé en JS à partir de la hauteur réelle du
   footer (voir index.php) plutôt qu'une valeur fixe : le footer s'enroule
   sur plusieurs lignes sur petit écran, une hauteur codée en dur aurait fini
   par le chevaucher. La valeur ci-dessous n'est qu'un repli avant que le JS
   ne s'exécute. */
.beta-bot-widget {
  position: fixed;
  right: 24px;
  bottom: 110px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.beta-bot-bubble-btn {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 4px 16px var(--shadow), 0 0 0 0 rgba(26, 115, 232, 0.45);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s var(--ease);
  animation: beta-bot-bubble-pulse 2.6s ease-in-out infinite;
}
.beta-bot-bubble-btn:hover {
  transform: scale(1.08);
}
@keyframes beta-bot-bubble-pulse {
  0%, 70%, 100% {
    box-shadow: 0 4px 16px var(--shadow), 0 0 0 0 rgba(26, 115, 232, 0.45);
  }
  35% {
    box-shadow: 0 4px 16px var(--shadow), 0 0 0 10px rgba(26, 115, 232, 0);
  }
}
/* L'animation "idle" (le robot penche la tête comme s'il regardait autour de
   lui) vit sur l'icône à l'intérieur du bouton, jamais sur le bouton
   lui-même : le bouton porte déjà le transform:scale() du survol, deux
   animations sur la même propriété transform du même élément se seraient
   marché dessus. */
.beta-bot-bubble-icon {
  display: inline-block;
  animation: beta-bot-idle-wiggle 6s ease-in-out infinite;
}
@keyframes beta-bot-idle-wiggle {
  0%, 92%, 100% {
    transform: rotate(0deg);
  }
  94% {
    transform: rotate(-10deg);
  }
  96% {
    transform: rotate(9deg);
  }
  98% {
    transform: rotate(-4deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .beta-bot-bubble-btn,
  .beta-bot-bubble-icon {
    animation: none;
  }
}
.beta-bot-bubble-msg {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 300px;
  max-height: 420px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 8px 32px var(--shadow);
  animation: beta-bot-popup-in 0.15s var(--ease);
}
.beta-bot-bubble-msg.hidden {
  display: none;
}
/* Pointe façon bulle de discussion, en direction du bouton juste en dessous
   (même technique que .video-comment-pinned-label ou autres carrés à 45° du
   projet) : un carré aux mêmes fond/bordure que la bulle, dont seuls deux
   côtés adjacents restent visibles une fois pivoté. */
.beta-bot-bubble-msg-tail {
  position: absolute;
  bottom: -7px;
  right: 20px;
  width: 14px;
  height: 14px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
.beta-bot-bubble-msg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.beta-bot-bubble-msg-avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--link-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.beta-bot-bubble-msg-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
/* Zone de messages du chat : scroll interne, la bulle elle-même garde une
   hauteur maximale fixe (voir .beta-bot-bubble-msg) plutôt que de grandir
   indéfiniment avec la conversation. */
.beta-bot-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 2px;
  margin-bottom: 10px;
}
.beta-bot-chat-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
  word-break: break-word;
}
.beta-bot-chat-msg-bot {
  align-self: flex-start;
  background: var(--btn-bg);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.beta-bot-chat-msg-user {
  align-self: flex-end;
  background: var(--link);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.beta-bot-chat-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px;
}
.beta-bot-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: beta-bot-typing-bounce 1.2s ease-in-out infinite;
}
.beta-bot-chat-typing span:nth-child(2) {
  animation-delay: 0.15s;
}
.beta-bot-chat-typing span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes beta-bot-typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .beta-bot-chat-typing span {
    animation: none;
  }
}
.beta-bot-chat-form {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.beta-bot-chat-form input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
}
.beta-bot-chat-form input:focus {
  outline: none;
  border-color: var(--link);
}
.beta-bot-chat-form input:disabled {
  opacity: 0.6;
}
.beta-bot-chat-send {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--link);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.beta-bot-chat-send svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.beta-bot-chat-send:disabled {
  opacity: 0.6;
  cursor: default;
}
.beta-bot-chat-login-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
@keyframes beta-bot-popup-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .beta-bot-bubble-msg {
    animation: none;
  }
}
@media (max-width: 640px) {
  .beta-bot-widget {
    right: 16px;
  }
  .beta-bot-bubble-msg {
    width: calc(100vw - 32px);
  }
}


/* ==========================================================================
   Icône "Présentation d'Eyefind" dans le menu Applications (plus grosse,
   centrée, couleurs de marque en dégradé) + page eyefind-presentation.php
   (vitrine IC de tout l'écosystème). Couleurs de marque utilisées comme
   accents uniquement (icônes, dégradés) : le texte/fond reste sur les
   variables de thème, donc ça fonctionne en clair/sombre/auto sans créer de
   nouveau système de couleurs.
   ========================================================================== */

.apps-launcher-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 0 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.apps-launcher-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(from 180deg, #1a73e8, #ea4335, #fbbc05, #34a853, #1a73e8);
  box-shadow: 0 0 0 4px var(--bg), 0 6px 20px rgba(26, 115, 232, 0.4), 0 0 28px rgba(234, 67, 53, 0.25);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.apps-launcher-hero-icon svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}
.apps-launcher-hero:hover .apps-launcher-hero-icon {
  transform: scale(1.08) rotate(6deg);
  box-shadow: 0 0 0 4px var(--bg), 0 8px 26px rgba(26, 115, 232, 0.5), 0 0 36px rgba(234, 67, 53, 0.35);
}
.apps-launcher-hero-label {
  font-size: 13.5px;
  font-weight: 700;
  background: linear-gradient(90deg, #1a73e8, #ea4335, #fbbc05, #34a853);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .apps-launcher-hero-icon {
    transition: none;
  }
}

/* Page de présentation */

.eyefind-pres {
  width: min(1100px, 100%);
  margin: 0 auto 80px;
  padding: 0 24px;
}

.eyefind-pres-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 64px 24px 56px;
  border-radius: var(--radius-lg);
  background: var(--bg-page-end);
  margin: 32px 0 40px;
}
.eyefind-pres-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
  z-index: 0;
  animation: eyefind-blob-float 16s ease-in-out infinite;
}
.eyefind-pres-blob-1 { width: 260px; height: 260px; background: #1a73e8; top: -60px; left: -40px; }
.eyefind-pres-blob-2 { width: 220px; height: 220px; background: #ea4335; top: -30px; right: -30px; animation-delay: -4s; }
.eyefind-pres-blob-3 { width: 240px; height: 240px; background: #34a853; bottom: -80px; left: 20%; animation-delay: -8s; }
.eyefind-pres-blob-4 { width: 200px; height: 200px; background: #fbbc05; bottom: -60px; right: 10%; animation-delay: -12s; }
@keyframes eyefind-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -20px) scale(1.1); }
  66% { transform: translate(-15px, 15px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .eyefind-pres-blob {
    animation: none;
  }
}

.eyefind-pres-logo {
  position: relative;
  z-index: 1;
  height: 56px;
  width: auto;
}
.eyefind-pres-title {
  position: relative;
  z-index: 1;
  font-size: 34px;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(90deg, #1a73e8, #ea4335, #fbbc05, #34a853);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyefind-pres-tagline {
  position: relative;
  z-index: 1;
  max-width: 560px;
  color: var(--text-muted);
  font-size: 15px;
  margin: 0;
}
.eyefind-pres-cta {
  position: relative;
  z-index: 1;
  border-radius: 999px;
  padding: 0 28px;
  height: 44px;
  margin-top: 6px;
}

.eyefind-pres-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.eyefind-pres-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.eyefind-pres-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
}
.eyefind-pres-stat-label {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.eyefind-pres-section-title {
  text-align: center;
  font-size: 22px;
  margin: 0 0 24px;
}

.eyefind-pres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}
.eyefind-pres-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.eyefind-pres-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: 0 12px 28px var(--shadow-soft);
}
.eyefind-pres-card-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
}
.eyefind-pres-card-icon svg {
  width: 22px;
  height: 22px;
}
.eyefind-pres-card h3 {
  margin: 0;
  font-size: 16px;
}
.eyefind-pres-card p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  flex: 1;
}
.eyefind-pres-card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--link);
  margin-top: 8px;
}
.eyefind-pres-card-mail:hover { box-shadow: 0 12px 28px rgba(26, 115, 232, 0.2); }
.eyefind-pres-card-video:hover { box-shadow: 0 12px 28px rgba(234, 67, 53, 0.2); }
.eyefind-pres-card-store:hover { box-shadow: 0 12px 28px rgba(147, 52, 230, 0.2); }
.eyefind-pres-card-contacts:hover { box-shadow: 0 12px 28px rgba(52, 168, 83, 0.2); }

.eyefind-pres-mission {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}
.eyefind-pres-mission h2 {
  text-align: center;
}
/* .content-page-back se centre normalement via le text-align:center de son
   parent .content-page (voir a-propos.php) — ici il est hors de ce contexte,
   d'où le retour à gauche par défaut. Centrage indépendant du parent en
   passant en display:block + marge automatique. */
.eyefind-pres > .content-page-back {
  display: flex;
  width: max-content;
  margin: 40px auto 0;
}

@media (max-width: 640px) {
  .eyefind-pres-title {
    font-size: 26px;
  }
  .eyefind-pres-stats {
    gap: 28px;
  }
}

/* ==========================================================================
   Cloche de notifications EyefindTube (commentaire/réponse/abonnement/like
   reçus). Même gabarit que .account-menu (menu compte) pour rester cohérent
   visuellement avec le reste du site.
   ========================================================================== */

.video-notif-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.video-notif-wrapper .icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
}
.video-notif-wrapper .icon-btn svg {
  width: 22px;
  height: 22px;
}
.video-notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ea4335;
  border: 2px solid var(--bg);
  pointer-events: none;
}
.video-notif-menu {
  position: absolute;
  top: 48px;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: 480px;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
  border-radius: 16px;
  box-shadow: 0 1px 3px var(--shadow-soft), 0 16px 36px -8px var(--shadow), 0 4px 12px var(--shadow-soft);
  padding: 8px 0;
  z-index: 20;
}
.video-notif-menu.hidden {
  display: none;
}
.video-notif-menu-header {
  font-size: 15px;
  font-weight: 700;
  padding: 8px 20px 12px;
}
.video-notif-empty {
  padding: 20px;
  color: var(--text-muted);
  font-size: 13.5px;
  text-align: center;
}
.video-notif-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 20px;
  color: var(--text);
}
.video-notif-item:hover {
  background: var(--btn-bg);
}
.video-notif-item.unread {
  background: var(--link-tint);
}
.video-notif-item .comment-avatar {
  flex-shrink: 0;
}
.video-notif-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.video-notif-item-text {
  font-size: 13.5px;
  line-height: 1.4;
}
.video-notif-item-time {
  font-size: 12px;
  color: var(--text-muted);
}
.video-notif-see-all {
  display: block;
  text-align: center;
  padding: 10px 20px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--link);
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.video-notif-menu-inline {
  display: flex;
  flex-direction: column;
}
.video-notif-menu-inline .video-notif-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.video-notif-menu-inline .video-notif-item:last-child {
  border-bottom: none;
}


/* ==========================================================================
   Avis clients Store (notes 1-5 + commentaire). Étoiles en SVG (currentColor
   pour l'état vide, jaune #fbbc05 pour l'état plein) : suit le thème sans
   nouveau système de couleurs pour le texte/fond environnant.
   ========================================================================== */

.store-stars {
  display: inline-flex;
  gap: 1px;
  vertical-align: middle;
}
.store-stars svg {
  width: 15px;
  height: 15px;
}
.store-stars .star-filled {
  fill: #fbbc05;
}
.store-stars .star-empty {
  fill: var(--border);
}

.store-rating-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  font-size: 13px;
  color: var(--text-muted);
}

.product-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Sélecteur d'étoiles cliquable (formulaire de dépôt d'avis) : radios inversés
   5→1 + flex-direction row-reverse, technique CSS pure sans JS. */
.store-star-picker {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  width: fit-content;
}
.store-star-picker input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.store-star-picker label {
  font-size: 30px;
  line-height: 1;
  color: var(--border);
  cursor: pointer;
  transition: color 0.1s var(--ease);
}
.store-star-picker label:hover,
.store-star-picker label:hover ~ label,
.store-star-picker input:checked ~ label {
  color: #fbbc05;
}

.store-review-form {
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.store-review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.store-review-item {
  display: flex;
  gap: 14px;
}


/* ==========================================================================
   Filtres de recherche EyefindTube (catégorie/durée/date/tri).
   ========================================================================== */

.video-search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.js-video-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.js-video-filters-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.video-filters-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
}
.video-filters-panel.hidden {
  display: none;
}
.video-filters-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.video-filters-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}
.video-filters-group select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  min-width: 170px;
}
.video-filters-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.video-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.video-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--link-tint);
  color: var(--link);
  font-size: 12.5px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .video-filters-panel {
    flex-direction: column;
    align-items: stretch;
  }
  .video-filters-actions {
    margin-left: 0;
    justify-content: space-between;
  }
}


/* ==========================================================================
   Shorts EyefindTube (vidéos publiées via un lien youtube.com/shorts/...).
   ========================================================================== */

.video-card-short-tag {
  position: absolute;
  left: 6px;
  top: 6px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Rangée horizontale sur l'accueil */
.video-shorts-row {
  margin-bottom: 28px;
}
.video-shorts-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  margin: 0 0 12px;
}
.video-shorts-row-title svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.video-shorts-row-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.video-shorts-row-item {
  position: relative;
  flex-shrink: 0;
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text);
}
.video-shorts-row-item img {
  width: 250px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--btn-bg);
}
.video-shorts-row-item-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-shorts-row-item-stats {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Onglet "Shorts" de video/chaine.php : mêmes cartes que la rangée Shorts de
   l'accueil, mais en grille plutôt qu'en défilement horizontal (largeur
   fixe de .video-shorts-row-item non pertinente ici, une cellule de grille
   par carte). */
.video-shorts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
.video-shorts-grid .video-shorts-row-item,
.video-shorts-grid .video-shorts-row-item img {
  width: 100%;
}

/* Rangée "Tendances" sur l'accueil, au-dessus de la rangée Shorts : mêmes
   cartes vidéo standard (video_render_card()) que la grille principale,
   juste dans un défilement horizontal à largeur fixe au lieu d'une grille. */
.video-trending-row {
  margin-bottom: 28px;
}
.video-trending-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.video-trending-scroll .video-card {
  flex: 0 0 240px;
}

/* Bouton "Charger plus" (accueil, recherche, tendances) : ajoute la page
   suivante en AJAX (video/load-more.php) sans recharger la page. */
.video-load-more-row {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.js-load-more-videos.loading {
  opacity: 0.6;
  cursor: default;
}

/* Flux vertical dédié (video/shorts.php), façon YouTube Shorts desktop :
   défilement à ancrage ("snap") sur la page elle-même. scroll-snap-type est
   posé sur <body> via la classe .shorts-scroll-page (ajoutée uniquement par
   video/shorts.php), donc aucune autre page n'est affectée. */
body.shorts-scroll-page {
  scroll-snap-type: y mandatory;
}
/* .video-shell a un padding-bottom de 60px partout (espace de respiration
   normal en bas de page) ; les Shorts occupent tout l'espace disponible
   sans cette marge, donc on l'annule ici uniquement. */
.video-shell-shorts {
  padding-bottom: 0;
}
.video-main-shorts {
  position: relative;
}
.video-shorts-feed {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Le header étant sticky (voir .video-header ci-dessus), il reste
   visible en permanence : chaque Short occupe donc l'espace restant
   (100vh moins la hauteur du header) plutôt que 100vh plein écran.
   scroll-margin-top compense le header sticky pour que l'ancrage
   ("snap") aligne le haut du Short juste sous le header, jamais dessous. */
.video-short-item {
  position: relative;
  scroll-snap-align: start;
  scroll-margin-top: 100px;
  flex-shrink: 0;
  width: 100%;
  height: calc(100vh - 100px);
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.video-short-main {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  transition: margin-right 0.25s var(--ease);
}
/* Quand le panneau de commentaires de ce Short est ouvert, le lecteur +
   colonne d'actions se décale vers la gauche pour lui laisser la place
   (ajustement automatique demandé), sans jamais chevaucher le panneau. */
.video-short-item.comments-open .video-short-main {
  margin-right: 400px;
}
/* Le lecteur est dimensionné à partir de la hauteur de viewport disponible
   (comme sur YouTube Shorts desktop, où la vidéo occupe la majorité de
   l'écran) : la largeur est calculée depuis cette même hauteur (ratio 9/16),
   jamais l'inverse — une largeur/hauteur toutes deux explicites, sans
   dépendre de flex ou de la propriété aspect-ratio pour l'auto-résolution,
   ce qui évite un bug de largeur qui s'effondrait à quelques pixels. */
.video-short-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: calc(min(78vh, 720px) * 9 / 16);
  max-width: 90vw;
}
.video-short-player-wrap {
  position: relative;
  width: 100%;
  height: min(78vh, 720px);
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.video-short-player {
  position: absolute;
  inset: 0;
}
.video-short-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* Contrôles vidéo en surimpression, superposés en haut du lecteur (pas dans
   le flux normal) : bouton muet/son, piloté via l'IFrame Player API. */
.video-short-top-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.video-short-mute-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video-short-mute-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.video-short-mute-btn .icon-muted {
  display: none;
}
.video-short-mute-btn.muted .icon-unmuted {
  display: none;
}
.video-short-mute-btn.muted .icon-muted {
  display: block;
}
/* Détaché de la largeur/position de la vidéo (qui reste centrée) : le bloc
   chaîne + titre est ancré en bas à gauche de l'écran du Short, comme sur
   YouTube Shorts desktop, indépendamment d'où se trouve le lecteur. */
.video-short-below {
  position: absolute;
  left: 24px;
  bottom: 40px;
  width: min(360px, 40vw);
}
.video-short-channel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.video-short-channel-name {
  font-size: 13.5px;
  font-weight: 600;
}
.video-subscribe-btn-sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}
.video-short-description {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Colonne d'actions à droite du lecteur : J'aime, Commentaires, Partager,
   Remix, pastille de son — un bouton rond par action, icône + libellé, comme
   sur YouTube Shorts desktop. */
.video-short-actions-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding-bottom: 24px;
  width: 56px;
}
.video-short-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.video-short-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--btn-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-short-action-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.video-short-action-btn.active .video-short-action-icon {
  background: var(--link-tint);
  color: var(--link);
}
.video-short-action-label {
  font-size: 12px;
  font-weight: 600;
}
/* Le like d'un Short réutilise .js-video-like-form (même logique JS/optimiste
   que regarder.php), mais visuellement un seul bouton rond "J'aime" est
   affiché : le bouton dislike reste dans le DOM (la logique JS existante
   suppose la paire like/dislike) mais est masqué, comme demandé. */
.video-short-like-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.video-short-like-form .video-like-group {
  border-radius: 50%;
  background: none;
  overflow: visible;
}
.video-short-like-form .video-like-group button[data-type="dislike"] {
  display: none;
}
.video-short-like-form .video-like-group button[data-type="like"] {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--btn-bg);
  justify-content: center;
}
.video-short-like-form .video-like-group button[data-type="like"].active {
  background: var(--link-tint);
}
.video-short-like-form .video-like-group .video-like-count {
  display: none;
}
.video-short-sound-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--link);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  animation: video-short-sound-spin 4s linear infinite;
}
@keyframes video-short-sound-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .video-short-sound-thumb {
    animation: none;
  }
}

/* Panneau de commentaires fixe façon YouTube Desktop : occupe la partie
   droite du Short concerné, le lecteur se décale via .comments-open
   ci-dessus pour ne jamais passer dessous. */
.video-short-comments-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 92vw;
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow-y: auto;
}
.video-short-comments-panel.hidden {
  display: none;
}
.video-short-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
}
.video-short-comments-total {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 6px;
}
.video-short-comments-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--btn-bg);
}
.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.icon-btn.active {
  color: var(--link);
}
.video-short-comments-panel .comment-form {
  margin-bottom: 18px;
}

/* Flèches de navigation haut/bas entre Shorts (raccourci du défilement à
   ancrage déjà en place). */
.video-shorts-nav {
  position: fixed;
  right: 24px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3;
}
.video-shorts-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--btn-bg);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video-shorts-nav-btn:hover {
  background: var(--link-tint);
  color: var(--link);
}
.video-shorts-nav-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

@media (max-width: 900px) {
  body.shorts-scroll-page {
    scroll-snap-type: none;
  }
  .video-short-item {
    height: auto;
    scroll-snap-align: none;
    padding: 16px 0;
  }
  .video-short-main {
    flex-direction: column;
    height: auto;
    gap: 12px;
  }
  .video-short-item.comments-open .video-short-main {
    margin-right: 0;
  }
  .video-short-stage {
    width: min(320px, 90vw);
  }
  .video-short-player-wrap {
    width: 100%;
    height: calc(min(320px, 90vw) * 16 / 9);
  }
  /* Pas de sidebar à "longer" sur mobile : le bloc chaîne + titre reste dans
     le flux normal, sous la vidéo, comme avant — l'ancrage bas-gauche façon
     desktop n'a de sens qu'avec la colonne latérale. */
  .video-short-below {
    position: static;
    width: 100%;
  }
  .video-short-actions-col {
    flex-direction: row;
    width: auto;
    padding-bottom: 0;
  }
  .video-short-comments-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: 70vh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .video-short-item.comments-open .video-short-main {
    display: none;
  }
  .video-shorts-nav {
    display: none;
  }
}

/* La hauteur totale d'une page EyefindMatic varie d'un chargement à l'autre
   (ordre aléatoire des suggestions/sites sponsorisés...) : selon qu'elle
   dépasse ou non la fenêtre, la scrollbar verticale apparaît ou disparaît, ce
   qui décale tout ce qui est position:fixed ancré à droite (colonne Messages)
   de sa largeur. Essayer de forcer sa présence permanente (scrollbar-gutter,
   overflow-y:scroll) n'a pas suffi. Solution radicale à la place : la
   scrollbar ne prend plus JAMAIS de place dans aucun des deux cas — masquée
   visuellement, mais le défilement (molette, clavier, tactile) continue de
   fonctionner normalement. Scoppé aux pages EyefindMatic uniquement. */
html:has(body.matic-app) {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge legacy */
}
html:has(body.matic-app)::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chrome, Opera (GX inclus), Edge Chromium */
}

/* ===== EYEFINDMATIC (reseau social) ===== */
/* Reutilise topbar/icon-btn/avatar/comment-*/video-notif-*/account-form/btn
   deja definis plus haut : uniquement les classes propres a EyefindMatic ici. */

/* Identite visuelle dediee (sombre, premium), volontairement independante du
   theme clair/sombre choisi pour le reste du site (comme une "sous-appli"
   avec sa propre marque, meme principe qu'EyefindTube). Redefinit localement
   --bg/--border/--text/--text-muted/--btn-bg/--radius-* deja utilises par les
   regles ci-dessous : aucune regle existante n'a besoin d'etre reecrite, la
   cascade CSS suffit puisque .matic-app englobe toutes les pages EyefindMatic. */
/* Thème EyefindMatic : mêmes mécanique et sélecteurs que le thème du reste du
   site (:root[data-theme], prefers-color-scheme — voir le tout début de ce
   fichier + assets/js/theme.js), simplement rejoués ici avec la palette
   Snapmatic et un point de bascule inversé : matic reste sombre par défaut
   (y compris en "Système" sans préférence OS), le clair n'intervient que sur
   choix explicite ou préférence OS clair. Toutes les couleurs de la nav et de
   la colonne Messages passent par ces variables, plus aucune valeur en dur
   dans les règles plus bas. */
.matic-app {
  --bg: #121212;
  --text: #ffffff;
  --text-muted: #b5b5b5;
  --border: rgba(255, 255, 255, 0.08);
  --btn-bg: #242424;
  --link: #ffc107;
  --link-tint: rgba(255, 193, 7, 0.14);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --matic-card: #1a1a1a;
  --matic-card-2: #242424;
  --matic-accent: #ffc107;
  --matic-accent-2: #ffd54f;
  --matic-accent-hover: #f5a623;
  --matic-glow: rgba(255, 193, 7, 0.18);
  --matic-on-accent: #1a1300;
  --matic-danger: #ed4956;
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root[data-theme="light"] .matic-app {
  color-scheme: light;
  --bg: #fafafa;
  --text: #1e1e1e;
  --text-muted: #6b6b6b;
  --border: rgba(0, 0, 0, 0.08);
  --btn-bg: #f3f3f3;
  --link: #e0a800;
  --link-tint: rgba(224, 168, 0, 0.12);
  --matic-card: #ffffff;
  --matic-card-2: #f3f3f3;
  --matic-accent: #e0a800;
  --matic-accent-2: #eab624;
  --matic-accent-hover: #f5a623;
  --matic-glow: rgba(224, 168, 0, 0.15);
}
@media (prefers-color-scheme: light) {
  /* "Système" (aucun data-theme explicite) : matic reste sombre par défaut,
     donc seule la préférence OS claire a besoin d'un bloc ici (l'OS sombre
     retombe déjà sur les valeurs de base ci-dessus, comme :not([data-theme
     ="light"]) le fait dans l'autre sens pour le reste du site). */
  :root:not([data-theme="dark"]) .matic-app {
    color-scheme: light;
    --bg: #fafafa;
    --text: #1e1e1e;
    --text-muted: #6b6b6b;
    --border: rgba(0, 0, 0, 0.08);
    --btn-bg: #f3f3f3;
    --link: #e0a800;
    --link-tint: rgba(224, 168, 0, 0.12);
    --matic-card: #ffffff;
    --matic-card-2: #f3f3f3;
    --matic-accent: #e0a800;
    --matic-accent-2: #eab624;
    --matic-accent-hover: #f5a623;
    --matic-glow: rgba(224, 168, 0, 0.15);
  }
}
.matic-app ::selection {
  background: var(--matic-accent);
  color: #fff;
}
/* Scrollbar discrete (Webkit + Firefox), coherente avec le fond sombre. */
.matic-app * {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.matic-app *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.matic-app *::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
}
.matic-app *::-webkit-scrollbar-track {
  background: transparent;
}

.matic-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--matic-card);
  border-bottom: 1px solid var(--border);
}
.matic-header-inner {
  max-width: 935px;
  margin: 0 auto;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.matic-header-logo {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.matic-header-logo img {
  height: 32px;
  width: 32px;
  border-radius: 8px;
  object-fit: cover;
}
.matic-header-icons {
  display: flex;
  align-items: center;
  gap: 22px;
}
.matic-header-icon-btn {
  position: relative;
  display: flex;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}
.matic-header-icon-btn:hover {
  color: var(--text);
}
.matic-header-icon-btn svg {
  width: 24px;
  height: 24px;
}
.matic-header-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4285f4, #34a853, #fbbc05, #ea4335);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.matic-header-back {
  font-size: 12.5px;
  color: var(--text-muted);
  border-left: 1px solid var(--border);
  padding-left: 22px;
}
.matic-header-back:hover {
  color: var(--text);
}

.matic-shell {
  max-width: 935px;
  margin: 0 auto;
  padding: 28px 16px 60px;
  display: grid;
  /* Largeurs FIXES en pixels pour les deux colonnes, pas "1fr"/minmax : une
     piste flexible reste, par construction, un calcul recalculé à chaque
     rendu — .matic-nav et la colonne Messages (position:fixed, largeur fixe
     en px) n'ont jamais ce problème, contrairement à ce bloc qui utilisait
     une piste flexible. Deux constantes ne peuvent, par définition, plus
     jamais varier d'un chargement à l'autre. */
  grid-template-columns: 470px 320px;
  gap: 56px;
  justify-content: center;
}
.matic-shell-single {
  grid-template-columns: minmax(0, 630px);
  justify-content: center;
  max-width: 700px;
}
.matic-shell-wide {
  grid-template-columns: minmax(0, 1fr);
  max-width: 935px;
}

.matic-feed {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.matic-sidebar {
  padding-top: 8px;
  max-width: 320px;
  /* .matic-sidebar est la 2e piste (1fr) de la grille .matic-shell. Comme
     tout élément de grille, sa largeur minimale par défaut est "auto", pas 0
     : si le CONTENU (nom de site sponsorisé, URL...) ne peut pas rétrécir en
     dessous d'une certaine largeur intrinsèque, c'est la PISTE DE GRILLE
     elle-même qui s'élargit pour l'accueillir — quel que soit max-width
     ci-dessus, qui ne s'applique qu'APRÈS ce calcul. Comme le contenu change
     à chaque chargement (ordre aléatoire), la largeur "gagnante" changeait
     avec lui, décalant toute la page à droite. min-width:0 force la colonne
     à respecter la piste 1fr et laisse les troncatures internes (ellipsis)
     faire leur travail à la place. */
  min-width: 0;
  overflow: hidden;
}
.matic-sidebar-account {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.matic-sidebar-account .matic-post-author {
  font-weight: 600;
}

.matic-suggestions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.matic-sidebar-footer {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 24px;
}
.matic-notif-group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 24px 0 8px;
}
.matic-notif-group-title:first-child {
  margin-top: 0;
}

.matic-post-main,
.matic-profile-main {
  min-width: 0;
}

.matic-empty-feed {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.matic-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.matic-search-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.matic-search-form input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--text);
  font-size: 14px;
}
.matic-search-form input:focus {
  outline: none;
  border-color: var(--matic-accent);
}
/* ===== Bloc "Suggestions pour vous" / "Sites sponsorisés" (sidebar du feed) =====
   Refait entièrement en grille CSS avec pistes explicites plutôt qu'en flex :
   grid-template-columns: 32px minmax(0,1fr) auto — le "0" dans minmax(0,1fr)
   PLAFONNE la piste centrale à 1fr quoi qu'il arrive, contrairement à un
   simple "flex:1" dont la largeur minimale par défaut est "auto" (= la
   largeur du contenu si celui-ci ne peut pas se couper). C'est ce qui
   causait le bug : un nom de site ou une URL trop longs forçaient la piste,
   donc toute la colonne, à s'élargir — variable d'un chargement à l'autre
   puisque l'ordre affiché est aléatoire. Classes dédiées (matic-side-row-*),
   volontairement distinctes de .matic-search-result-info (partagée avec le
   panneau de recherche et le sélecteur de profil, non touchée). */
.matic-side-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-bottom: 10px;
}
.matic-side-row-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4285f4, #34a853, #fbbc05, #ea4335);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.matic-side-row-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.matic-side-row-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
}
.matic-side-row-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.matic-side-row-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
}
.matic-side-row-action {
  grid-column: 3;
  justify-self: end;
  white-space: nowrap;
}
/* Version "texte accent" (liste de suggestions) : jamais de boîte de bouton,
   juste du texte accent qui grise une fois suivi. */
.matic-follow-btn {
  background: none;
  border: none;
  color: var(--matic-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
}
.matic-follow-btn.following {
  color: var(--text-muted);
}

/* Sites sponsorisés (annuaire "Entreprise", sites.is_sponsored) : même
   .matic-side-row, mais toute la ligne est un lien externe (fond/bordure
   neutralisés, badge "Sponsorisé" en 3e piste). */
.matic-sponsored-sites {
  margin-top: 24px;
}
.matic-side-row-link {
  color: var(--text);
  text-decoration: none;
  padding: 6px;
  margin: 0 -6px;
  border-radius: var(--radius-sm);
}
.matic-side-row-link:hover {
  background: var(--matic-card);
}
.matic-side-row-link .matic-side-row-action {
  font-size: 10.5px;
  padding: 2px 8px;
}

/* Boutons pleine taille (en-tête de profil) : "Suivre" plein accent cyan
   (--matic-accent, identité EyefindMatic) qui devient contouré/neutre une
   fois suivi — "Modifier le profil" reprend directement le style contouré
   via .matic-btn-outline (jamais de bascule JS dessus). */
.matic-btn-outline,
.matic-follow-btn-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.matic-btn-outline {
  background: var(--btn-bg);
  border: 1px solid var(--border);
  color: var(--text);
}
.matic-btn-outline:hover {
  background: var(--border);
}
.matic-follow-btn-profile {
  background: var(--matic-accent);
  border: 1px solid var(--matic-accent);
  color: #fff;
}
.matic-follow-btn-profile:hover {
  background: var(--matic-accent-hover);
}
.matic-follow-btn-profile.following {
  background: var(--btn-bg);
  border: 1px solid var(--border);
  color: var(--text);
}
.matic-follow-btn-profile.following:hover {
  background: var(--border);
}

.matic-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.matic-post {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--matic-card);
  overflow: hidden;
}
.matic-post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.matic-post-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4285f4, #34a853, #fbbc05, #ea4335);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.matic-post-author {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

/* Badge de certification EyefindMatic — même principe que
   .video-verified-badge/.video-name-with-badge pour EyefindTube. */
.matic-name-with-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.matic-verified-badge {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--link);
}
.matic-verified-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.matic-profile-header-top .matic-verified-badge svg {
  width: 20px;
  height: 20px;
}
.matic-post-header-actions {
  position: relative;
  margin-left: auto;
}
.matic-post-menu-trigger {
  display: flex;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px 8px;
}
.matic-post-menu-trigger svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.matic-post-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  min-width: 190px;
  background: var(--matic-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  padding: 6px;
}
.matic-post-menu.hidden {
  display: none;
}
.matic-post-menu a,
.matic-post-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
}
.matic-post-menu a:hover,
.matic-post-menu button:hover {
  background: var(--btn-bg);
}
.matic-post-menu form {
  margin: 0;
}
.matic-post-menu-danger {
  color: var(--matic-danger) !important;
}

.matic-post-carousel {
  position: relative;
  background: #000;
}
.matic-post-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.matic-post-carousel-track img {
  width: 100%;
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
}
.matic-post-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.matic-post-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
.matic-post-carousel-dot.active {
  background: #fff;
}

.matic-post-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px 0;
}
.matic-post-actions form {
  display: flex;
}
.matic-like-btn,
.matic-comment-link {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: 4px;
}
.matic-like-btn svg,
.matic-comment-link svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.matic-like-btn.active {
  color: var(--matic-danger);
}
.matic-like-btn.active svg {
  fill: var(--matic-danger);
  stroke: var(--matic-danger);
}
.matic-like-btn.pop {
  animation: matic-like-pop 0.4s ease;
}
@keyframes matic-like-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .matic-like-btn.pop {
    animation: none;
  }
}

.matic-post-like-count {
  font-size: 13.5px;
  font-weight: 600;
  margin: 6px 16px 0;
}
.matic-post-caption {
  font-size: 14px;
  margin: 6px 16px 0;
  white-space: pre-line;
}
.matic-post-comments-disabled {
  font-size: 13px;
  color: var(--text-muted);
  margin: 10px 16px 0;
}
.matic-post-comments-link {
  display: block;
  font-size: 14px;
  color: var(--text-muted);
  margin: 6px 16px 0;
}
.matic-post-timestamp {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 6px 16px 0;
}
.matic-post-quick-comment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.matic-post-quick-comment input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--text);
}
.matic-post-quick-comment input:focus {
  outline: none;
}
.matic-post-quick-comment button {
  background: none;
  border: none;
  color: var(--matic-accent);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.matic-post-quick-comment button:disabled {
  color: var(--matic-accent);
  opacity: 0.3;
  cursor: default;
}

.matic-profile-header {
  display: flex;
  gap: 84px;
  align-items: center;
  padding: 30px 20px 44px;
}
.matic-profile-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #4285f4, #34a853, #fbbc05, #ea4335);
  color: #fff;
  font-size: 56px;
  font-weight: 600;
}
.matic-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.matic-profile-header-info {
  flex: 1;
  min-width: 0;
}
.matic-profile-header-top {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.matic-profile-header-top h1 {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}
.matic-profile-stats {
  display: flex;
  gap: 40px;
  font-size: 16px;
  margin-bottom: 20px;
}
.matic-profile-stats strong {
  font-weight: 600;
}
.matic-profile-bio {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
}

.matic-profile-tabs {
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--border);
  margin: 0 20px;
}
.matic-profile-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  margin-top: -1px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.matic-profile-tab.active {
  color: var(--text);
  border-top: 1px solid var(--text);
}
.matic-profile-tab svg {
  width: 14px;
  height: 14px;
}

.matic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 0 4px;
}
.matic-grid-item {
  position: relative;
  aspect-ratio: 1 / 1;
}
.matic-grid-item-link {
  display: block;
  width: 100%;
  height: 100%;
}
.matic-grid-item-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Les photos sources sont le plus souvent des captures portrait avec le
     sujet cadré en haut : un recadrage centré coupe systématiquement la
     tête, d'où ce recadrage ancré en haut plutôt qu'au centre. */
  object-position: top;
}
.matic-grid-pin-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  pointer-events: none;
}
.matic-grid-pin-badge svg {
  width: 12px;
  height: 12px;
  fill: #fff;
}
.matic-grid-item-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-weight: 600;
  /* La boîte de l'overlay elle-même ne doit JAMAIS intercepter les clics :
     elle couvre toute la vignette (inset:0), donc si elle captait les clics
     on ne pourrait plus cliquer l'image entre les icônes. Seuls le bouton
     like et le lien commentaires (ci-dessous) se rendent cliquables. */
  pointer-events: none;
}
.matic-grid-item:hover .matic-grid-item-overlay {
  display: flex;
}
.matic-grid-item-comments {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  pointer-events: auto;
}
.matic-grid-item-comments svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}
.matic-grid-like-form {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}
/* Sélecteur volontairement plus spécifique que .matic-like-btn / .matic-like-btn
   svg (définis plus haut) : sans ça, à spécificité égale, c'est l'ordre dans la
   feuille de style qui déciderait — fragile, et déjà responsable ailleurs de
   cœurs qui restent noirs au lieu de rouges une fois "aimés". */
.matic-grid-like-form .matic-like-btn {
  padding: 0;
  color: #fff;
}
.matic-grid-like-form .matic-like-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
}
.matic-grid-like-form .matic-like-btn.active svg {
  fill: var(--matic-danger);
  stroke: var(--matic-danger);
}
.matic-grid-like-count {
  color: #fff;
}

.matic-comments-section {
  margin-top: 24px;
}
.matic-comments-section h2 {
  font-size: 16px;
  margin: 0 0 16px;
}
.matic-comment-form {
  margin-top: 20px;
}

.matic-publish-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
.matic-publish-preview img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

@media (max-width: 900px) {
  .matic-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .matic-sidebar {
    display: none;
  }
}
@media (max-width: 600px) {
  .matic-grid {
    gap: 2px;
  }
  .matic-profile-header {
    gap: 20px;
    padding: 20px 12px 24px;
  }
  .matic-profile-avatar {
    width: 72px;
    height: 72px;
    font-size: 24px;
  }
  .matic-profile-header-top {
    gap: 12px;
    margin-bottom: 14px;
  }
  .matic-profile-stats {
    gap: 20px;
    font-size: 14px;
    margin-bottom: 12px;
  }
}

/* ===== EYEFINDMATIC : navigation (sidebar desktop / topbar+bottomnav mobile) ===== */

.matic-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  border-right: 1px solid var(--border);
  z-index: 30;
  /* Léger dégradé Surface -> Background (tous deux neutres, cf. .matic-app) :
     donne une profondeur discrète sans jamais introduire de teinte propre à
     la nav — la "texture" reste 100% pilotée par les variables de thème. */
  background: linear-gradient(180deg, var(--matic-card) 0%, var(--bg) 100%);
}
.matic-nav-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 14px;
}
.matic-nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  margin-bottom: 32px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
}
.matic-nav-logo-img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--matic-glow), 0 2px 10px var(--matic-glow);
}
.matic-nav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Sans ceci, overflow-x devient implicitement "auto" (règle du spec CSS dès
     qu'un seul axe overflow est fixé à autre chose que "visible") : la barre
     verticale du repère actif (::before, décalée à left:-14px) suffisait à
     déclencher une scrollbar horizontale parasite juste au-dessus de "Plus". */
  overflow-x: hidden;
}
.matic-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border-radius: var(--radius-lg);
  color: var(--text);
  font-size: 15.5px;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.matic-nav-item:hover {
  background: var(--matic-card-2);
  transform: translateX(2px);
}
.matic-nav-item:active {
  transform: scale(0.98);
}
.matic-nav-item.active {
  font-weight: 700;
  color: var(--matic-accent);
  background: linear-gradient(135deg, var(--matic-glow), transparent 70%);
}
/* Repère vertical sur l'élément actif (façon Discord/Spotify) : une seule
   info visuelle claire plutôt qu'un aplat jaune généralisé sur tout le bloc
   (demande explicite : "je ne veux pas que tout soit jaune"). */
.matic-nav-item.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: var(--matic-accent);
  box-shadow: 0 0 10px var(--matic-glow);
}
.matic-nav-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: stroke 0.2s ease;
}
.matic-nav-item.active svg {
  stroke: var(--matic-accent);
}
.matic-nav-item .matic-post-header-avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.matic-nav-item-profile {
  margin-top: 4px;
  padding-top: 17px;
  border-top: 1px solid var(--border);
}
.matic-nav-badge {
  margin-left: auto;
  background: var(--matic-accent);
  color: var(--matic-on-accent);
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.matic-nav-dot {
  position: absolute;
  top: 8px;
  left: 28px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--matic-accent);
  border: 2px solid var(--bg);
}
/* #matic-notif-menu vit hors de .matic-nav (jamais un descendant caché par
   son display:none mobile) : en position fixed, ouverte aussi bien par le
   bouton de la sidebar que par celui de la barre du bas mobile — un seul DOM,
   cf. includes/matic/header.php. Le placement (top/bottom/left) est calculé
   dynamiquement en JS (maticPositionFlyout) d'après la position réelle du
   bouton cliqué : un décalage fixe en dur se désynchronisait dès que la liste
   de navigation dépassait la hauteur de la fenêtre (barre "Profil"/"Plus"
   poussée plus bas que prévu, chevauchant ce panneau). max-height + scroll
   en secours si le contenu est plus grand que la fenêtre disponible. */
/* ===== Colonne "Messages" fixe à droite (includes/matic/messages-sidebar.php) =====
   Même principe que .matic-nav à gauche : position fixed, largeur réservée sur
   <body> en grand écran. En dessous, elle devient une bande rétractable
   (translateX hors écran + onglet pour la ressortir) plutôt que de pousser le
   contenu central, pour ne jamais provoquer de défilement horizontal ni
   modifier la mise en page du profil. */
.matic-messages-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  border-left: 1px solid var(--border);
  background: linear-gradient(180deg, var(--matic-card) 0%, var(--bg) 100%);
  z-index: 25;
  transition: transform 0.25s ease;
}
.matic-messages-sidebar-tab {
  display: none;
  position: absolute;
  top: 50%;
  left: -34px;
  transform: translateY(-50%);
  width: 34px;
  height: 56px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--matic-accent);
  border: 1px solid var(--matic-accent-hover);
  border-right: none;
  color: var(--matic-on-accent);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.matic-messages-sidebar-tab svg {
  width: 18px;
  height: 18px;
}
.matic-messages-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 18px;
  min-height: 0;
}
.matic-messages-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.matic-messages-sidebar-header h2 {
  font-size: 19px;
  font-weight: 700;
}
.matic-messages-sidebar-new {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--matic-accent-2), var(--matic-accent-hover));
  color: var(--matic-on-accent);
  box-shadow: 0 3px 14px var(--matic-glow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.matic-messages-sidebar-new:hover {
  transform: scale(1.08);
}
.matic-messages-sidebar-new svg {
  width: 17px;
  height: 17px;
}
.matic-messages-sidebar-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--matic-card-2);
  border: 1px solid transparent;
  color: var(--text-muted);
  margin-bottom: 16px;
  transition: border-color 0.2s ease;
}
.matic-messages-sidebar-search:focus-within {
  border-color: var(--matic-accent);
}
.matic-messages-sidebar-search svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.matic-messages-sidebar-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--text);
  font-size: 14px;
}
.matic-messages-sidebar-search input:focus {
  outline: none;
}
.matic-messages-sidebar-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 -6px;
}
.matic-messages-sidebar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border-radius: var(--radius-md);
  background: var(--matic-card);
  color: var(--text);
  transition: background-color 0.18s ease, transform 0.15s ease;
}
.matic-messages-sidebar-row:hover {
  background: var(--matic-card-2);
  transform: translateY(-1px);
}
.matic-messages-sidebar-row.is-hidden {
  display: none;
}
.matic-messages-sidebar-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--matic-accent), var(--matic-accent-hover));
  color: var(--matic-on-accent);
  font-weight: 700;
  font-size: 18px;
}
.matic-messages-sidebar-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.matic-messages-sidebar-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.matic-messages-sidebar-name {
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.matic-messages-sidebar-name-row .matic-verified-badge {
  color: var(--matic-accent);
  flex-shrink: 0;
}
.matic-messages-sidebar-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.85;
  flex-shrink: 0;
  padding-left: 6px;
}
.matic-messages-sidebar-preview {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.matic-messages-sidebar-empty {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 24px 8px;
}
.matic-messages-sidebar-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--matic-accent);
  color: var(--matic-on-accent);
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  box-shadow: 0 0 0 3px var(--matic-glow);
}
.matic-messages-sidebar-see-all {
  display: block;
  text-align: center;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--matic-accent);
  font-size: 13.5px;
  font-weight: 600;
  transition: color 0.15s ease;
}
.matic-messages-sidebar-see-all:hover {
  color: var(--matic-accent-hover);
}

/* Barre d'accès rapide flottante (Accueil/Messages/Notifications/Profil),
   includes/matic/header.php. Décalée de la largeur de la colonne Messages
   quand celle-ci est présente ET affichée (grand écran) — :has() plutôt
   qu'une classe posée à la main sur <body>, cohérent avec le reste de cette
   section qui utilise déjà cette technique. */
.matic-quickbar {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 26;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--matic-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
@media (min-width: 1721px) {
  body.matic-app:has(.matic-messages-sidebar) .matic-quickbar {
    right: 384px;
  }
}
.matic-quickbar-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.matic-quickbar-btn:hover {
  background: var(--matic-card-2);
}
.matic-quickbar-btn svg {
  width: 22px;
  height: 22px;
}
.matic-quickbar-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--matic-accent);
  color: var(--matic-on-accent);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.matic-quickbar-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 4px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #4285f4, #34a853, #fbbc05, #ea4335);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 767px) {
  .matic-quickbar {
    display: none;
  }
}

/* Mini fenêtre de chat flottante (page profil uniquement, cf.
   includes/matic/chat-widget.php) : ancrée en bas, décalée pour ne jamais
   chevaucher la colonne Messages quand celle-ci est affichée (même media
   query + technique :has() que le reste de cette section). */
.matic-chat-widget {
  position: fixed;
  bottom: 0;
  right: 24px;
  width: 320px;
  height: 420px;
  max-height: calc(100vh - 40px);
  background: var(--matic-card);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.35);
  z-index: 27;
  display: flex;
  flex-direction: column;
}
.matic-chat-widget.hidden {
  display: none;
}
@media (min-width: 1721px) {
  body.matic-app:has(.matic-messages-sidebar) .matic-chat-widget {
    right: 384px;
  }
}
@media (max-width: 767px) {
  .matic-chat-widget {
    right: 12px;
    left: 12px;
    width: auto;
  }
}
.matic-chat-widget-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.matic-chat-widget-header .matic-post-header-avatar {
  width: 30px;
  height: 30px;
  font-size: 12px;
}
.matic-chat-widget-header strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.matic-chat-widget-expand,
.matic-chat-widget-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.matic-chat-widget-expand:hover,
.matic-chat-widget-close:hover {
  background: var(--matic-card-2);
  color: var(--text);
}
.matic-chat-widget-expand svg,
.matic-chat-widget-close svg {
  width: 16px;
  height: 16px;
}
.matic-chat-widget-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.matic-chat-widget-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.matic-chat-widget-composer.hidden {
  display: none;
}
.matic-chat-widget-composer input[type="text"] {
  flex: 1;
  min-width: 0;
  border: none;
  background: var(--matic-card-2);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--text);
  font-size: 13.5px;
}
.matic-chat-widget-composer input[type="text"]:focus {
  outline: none;
}
.matic-chat-widget-composer button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--matic-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.matic-chat-widget-composer button:hover {
  background: var(--matic-card-2);
}

/* Espace réservé à droite pour la colonne Messages, seulement quand elle est
   vraiment présente sur la page (matic/profil.php uniquement, cf. header.php)
   — sur toute autre page, il n'y a rien à droite, aucun espace à réserver. */
body.matic-app:has(.matic-messages-sidebar) {
  padding-right: 360px;
}

@media (max-width: 1720px) {
  body.matic-app {
    padding-right: 0;
  }
  .matic-messages-sidebar {
    transform: translateX(100%);
    box-shadow: -12px 0 30px rgba(0, 0, 0, 0.35);
  }
  .matic-messages-sidebar.is-open {
    transform: translateX(0);
  }
  .matic-messages-sidebar-tab {
    display: flex;
  }
}

@media (max-width: 767px) {
  .matic-messages-sidebar,
  .matic-messages-sidebar-tab {
    display: none;
  }
}

#matic-notif-menu {
  position: fixed;
  /* .video-notif-menu (classe partagée avec la cloche d'EyefindTube) impose
     z-index:20, plus bas que .matic-nav (30) : la sidebar passait alors
     par-dessus la portion du panneau qui la chevauche horizontalement,
     laissant seulement dépasser le morceau à droite — d'où le rendu tronqué. */
  z-index: 40;
  width: 380px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
}

#matic-more-btn {
  margin-top: auto;
}
/* Même logique de placement dynamique que #matic-notif-menu ci-dessus. */
.matic-nav-more-menu {
  position: fixed;
  width: 260px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  background: var(--matic-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  padding: 8px;
  z-index: 40;
}
/* Cette ligne manquait : sans elle, classList.toggle("hidden") en JS n'a
   aucun effet visuel, le panneau reste affiché en permanence. Ce projet n'a
   pas de classe utilitaire .hidden générique — chaque composant définit la
   sienne (voir .video-notif-menu.hidden, .matic-modal-backdrop.hidden, etc.). */
.matic-nav-more-menu.hidden {
  display: none;
}
.matic-nav-more-menu a,
.matic-nav-more-menu .matic-nav-more-theme {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
}
.matic-nav-more-menu a:hover {
  background: var(--btn-bg);
}
.matic-nav-more-menu svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.matic-nav-more-theme {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.matic-nav-more-theme span {
  font-size: 13px;
  color: var(--text-muted);
}
.matic-nav-more-profiles {
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  padding-bottom: 8px;
}
.matic-nav-more-profiles .matic-suggestions-title {
  padding: 6px 12px 8px;
  margin-bottom: 0;
}
.matic-profile-switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
}
button.matic-profile-switch-row:hover {
  background: var(--btn-bg);
}
.matic-profile-switch-row-active {
  cursor: default;
}
.matic-profile-switch-row .matic-search-result-info {
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
  min-width: 0;
}
.matic-profile-switch-row .matic-search-result-info span {
  font-size: 11.5px;
  color: var(--matic-accent);
}
.matic-nav-more-logout {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 14px !important;
}

.matic-mobile-topbar,
.matic-bottom-nav {
  display: none;
}

/* Decalage de la largeur de la sidebar (desktop) applique sur <body>, pas sur
   .matic-shell* : la sidebar est en position fixed (pas besoin de wrapper
   flex a fermer en fin de page), et .matic-shell garde son "margin: 0 auto"
   (regle plus haut) pour se centrer dans l'espace RESTANT — mettre le
   decalage directement en margin-left sur .matic-shell figerait son bord
   gauche contre la sidebar au lieu de centrer le contenu a cote d'elle. */
body.matic-app {
  padding-left: 300px;
}

@media (max-width: 1263px) {
  .matic-nav {
    width: 76px;
  }
  .matic-nav-logo-full,
  .matic-nav-item span:not(.matic-nav-badge):not(.matic-post-header-avatar) {
    display: none;
  }
  .matic-nav-logo {
    justify-content: center;
    padding: 0;
  }
  .matic-nav-item {
    justify-content: center;
    padding: 14px;
  }
  .matic-nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    margin-left: 0;
  }
  body.matic-app {
    padding-left: 76px;
  }
}

@media (max-width: 767px) {
  .matic-nav {
    display: none;
  }
  body.matic-app {
    padding-left: 0;
  }
  .matic-shell,
  .matic-shell-single,
  .matic-shell-wide {
    padding-top: 66px;
    padding-bottom: 76px;
  }
  .matic-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    padding: 0 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    z-index: 30;
  }
  .matic-mobile-topbar-icons {
    display: flex;
    gap: 18px;
  }
  .matic-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 30;
  }
  .matic-bottom-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    color: var(--text);
    position: relative;
  }
  .matic-bottom-nav-item svg {
    width: 25px;
    height: 25px;
  }
  .matic-bottom-nav-item.active svg {
    stroke: var(--matic-accent);
  }
  .matic-bottom-nav-avatar .matic-post-header-avatar {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .matic-nav-dot {
    top: 2px;
    left: 24px;
  }
  /* Panneau de notifications ouvert par #matic-mobile-notif-btn (barre du
     bas) : même élément #matic-notif-menu que sur desktop, juste repositionné. */
  #matic-notif-menu {
    position: fixed;
    top: auto;
    bottom: 64px;
    left: 8px;
    right: 8px;
    width: auto;
  }
  /* #matic-nav-more-menu ouvert par #matic-mobile-more-btn, en haut cette
     fois (le déclencheur est dans la barre du haut, pas du bas). */
  .matic-nav-more-menu {
    top: 56px;
    bottom: auto;
    left: auto;
    right: 8px;
  }
}

/* ===== EYEFINDMATIC : en-tete de post (lieu), actions (partager/enregistrer), double-tap ===== */

.matic-post-header-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.matic-post-location {
  font-size: 12px;
  color: var(--text-muted);
}

.matic-share-btn,
.matic-save-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: 4px;
  display: flex;
}
.matic-share-btn svg,
.matic-save-btn svg {
  width: 24px;
  height: 24px;
}
.matic-post-save-form {
  margin-left: auto;
  display: flex;
}
.matic-save-btn.active svg {
  fill: var(--text);
}

.matic-dbltap-heart {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  fill: #fff;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.matic-dbltap-heart.pop {
  animation: matic-dbltap-pop 0.7s ease;
}
@keyframes matic-dbltap-pop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  45% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
  80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .matic-dbltap-heart.pop {
    animation: matic-dbltap-fade 0.5s ease;
  }
  @keyframes matic-dbltap-fade {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
  }
}

.matic-hashtag {
  color: var(--matic-accent);
  font-weight: 600;
}
.matic-explore-tag-heading {
  font-size: 20px;
  margin: 0 0 16px;
}

/* ===== EYEFINDMATIC : squelette de chargement ===== */

.matic-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--matic-card-2);
  border-radius: var(--radius-sm);
}
.matic-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: matic-shimmer 1.4s infinite;
}
@keyframes matic-shimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .matic-skeleton::after {
    animation: none;
  }
}

/* ===== EYEFINDMATIC : modales generiques (backdrop, bouton fermer/nav) ===== */

.matic-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
@supports not (backdrop-filter: blur(4px)) {
  .matic-modal-backdrop {
    background: rgba(0, 0, 0, 0.9);
  }
}
.matic-modal-backdrop.hidden {
  display: none;
}
.matic-modal-close {
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.matic-modal-close svg {
  width: 18px;
  height: 18px;
}
.matic-modal-nav {
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 101;
}
.matic-modal-nav svg {
  width: 22px;
  height: 22px;
}
.matic-modal-nav.hidden {
  display: none;
}
.matic-modal-nav-prev {
  left: 24px;
}
.matic-modal-nav-next {
  right: 24px;
}

/* ===== EYEFINDMATIC : modale de publication ===== */

.matic-post-modal {
  position: relative;
  width: min(92vw, 1100px);
  height: min(85vh, 720px);
  background: var(--matic-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
}
.matic-post-modal .matic-modal-close {
  position: absolute;
  top: -48px;
  right: 0;
}
.matic-post-modal-body {
  display: flex;
  width: 100%;
  height: 100%;
}
.matic-post-modal-skeleton {
  width: 100%;
  height: 100%;
  display: flex;
}
.matic-post-modal-skeleton-img {
  width: 100%;
  height: 100%;
}
.matic-post-modal-media {
  position: relative;
  flex: 1.3;
  background: #000;
  min-width: 0;
}
.matic-post-modal-media .matic-post-carousel-track {
  height: 100%;
}
.matic-post-modal-media .matic-post-carousel-track img {
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}
.matic-post-modal-details {
  flex: 1;
  min-width: 340px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
}
.matic-post-modal-single .matic-post-modal-details {
  max-width: 420px;
}
.matic-post-modal-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
}
.matic-post-modal-caption-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.matic-post-modal-caption-row .matic-post-caption {
  margin: 0;
}
.matic-post-modal-footer {
  border-top: 1px solid var(--border);
  padding: 12px 16px 16px;
}
.matic-post-modal-footer .matic-post-actions {
  padding: 0 0 8px;
}
.matic-post-modal-footer .matic-post-like-count {
  margin: 4px 0;
}
.matic-post-modal-footer .matic-post-timestamp {
  margin: 4px 0 10px;
}
.matic-post-modal-footer .matic-comment-form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.matic-post-modal-footer .matic-comment-form input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--text);
  font-size: 14px;
}
.matic-post-modal-footer .matic-comment-form input:focus {
  outline: none;
}
.matic-post-modal-footer .matic-comment-form button {
  background: none;
  border: none;
  color: var(--matic-accent);
  font-weight: 600;
  cursor: pointer;
}
.matic-post-modal-footer .matic-comment-form button:disabled {
  opacity: 0.3;
}

@media (max-width: 900px) {
  .matic-post-modal {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    flex-direction: column;
  }
  .matic-post-modal .matic-modal-close {
    top: 12px;
    right: 12px;
    z-index: 5;
  }
  .matic-post-modal-body {
    flex-direction: column;
    overflow-y: auto;
  }
  .matic-post-modal-media {
    flex: none;
    aspect-ratio: 1 / 1;
  }
  .matic-post-modal-details {
    max-width: none;
    min-width: 0;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  #matic-post-modal-backdrop {
    padding: 0;
  }
  .matic-modal-nav {
    display: none;
  }
}

/* ===== EYEFINDMATIC : modale "Creer" ===== */

.matic-create-modal {
  width: min(90vw, 520px);
  max-height: 85vh;
  background: var(--matic-card);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.matic-create-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.matic-create-modal-header h2 {
  font-size: 15px;
  margin: 0;
  font-weight: 600;
}
.matic-create-modal-submit {
  background: none;
  border: none;
  color: var(--matic-accent);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.matic-create-modal-submit:disabled {
  opacity: 0.3;
  cursor: default;
}
.matic-create-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 24px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  margin: 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.matic-create-dropzone.dragover {
  border-color: var(--matic-accent);
  background: rgba(14, 165, 233, 0.06);
}
.matic-create-dropzone-icon {
  width: 56px;
  height: 56px;
  color: var(--text-muted);
}
.matic-create-dropzone p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.matic-create-dropzone-btn {
  cursor: pointer;
}
.matic-create-dropzone.hidden {
  display: none;
}
.matic-create-editor {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px;
  gap: 14px;
}
.matic-create-editor.hidden {
  display: none;
}
.matic-create-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.matic-create-preview img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}
.matic-create-field-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.matic-create-fields textarea {
  width: 100%;
  min-height: 80px;
  background: var(--btn-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  padding: 10px 12px;
  resize: vertical;
}
.matic-create-caption-count {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: -8px;
}
.matic-create-input-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--btn-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.matic-create-input-label svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.matic-create-alt-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
}
.matic-create-input-label input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--text);
  font-size: 14px;
}
.matic-create-input-label input:focus {
  outline: none;
}
.matic-create-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  color: var(--text);
}
.matic-create-success.hidden {
  display: none;
}
.matic-create-success svg {
  width: 56px;
  height: 56px;
  color: var(--matic-accent);
}

@media (max-width: 600px) {
  .matic-create-modal {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* ===== EYEFINDMATIC : panneau de recherche ===== */

.matic-search-backdrop {
  align-items: flex-start;
  padding-top: 80px;
}
.matic-search-panel {
  width: min(90vw, 460px);
  max-height: 70vh;
  background: var(--matic-card);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.matic-search-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.matic-search-panel-header h2 {
  font-size: 16px;
  margin: 0;
}
.matic-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 16px;
  padding: 10px 12px;
  background: var(--btn-bg);
  border-radius: var(--radius-sm);
}
.matic-search-input-wrap svg {
  width: 18px;
  height: 18px;
  fill: var(--text-muted);
  flex-shrink: 0;
}
.matic-search-input-wrap input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--text);
  font-size: 14px;
}
.matic-search-input-wrap input:focus {
  outline: none;
}
.matic-search-input-wrap button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
}
.matic-search-input-wrap button svg {
  width: 20px;
  height: 20px;
  fill: var(--text-muted);
}
/* #matic-search-clear, #matic-search-live et #matic-search-history n'ont pas
   d'autre classe que "hidden" (ou aucune) dans le HTML statique : ciblés par
   id pour le même motif que .matic-nav-more-menu.hidden ci-dessus. */
#matic-search-clear.hidden,
#matic-search-live.hidden,
#matic-search-history.hidden {
  display: none;
}
.matic-empty.hidden {
  display: none;
}
.matic-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 16px;
}
.matic-search-result-row {
  display: flex;
  align-items: center;
}
.matic-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radius-sm);
  flex: 1;
  min-width: 0;
}
.matic-search-result:hover {
  background: var(--btn-bg);
}
.matic-search-result-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13.5px;
}
.matic-search-result-info span {
  display: block;
  max-width: 100%;
  color: var(--text-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.matic-search-history-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  font-size: 16px;
  line-height: 1;
}
.matic-search-results mark {
  background: none;
  color: var(--matic-accent);
  font-weight: 700;
}
.matic-search-history-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

/* ===== EYEFINDMATIC : gestion des profils (matic/profils.php) ===== */

.matic-profiles-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.matic-profiles-list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--matic-card);
  flex-wrap: wrap;
}
.matic-profiles-list-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 140px;
}
.matic-profiles-badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--matic-accent);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.matic-profiles-bio {
  font-size: 13px;
  color: var(--text-muted);
}
.matic-profiles-list-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.matic-profiles-list-actions form {
  display: inline-flex;
}
.matic-profiles-list-actions button {
  font: inherit;
}

/* ===== EYEFINDMATIC : bandeau de stories ===== */

.matic-stories-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 12px;
}
.matic-story-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  width: 74px;
}
.matic-story-ring {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, var(--matic-accent), #a855f7, var(--matic-danger));
  display: flex;
  align-items: center;
  justify-content: center;
}
.matic-story-ring.seen {
  background: var(--border);
}
.matic-story-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4285f4, #34a853, #fbbc05, #ea4335);
  color: #fff;
  font-weight: 600;
  font-size: 20px;
}
.matic-story-ring-add .matic-story-avatar {
  border: none;
}
.matic-story-add-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--matic-accent);
  color: #fff;
  border: 3px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}
.matic-story-add-badge-sm {
  cursor: pointer;
}
.matic-story-name {
  font-size: 12px;
  color: var(--text);
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matic-story-viewer {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.matic-story-viewer.hidden {
  display: none;
}
.matic-story-viewer-inner {
  position: relative;
  width: min(100vw, 420px);
  height: min(100vh, 100%);
  display: flex;
  align-items: center;
}
.matic-story-viewer-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.matic-story-progress {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.matic-story-progress-bar {
  flex: 1;
  height: 2.5px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  overflow: hidden;
}
.matic-story-progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  transition: width linear;
}
.matic-story-viewer-header {
  position: absolute;
  top: 24px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  color: #fff;
}
.matic-story-viewer-header time {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12.5px;
}
.matic-story-highlight-btn {
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
}
.matic-story-highlight-btn.hidden {
  display: none;
}
.matic-story-highlight-btn svg {
  width: 16px;
  height: 16px;
}
.matic-story-viewer-header .matic-modal-close {
  margin-left: 8px;
}

.matic-highlights-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 0 20px 16px;
}
.matic-highlight-item {
  position: relative;
  flex-shrink: 0;
  width: 72px;
}
.matic-highlight-item-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
}
.matic-highlight-remove-form {
  position: absolute;
  top: -4px;
  right: 2px;
}
.matic-highlight-remove-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--matic-card);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.matic-highlight-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-bg);
}
.matic-highlight-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.matic-highlight-name {
  font-size: 12px;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.matic-story-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  background: none;
  border: none;
  cursor: pointer;
}
.matic-story-nav-prev {
  left: 0;
}
.matic-story-nav-next {
  right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .matic-story-progress-fill {
    transition: none;
  }
}

/* ===== EYEFINDMATIC : messagerie (conversations 1-à-1, texte + photos) ===== */

.matic-messages-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.matic-messages-page-header h1 {
  font-size: 22px;
}

.matic-conversation-list {
  display: flex;
  flex-direction: column;
}
.matic-conversation-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.matic-conversation-list > :last-child {
  border-bottom: none;
}
a.matic-conversation-row:hover {
  background: var(--matic-card);
}
.matic-conversation-row-static {
  cursor: default;
}
.matic-conversation-row .matic-post-header-avatar {
  width: 48px;
  height: 48px;
  font-size: 18px;
  flex-shrink: 0;
}
.matic-conversation-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.matic-conversation-info strong {
  font-size: 14.5px;
}
.matic-conversation-preview {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.matic-conversation-row.unread .matic-conversation-preview,
.matic-conversation-row.unread strong {
  color: var(--text);
  font-weight: 700;
}
.matic-conversation-dot {
  position: static;
  flex-shrink: 0;
  border: none;
}
.matic-conversation-row form {
  flex-shrink: 0;
}

/* Fil de conversation : en-tête fixe, messages qui défilent, composer fixé en
   bas — même schéma en 3 bandes que .matic-thread-page ci-dessous, proche du
   fil d'une appli de messagerie classique plutôt que du gabarit "post" du
   reste du module. */
.matic-thread-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 112px);
  max-height: 760px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  background: var(--bg);
  overflow: hidden;
}
.matic-thread-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.matic-thread-back {
  display: flex;
  color: var(--text);
  flex-shrink: 0;
}
.matic-thread-header .matic-post-header-avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
}
.matic-thread-username {
  font-weight: 700;
  color: var(--text);
  font-size: 15px;
  margin-right: auto;
}
.matic-thread-block-form {
  margin: 0;
}
.matic-thread-block-notice {
  padding: 10px 18px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.matic-thread-typing {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  padding: 0 12px;
}
.matic-thread-typing.hidden {
  display: none;
}
.matic-thread-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--matic-card-2, var(--bg));
}
.matic-message-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 72%;
}
.matic-message-row.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.matic-message-avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
  flex-shrink: 0;
}
.matic-message-bubble-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.matic-message-row.mine .matic-message-bubble-col {
  align-items: flex-end;
}
.matic-message-seen {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  padding: 0 4px;
}
.matic-message-bubble {
  position: relative;
  background: var(--matic-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 9px 15px;
  min-width: 0;
}
.matic-message-deleted {
  font-style: italic;
  color: var(--text-muted) !important;
}
.js-matic-message-delete-form {
  position: absolute;
  top: -8px;
  right: -8px;
  display: none;
}
.matic-message-row:hover .js-matic-message-delete-form {
  display: block;
}
.matic-message-delete-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--matic-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.matic-message-row.mine .matic-message-bubble {
  background: var(--matic-accent);
  border-color: var(--matic-accent);
  color: #fff;
}
.matic-message-text {
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.matic-message-image {
  display: block;
  max-width: 240px;
  max-height: 320px;
  border-radius: 12px;
  object-fit: cover;
}
.matic-message-text + .matic-message-time,
.matic-message-image + .matic-message-time {
  margin-top: 3px;
}
.matic-message-time {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
  text-align: right;
}
.matic-message-row.mine .matic-message-time {
  color: rgba(255, 255, 255, 0.75);
}

.matic-thread-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}
.matic-thread-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.matic-thread-attach-btn:hover {
  color: var(--text);
  background: var(--matic-card);
}
.matic-thread-attach-btn svg {
  width: 22px;
  height: 22px;
}
.matic-thread-image-preview {
  display: flex;
  align-items: center;
}
.matic-thread-image-preview.hidden {
  display: none;
}
.matic-thread-image-preview img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
}
#matic-thread-body-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--btn-bg);
  color: var(--text);
  font-size: 14px;
}
#matic-thread-body-input:focus {
  outline: none;
  border-color: var(--matic-accent);
}
.matic-btn-primary-sm {
  flex-shrink: 0;
  height: 36px;
  padding: 0 18px;
  border-radius: 18px;
  border: none;
  background: var(--matic-accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.matic-btn-primary-sm:hover {
  background: var(--matic-accent-hover);
}
.matic-btn-primary-sm:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 767px) {
  .matic-thread-page {
    height: calc(100vh - 66px - 76px);
    max-height: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}