: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;
  }
}

/* ===== 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. */
.matic-app {
  --bg: #0f1012;
  --text: #f5f6f7;
  --text-muted: #8a8d92;
  --border: rgba(255, 255, 255, 0.09);
  --btn-bg: #1c1d21;
  --link: #0ea5e9;
  --link-tint: rgba(14, 165, 233, 0.14);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --matic-card: #17181b;
  --matic-card-2: #1c1d21;
  --matic-accent: #0ea5e9;
  --matic-accent-hover: #0284c7;
  --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;
}
.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;
  grid-template-columns: minmax(0, 470px) 1fr;
  gap: 56px;
}
.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-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);
}
.matic-suggestion-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.matic-suggestion-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Version "texte bleu" (liste de suggestions) : jamais de boîte de bouton,
   juste du texte bleu 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) affichés
   dans la sidebar du feed EyefindMatic — même ligne que .matic-suggestion-row
   mais toute la ligne est un lien externe, donc on neutralise le style de
   lien par défaut et on pousse le badge à droite avec .matic-search-result-info
   qui grandit pour occuper l'espace restant. */
.matic-sponsored-sites {
  margin-top: 24px;
}
.matic-sponsored-sites .matic-suggestion-row {
  color: var(--text);
  text-decoration: none;
  padding: 4px 6px;
  margin: 0 -6px 8px;
  border-radius: var(--radius-sm);
}
.matic-sponsored-sites .matic-suggestion-row:hover {
  background: var(--matic-card);
}
.matic-sponsored-sites .matic-search-result-info {
  flex: 1;
}
.matic-sponsored-badge {
  flex-shrink: 0;
  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);
}
.matic-post-header-delete {
  margin-left: auto;
}
.matic-post-header-delete button {
  display: flex;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px 8px;
}
.matic-post-header-delete svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.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;
}
.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-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;
  display: block;
  aspect-ratio: 1 / 1;
}
.matic-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.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;
}
.matic-grid-item-overlay span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.matic-grid-item-overlay svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}
.matic-grid-item:hover .matic-grid-item-overlay {
  display: flex;
}

.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: 245px;
  border-right: 1px solid var(--border);
  z-index: 30;
  background: var(--bg);
}
.matic-nav-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 12px;
}
.matic-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  margin-bottom: 30px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
}
.matic-nav-logo-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.matic-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.matic-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 15.5px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.matic-nav-item:hover {
  background: var(--matic-card);
}
.matic-nav-item:active {
  transform: scale(0.98);
}
.matic-nav-item.active {
  font-weight: 700;
}
.matic-nav-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.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-badge {
  margin-left: auto;
  background: var(--matic-danger);
  color: #fff;
  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-danger);
  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. */
#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: 245px;
}

@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 {
  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-viewer-header .matic-modal-close {
  margin-left: auto;
}
.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;
}
.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 {
  background: var(--matic-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 9px 15px;
  min-width: 0;
}
.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;
  }
}