:root {
  --bg: #0a0a0a;
  --card: rgba(255,255,255,0.05);
  --accent: #7c6fff;
  --accent2: #a78bfa;
  --text: #f0f0ff;
  --muted: rgba(200,200,240,0.55);
  --border-e: rgba(120,120,255,0.12);
  --surface-e: rgba(10,10,22,0.97);
}

#editor h2, #leftEditor h2, #editorContentMobile h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #f0f0ff;
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(120,120,255,0.1);
}

#editor h3, #leftEditor h3, #editorContentMobile h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(167,139,250,0.8);
  margin: 20px 0 8px 0;
}

#editor label, #leftEditor label, #editorContentMobile label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(200,200,240,0.5);
  margin-top: 12px;
  display: block;
}

#resizeHandle:hover {
  background: rgba(124,111,255,0.2);
}

#leftResizeHandle:hover {
  background: rgba(124,111,255,0.2);
}

#statsChart {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 10px;
}

.link {
  display: block;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  color: white;
  text-decoration: none;
  transition: 0.3s;

  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
}

.link:hover {
  transform: translateY(-3px) scale(1.02);
  background: rgba(99,102,241,0.2);
}

* { box-sizing: border-box; }

.dropdown {
  position: relative;
}

#leftEditor {
  position: fixed;
  top: 0;
  left: 0;
  width: 380px;
  height: 100vh;
  z-index: 99999;

  transform: translateX(-100%); 
  transition: transform 0.35s;

  background: rgba(10,10,22,0.97);
  backdrop-filter: blur(28px);
  box-shadow: 1px 0 0 rgba(120,120,255,0.12), 24px 0 80px rgba(0,0,0,0.6);
  border-right: 1px solid rgba(120,120,255,0.1);

  overflow: visible;
}

#leftEditor.active {
  transform: translateX(0);
}

#leftContent {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}


.dropdown-content {
  display: none;
  position: absolute;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background: rgba(10,10,22,0.98);
  border: 1px solid rgba(120,120,255,0.18);
  border-radius: 12px;
  padding: 8px;
  z-index: 999;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.dropdown-content.active {
  display: block;
}

.dropdown-item {
  padding: 8px 10px;
  margin: 2px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.15s;
  background: transparent;
  font-size: 0.88rem;
}

.dropdown-item:hover {
  background: rgba(124,111,255,0.12);
}

#bottomBar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

  background: rgba(10,10,22,0.92);
  backdrop-filter: blur(24px);

  border-radius: 999px;
  padding: 8px 14px;

  border: 1px solid rgba(120,120,255,0.15);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);

  display: flex;
  gap: 8px;

  z-index: 9999;
}

/* Bandeau d'astuce affiché au-dessus du profil, PC uniquement,
   quand le menu d'édition est ouvert */
#topEditHint {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);

  background: rgba(10,10,22,0.92);
  backdrop-filter: blur(24px);

  border-radius: 999px;
  padding: 10px 18px;

  border: 1px solid rgba(120,120,255,0.15);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);

  display: none;
  align-items: center;
  gap: 12px;

  max-width: 90vw;
  font-size: 0.85rem;
  color: rgba(230,230,245,0.9);

  z-index: 9999;
}

#topEditHint i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}

#topEditHint span {
  white-space: normal;
}

#topEditHint button {
  display: flex;
  align-items: center;
  gap: 6px;

  background: rgba(124,111,255,0.2);
  border: 1px solid rgba(124,111,255,0.35);
  color: #c4b5fd;

  border-radius: 999px;
  padding: 6px 14px;

  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;

  transition: background 0.15s;
}

#topEditHint button i {
  width: 14px;
  height: 14px;
}

#topEditHint button:hover {
  background: rgba(124,111,255,0.35);
}

#topEditHintCloseBtn {
  width: 26px;
  height: 26px;
  padding: 0 !important;
  border-radius: 50% !important;
  flex-shrink: 0;

  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.6) !important;
}

#topEditHintCloseBtn i {
  width: 13px !important;
  height: 13px !important;
}

#topEditHintCloseBtn:hover {
  background: rgba(255,0,0,0.15) !important;
  border-color: rgba(255,0,0,0.25) !important;
  color: #ff8080 !important;
}

@media (max-width: 768px) {
  #topEditHint {
    display: none !important;
  }
}

/* Masque le titre "TOI" et le bouton d'upload d'avatar dans le menu de droite
   UNIQUEMENT sur PC (la photo se change désormais directement au survol/clic
   sur l'avatar). Sur mobile, on les garde. */
@media (min-width: 769px) {
  .editor-toi-heading,
  .avatar-upload-editor-block {
    display: none;
  }
}

#closeBottomBtn {
  background: rgba(239,68,68,0.2);
  border: 1px solid rgba(239,68,68,0.25);
  color: #fca5a5;

  padding: 8px 14px;
  border-radius: 999px;

  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;

  transition: 0.2s;
}

#closeBottomBtn:hover {
  background: rgba(239,68,68,0.4);
  transform: scale(1.04);
}

#dashboardBottomBtn {
  display: flex;
  align-items: center;
  gap: 6px;

  background: rgba(124,111,255,0.2);
  border: 1px solid rgba(124,111,255,0.35);
  color: #c4b5fd;

  padding: 8px 14px;
  border-radius: 999px;

  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;

  transition: 0.2s;
}

#dashboardBottomBtn i {
  width: 16px;
  height: 16px;
}

#dashboardBottomBtn:hover {
  background: rgba(124,111,255,0.4);
  transform: scale(1.04);
}


body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: radial-gradient(circle at top, #1a1a2e, #0a0a0a);
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 3rem 1rem;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.bg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
  z-index: -1;
}

#editor {
  font-family: 'Inter', sans-serif;
}

.font-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.font-option {
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(120,120,255,0.1);
  cursor: pointer;
  transition: 0.2s;
  text-align: center;
  font-size: 0.85rem;
}

.bgmusic-fixed-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  color: #fff;
  transition: background 0.2s, transform 0.15s;
}
.bgmusic-fixed-toggle:hover {
  background: rgba(0,0,0,0.7);
  transform: scale(1.06);
}
.bgmusic-fixed-toggle i,
.bgmusic-fixed-toggle svg {
  width: 20px;
  height: 20px;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: rgba(10,10,22,0.97);
  border: 1px solid rgba(120,120,255,0.15);
  padding: 24px;
  border-radius: 20px;
  width: 300px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  text-align: center;
}

/* Doit rester au-dessus de TOUT le reste, y compris les autres fenêtres
   (galerie d'arrière-plans, menus widgets, aperçu téléphone...) qui peuvent
   déjà être ouvertes quand l'erreur d'envoi survient — sinon la popup
   s'affiche bien, mais reste cachée derrière la fenêtre déjà ouverte. La
   plus haute valeur de z-index utilisable, pour ne jamais se faire repasser
   devant par une future fenêtre. */
#uploadErrorModal {
  z-index: 2147483647;
}

#editBtn {
  position: fixed;
  bottom: 25px;
  right: 25px;

  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);

  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;

  font-weight: 600;

  cursor: pointer;
  box-shadow: 0 10px 30px rgba(99,102,241,0.4);

  white-space: nowrap;

  /* Taille fluide : le bouton grossit/rétrécit avec la largeur de la
     fenêtre (au lieu d'une taille fixe), entre un mini et un maxi. */
  height: clamp(56px, 6vw, 74px);
  padding: 0 clamp(16px, 2.2vw, 26px);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  display: none;
}

#editBtn i {
  display: flex;
  align-items: center;
}

/* Mode édition (rangée d'icônes PC ou feuille mobile) : le crayon disparaît
   complètement tant qu'on est en édition, quel que soit l'écran. Règle
   posée sur .editing-mode du <body> (basculée dans toggleEditor()) avec
   !important pour ne jamais pouvoir être ré-affichée par erreur ; le JS
   bascule aussi son display en doublon, cette règle est la garantie finale. */
body.editing-mode #editBtn {
  display: none !important;
}

.widget-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(20px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.widget-modal.active {
  display: flex;
}

/* Le menu "Cadre de profil" s'affiche désormais directement à l'intérieur du
   panneau droit (#editor), à la place de son contenu, avec un bouton retour.
   Design aligné sur le menu Paramètres (mêmes classes settings-*). */
.editor-subpanel {
  display: none;
  flex-direction: column;
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.editor-subpanel.active {
  display: flex;
}

.editor-subpanel-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  flex-shrink: 0;
}

.editor-subpanel-header .cursor-menu-title {
  flex: 1;
}

.icon-btn {
  background: rgba(255,255,255,0.08);
  border: none;
  color: white;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  cursor: pointer;

  transition: 0.2s;
  position: relative;
}

.icon-btn:hover {
  background: rgba(99,102,241,0.4);
  transform: scale(1.1);
}

.icon-btn i {
  width: 20px;
  height: 20px;
}

.icon-btn[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(10, 10, 22, 0.95);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
  border: 1px solid rgba(120, 120, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 99999;
  letter-spacing: 0.02em;
}

.icon-btn[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tooltip des badges de profil (Premium, Staff, Membre de la première
   heure...) — même mécanisme CSS que les icônes de la barre d'actions,
   plus fiable qu'un attribut title natif sur un noeud SVG dynamique. */
.profile-badge-tip {
  position: relative;
}

.profile-badge-tip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(10, 10, 22, 0.95);
  color: rgba(255, 255, 255, 0.9);
  /* Empêche l'héritage de -webkit-text-fill-color:transparent depuis un
     parent en mode texte arc-en-ciel (.rainbow-text), qui rendrait
     le tooltip invisible même si sa couleur est bien définie ci-dessus. */
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
  border: 1px solid rgba(120, 120, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 99999;
  letter-spacing: 0.02em;
}

.profile-badge-tip:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.widget-container {
  width: 90%;
  max-width: 900px;
  height: 80%;
  background: rgba(10,10,22,0.97);
  border: 1px solid rgba(120,120,255,0.15);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
}

#editAge {
  margin-bottom: 40px;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.widget-header h2 {
  margin: 0;
}

.widget-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: white;
  font-size: 16px;
  border-radius: 10px;
  padding: 7px 12px;
  cursor: pointer;
  transition: 0.2s;
}

.widget-close:hover {
  background: rgba(239,68,68,0.25);
  border-color: rgba(239,68,68,0.3);
}

.widget-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  overflow-y: auto;
}

.widget-card {
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(120,120,255,0.1);
  transition: 0.25s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.widget-card:hover {
  transform: translateY(-5px);
  background: rgba(124,111,255,0.1);
  border-color: rgba(124,111,255,0.3);
}

.widget-card img {
  width: 40px;
  margin: 0 auto 10px;
}

.widget-card h3 {
  margin: 10px 0;
}

.widget-card button {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  border: none;
  background: rgba(124,111,255,0.7);
  color: white;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: 0.2s;
}

.widget-card button:hover {
  background: rgba(124,111,255,1);
  transform: translateY(-1px);
}

/* ═══════════ Menu "Ajouter un widget" : sidebar à onglets ═══════════
   Réutilise le système de la modale Paramètres (.settings-layout /
   .settings-sidebar / .settings-nav-item / .settings-content /
   .settings-panel, voir plus bas dans ce fichier) : seul le contenu de
   chaque panneau (.widget-grid / .widget-card, déjà stylés ci-dessus)
   change. On désactive juste le flex/scroll interne du widget-grid hérité
   de l'ancienne disposition plein écran : ici c'est .settings-content qui
   porte le scroll. */
#widgetModal .settings-panel .widget-grid {
  flex: none;
  overflow: visible;
}

/* Petit titre de catégorie en haut de chaque panneau (même style que les
   "h3" du menu latéral : voir #editor h3 tout en haut de ce fichier).
   Redondant avec l'onglet actif de la sidebar en navigation normale, mais
   indispensable pendant une recherche : plusieurs panneaux peuvent alors
   être affichés à la fois (voir filterWidgetSearch), et sans ce titre les
   résultats de catégories différentes se retrouvaient mélangés sans repère
   visuel — d'où l'effet "n'importe comment". */
.widget-panel-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(167,139,250,0.8);
  flex-shrink: 0;
}

.widget-panel-label i,
.widget-panel-label svg,
.widget-panel-label img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Pendant une recherche, plusieurs panneaux peuvent être actifs en même
   temps (un par catégorie ayant au moins un résultat) : on sépare
   clairement chaque groupe par un vrai espace + une ligne de séparation,
   plutôt que de laisser les grilles de catégories différentes se toucher. */
#widgetModal .settings-panel.active ~ .settings-panel.active {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Sélecteur renforcé (#widgetModal + classe) : .settings-input, définie
   plus bas dans ce fichier, pose "margin: 0" en shorthand — à spécificité
   égale, une règle plus bas dans la cascade gagne et annulait sinon
   silencieusement ce margin-bottom. */
#widgetModal .widget-search-input {
  margin-bottom: 32px;
  flex-shrink: 0;
}

/* Onglets identifiés par une seule marque (Discord, Steam, GitHub…) : icône
   de marque (svg ou img selon le cas) à la même taille que les icônes
   lucide utilisées pour les autres onglets. */
#widgetModal .settings-nav-item img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}

/* ═══════════ Widget "Galerie photo" : choix du modèle de grille ═══════════ */

.gallery-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.gallery-layout-card {
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  border: 1px solid rgba(120,120,255,0.1);
  cursor: pointer;
  transition: 0.2s ease;
}

.gallery-layout-card:hover {
  transform: translateY(-3px);
  background: rgba(124,111,255,0.1);
  border-color: rgba(124,111,255,0.3);
}

.gallery-layout-card h3 {
  margin: 10px 0 0;
  font-size: 0.85rem;
}

.gallery-layout-preview {
  display: grid;
  gap: 4px;
  height: 70px;
}

.gallery-layout-preview span {
  background: rgba(124,111,255,0.45);
  border-radius: 4px;
}

.gallery-layout-preview-grid2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.gallery-layout-preview-grid3 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.gallery-layout-preview-mosaic {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.gallery-layout-preview-mosaic .big {
  grid-column: 1;
  grid-row: 1 / 3;
}
.gallery-layout-preview-mosaic span:not(.big) {
  grid-column: 2;
}

.gallery-layout-preview-row {
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
}

/* ═══════════ Widget "Galerie photo" : rendu sur le profil ═══════════ */

.gallery-widget {
  width: 100%;
  margin-top: 15px;
  display: grid;
  gap: 10px;
}

.gallery-widget.gallery-grid2 {
  grid-template-columns: 1fr 1fr;
}

.gallery-widget.gallery-grid3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.gallery-widget.gallery-mosaic {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 90px;
}
.gallery-widget.gallery-mosaic .gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-widget.gallery-row {
  grid-auto-flow: column;
  grid-auto-columns: 130px;
  grid-template-rows: 130px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}

.gallery-widget.gallery-grid2 .gallery-item,
.gallery-widget.gallery-grid3 .gallery-item {
  aspect-ratio: 1 / 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.gallery-item-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.gallery-item:hover .gallery-item-remove {
  opacity: 1;
}

.gallery-item-remove:hover {
  background: rgba(239,68,68,0.85);
}

.gallery-add-more {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px dashed rgba(124,111,255,0.4);
  background: rgba(124,111,255,0.06);
  color: #a78bfa;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: 0.2s ease;
}

.gallery-add-more:hover {
  background: rgba(124,111,255,0.14);
}

/* ═══════════ Widget "Galerie photo" : lightbox plein écran ═══════════ */

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999999;

  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;
  box-sizing: border-box;
}

.gallery-lightbox.active {
  display: flex;
}

.gallery-lightbox-stage {
  position: relative;
  max-width: min(90vw, 900px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.gallery-lightbox-stage img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8);
}

.gallery-lightbox-counter {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(230,230,245,0.75);
  background: rgba(255,255,255,0.08);
  padding: 5px 14px;
  border-radius: 999px;
}

.gallery-lightbox-close {
  position: fixed;
  top: 24px;
  right: 24px;

  width: 42px;
  height: 42px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: white;

  font-size: 16px;
  cursor: pointer;
  transition: 0.2s;
}

.gallery-lightbox-close:hover {
  background: rgba(239,68,68,0.3);
  border-color: rgba(239,68,68,0.35);
}

.gallery-lightbox-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);

  width: 52px;
  height: 52px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: white;

  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s;
  z-index: 1;
}

.gallery-lightbox-arrow:hover {
  background: rgba(124,111,255,0.35);
  border-color: rgba(124,111,255,0.5);
  transform: translateY(-50%) scale(1.08);
}

.gallery-lightbox-arrow-left { left: 18px; }
.gallery-lightbox-arrow-right { right: 18px; }

@media (max-width: 640px) {
  .gallery-lightbox-arrow {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .gallery-lightbox-arrow-left { left: 8px; }
  .gallery-lightbox-arrow-right { right: 8px; }

  .gallery-lightbox-close {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

/* ═══════════ Galerie d'arrière-plans (menu "Choisir une image") ═══════════
   Grande modale listant les arrière-plans actuellement utilisés par les
   membres de MemoryLink, avec en toute première position le bouton
   d'upload (voir #backgroundGalleryModal dans main.html). Cliquer sur la
   carte d'un membre applique SA copie du fichier (voir /apply-background
   côté serveur) : ce n'est pas un lien vers le fichier original, donc si ce
   membre change son fond plus tard, le nôtre ne bouge pas. */

.bg-gallery-container {
  max-width: 960px;
  width: 92%;
  height: 82vh;
}

.bg-gallery-hint {
  margin: 0 0 18px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(200,200,240,0.6);
  flex-shrink: 0;
}

.bg-gallery-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* Hauteur de ligne FIXE (en px) plutôt que "aspect-ratio" sur les cartes :
     combinée à l'étirement par défaut des enfants de grid (align-items:
     stretch), aspect-ratio pouvait donner des cartes beaucoup trop hautes
     ou trop basses selon les lignes — d'où l'effet "bandes de photos
     empilées" observé. Une hauteur de ligne fixe force toutes les cartes
     d'une même grille à la même taille, sans ambiguïté. */
  grid-auto-rows: 170px;
  gap: 18px;
  overflow-y: auto;
  align-content: start;
}

.bg-gallery-upload-card,
.bg-gallery-card {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}

.bg-gallery-upload-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border: 1.5px dashed rgba(124,111,255,0.4);
  background: rgba(124,111,255,0.06);
  color: #a78bfa;
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
  padding: 12px;

  transition: 0.2s ease;
}

.bg-gallery-upload-card i {
  width: 26px;
  height: 26px;
}

.bg-gallery-upload-card:hover {
  background: rgba(124,111,255,0.14);
  border-color: rgba(124,111,255,0.6);
  transform: translateY(-3px);
}

.bg-gallery-upload-card input {
  display: none;
}

.bg-gallery-card {
  /* "contain" (et non "cover") pour voir l'image en entier, quel que soit
     son ratio d'origine : "cover" rognait les fonds qui n'étaient pas
     exactement au format 4/3 de la carte. */
  background-color: rgba(255,255,255,0.03);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.bg-gallery-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124,111,255,0.4);
}

.bg-gallery-card.is-current {
  border: 2px solid rgba(124,111,255,0.75);
}

.bg-gallery-card.bg-gallery-card-loading {
  opacity: 0.55;
  pointer-events: none;
}

/* Pas de nom / avatar sur les cartes : la galerie ne montre jamais à qui
   appartient un arrière-plan, juste l'image et un badge d'action. */
.bg-gallery-card-overlay {
  position: absolute;
  inset: auto 8px 8px auto;
  display: flex;
}

.bg-gallery-card-tag {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
}

.bg-gallery-card-tag.bg-gallery-card-use {
  background: rgba(124,111,255,0.85);
  color: #fff;
}

.bg-gallery-status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  grid-column: 1 / -1;
  padding: 30px 10px;
  color: rgba(200,200,240,0.55);
  font-size: 0.85rem;
  cursor: default;
  background: none;
  border: none;
  box-shadow: none;
}

/* ═══════════ Widget "Carte / Localisation" : rendu sur le profil ═══════════
   Carte épurée façon MemoryLink : fond de carte sombre minimaliste, aucun
   contrôle visible (pas de zoom/drag/attribution), un point d'accent violet,
   et le nom du lieu affiché dans une petite carte glassmorphique cohérente
   avec le reste des widgets (voir .link / .gallery-item) plutôt que dans
   l'UI brute d'un service de cartographie tiers. */

.location-widget-card {
  width: 100%;
  margin-top: 15px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.location-widget-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124,111,255,0.3);
  box-shadow: 0 15px 40px rgba(0,0,0,0.35);
}

.location-widget-map {
  width: 100%;
  height: 180px;
  background: #0d0d18;
  position: relative;
}

.location-widget-map .leaflet-container {
  background: #0d0d18;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
}

/* On désactive toute interaction native de Leaflet (déjà verrouillée en JS
   via dragging/scrollWheelZoom/etc. à false) pour ne garder qu'une simple
   image de carte cliquable, cohérente avec le reste du profil. */
.location-widget-map .leaflet-control-container {
  display: none;
}

.location-widget-map.location-widget-map-loading {
  overflow: hidden;
}

.location-widget-map.location-widget-map-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.02) 75%);
  background-size: 200% 100%;
  animation: locationWidgetShimmer 1.4s ease-in-out infinite;
}

@keyframes locationWidgetShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.location-widget-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}

.location-widget-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(124,111,255,0.15);
  color: #a78bfa;
  flex-shrink: 0;
}

.location-widget-pin i {
  width: 14px;
  height: 14px;
}

.location-widget-address {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(230,230,245,0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-widget-marker {
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-widget-marker-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7c6fff;
  box-shadow: 0 0 0 4px rgba(124,111,255,0.25), 0 2px 8px rgba(0,0,0,0.5);
  border: 2px solid #fff;
}

.location-widget-marker-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(124,111,255,0.5);
  animation: locationWidgetPulse 2.2s ease-out infinite;
}

@keyframes locationWidgetPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}

/* ═══════════ Widget "Texte" : rendu sur le profil ═══════════ */

.widget-text-wrap {
  width: 100%;
  margin-top: 15px;
}

.widget-text-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.widget-text-block {
  width: 100%;
  margin: 0;
  padding: 4px 2px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-line;
  text-align: left;
}

/* .inline-editable est pensé pour du texte court inline (pseudo/bio) :
   son display:inline-block combiné à sa marge négative créait un espace
   fantôme au-dessus/en-dessous du bloc de texte (bug classique d'alignement
   "baseline" des éléments inline-block) — d'où le "trop d'espace" constaté.
   On repasse ce widget en bloc normal, sans toucher au style utilisé par
   ailleurs pour le nom/la bio. */
.widget-text-block.inline-editable {
  display: block;
  margin: 0;
  padding: 4px 8px;
}

#editBtn:hover {
  transform: translateY(-3px) scale(1.04);

  background: rgba(99,102,241,0.25);

  box-shadow: 
    0 15px 40px rgba(99,102,241,0.4),
    inset 0 0 12px rgba(255,255,255,0.15);
}

#editBtn:active {
  transform: scale(0.96);
}
.font-option:hover {
  transform: translateY(-2px);
  background: rgba(124,111,255,0.08);
  border-color: rgba(124,111,255,0.25);
}

.font-option.active {
  border: 1px solid rgba(124,111,255,0.6);
  background: rgba(124,111,255,0.15);
}

/* ═══════════ Import de police personnalisée (éditeur, section "Police") ═══════════
   Les polices importées apparaissent comme des .font-option supplémentaires,
   directement dans la grille (#fontSelect), avec juste un petit bouton de
   suppression en plus — ce panneau n'est jamais visible ailleurs que dans
   l'éditeur du propriétaire, donc pas besoin de le masquer derrière un mode
   spécifique. */
.font-option.custom-font-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  text-align: left;
}

.custom-font-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-font-delete {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(239,68,68,0.15);
  color: #fca5a5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.15s;
}

.custom-font-delete:hover {
  background: rgba(239,68,68,0.4);
  color: #fff;
}

.custom-font-delete i {
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.custom-font-hint {
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(200,200,240,0.5);
  margin-top: 8px;
}

.profile {
  width: 100%;
  max-width: 520px;
  text-align: center;

  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease, max-width 0.3s ease;
}

/* ═══════════ Mode aperçu téléphone (vraie iframe = vraies règles mobile) ═══════════ */
#phonePreviewOverlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(5,5,10,0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

#phonePreviewOverlay.active {
  display: flex;
}

.phone-preview-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(200,200,240,0.55);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.phone-preview-label i {
  width: 15px;
  height: 15px;
}

.phone-mockup {
  position: relative;
  padding: 40px 12px 30px;
  background: #000;
  border-radius: 46px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.06),
    0 50px 140px rgba(0,0,0,0.9);
  height: min(760px, calc(100vh - 140px));
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
}

.phone-mockup::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 18px;
  background: linear-gradient(#0d0d0d, #000);
  border-radius: 0 0 14px 14px;
  box-shadow: inset 0 0 4px rgba(255,255,255,0.08);
  z-index: 5;
}

.phone-mockup::after {
  content: '';
  position: absolute;
  bottom: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background: rgba(255,255,255,0.4);
  border-radius: 99px;
  z-index: 5;
}

#phonePreviewIframe {
  display: block;
  width: 375px;
  height: 100%;
  flex: 1;
  border: none;
  border-radius: 0;
  background: #050505;
}

#phonePreviewCloseBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: rgba(230,230,245,0.85);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

#phonePreviewCloseBtn:hover {
  background: rgba(255,255,255,0.12);
}

#phonePreviewCloseBtn i {
  width: 15px;
  height: 15px;
}

#phonePreviewBtn.active {
  background: rgba(99,102,241,0.5);
  color: #fff;
}

@media (max-width: 480px) {
  .phone-mockup {
    padding: 34px 8px 24px;
    border-radius: 38px;
  }
  #phonePreviewIframe {
    width: 300px;
  }
}

#resizeHandle {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  background: transparent;
}

#resizeHandle:hover {
  background: rgba(99,102,241,0.3);
}

.header {
  background: rgba(255,255,255,0.04);
  border-radius: 30px;
  padding: 2.5rem 2rem;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  position: relative;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  transform: translateZ(0);
  will-change: transform;
}

/* Cadre de profil 3D : le cadre s'étire / se zoome vers la souris */
.header.profile-3d-active,
.scroll-page-card.profile-3d-active {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform-origin 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.header.profile-3d-active.is-tilting,
.scroll-page-card.profile-3d-active.is-tilting {
  transition: transform 0.08s linear,
              transform-origin 0s linear;
}

.views-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 3;

  display: flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 600;

  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.1);
}

#likes {
  z-index: 4;
}

#likes {
  top: 56px !important;
  right: 15px !important;
  margin-top: 0 !important;
}

/* Bouton "Signaler ce profil" : même pastille que #views/#likes, empilée
   en dessous. Masqué par défaut (display:none ci-dessous) — révélé en JS
   pour tout le monde, y compris le propriétaire du profil lui-même (voir
   le bloc "if (!isPhonePreview)" dans main.html), sauf en aperçu téléphone. */
#reportBtn {
  top: 97px !important;
  right: 15px !important;
  z-index: 4;
  cursor: pointer;
  display: none;
}

#reportBtn i {
  width: 13px;
  height: 13px;
  pointer-events: none;
}

#reportBtn:hover {
  background: rgba(239,68,68,0.35) !important;
  border-color: rgba(239,68,68,0.4) !important;
}

/* ═══════════ Styles alternatifs des badges vues / likes / signalement ═══════════
   4 styles sélectionnables en mode édition en cliquant directement sur un des
   badges (voir openStatsBadgePopover en JS). "Verre" (glass) est le style par
   défaut, déjà défini sur .views-badge ci-dessus : ces classes ne s'ajoutent
   qu'en plus, quand un autre style est choisi. S'appliquent aux 3 badges
   (y compris #reportBtn, qui ne peut pas être masqué mais peut changer de
   style comme les deux autres). */
.views-badge.stat-style-solid {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: none;
  box-shadow: 0 6px 18px rgba(99,102,241,0.45);
}

.views-badge.stat-style-outline {
  background: rgba(10,10,22,0.3);
  border: 1.5px solid rgba(124,111,255,0.55);
  color: #c4b5fd;
  backdrop-filter: blur(4px);
}

.views-badge.stat-style-minimal {
  background: transparent;
  border: 1px solid transparent;
  backdrop-filter: none;
  box-shadow: none;
  padding: 6px 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.65);
}

#reportBtn.stat-style-solid:hover {
  background: rgba(239,68,68,0.75) !important;
  border-color: rgba(239,68,68,0.5) !important;
}

#reportBtn.stat-style-outline:hover,
#reportBtn.stat-style-minimal:hover {
  background: rgba(239,68,68,0.3) !important;
  border-color: rgba(239,68,68,0.45) !important;
}

/* Badge vues/likes masqué par le propriétaire : reste rendu en grisé,
   cliquable, UNIQUEMENT pour lui en mode édition (pour pouvoir le
   réafficher — voir toggleStatsBadgeVisibility). Invisible pour tout le
   monde d'autre (display:none posé en JS, voir render()). */
.views-badge.stat-badge-ghost {
  opacity: 0.35;
}

#avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.1);
  margin-bottom: 1rem;
}

/* Icône affichée à la place de l'avatar quand la personne n'a ni photo
   Google, ni Discord, ni upload. */
.avatar-default-icon {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 3px solid rgba(255,255,255,0.1);
  box-sizing: border-box;
  color: rgba(230,230,245,0.45);
}

.avatar-default-icon i {
  width: 48px;
  height: 48px;
}

#editorContent {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

/* Sur PC, le pseudo et la bio se modifient directement sur le profil
   (clic + rectangle au survol) : plus besoin de ces champs dans le menu.
   Sur mobile, on les garde car le survol n'existe pas. */
#nameBioFields {
  display: none;
}

/* Sur PC, le téléphone / email / lieu / âge se modifient aussi
   directement sur le profil : le bloc "Informations" du menu est
   inutile. Sur mobile, on le garde. */
#infoFieldsSection {
  display: none;
}


#name { font-size: 1.8rem; font-weight: 700; margin: 0.5rem 0; display: flex; align-items: center; gap: 8px; justify-content: center; }
#bio { font-size: 0.95rem;  white-space: pre-line; color: var(--muted); margin-bottom: 1rem; }

/* Texte animé (pseudo/bio en mode "machine à écrire", voir startTextAnim en
   JS) : à chaque boucle, le texte repasse par 0 caractère pendant une petite
   pause avant de se retaper. Exactement comme pour ".inline-editable" plus
   bas (même souci, même remède), un <span> totalement vide perd sa ligne de
   texte, ce qui fait "sauter" (rétrécir puis re-grandir) le cadre du profil
   à chaque cycle de l'animation — très visible et gênant. On réserve donc
   toujours au moins la hauteur d'une ligne, même quand le texte est vide. */
.bio-text-content,
.name-text {
  display: inline-block;
  min-height: 1.4em;
}

/* Edition inline du pseudo / de la bio (visible uniquement quand
   le propriétaire a ouvert le menu d'édition) */
.inline-editable {
  display: inline-block;
  cursor: pointer;
  border-radius: 8px;
  padding: 2px 8px;
  margin: -2px -8px;
  outline: 1.5px dashed transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s ease, background-color 0.15s ease;

  /* Sans ça, un champ en édition (ex: la bio) qui repasse à 0 caractère
     perd complètement sa ligne de texte : la boîte inline-block retombe à
     la hauteur de son seul padding, ce qui fait "sauter" (rétrécir puis
     re-grandir) le cadre du profil à chaque fois qu'on efface tout avant
     de retaper un caractère. On réserve donc toujours au moins la hauteur
     d'une ligne, même quand le champ est vide. */
  min-height: 1.4em;
}

.inline-editable:hover {
  outline-color: rgba(124, 111, 255, 0.6);
  background-color: rgba(124, 111, 255, 0.08);
}

.inline-editable.editing {
  cursor: text;
  outline: 1.5px solid #7c6fff;
  outline-offset: 2px;
  background-color: rgba(124, 111, 255, 0.12);
}

/* Email en cours d'édition sans "@" : on prévient que ça ne sauvegardera pas. */
.inline-editable.editing.info-invalid {
  outline: 1.5px solid #ef4444;
  background-color: rgba(239, 68, 68, 0.12);
}

/* Texte d'aide ("Ajouter un téléphone...", etc.) affiché uniquement
   quand le propriétaire a le menu d'édition ouvert, pour les infos
   pas encore renseignées. Disparaît dès que l'éditeur est fermé. */
.info-placeholder {
  opacity: 0.55;
  font-style: italic;
}

/* ═══════════ Disposition horizontale des infos (téléphone/email/lieu/âge) ═══════════
   Par défaut (#extraInfos sans la classe .info-horizontal) chaque info reste
   affichée l'une sous l'autre, séparée par des <br> (comportement d'origine,
   voir render()). Avec .info-horizontal, c'est exactement le même rendu
   (même texte, même taille, même couleur, aucun style de "badge" ajouté) —
   seule la disposition change : les infos passent en rangée au lieu d'être
   empilées. .info-pill ne sert donc qu'à empêcher l'icône et son texte de
   se séparer lors d'un retour à la ligne, sans rien ajouter visuellement. */
#extraInfos.info-horizontal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 4px;
  column-gap: 18px;
  margin-bottom: 1rem;
}

.template-landscape #extraInfos.info-horizontal,
.template-sidebar #extraInfos.info-horizontal,
.template-minimal #extraInfos.info-horizontal {
  justify-content: flex-start;
}

.info-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.bio-tags-row {
  margin-top: 8px;
}

.bio-tags-row > span {
  vertical-align: middle;
}

#links {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Widgets de la page principale (musique, galerie, texte, Discord, Steam,
   GitHub, localisation, prestations…) : rendus directement dans #links,
   mélangés aux liens dans l'ordre choisi dans l'éditeur (voir render() en
   JS, renderProfileWidgetInto), ce qui permet d'en placer un entre deux
   liens. min-width:0 évite qu'un contenu large (iframe, image) ne force
   #links à s'élargir dans les templates en grille. */
.profile-flow-widget {
  min-width: 0;
}

.linkIconsRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.link.link-icon-only {
  position: relative;
  overflow: visible;
  isolation: auto;

  flex: 0 0 auto;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transition: transform 0.2s ease, opacity 0.2s ease;
}

.link.link-icon-only::before,
.link.link-icon-only::after {
  content: none;
  display: none;
}

.link.link-icon-only img,
.link.link-icon-only svg,
.link.link-icon-only i {
  width: 32px;
  height: 32px;
}

.link.link-icon-only:hover {
  transform: scale(1.12);
  /* L'opacité 0.85 au survol est appliquée à l'icône seulement (voir plus
     bas) : sur le lien entier elle rendait aussi le nom au survol
     semi-transparent. */
  opacity: 1;
  background: none;
  border-color: transparent;
  box-shadow: none;
}

.link {
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 18px;
  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.03)
    );

  border: 1px solid rgba(255,255,255,0.08);

  color: white;
  text-decoration: none;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;

  box-shadow:
    0 8px 30px rgba(0,0,0,0.25);

  isolation: isolate;
}

.link::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(99,102,241,0.18),
      rgba(139,92,246,0.12),
      transparent 70%
    );

  opacity: 0;
  transition: opacity 0.25s ease;

  z-index: -1;
}

.link::after {
  content: "";

  position: absolute;
  top: -50%;
  left: -120%;

  width: 80px;
  height: 200%;

  background: rgba(255,255,255,0.12);

  transform: rotate(25deg);

  transition: 0.7s;
}

.link:hover::after {
  left: 140%;
}


.font-option[data-font="Inter"] {
  font-family: 'Inter', sans-serif;
}

.font-option[data-font="Poppins"] {
  font-family: 'Poppins', sans-serif;
}

#linkModal.active ~ #toastContainer {
  z-index: 2147483647 !important;
}

#toastContainer {
  position: fixed;
  top: 25px;
  right: 25px;

  display: flex;
  flex-direction: column;
  gap: 14px;

  /* Était à 1000 : les notifications passaient SOUS la barre de boutons à
     droite (#editorIconRail, 99997). 99998 = juste au-dessus de ces boutons,
     mais toujours SOUS les menus/panneaux qui s'ouvrent à droite (#editor et
     .widget-modal à 99999, panneaux d'édition à 100002+). */
  z-index: 99998;
}


@media (max-width: 768px) {

  #toastContainer {
    top: auto !important;
    bottom: 15px;
    left: 15px;
    right: 15px;

    align-items: center;
  }

  .toast {
    width: 100%;
  }
}

.toast {

  position: relative;

  width: 340px;
  overflow: hidden;

  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 18px;

  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      rgba(20,20,35,0.96),
      rgba(15,15,25,0.92)
    );

  backdrop-filter: blur(30px);

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 20px 60px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);

  animation:
    toastSlide 0.45s cubic-bezier(.19,1,.22,1);

  isolation: isolate;
}

.toast-glow {
  position: absolute;
  inset: 0;

  opacity: 0.15;
  filter: blur(40px);

  z-index: -1;
}

.toast.success .toast-glow {
  background: #22c55e;
}

.toast.error .toast-glow {
  background: #ef4444;
}

.toast.warning .toast-glow {
  background: #f59e0b;
}

.toast.info .toast-glow {
  background: #6366f1;
}

.toast.success {
  border-left: 3px solid #22c55e;
}

.toast.error {
  border-left: 3px solid #ef4444;
}

.toast-icon {

  min-width: 52px;
  min-height: 52px;

  border-radius: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.05);

  border: 1px solid rgba(255,255,255,0.06);

  backdrop-filter: blur(10px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.toast-icon i {
  width: 24px;
  height: 24px;
}

.toast.success .toast-icon i {
  color: #22c55e;
}

.toast.error .toast-icon i {
  color: #ef4444;
}

.toast.warning .toast-icon i {
  color: #f59e0b;
}

.toast.info .toast-icon i {
  color: #818cf8;
}

.toast-content {
  flex: 1;
}

.toast-title {

  font-size: 15px;
  font-weight: 700;

  color: white;

  margin-bottom: 4px;

  letter-spacing: 0.3px;
}

.toast-message {

  color: rgba(255,255,255,0.7);

  line-height: 1.5;

  font-size: 14px;
}

.toast-close {

  background: transparent;
  border: none;

  color: rgba(255,255,255,0.4);

  cursor: pointer;

  transition: 0.2s;

  font-size: 16px;
}

.toast-close:hover {
  color: white;
  transform: scale(1.15);
}


.toast-progress {

  position: absolute;
  left: 0;
  bottom: 0;

  height: 4px;
  width: 100%;

  transform-origin: left;

  animation: toastProgress 4.5s linear forwards;
}

.toast.success .toast-progress {
  background: linear-gradient(90deg,#22c55e,#4ade80);
}

.toast.error .toast-progress {
  background: linear-gradient(90deg,#ef4444,#f87171);
}

.toast.warning .toast-progress {
  background: linear-gradient(90deg,#f59e0b,#fbbf24);
}

.toast.info .toast-progress {
  background: linear-gradient(90deg,#6366f1,#8b5cf6);
}

.toast-remove {
  animation: toastOut 0.35s ease forwards;
}

@keyframes toastSlide {

  from {
    opacity: 0;
    transform:
      translateX(120px)
      scale(0.9);
  }

  to {
    opacity: 1;
    transform:
      translateX(0)
      scale(1);
  }
}

@keyframes toastOut {

  to {
    opacity: 0;
    transform:
      translateX(120px)
      scale(0.9);
  }
}

@keyframes toastProgress {

  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

.toast:hover {

  transform:
    translateY(-4px)
    scale(1.01);

  border-color:
    rgba(255,255,255,0.12);

  box-shadow:
    0 25px 70px rgba(0,0,0,0.55);
}

@keyframes toastIn {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeOut {
  to { opacity: 0; transform: translateY(10px); }
}

.font-option[data-font="Roboto"] {
  font-family: 'Roboto', sans-serif;
}

.font-option[data-font="Montserrat"] {
  font-family: 'Montserrat', sans-serif;
}

.font-option[data-font="Fredoka"] {
  font-family: 'Fredoka', sans-serif;
}

.font-option[data-font="Syne"] {
  font-family: 'Syne', sans-serif;
}

.font-option[data-font="Playfair Display"] {
  font-family: 'Playfair Display', serif;
}

.font-option[data-font="Pacifico"] {
  font-family: 'Pacifico', cursive;
}

.font-option[data-font="Space Grotesk"] {
  font-family: 'Space Grotesk', sans-serif;
}

.font-option[data-font="Outfit"] {
  font-family: 'Outfit', sans-serif;
}

#editBtn .icon {
  display: flex;
  align-items: center;
  /* Suit la même échelle fluide que le bouton lui-même (voir #editBtn). */
  width: clamp(18px, 1.4vw, 24px);
  height: clamp(18px, 1.4vw, 24px);
  flex-shrink: 0;
}

.bg-box {
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(120,120,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.file-wrapper {
  display: flex;
}

.file-btn {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  text-align: center;
  background: rgba(124,111,255,0.1);
  border: 1px solid rgba(124,111,255,0.25);
  color: white;
  cursor: pointer;
  transition: 0.2s;
  font-weight: 600;
  font-size: 0.88rem;
}

.file-btn:hover {
  background: rgba(124,111,255,0.2);
  border-color: rgba(124,111,255,0.4);
  transform: translateY(-1px);
}

.file-btn input {
  display: none;
}

/* Arrière-plan vidéo : lecture en boucle, plein écran, derrière tout le
   reste (y compris .bg-overlay, voir plus haut, qui reste au-dessus pour
   assombrir légèrement la vidéo comme il le fait déjà pour une image). */
#bgVideoEl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
}

.link:hover {
  transform:
    translateY(-4px)
    scale(1.015);

  border-color: rgba(99,102,241,0.35);

  background:
    linear-gradient(
      135deg,
      rgba(99,102,241,0.18),
      rgba(139,92,246,0.12)
    );

  box-shadow:
    0 15px 40px rgba(99,102,241,0.18),
    0 10px 30px rgba(0,0,0,0.35);
}

.link:hover::before {
  opacity: 1;
}

.link-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.link-content img,
.link-content i {
  width: 22px;
  height: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0.95;
}

.link-arrow {
  opacity: 0.45;
  transition: 0.25s ease;
}

.link:hover .link-arrow {
  transform: translateX(4px);
  opacity: 1;
}


.link span {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.footer {
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--muted);
}

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

.mobile-close {
  display: none;
}

#leftResizeHandle {
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
}

#leftResizeHandle:hover {
  background: rgba(99,102,241,0.3);
}

.footer a:hover {
  color: white;
}

#editBtn:hover { transform: scale(1.05); }

#editor {
  position: fixed;
  top: 0;
  z-index: 99999 !important;
  right: 0; 
  width: 380px;
  height: 100vh;

  transform: translateX(100%);
  transition: transform 0.35s, width 0.1s;

  background: rgba(10,10,22,0.97);
  backdrop-filter: blur(28px);
  box-shadow: -1px 0 0 rgba(120,120,255,0.12), -24px 0 80px rgba(0,0,0,0.6);
  border-left: 1px solid rgba(120,120,255,0.1);
}

#editor.active {
  transform: translateX(0);
}

/* ═══════════ Rangée d'icônes du panneau "Réglages" (PC uniquement) ═══════════
   Remplace l'ouverture directe de #editor depuis le crayon "Modifier" : sur
   PC, on affiche à la place cette colonne de boutons ronds flottants à droite
   de l'écran (un par section auparavant listée dans #editor), avec infobulle
   au survol (réutilise .icon-btn[data-tooltip], défini plus haut). Un clic
   ouvre directement la section concernée dans #editor (voir openIconRailItem
   en JS). Masquée sur mobile : ce format reste inchangé là-bas (voir media
   query plus bas dans ce fichier). */
#editorIconRail {
  position: fixed;
  /* Étirée quasiment sur toute la hauteur de l'écran (au lieu d'être centrée
     verticalement), avec un espacement FIXE et volontairement resserré entre
     les boutons (plutôt que "space-between", qui étirait cet espacement pour
     remplir tout le vide disponible sur un grand écran). Le groupe reste
     centré verticalement dans cette zone haut/bas : sur un écran assez
     grand les boutons (voir leur taille plus bas) suffisent à occuper
     presque toute la hauteur malgré le petit espacement. */
  top: 24px;
  bottom: 24px;
  right: clamp(12px, 1.6vw, 26px);
  transform: translateX(16px);
  z-index: 99997;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#editorIconRail.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

@media (max-width: 768px) {
  #editorIconRail {
    display: none !important;
  }
}

/* Les icônes de la rangée sont collées au bord droit de l'écran : l'infobulle
   par défaut de .icon-btn[data-tooltip] (centrée au-dessus du bouton) serait
   à moitié hors écran. On la fait plutôt apparaître à gauche du bouton. */
#editorIconRail .icon-btn[data-tooltip]::before {
  bottom: auto;
  left: auto;
  top: 50%;
  right: calc(100% + 12px);
  transform: translateY(-50%) translateX(6px);
}

#editorIconRail .icon-btn[data-tooltip]:hover::before {
  transform: translateY(-50%) translateX(0);
}

/* Les icônes flottent au-dessus de l'arrière-plan du profil (souvent une
   image/GIF), où le style .icon-btn de base (fond blanc à 8% d'opacité) se
   fond trop facilement dans la masse. On leur donne un fond plus sombre et
   plus opaque, un contour net et une ombre portée pour qu'elles ressortent
   quel que soit ce qu'il y a derrière.

   Leur taille est fluide (clamp) plutôt que fixe : elles grossissent/
   rétrécissent avec la largeur ET la hauteur de la fenêtre (un peu plus
   discrètes sur un petit écran PC, un peu plus grandes sur un grand
   moniteur), entre une taille mini et une taille maxi pour ne jamais
   devenir minuscules ni énormes — la hauteur compte aussi (via "min(...,
   vh)") puisque les 10 boutons doivent tenir sur toute la hauteur
   disponible (voir #editorIconRail, étiré en haut/bas). */
#editorIconRail .icon-btn {
  width: clamp(48px, min(4.2vw, 7.2vh), 76px);
  height: clamp(48px, min(4.2vw, 7.2vh), 76px);

  background: rgba(10,10,22,0.82);
  border: 1.5px solid rgba(255,255,255,0.22);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
}

#editorIconRail .icon-btn i {
  width: clamp(22px, min(2.1vw, 3.6vh), 34px);
  height: clamp(22px, min(2.1vw, 3.6vh), 34px);
}

#editorIconRail .icon-btn:hover {
  background: rgba(124,111,255,0.85);
  border-color: rgba(124,111,255,0.9);
  box-shadow: 0 8px 24px rgba(99,102,241,0.5);
}

#editor h2 { margin-top: 0; }

input {
  width: 100%;
  padding: 10px 14px;
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid rgba(120,120,255,0.15);
  background: rgba(255,255,255,0.04);
  color: white;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  transition: border-color 0.2s, background 0.2s;
}

input:focus {
  border-color: rgba(124,111,255,0.5);
  background: rgba(124,111,255,0.06);
}

.linkEdit {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(120,120,255,0.1);
  border-radius: 14px;
  margin-bottom: 10px;

  overflow: visible;

  transition: 0.2s ease;
}

.linkEdit:hover {
  border-color: rgba(124,111,255,0.25);
  transform: translateY(-1px);
}

.linkEdit.active {
  z-index: 20000;
  overflow: visible;
}

/* ═══════════ Liste combinée "Liens & widgets" ═══════════
   Liens et widgets partagent désormais une seule liste réordonnable (voir
   renderLinksAndWidgetsEditor en JS), pour pouvoir glisser un widget entre
   deux liens. Un simple liseré de couleur + une puce texte suffisent à
   distinguer les deux types de ligne sans dupliquer tout le style. */
.editorListHint {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(200,200,240,0.55);
  margin: 0 0 12px 0;
}

.mergedRow-link {
  border-left: 3px solid rgba(124,111,255,0.55);
}

.mergedRow-widget {
  border-left: 3px solid rgba(52,211,153,0.55);
}

.itemKindTag {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 4px;
}

.itemKindTag-link {
  color: #c4b5fd;
  background: rgba(124,111,255,0.18);
  border: 1px solid rgba(124,111,255,0.3);
}

.itemKindTag-widget {
  color: #6ee7b7;
  background: rgba(52,211,153,0.15);
  border: 1px solid rgba(52,211,153,0.3);
}

.linkPreview {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 16px;

  cursor: grab;
}

.linkPreviewLeft {
  display: flex;
  align-items: center;
  gap: 12px;
}

.linkPreviewLeft img,
.linkPreviewLeft i {
  width: 20px;
  height: 20px;
}

.discord-guild-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.discord-guild-row:hover {
  background: rgba(88,101,242,0.1);
  border-color: rgba(88,101,242,0.3);
}

.discord-guild-row.disabled {
  opacity: 0.6;
}

.linkTitle {
  font-weight: 600;
  font-size: 14px;
}

.linkType {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 2px;
}

.linkActions {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-right: 16px;
}

.socialDropdown {
  position: relative;
  margin-top: 10px;
  z-index: 99999;
}

.socialSelected {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 14px;
  border-radius: 12px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(120,120,255,0.15);

  cursor: pointer;
  transition: 0.2s ease;
}

.socialSelected:hover {
  border-color: rgba(124,111,255,0.4);
  background: rgba(124,111,255,0.08);
  transform: translateY(-1px);
}

.socialSelectedLeft {
  display: flex;
  align-items: center;
  gap: 12px;

  font-weight: 600;
}

.socialSelectedLeft span:first-child {
  font-size: 20px;
}

.socialArrow {
  opacity: 0.5;
  transition: 0.2s;
}

.socialMenu {

  position: absolute;
  z-index: 100000;

  left: 0;
  width: 100%;
  padding: 6px;

  backdrop-filter: blur(24px);
  border: 1px solid rgba(120,120,255,0.18);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.2s ease;

  top: calc(100% + 6px);
  background: rgba(10,10,22,0.98);
  border-radius: 12px;

  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow: hidden;
}

.socialSearch {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(120,120,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 13px;
  outline: none;
}

.socialSearch:focus {
  border-color: rgba(124,111,255,0.5);
}

.socialItemsList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.socialItemsList::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}



.socialMenu.active {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);
}

.socialItem {
  padding: 12px 14px;

  border-radius: 14px;

  cursor: pointer;

  transition: 0.2s ease;
}

.socialItem:hover {
  background: rgba(124,111,255,0.12);
  border-radius: 8px;
  transform: translateX(3px);
}

.socialItemLeft {
  display: flex;
  align-items: center;
  gap: 12px;

  font-weight: 500;
}

.socialItemLeft span:first-child {
  font-size: 18px;
}

.linkEditContent select {
  width: 100%;
  margin-top: 10px;
  padding: 12px;

  border-radius: 12px;

  border: 1px solid rgba(255,255,255,0.08);

  background: rgba(255,255,255,0.04);

  color: white;

  outline: none;
}

.linkMiniBtn {
  border: none;

  background: rgba(255,255,255,0.06);

  color: white;

  width: 34px;
  height: 34px;

  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition: 0.2s ease;
}

.linkMiniBtn:hover {
  background: rgba(99,102,241,0.18);

  transform: scale(1.05);
}

.linkMiniBtn.delete:hover {
  background: rgba(255,0,0,0.18);
}

.linkEditContent {
  max-height: 0;
  overflow: visible;
  opacity: 0;

  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    padding 0.25s ease;

  padding: 0 16px;
}

.linkIconOnlyRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-top: 10px;
  padding: 10px 12px;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);

  font-size: 13px;
  color: rgba(255,255,255,0.75);
}

.linkEditContent .toggle-switch input {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

.linkEdit.active .linkEditContent {
  max-height: 500px;

  opacity: 1;

  padding: 0 16px 16px 16px;
}

.linkEditContent input {
  width: 100%;

  margin-top: 10px;

  padding: 12px;

  border-radius: 12px;

  border: 1px solid rgba(255,255,255,0.08);

  background: rgba(255,255,255,0.04);

  color: white;
}

.dragHandle {
  opacity: 0.35;
  margin-right: 4px;
}

.customIconRow {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-top: 10px;
  padding: 10px 12px;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

.customIconPreviewWrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;

  border-radius: 8px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}

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

.customIconBtn {
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 13px;
  padding: 10px 12px;

  margin: 0;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(124,111,255,0.25);
  color: white;
}

.customIconBtn:hover {
  background: rgba(124,111,255,0.15);
  border-color: rgba(124,111,255,0.4);
  transform: translateY(-1px);
}

.customIconBtn i,
.customIconBtn svg {
  width: 16px;
  height: 16px;
}


@media (max-width: 768px) {

  body {
    padding: 1.2rem;
  }

  #userBox {
    display: none !important;
  }

  #editor,
  #leftEditor {
    position: fixed;
    z-index: 99998 !important;
    top: 0;
    left: 0;
    right: 0;

    width: 100% !important;
    height: 100vh;

    transform: translateY(100%);
    transition: transform 0.35s ease;

    border-radius: 0;
    box-shadow: none;

    overflow-y: auto;
  }

  #editor.active,
  #leftEditor.active {
    transform: translateY(0);
  }

  #resizeHandle,
  #leftResizeHandle {
    display: none;
  }

    #editorContent,
  #leftContent,
  #editorContentMobile,
  #frameEditorPanel {
    padding: 26px 20px 120px;
  }

  #nameBioFields {
    display: block;
  }

  #infoFieldsSection {
    display: block;
  }

  #leftEditor {
    top: auto;
    bottom: 0;
    
    background: rgba(10,10,22,0.98);
    border-top: 1px solid rgba(120,120,255,0.12);
  }

    .header {
    padding: 2rem 1.4rem;
    margin-inline: 6px;
  }

  .mobile-close {
    position: sticky;
    top: 0;
    width: 100%;

    justify-content: flex-end;

    padding: 14px 20px;
    display: flex;

    font-size: 18px;
    cursor: pointer;

    background: rgba(10,10,22,0.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(120,120,255,0.1);

    z-index: 10;
  }

#editorContent,
#leftContent,
#frameEditorPanel {
  padding: 24px 28px;
}

  #editBtn {
    bottom: 15px;
    right: 15px;

    height: 60px;
    padding: 0 18px;
    z-index: 100002;
    font-size: 1rem;
  }

  .profile {
    max-width: 100%;
  }

  .header {
    padding: 2rem 1.2rem;
    border-radius: 24px;
  }

  #avatar {
    width: 90px;
    height: 90px;
  }

  #name {
    font-size: 1.5rem;
  }

  #bio {
    font-size: 0.9rem;
  }

  .widget-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   NOUVEAU SYSTÈME D'ÉDITION MOBILE — 4 onglets :
   - Réglages : réglages de mise en forme de la page (police, arrière-plan,
                template, cadre, musique, curseur, effets, loading screen,
                statut Discord) — voir .mobile-section-outils
   - Widgets  : contenu du menu gauche PC (widgets & liens), déplacé au
                runtime dans .mobile-section-contenu (voir syncMobileEditorLayout)
   - Modifier : profil seul, modifiable directement au toucher (comme sur PC)
   - Fermer   : ferme tout
   La hotbar de style (#styleToolbar) reste indépendante des onglets : elle
   se docke en bas de l'écran dès qu'on édite le nom/la bio.
   Le tout piloté par la barre d'onglets #mobileEditTabs.
   ============================================================ */

.mobile-sheet-handle { display: none; }
#mobileEditTabs { display: none; }

@media (max-width: 768px) {

  /* --- La feuille : #editor et #leftEditor deviennent des pages
         d'un même bottom sheet, une seule visible à la fois --- */
  #editor,
  #leftEditor {
    top: auto !important;
    bottom: 0 !important;
    height: min(68vh, 620px) !important;
    max-height: 82vh;
    border-radius: 22px 22px 0 0 !important;
    border-top: 1px solid rgba(120,120,255,0.18);
    box-sizing: border-box;
    padding-bottom: 84px; /* place pour la barre d'onglets */
    transition: transform 0.32s cubic-bezier(.32,.72,0,1), height 0.25s ease;
  }

  body.mobile-editor-open.mobile-sheet-expanded #editor,
  body.mobile-editor-open.mobile-sheet-expanded #leftEditor {
    height: 88vh !important;
  }

  /* "Réglages" affiche le panneau #editor en entier (TOI + police + arrière-plan +
     template + effets... + le contenu du menu gauche PC qui y a été rattaché,
     voir .mobile-section-contenu). #leftEditor reste toujours vide/masqué :
     son contenu a été déplacé dans #editor sur mobile (voir syncMobileEditorLayout). */
  #leftEditor { display: none !important; }

  /* Comme sur PC : le pseudo, la bio, les tags, l'avatar et les infos
     (téléphone/email/lieu/âge) ne sont plus dans le menu Réglages,
     puisqu'ils s'éditent désormais directement sur le profil via l'onglet
     "Modifier" (plus besoin de doublon avec des champs de formulaire). */
  #nameBioFields,
  #infoFieldsSection,
  .editor-toi-heading,
  .avatar-upload-editor-block {
    display: none !important;
  }

  /* "Outils" masque le panneau #editor et affiche #mobileOutilsPanel à la place */
  body[data-mobile-edit-tab="outils"] #editor.active { display: none !important; }

  /* "Modifier" masque aussi #editor : seul le profil reste visible et modifiable
     directement au toucher (nom, bio, avatar, bannière, tags), comme sur PC */
  body[data-mobile-edit-tab="modifier"] #editor.active { display: none !important; }

  /* "Widgets" affiche uniquement le contenu du menu gauche PC (widgets & liens,
     voir .mobile-section-contenu) : les réglages de mise en forme de la page
     (police/arrière-plan/template...) restent masqués sur cet onglet. */
  body[data-mobile-edit-tab="widgets"] .mobile-section-profil,
  body[data-mobile-edit-tab="widgets"] .mobile-section-outils {
    display: none !important;
  }

  /* "Réglages" n'affiche plus les widgets/liens : ils ont leur propre onglet
     "Widgets" désormais. */
  body[data-mobile-edit-tab="reglages"] .mobile-section-contenu {
    display: none !important;
  }

  /* Poignée de glisser (remplace l'ancien bouton ✖ en croix) */
  .mobile-close { display: none !important; }

  .mobile-sheet-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 6px;
    cursor: grab;
    touch-action: none;
    position: sticky;
    top: 0;
    z-index: 5;
    background: inherit;
  }

  .mobile-sheet-handle::after {
    content: "";
    width: 42px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255,255,255,0.28);
  }

  /* --- Barre d'onglets mobile : Réglages / Outils / Fermer --- */
  #mobileEditTabs {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100003;
    display: none;
    gap: 6px;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
    background: rgba(8,8,16,0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(120,120,255,0.16);
    box-shadow: 0 -12px 40px rgba(0,0,0,0.5);
  }

  body.mobile-editor-open #mobileEditTabs {
    display: flex;
  }

  .mobile-edit-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    color: rgba(230,230,245,0.55);
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 8px 2px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mobile-edit-tab i {
    width: 19px;
    height: 19px;
  }

  .mobile-edit-tab.active {
    color: #c4b5fd;
    background: rgba(124,111,255,0.18);
  }

  .mobile-edit-tab[data-tab="close"] {
    color: rgba(252,165,165,0.85);
  }

  /* --- Panneau "Outils" : accueille la barre d'outils PC (#bottomBar :
         Premium, aperçu mobile, télécharger, stats, succès, paramètres) --- */
  #mobileOutilsPanel {
    display: none;
    position: fixed;
    left: 0; right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 100002;
    padding: 16px 14px;
    background: rgba(8,8,16,0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(120,120,255,0.16);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 36px rgba(0,0,0,0.5);
  }

  body.mobile-editor-open[data-mobile-edit-tab="outils"] #mobileOutilsPanel {
    display: block;
  }

  /* #bottomBar est repositionné en flux normal (au lieu de flottant PC) une fois
     déplacé dans le panneau Outils mobile */
  #mobileOutilsMount #bottomBar {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 0;
  }

  /* Le bouton "Fermer" fait doublon avec l'onglet Fermer : on le masque ici */
  #mobileOutilsMount #closeBottomBtn {
    display: none;
  }

  /* "Aperçu mobile" n'a aucun sens quand on est déjà sur téléphone */
  #mobileOutilsMount #phonePreviewBtn {
    display: none;
  }

  /* Tuto d'accueil interactif temporairement désactivé sur mobile (voir la
     même limite côté JS dans initOnboardingTour()/startOnboardingTour() de
     main.html) : le bouton "Revoir le tuto" ne ferait plus rien ici, on le
     masque plutôt que de laisser un bouton mort dans la barre. */
  #replayTutorialBtn {
    display: none !important;
  }

  /* --- Hotbar de style texte : dockée en bas de l'écran, au-dessus de la
         barre d'onglets, quand on édite le nom/la bio (mode "Modifier") --- */
  body.mobile-editor-open #styleToolbar {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* --- Affordances tactiles : les zones éditables restent visibles
         (le survol :hover n'existe pas au doigt) tant que l'éditeur est ouvert --- */
  body.mobile-editor-open .avatar-edit-overlay,
  body.mobile-editor-open .banner-hover-overlay {
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.mobile-editor-open #name,
  body.mobile-editor-open #bioTextContent,
  body.mobile-editor-open .tag-chip {
    outline: 1.5px dashed rgba(167,139,250,0.55);
    outline-offset: 4px;
    border-radius: 8px;
  }
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;

  border-radius: 12px;
  border: none;

  font-weight: 600;
  font-size: 0.9rem;

  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
}

.link-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(120,120,255,0.12);
}

.link-btn:hover {
  transform: translateY(-2px);
  background: rgba(124,111,255,0.1);
  border-color: rgba(124,111,255,0.25);
}

.widget-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(120,120,255,0.12);
}

.widget-btn:hover {
  transform: translateY(-2px);
  background: rgba(124,111,255,0.1);
  border-color: rgba(124,111,255,0.25);
}

.btn i {
  width: 18px;
  height: 18px;
}

.add { background: rgba(124,111,255,0.5); border: 1px solid rgba(124,111,255,0.3); }
.add:hover { background: rgba(124,111,255,0.7) !important; }
.save { background: #7c6fff; }
.close { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); }
.remove { background: rgba(255,0,0,0.12); border: 1px solid rgba(255,0,0,0.15); color: #ff8080; margin-top: 5px; }

@keyframes slideIn {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}

.user-box {
  position: fixed;
  bottom: 25px;
  left: 25px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 14px;
  border-radius: 16px;

  background: rgba(10,10,22,0.9);
  backdrop-filter: blur(24px);

  border: 1px solid rgba(120,120,255,0.15);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);

  z-index: 9999;
  animation: slideUp 0.4s ease;
}

.user-box img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.user-box-info {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.user-box-info strong {
  font-size: 14px;
  color: white;
}

.user-box button {
  margin-left: 8px;
  padding: 7px 12px;

  border-radius: 999px;
  border: none;

  background: rgba(124,111,255,0.7);
  color: white;

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;
  transition: 0.2s;
}

.user-box button:hover {
  background: rgba(124,111,255,1);
  transform: scale(1.04);
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

textarea {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  border-radius: 10px;

  border: 1px solid rgba(120,120,255,0.15);
  background: rgba(255,255,255,0.04);
  color: white;

  outline: none;
  resize: none;

  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;

  transition: border-color 0.2s, background 0.2s;
}

textarea:focus {
  border-color: rgba(124,111,255,0.5);
  background: rgba(124,111,255,0.06);
}

.tags-container{
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tags-search {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  outline: none;
  margin: 15px 0;
  background: rgba(255,255,255,0.06);
  color: white;
}


.tags-section{
  margin-bottom: 20px;
}

.tags-category-title {
  font-size: 1.1rem;
  font-weight: 700;

  margin-bottom: 15px;

  display: flex;
  align-items: center;
  gap: 10px;

  opacity: 0.9;
}

.tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tag-chip {
  padding: 12px 18px;

  border-radius: 999px;

  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(255,255,255,0.08);

  cursor: pointer;

  transition: all 0.25s ease;

  font-size: 14px;
  font-weight: 600;

  backdrop-filter: blur(12px);

  user-select: none;
}

.tag-chip:hover {
  transform: translateY(-3px) scale(1.04);

  background: rgba(99,102,241,0.18);

  border-color: rgba(99,102,241,0.4);
}

.tag-chip.active {

  background:
    linear-gradient(
      135deg,
      rgba(99,102,241,0.8),
      rgba(139,92,246,0.8)
    );

  border-color: transparent;

  box-shadow:
    0 10px 25px rgba(99,102,241,0.35);

  transform: scale(1.03);
}

.tag-chip.active:hover {
  transform: scale(1.08);
}

.tag-chip.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.tags-counter {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  text-align: right;
  margin: -6px 0 10px;
}

.tags-counter.ok {
  color: #4ade80;
}

/* ═══════════ Bulle de statut Discord (avatar qui "parle") ═══════════
   Positionnée sur la droite de l'avatar, comme une bulle de dialogue de
   BD qui part de la photo de profil. La couleur (--discord-bubble-c1 /
   --discord-bubble-c2, dégradé) est injectée en inline-style par
   renderDiscordStatusBubble() selon le réglage choisi par le propriétaire
   du profil (discordStatusBubbleColor), avec un dégradé Discord par défaut. */
.discord-status-bubble {
  --discord-bubble-c1: rgba(88,101,242,0.95);
  --discord-bubble-c2: rgba(114,137,218,0.85);
  --discord-bubble-tail: rgba(101,116,235,0.9);

  position: absolute;
  top: 4px;
  left: calc(100% + 14px);

  display: flex;
  align-items: center;
  gap: 7px;

  /* Plafonnée à 170px (au lieu de 210px) : sur le template Classic, l'avatar
     est centré dans un cadre de 520px max — au-delà de ~170px la bulle
     dépassait le cadre (et se retrouvait à moitié invisible sur le fond de
     page, ou carrément coupée par le bord de la fenêtre sur un écran pas
     très large) et venait chevaucher les badges vues/likes/signalement en
     haut à droite. */
  max-width: 170px;
  width: max-content;

  padding: 11px 16px;
  border-radius: 20px;
  border-bottom-left-radius: 6px;

  background: linear-gradient(140deg, var(--discord-bubble-c1), var(--discord-bubble-c2));
  color: #fff;

  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  word-break: break-word;

  box-shadow: 0 14px 34px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15), 0 0 0 1px rgba(255,255,255,0.08);
  z-index: 6;
  pointer-events: none;

  animation: discordBubblePop 0.4s cubic-bezier(0.22,1,0.36,1);
}

.discord-status-bubble::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 100%;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: var(--discord-bubble-tail);
  border-left: 0;
  margin-right: -1px;
}

.discord-status-bubble-emoji {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.discord-status-bubble-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Emoji custom Discord (image du CDN) */
.discord-status-bubble-emoji.is-custom {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  display: block;
}
.discord-status-bubble.emoji-only .discord-status-bubble-emoji.is-custom {
  width: 1.6rem;
  height: 1.6rem;
}

.discord-status-bubble.emoji-only {
  padding: 9px 14px;
}
.discord-status-bubble.emoji-only .discord-status-bubble-emoji {
  font-size: 1.5rem;
}

@keyframes discordBubblePop {
  from { opacity: 0; transform: translateY(4px) scale(0.85); transform-origin: left center; }
  to   { opacity: 1; transform: translateY(0) scale(1); transform-origin: left center; }
}

@media (max-width: 600px) {
  .discord-status-bubble {
    max-width: 130px;
    font-size: 0.76rem;
    padding: 9px 13px;
    left: calc(100% + 10px);
  }
}

#tagsCategories{
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}

#tagsCategories::-webkit-scrollbar{
  width: 6px;
}

#tagsCategories::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
}

.draggable-link,
.draggable-widget {
  position: relative;
  cursor: grab;
  transition: 0.2s;
}

.draggable-link:active,
.draggable-widget:active {
  cursor: grabbing;
}

.draggable-link.dragging,
.draggable-widget.dragging {
  opacity: 0.4;
  transform: scale(0.98);
}

.draggable-link.drag-over,
.draggable-widget.drag-over {
  border: 2px dashed #6366f1;
  background: rgba(99,102,241,0.08);
}

.dragHandle {
  position: absolute;
  top: 10px;
  right: 10px;

  font-size: 18px;
  opacity: 0.5;

  user-select: none;
  pointer-events: none;
}

.btn.remove {
  margin-top: 4px;

  background: rgba(255,0,0,0.12);

  border: 1px solid rgba(255,0,0,0.18);

  color: #ff8080;
}

.btn.remove:hover {
  background: rgba(255,0,0,0.2);

  transform: translateY(-2px);
}

.wc-container {
  max-width: 480px;
  width: 90%;
  height: auto;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.wc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(120,120,255,0.1);
}

.wc-service-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wc-service-badge img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.wc-service-badge span {
  font-size: 1rem;
  font-weight: 700;
  color: #f0f0ff;
  letter-spacing: -0.01em;
}

.wc-tabs {
  display: flex;
  gap: 6px;
  padding: 14px 22px 0;
}

.wc-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 0;
  border-radius: 12px;
  border: 1px solid rgba(120,120,255,0.12);
  background: rgba(255,255,255,0.03);
  color: rgba(200,200,240,0.55);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.wc-tab:hover {
  background: rgba(124,111,255,0.1);
  color: rgba(200,200,240,0.85);
  border-color: rgba(124,111,255,0.25);
}

.wc-tab.active {
  background: rgba(124,111,255,0.18);
  border-color: rgba(124,111,255,0.45);
  color: #f0f0ff;
}

.wc-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 22px 22px;
}

.wc-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(120,120,255,0.15);
  border-radius: 12px;
  color: #f0f0ff;
  font-size: 0.9rem;
  outline: none;
  box-sizing: border-box;
  transition: 0.2s;
}

.wc-input:focus {
  border-color: rgba(124,111,255,0.5);
  background: rgba(124,111,255,0.07);
}

.wc-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wc-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(120,120,255,0.15);
  border-radius: 12px;
  transition: 0.2s;
}

.wc-search-box:focus-within {
  border-color: rgba(124,111,255,0.5);
  background: rgba(124,111,255,0.07);
}

.wc-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #f0f0ff;
  font-size: 0.9rem;
}

.wc-search-input::placeholder {
  color: rgba(200,200,240,0.35);
}

.wc-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}

.wc-confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border-radius: 13px;
  border: none;
  background: linear-gradient(135deg, rgba(124,111,255,0.85), rgba(99,102,241,0.9));
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 4px 20px rgba(124,111,255,0.3);
}

.wc-confirm-btn:hover {
  background: linear-gradient(135deg, rgba(124,111,255,1), rgba(99,102,241,1));
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(124,111,255,0.45);
}


.spotify-result {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px;
  margin-top: 10px;

  border-radius: 14px;

  background: rgba(255,255,255,0.04);

  cursor: pointer;

  transition: 0.2s;
}

.spotify-result:hover {

  background: rgba(99,102,241,0.2);

  transform: translateY(-2px);
}

.spotify-result img {

  width: 55px;
  height: 55px;

  border-radius: 10px;
  object-fit: cover;
}

.spotify-result-info {

  display: flex;
  flex-direction: column;
}

.spotify-result-info span {

  opacity: 0.65;
  font-size: 13px;
}

.template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 30px;
}

.template-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-radius: 14px;
  border: 2px solid rgba(120,120,255,0.1);
  padding: 10px 8px;
  background: rgba(255,255,255,0.02);
  transition: 0.2s;
}

.template-card:hover {
  border-color: rgba(124,111,255,0.35);
  background: rgba(124,111,255,0.06);
}

.template-card.active {
  border-color: rgba(124,111,255,0.7);
  background: rgba(124,111,255,0.12);
  box-shadow: 0 0 0 1px rgba(124,111,255,0.25);
}

.template-card span {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(200,200,240,0.7);
}

.template-card.active span {
  color: #a78bfa;
}

.effect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.effect-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border-radius: 14px;
  border: 2px solid rgba(120,120,255,0.1);
  padding: 14px 8px;
  background: rgba(255,255,255,0.02);
  transition: 0.2s;
  text-align: center;
}

.effect-card:hover {
  border-color: rgba(124,111,255,0.35);
  background: rgba(124,111,255,0.06);
  transform: translateY(-2px);
}

.effect-card.active {
  border-color: rgba(124,111,255,0.7);
  background: rgba(124,111,255,0.12);
  box-shadow: 0 0 0 1px rgba(124,111,255,0.25);
}

.effect-card .effect-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(167,139,250,0.12);
}

.effect-card .effect-icon-wrap i,
.effect-card .effect-icon-wrap svg {
  width: 18px;
  height: 18px;
  stroke: #a78bfa;
}

.effect-card span {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(200,200,240,0.7);
}

.effect-card.active span {
  color: #a78bfa;
}

#profileEffectCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Quand activé, l'effet de profil (pluie, neige, etc.) passe derrière le
   cadre de profil au lieu de s'afficher par-dessus. */
#profileEffectCanvas.fx-behind-frame {
  z-index: -1;
}

.tpl-preview {
  width: 100%;
  height: 80px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  overflow: hidden;
  position: relative;
}

.tpl-avatar-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(124,111,255,0.55);
  flex-shrink: 0;
}

.tpl-line {
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
}
.tpl-line-lg { width: 55%; height: 5px; }
.tpl-line-sm { width: 38%; height: 3px; }
.tpl-line-xs { width: 28%; height: 3px; }

.tpl-btn-row {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}
.tpl-btn {
  width: 40px;
  height: 6px;
  border-radius: 999px;
  background: rgba(124,111,255,0.5);
}
.tpl-btn-outline {
  background: transparent;
  border: 1px solid rgba(124,111,255,0.5);
}

.tpl-landscape {
  flex-direction: row !important;
  gap: 6px;
  align-items: center;
  justify-content: flex-start !important;
  padding: 8px !important;
}
.tpl-avatar-left {
  flex-shrink: 0;
}
.tpl-right-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.tpl-right-block .tpl-line-lg { width: 80%; }
.tpl-right-block .tpl-btn { width: 50px; }

.tpl-banner-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22px;
  background: linear-gradient(135deg, rgba(99,102,241,0.4), rgba(139,92,246,0.3));
  border-radius: 6px 6px 0 0;
}
.tpl-avatar-banner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(124,111,255,0.7);
  border: 2px solid rgba(10,10,22,1);
  z-index: 1;
  margin-top: 6px;
  flex-shrink: 0;
}

.tpl-minimal {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 8px !important;
  gap: 5px !important;
}
.tpl-minimal-top {
  display: flex;
  align-items: center;
  gap: 5px;
}
.tpl-avatar-mini {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(124,111,255,0.55);
  flex-shrink: 0;
}
.tpl-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 1px 0;
}
.tpl-minimal .tpl-btn-row {
  gap: 4px;
}

/* Overlay "changer la photo de profil" au survol de l'avatar (mode éditeur) */
.avatar-edit-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  background: rgba(10,10,20,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-size: 0.62rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  z-index: 3;
  border-radius: 50%;
}
.avatar-edit-overlay i,
.avatar-edit-overlay svg {
  width: 20px;
  height: 20px;
}
.avatar-editable {
  cursor: pointer;
}
.avatar-editable:hover .avatar-edit-overlay {
  opacity: 1;
}

.template-classic {
  text-align: center;
}
.template-classic .header {
  border-radius: 30px;
  padding: 2.5rem 2rem;
}
.template-classic #avatarContainer img {
  border-radius: 50%;
  width: 110px;
  height: 110px;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 3px solid rgba(255,255,255,0.12);
}
.template-classic #name {
  text-align: center;
}
.template-classic #bio {
  text-align: center;
}

.template-landscape {
  text-align: left;
  max-width: 720px !important;
}
.template-landscape .header {
  border-radius: 28px;
  padding: 2rem 2.2rem;
  display: grid;
  /* minmax(0,1fr) et pas 1fr : sinon la colonne prend la largeur
     "min-content" de son contenu (texte long du widget statut, embed
     Spotify…) et déborde à droite de la carte. */
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto;
  column-gap: 1.8rem;
  align-items: start;
}

.template-landscape .views-badge {
  grid-column: 2;
  grid-row: 1;
  position: absolute;
}

.template-landscape #avatarContainer {
  grid-column: 1;
  grid-row: 1 / 6;
  align-self: stretch;
  position: relative;
  width: 110px;
  min-width: 110px;
}
.template-landscape #avatarContainer img {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.12);
  display: block;
}
.template-landscape #avatarMediaWrap.avatar-draggable {
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  border-radius: 20px;
  transition: box-shadow 0.15s ease;
}
.template-landscape #avatarMediaWrap.avatar-draggable:hover {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
.template-landscape #avatarMediaWrap.avatar-dragging {
  box-shadow: 0 0 0 3px rgba(120,170,255,0.55);
  transition: none;
}

.template-landscape #name {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.6rem;
  margin: 0 0 4px 0;
  padding-top: 2px;
  justify-content: flex-start;
}
.template-landscape #bio {
  grid-column: 2;
  grid-row: 2;
  margin: 0 0 8px 0;
}
.template-landscape #extraInfos {
  grid-column: 2;
  grid-row: 3;
  margin-bottom: 8px;
}
.template-landscape #links {
  grid-column: 2;
  grid-row: 4;
  margin-top: 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.template-landscape #links .link {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
}
.template-landscape #links .link.link-icon-only {
  padding: 0;
  border-radius: 0;
}
/* #links passe en ligne avec retour à la ligne (chips) sur ce template :
   un widget (musique, galerie…) doit forcer sa propre ligne plutôt que
   d'essayer de se caler comme un chip parmi les liens. */
.template-landscape #links > .profile-flow-widget {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.template-landscape .header > * { min-width: 0; }
.template-landscape #links,
.template-landscape #musicPlayer { max-width: 100%; box-sizing: border-box; }
.template-landscape #links iframe,
.template-landscape #musicPlayer iframe { max-width: 100%; }
.template-landscape #musicPlayer {
  grid-column: 2;
  grid-row: 5;
}
.template-landscape .footer {
  grid-column: 2;
  grid-row: 6;
  text-align: left;
}

.template-banner {
  text-align: center;
  max-width: 560px !important;
}
.template-banner .header {
  border-radius: 28px;
  padding: 0 0 2rem 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banner-zone {
  display: none;
}
.template-banner .banner-zone {
  display: block;
  position: relative;
  width: 100%;
  height: 120px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.55) 0%, rgba(139,92,246,0.4) 50%, rgba(236,72,153,0.35) 100%);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.banner-hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 18px;
  gap: 6px;
  color: #fff;
  background: rgba(10,10,20,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-size: 0.78rem;
  font-weight: 600;
}
.banner-hover-overlay i,
.banner-hover-overlay svg {
  width: 22px;
  height: 22px;
}
.banner-zone.banner-editable {
  cursor: pointer;
}
.banner-zone.banner-editable:hover {
  filter: brightness(0.75);
}
.banner-zone.banner-editable:hover .banner-hover-overlay {
  opacity: 1;
}
.template-banner #avatarContainer {
  margin-top: -55px;
  z-index: 2;
  position: relative;
}
.template-banner #avatarContainer img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(10,10,22,0.9);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  display: block;
}
.template-banner #name,
.template-banner #bio,
.template-banner #extraInfos,
.template-banner #links,
.template-banner #musicPlayer,
.template-banner .footer {
  padding-left: 2rem;
  padding-right: 2rem;
  width: 100%;
  box-sizing: border-box;
}
.template-banner #name {
  margin-top: 12px;
  font-size: 1.7rem;
}
.template-banner .views-badge {
  top: 10px;
  right: 10px;
}
.template-banner #likes {
  top: 48px !important;
  right: 10px !important;
}

.template-minimal {
  text-align: left;
  max-width: 500px !important;
}
.template-minimal .header {
  border-radius: 20px;
  padding: 1.6rem 1.8rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.template-minimal #avatarContainer {
  display: inline-block;
  vertical-align: middle;
}
.template-minimal #avatarContainer img {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.1);
  display: block;
}

.template-minimal .header {
  position: relative;
}
.template-minimal #avatarContainer {
  float: left;
  margin-right: 14px;
  padding-bottom: 10px;
}
.template-minimal #name {
  font-size: 1.4rem;
  margin: 4px 0 2px 0;
  display: flex;
  justify-content: flex-start;
}

.template-minimal #extraInfos {
  font-size: 0.82rem;
  opacity: 0.65;
  margin: 4px 0 0 0;
}
.template-minimal #bio {
  font-size: 0.88rem;
  clear: both;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 0;
}
.template-minimal #links {
  margin-top: 12px;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.template-minimal #links .link {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.07);
}
.template-minimal #links .link.link-icon-only {
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
}
.template-minimal #links .link.link-icon-only:hover {
  background: none;
  box-shadow: none;
}
.template-minimal #links > .profile-flow-widget {
  flex: 1 1 100%;
  width: 100%;
}
.template-minimal .views-badge {
  top: 12px;
  right: 12px;
}
.template-minimal #likes {
  top: 50px !important;
  right: 12px !important;
}
.template-minimal .footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.settings-modal-container {
  max-width: 460px;
  height: auto;
  max-height: 88vh;
  overflow-y: auto;
}

.settings-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-block-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.5;
}

.settings-block-label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.settings-danger-label {
  color: #ef4444;
  opacity: 1 !important;
}

.settings-url-preview {
  font-size: 13px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(120,120,255,0.12);
  border-radius: 10px;
  color: rgba(255,255,255,0.55);
  font-family: 'Space Grotesk', monospace;
  letter-spacing: 0.01em;
}

.settings-url-slug {
  color: #a5b4fc;
  font-weight: 600;
}

.settings-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.settings-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(120,120,255,0.15);
  border-radius: 11px;
  padding: 11px 14px;
  color: white;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
  margin: 0;
  width: auto;
}

.settings-input:focus {
  border-color: rgba(99,102,241,0.5);
  background: rgba(99,102,241,0.06);
}

.settings-input-danger {
  border-color: rgba(239,68,68,0.2);
}

.settings-input-danger:focus {
  border-color: rgba(239,68,68,0.5);
  background: rgba(239,68,68,0.05);
}

.settings-apply-btn {
  background: rgba(99,102,241,0.5);
  border: 1px solid rgba(99,102,241,0.35);
  color: white;
  font-weight: 600;
  font-size: 13px;
  padding: 11px 18px;
  border-radius: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  font-family: inherit;
}

.settings-apply-btn:hover:not(:disabled) {
  background: rgba(99,102,241,0.75);
  transform: translateY(-1px);
}

.settings-apply-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.settings-status {
  font-size: 12px;
  min-height: 16px;
  margin: 0;
  padding: 0 2px;
  opacity: 0.7;
  transition: color 0.2s;
}

.settings-status.error  { color: #f87171; opacity: 1; }
.settings-status.success { color: #4ade80; opacity: 1; }

.settings-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 4px 0;
}

.settings-hint {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.55;
  margin: 0;
}

.settings-danger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 11px;
  border: 1px solid rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.08);
  color: #f87171;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  font-family: inherit;
}

.settings-danger-btn svg {
  width: 16px;
  height: 16px;
}

.settings-danger-btn:hover {
  background: rgba(239,68,68,0.16);
  border-color: rgba(239,68,68,0.5);
  transform: translateY(-1px);
}

.settings-confirm-label {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin: 0 0 8px 0;
}

.settings-confirm-label strong {
  color: #f87171;
  letter-spacing: 0.05em;
}

.settings-danger-btn-confirm {
  background: rgba(239,68,68,0.55);
  border: 1px solid rgba(239,68,68,0.4);
  color: white;
  font-weight: 700;
  font-size: 13px;
  padding: 11px 16px;
  border-radius: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  font-family: inherit;
}

.settings-danger-btn-confirm:hover:not(:disabled) {
  background: rgba(239,68,68,0.8);
  transform: translateY(-1px);
}

.settings-danger-btn-confirm:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.settings-cancel-link {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 12px;
  cursor: pointer;
  padding: 6px 2px 0;
  font-family: inherit;
  transition: color 0.2s;
}

.settings-cancel-link:hover {
  color: rgba(255,255,255,0.65);
}

.cursor-menu-container {
  width: 92%;
  max-width: 760px;
  max-height: 88vh;
  background: rgba(8,8,20,.98);
  border: 1px solid rgba(124,111,255,.2);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(40px);
  box-shadow: 0 40px 120px rgba(0,0,0,.9);
}
.cursor-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 0;
  flex-shrink: 0;
}
.cursor-menu-title { display:flex; align-items:center; gap:14px; }
.cursor-menu-icon-wrap {
  width:44px; height:44px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(99,102,241,.4);
  flex-shrink:0;
}
.cursor-menu-icon-wrap svg { width:22px; height:22px; color:#fff; }
.cursor-menu-title h2 { margin:0; font-size:1.1rem; font-weight:700; color:#f0f0ff; border:none; padding:0; }
.cursor-menu-title p  { margin:2px 0 0; font-size:.78rem; color:rgba(200,200,240,.45); }

.cursor-tabs {
  display:flex; gap:6px;
  padding:18px 28px 14px;
  flex-shrink:0;
  border-bottom:1px solid rgba(124,111,255,.08);
}
.cursor-tab {
  display:flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:12px;
  border:1px solid transparent;
  background:rgba(255,255,255,.04);
  color:rgba(200,200,240,.55);
  font-size:.83rem; font-weight:600; cursor:pointer;
  transition:all .2s;
}
.cursor-tab svg { width:15px; height:15px; }
.cursor-tab:hover { background:rgba(124,111,255,.1); color:#f0f0ff; border-color:rgba(124,111,255,.2); }
.cursor-tab.active { background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(139,92,246,.25)); color:#a78bfa; border-color:rgba(124,111,255,.35); }

.cursor-menu-body { flex:1; overflow-y:auto; padding:20px 28px; scrollbar-width:thin; scrollbar-color:rgba(124,111,255,.3) transparent; }
.cursor-menu-body::-webkit-scrollbar { width:4px; }
.cursor-menu-body::-webkit-scrollbar-thumb { background:rgba(124,111,255,.3); border-radius:4px; }

.cursor-tab-panel { display:none; }
.cursor-tab-panel.active { display:block; }

.cursor-section-title { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(167,139,250,.7); margin-bottom:12px; }

.cursor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:10px; }

.cursor-card {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 10px 12px; border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  cursor:pointer; transition:all .2s; position:relative;
}
.cursor-card:hover { border-color:rgba(124,111,255,.3); background:rgba(124,111,255,.08); transform:translateY(-2px); }
.cursor-card.active {
  border-color:rgba(124,111,255,.6)!important;
  background:rgba(124,111,255,.18)!important;
  box-shadow:0 0 0 2px rgba(124,111,255,.25);
}
.cursor-card.active::after { content:'✓'; position:absolute; top:5px; right:7px; font-size:10px; color:#a78bfa; font-weight:700; }
.cursor-card-preview { width:40px; height:40px; display:flex; align-items:center; justify-content:center; }
.cursor-card-label { font-size:.72rem; font-weight:600; color:rgba(200,200,240,.65); text-align:center; line-height:1.2; }

.c-prev { width:20px; height:20px; border-radius:50%; }
.c-prev-pulse { background:#7c6fff; animation:cPulse 1s ease-in-out infinite; }
.c-prev-spin  { border:3px solid rgba(124,111,255,.3); border-top-color:#7c6fff; animation:cSpin .8s linear infinite; }
.c-prev-glow  { background:#06b6d4; box-shadow:0 0 8px #06b6d4; animation:cGlow 1.2s ease-in-out infinite alternate; }
.c-prev-rainbow { animation:cRainbow 1.5s linear infinite; }
.c-prev-neon  { width:16px; height:16px; border:2.5px solid #f0f; box-shadow:0 0 6px #f0f; animation:cNeon .8s ease-in-out infinite alternate; }
.c-prev-orbit { background:radial-gradient(circle,#fff 30%,transparent 70%); width:10px; height:10px; }

@keyframes cPulse   { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.6} }
@keyframes cSpin    { to{transform:rotate(360deg)} }
@keyframes cGlow    { from{box-shadow:0 0 6px #06b6d4} to{box-shadow:0 0 20px #06b6d4,0 0 40px rgba(6,182,212,.4)} }
@keyframes cRainbow { 0%{background:#ff4466} 25%{background:#ffee00} 50%{background:#00cc44} 75%{background:#0088ff} 100%{background:#ff4466} }
@keyframes cNeon    { from{box-shadow:0 0 4px #f0f;border-color:#f0f} to{box-shadow:0 0 16px #f0f,0 0 32px rgba(255,0,255,.4);border-color:#ff88ff} }

.c-anim { width:20px; height:20px; border-radius:50%; }
.c-anim-pulse   { background:rgba(124,111,255,.9); animation:cAnimPulse .9s ease-in-out infinite; }
.c-anim-spin    { width:22px; height:22px; border:3px solid rgba(124,111,255,.25); border-top-color:#7c6fff; animation:cAnimSpin .7s linear infinite; }
.c-anim-glow    { width:16px; height:16px; background:#06b6d4; box-shadow:0 0 14px #06b6d4; animation:cAnimGlow 1s ease-in-out infinite alternate; }
.c-anim-rainbow { animation:cAnimRainbow 1.2s linear infinite; }
.c-anim-neon    { width:18px; height:18px; background:transparent; border:2.5px solid #f0f; animation:cAnimNeon .8s ease-in-out infinite alternate; }
.c-anim-orbit   { width:8px; height:8px; background:#fff; box-shadow:0 0 8px rgba(255,255,255,.8); }
.c-anim-orbit::before { content:''; position:absolute; width:30px; height:30px; border:1.5px solid rgba(255,255,255,.3); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); }
.c-anim-orbit::after  { content:''; position:absolute; width:6px; height:6px; background:rgba(167,139,250,.9); border-radius:50%; top:50%; left:50%; animation:cOrbitDot 1.2s linear infinite; transform-origin:-12px 0; }

@keyframes cAnimPulse   { 0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 0 rgba(124,111,255,.5)} 50%{transform:translate(-50%,-50%) scale(1.5);box-shadow:0 0 0 12px rgba(124,111,255,0)} }
@keyframes cAnimSpin    { to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes cAnimGlow    { from{box-shadow:0 0 8px #06b6d4} to{box-shadow:0 0 24px #06b6d4,0 0 50px rgba(6,182,212,.5)} }
@keyframes cAnimRainbow { 0%{background:#ff4466;box-shadow:0 0 10px #ff4466} 25%{background:#ffee00;box-shadow:0 0 10px #ffee00} 50%{background:#00cc44;box-shadow:0 0 10px #00cc44} 75%{background:#0088ff;box-shadow:0 0 10px #0088ff} 100%{background:#ff4466;box-shadow:0 0 10px #ff4466} }
@keyframes cAnimNeon    { from{box-shadow:0 0 6px #f0f;border-color:#f0f} to{box-shadow:0 0 20px #f0f,0 0 50px rgba(255,0,255,.6);border-color:#ff88ff} }
@keyframes cOrbitDot    { from{transform:translate(-50%,-50%) rotate(0deg) translateX(15px)} to{transform:translate(-50%,-50%) rotate(360deg) translateX(15px)} }

.c-trail-p {
  position:fixed; pointer-events:none; z-index:999997;
  transform:translate(-50%,-50%);
  animation:cTrailFly .65s ease-out forwards;
  will-change:transform,opacity;
  font-family:serif;
}
@keyframes cTrailFly {
  0%   { transform:translate(-50%,-50%) translate(0,0); opacity:1; }
  100% { transform:translate(-50%,-50%) translate(var(--vx),calc(var(--vy) + 38px)); opacity:0; }
}

.c-trail-p.c-trail-cursor-fade,
.c-trail-p.c-trail-cursor-fall {
  width:20px; height:20px;
  transform:translate(0,0);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.c-trail-p.c-trail-cursor-fade {
  animation: cCursorFade .55s ease-out forwards;
}
@keyframes cCursorFade {
  0%   { opacity:0.95; transform:translate(0,0) scale(1); }
  100% { opacity:0;    transform:translate(0,0) scale(0.82); }
}
.c-trail-p.c-trail-cursor-fall {
  animation: cCursorFall 1.3s cubic-bezier(.2,.55,.4,1) forwards;
}
@keyframes cCursorFall {
  0%   { opacity:1;   transform:translate(0,0) rotate(0deg); }
  45%  { opacity:1;   transform:translate(8px,90px) rotate(25deg); }
  100% { opacity:0;   transform:translate(18px,200px) rotate(60deg); }
}

.cursor-custom-zone { display:flex; flex-direction:column; gap:16px; }
.cursor-upload-area {
  border:2px dashed rgba(124,111,255,.25); border-radius:18px; padding:36px 20px;
  display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer;
  transition:all .25s; background:rgba(124,111,255,.03);
}
.cursor-upload-area:hover,.cursor-upload-area.drag-over { border-color:rgba(124,111,255,.5); background:rgba(124,111,255,.08); }
.cursor-upload-icon svg { width:40px; height:40px; color:rgba(167,139,250,.6); }
.cursor-upload-title { font-size:.95rem; font-weight:600; color:rgba(200,200,240,.8); margin:0; }
.cursor-upload-sub   { font-size:.75rem; color:rgba(200,200,240,.4); margin:0; text-align:center; }
.cursor-upload-btn   { margin-top:4px; padding:9px 22px; background:rgba(124,111,255,.15); border:1px solid rgba(124,111,255,.3); border-radius:10px; color:#a78bfa; font-size:.83rem; font-weight:600; cursor:pointer; transition:all .2s; }
.cursor-upload-btn:hover { background:rgba(124,111,255,.3); }

.cursor-custom-preview { display:flex; align-items:center; gap:20px; padding:18px; background:rgba(255,255,255,.03); border:1px solid rgba(124,111,255,.15); border-radius:16px; }
.cursor-custom-preview-img-wrap { width:80px; height:80px; background:rgba(255,255,255,.04); border-radius:12px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.06); flex-shrink:0; }
.cursor-custom-preview-img-wrap img { max-width:64px; max-height:64px; object-fit:contain; }
.cursor-custom-info { flex:1; display:flex; flex-direction:column; gap:8px; }
.cursor-custom-info p { font-size:.8rem; font-weight:600; color:rgba(200,200,240,.7); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cursor-size-row { display:flex; align-items:center; gap:10px; font-size:.78rem; color:rgba(200,200,240,.5); }
.cursor-size-row input[type=range] { flex:1; accent-color:#7c6fff; height:4px; }
.cursor-size-row span { font-size:.78rem; color:#a78bfa; font-weight:600; min-width:32px; }

.cursor-apply-custom-btn { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 18px; background:linear-gradient(135deg,#6366f1,#8b5cf6); border:none; border-radius:10px; color:#fff; font-size:.85rem; font-weight:600; cursor:pointer; transition:all .2s; box-shadow:0 4px 16px rgba(99,102,241,.35); }
.cursor-apply-custom-btn:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(99,102,241,.5); }
.cursor-apply-custom-btn svg { width:16px; height:16px; }
.cursor-reset-btn { display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:10px; color:rgba(200,200,240,.55); font-size:.8rem; font-weight:600; cursor:pointer; transition:all .2s; width:100%; }
.cursor-reset-btn:hover { background:rgba(255,255,255,.08); color:#f0f0ff; }
.cursor-reset-btn svg { width:14px; height:14px; }

.cursor-menu-footer { display:flex; align-items:center; justify-content:space-between; padding:16px 28px; border-top:1px solid rgba(124,111,255,.1); background:rgba(124,111,255,.03); flex-shrink:0; }
.cursor-active-info { display:flex; align-items:center; gap:8px; font-size:.82rem; color:rgba(200,200,240,.6); font-weight:500; }
.cursor-active-dot  { width:8px; height:8px; border-radius:50%; background:#7c6fff; box-shadow:0 0 6px rgba(124,111,255,.7); animation:cDotPulse 2s ease-in-out infinite; }
@keyframes cDotPulse { 0%,100%{box-shadow:0 0 4px rgba(124,111,255,.7)} 50%{box-shadow:0 0 12px rgba(124,111,255,1)} }
.cursor-reset-footer-btn { display:flex; align-items:center; gap:7px; padding:8px 16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:10px; color:rgba(200,200,240,.55); font-size:.8rem; font-weight:600; cursor:pointer; transition:all .2s; }
.cursor-reset-footer-btn:hover { background:rgba(255,255,255,.08); color:#f0f0ff; }
.cursor-reset-footer-btn svg { width:14px; height:14px; }

@media (max-width:640px) {
  .cursor-menu-container { width:100%; max-width:100%; border-radius:24px 24px 0 0; margin-top:auto; }
  #cursorMenu { align-items:flex-end; padding:0; }
  .cursor-menu-header { padding:20px 20px 0; }
  .cursor-tabs { padding:14px 20px 12px; overflow-x:auto; flex-wrap:nowrap; }
  .cursor-tab { flex-shrink:0; padding:8px 14px; font-size:.78rem; }
  .cursor-menu-body { padding:16px 20px; }
  .cursor-menu-footer { padding:14px 20px; }
  .cursor-grid { grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:8px; }
  .cursor-card { padding:12px 8px 10px; }
  .cursor-card-label { font-size:.65rem; }
  .cursor-custom-preview { flex-direction:column; text-align:center; }
  .cursor-custom-info { width:100%; align-items:center; }
}

/* ===== STATS MODAL REFONTE ===== */
/* ===== STATS MODAL — MemoryLink design language ===== */
.stats-full-container {
  background: rgba(10,10,22,0.97);
  border: 1px solid rgba(120,120,255,0.15);
  border-radius: 24px;
  width: 96%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 24px 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: 'Inter', sans-serif;
  color: #f0f0ff;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,111,255,0.25) transparent;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(120,120,255,0.06);
}
.stats-full-container::-webkit-scrollbar { width: 4px; }
.stats-full-container::-webkit-scrollbar-thumb { background: rgba(124,111,255,0.3); border-radius: 4px; }

.stats-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px 14px 28px;
  position: sticky; top: 0;
  background: rgba(10,10,22,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(120,120,255,0.12);
  z-index: 10;
  margin-bottom: 16px;
}
.stats-header-left { display: flex; align-items: center; gap: 14px; }
.stats-header-icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: rgba(124,111,255,0.1);
  border: 1px solid rgba(124,111,255,0.2);
  border-radius: 12px;
  color: #a78bfa;
}
.stats-header h2 { font-size: 1.25rem; font-weight: 700; margin: 0; color: #f0f0ff; }
.stats-header-sub { font-size: 0.78rem; color: rgba(200,200,240,0.45); margin: 0; }

/* Period tabs — violet accent */
.stats-period-tabs {
  display: flex; gap: 6px; padding: 0 28px 16px 28px;
}
.stats-period-btn {
  flex: 1; padding: 7px 0;
  border: 1px solid rgba(120,120,255,0.12);
  background: rgba(255,255,255,0.03); color: rgba(200,200,240,0.45);
  border-radius: 10px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.18s;
}
.stats-period-btn.active {
  background: rgba(124,111,255,0.14);
  border-color: rgba(124,111,255,0.45);
  color: #a78bfa;
  box-shadow: 0 0 12px rgba(124,111,255,0.1);
}
.stats-period-btn:hover:not(.active) {
  background: rgba(124,111,255,0.06);
  border-color: rgba(124,111,255,0.2);
  color: rgba(200,200,240,0.75);
}

.stats-body {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* KPI row — toutes les cartes dans la même teinte violette */
.stats-kpi-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.stats-kpi-card {
  background: rgba(124,111,255,0.05);
  border: 1px solid rgba(120,120,255,0.12);
  border-radius: 16px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  position: relative; overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}
.stats-kpi-card:hover {
  background: rgba(124,111,255,0.09);
  border-color: rgba(124,111,255,0.3);
}
.stats-kpi-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(124,111,255,0.08), transparent);
  opacity: 1; border-radius: 16px;
  pointer-events: none;
}
/* Supprime les couleurs spécifiques par type — tout reste violet */
.stats-kpi-views::before,
.stats-kpi-likes::before,
.stats-kpi-clicks::before,
.stats-kpi-ctr::before { background: linear-gradient(135deg, rgba(124,111,255,0.1), transparent); }

.stats-kpi-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(124,111,255,0.12);
  border: 1px solid rgba(124,111,255,0.18);
  color: #a78bfa;
}
/* Même icône pour tous les KPI */
.stats-kpi-views .stats-kpi-icon,
.stats-kpi-likes .stats-kpi-icon,
.stats-kpi-clicks .stats-kpi-icon,
.stats-kpi-ctr .stats-kpi-icon {
  background: rgba(124,111,255,0.12);
  border: 1px solid rgba(124,111,255,0.18);
  color: #a78bfa;
}

.stats-kpi-content { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.stats-kpi-value { font-size: 1.5rem; font-weight: 800; color: #f0f0ff; line-height: 1.1; }
.stats-kpi-label { font-size: 0.72rem; color: rgba(200,200,240,0.4); font-weight: 500; margin-top: 2px; }
.stats-kpi-trend { font-size: 0.7rem; font-weight: 700; }
.stats-kpi-badge {
  font-size: 0.68rem; font-weight: 700; padding: 3px 8px;
  border-radius: 99px; white-space: nowrap; position: absolute; top: 10px; right: 10px;
}
/* Badges restent colorés car porteurs de sens (statut) */
.badge-fire { background: rgba(249,115,22,0.12); color: #fb923c; border: 1px solid rgba(249,115,22,0.25); }
.badge-ok   { background: rgba(124,111,255,0.12); color: #a78bfa; border: 1px solid rgba(124,111,255,0.25); }
.badge-low  { background: rgba(255,255,255,0.06); color: rgba(200,200,240,0.5); border: 1px solid rgba(255,255,255,0.1); }

/* Sur téléphone, la carte KPI "Taux de clic" est trop étroite pour ce petit
   badge qualitatif ("🔥 Excellent" / "👍 Bon" / "💡 À améliorer") : on le
   masque simplement sur mobile, la valeur chiffrée suffit. */
@media (max-width: 768px) {
  .stats-kpi-badge {
    display: none !important;
  }
}

/* Chart block */
.stats-chart-block {
  background: rgba(124,111,255,0.04);
  border: 1px solid rgba(120,120,255,0.12);
  border-radius: 16px; padding: 14px 16px;
}
.stats-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stats-chart-title { font-size: 0.85rem; font-weight: 700; color: rgba(200,200,240,0.65); }
.stats-chart-legend { display: flex; align-items: center; gap: 10px; font-size: 0.72rem; color: rgba(200,200,240,0.38); }
.stats-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; }

/* Section titles — plus douce, sans border-top abrupte */
.stats-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; color: rgba(167,139,250,0.7);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 6px 10px;
  background: rgba(124,111,255,0.06);
  border: 1px solid rgba(120,120,255,0.1);
  border-radius: 8px;
  margin-top: 2px;
}
.stats-section-title i { width: 14px; height: 14px; }

/* Mini cards 2-col grid */
.stats-grid-2 {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.stats-mini-card {
  background: rgba(124,111,255,0.05);
  border: 1px solid rgba(120,120,255,0.12);
  border-radius: 14px; padding: 12px 14px;
  transition: border-color 0.2s;
}
.stats-mini-card:hover { border-color: rgba(124,111,255,0.28); }
.stats-mini-label { font-size: 0.78rem; color: rgba(200,200,240,0.45); margin-bottom: 5px; }
.stats-mini-value { font-size: 1.2rem; font-weight: 800; color: #f0f0ff; }
.stats-mini-sub { font-size: 0.7rem; color: rgba(200,200,240,0.3); margin-top: 3px; }

/* Location */
.stats-location-block {
  background: rgba(124,111,255,0.04);
  border: 1px solid rgba(120,120,255,0.12);
  border-radius: 16px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.stats-location-map-placeholder {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(124,111,255,0.06);
  border: 1px dashed rgba(124,111,255,0.2);
  border-radius: 10px; color: rgba(200,200,240,0.4); font-size: 0.8rem;
}
.stats-location-item {
  display: flex; align-items: center; gap: 10px; font-size: 0.82rem;
}
.stats-location-flag { font-size: 1rem; }
.stats-location-country { min-width: 80px; color: rgba(200,200,240,0.65); }
.stats-location-bar-wrap { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; }
.stats-location-bar { height: 100%; background: linear-gradient(90deg, #7c6fff, #a78bfa); border-radius: 99px; }
.stats-location-pct { font-size: 0.75rem; font-weight: 700; color: rgba(200,200,240,0.4); min-width: 24px; text-align: right; }

/* Sources */
.stats-source-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(124,111,255,0.05);
  border: 1px solid rgba(120,120,255,0.12);
  border-radius: 12px; padding: 10px 12px;
  transition: border-color 0.2s;
}
.stats-source-card:hover { border-color: rgba(124,111,255,0.28); }
.stats-source-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  /* les couleurs inline des sources (Instagram rose, etc.) gardent leur identité de marque */
}
.stats-source-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.stats-source-name { font-size: 0.8rem; color: rgba(200,200,240,0.5); }
.stats-source-val { font-size: 1rem; font-weight: 800; color: #f0f0ff; }

/* Devices */
.stats-devices-row {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(124,111,255,0.04);
  border: 1px solid rgba(120,120,255,0.12);
  border-radius: 16px;
  padding: 16px 18px;
}
.stats-donut-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}
.stats-donut-svg {
  width: 90px;
  height: 90px;
  transform: rotate(-90deg);
}
.stats-donut-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.stats-device-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stats-device-bar-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.stats-device-bar-head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.stats-device-bar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stats-device-bar-icon i { width: 15px; height: 15px; }
.stats-device-bar-label {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(200,200,240,0.7);
}
.stats-device-bar-pct {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(200,200,240,0.9);
  min-width: 34px;
  text-align: right;
}
.stats-device-bar-track {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.stats-device-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.7s cubic-bezier(0.22,1,0.36,1);
}

/* ══════════════════════════════════════════
   LOADING SCREEN MENU
══════════════════════════════════════════ */
.ls-menu-container {
  width: 92%;
  max-width: 760px;
  max-height: 88vh;
  background: rgba(8,8,20,.98);
  border: 1px solid rgba(124,111,255,.2);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(40px);
  box-shadow: 0 40px 120px rgba(0,0,0,.9);
}
.ls-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 0;
  flex-shrink: 0;
}
.ls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  padding-bottom: 4px;
}
.ls-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 10px 13px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.ls-card:hover {
  border-color: rgba(124,111,255,.35);
  background: rgba(124,111,255,.09);
  transform: translateY(-2px);
}
.ls-card.active {
  border-color: rgba(124,111,255,.65) !important;
  background: rgba(124,111,255,.2) !important;
  box-shadow: 0 0 0 2px rgba(124,111,255,.25);
}
.ls-card.active::after {
  content: '✓';
  position: absolute;
  top: 6px; right: 8px;
  font-size: 10px;
  color: #a78bfa;
  font-weight: 700;
}
.ls-card-preview {
  width: 54px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ls-card-label {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(200,200,240,.65);
  text-align: center;
  line-height: 1.2;
}

.ls-text-input-wrap {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: rgba(124,111,255,0.05);
  border: 1px solid rgba(124,111,255,0.15);
  border-radius: 16px;
}
.ls-text-input-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(167,139,250,0.7);
  margin-bottom: 10px;
}
.ls-text-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ls-text-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(124,111,255,0.2);
  border-radius: 11px;
  padding: 10px 14px;
  color: #f0f0ff;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  outline: none;
  transition: 0.2s;
}
.ls-text-input:focus {
  border-color: rgba(124,111,255,0.5);
  box-shadow: 0 0 0 3px rgba(124,111,255,0.1);
}
.ls-text-input::placeholder { color: rgba(200,200,240,0.25); }
.ls-text-counter {
  font-size: 0.72rem;
  color: rgba(200,200,240,0.3);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Keyframes partagées pour les previews dans les cards */
@keyframes ls-spin    { to { transform: rotate(360deg); } }
@keyframes ls-bounce  { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }
@keyframes ls-bar     { 0%{left:-100%} 100%{left:100%} }
@keyframes ls-pulse-r { 0%{transform:scale(0.6);opacity:1} 100%{transform:scale(1.6);opacity:0} }
@keyframes ls-ripple  { 0%{transform:scale(0);opacity:1} 100%{transform:scale(1);opacity:0} }
@keyframes ls-glow    { 0%,100%{box-shadow:0 0 8px #7c6fff;opacity:.6} 50%{box-shadow:0 0 24px #7c6fff,0 0 48px rgba(124,111,255,.4);opacity:1} }
@keyframes ls-orbit   { to{transform:rotate(360deg)} }
@keyframes ls-orbit-rev { to{transform:rotate(-360deg)} }
@keyframes ls-rain-f  { 0%{transform:translateY(-20px);opacity:0} 50%{opacity:1} 100%{transform:translateY(20px);opacity:0} }
@keyframes ls-star    { 0%,100%{opacity:0;transform:scale(.5)} 50%{opacity:1;transform:scale(1)} }
@keyframes ls-fw      { 0%{transform:scale(0);opacity:1} 100%{transform:scale(1.5);opacity:0} }
@keyframes ls-cf      { 0%{transform:translateY(-16px) rotate(0deg);opacity:0} 50%{opacity:1} 100%{transform:translateY(16px) rotate(180deg);opacity:0} }
@keyframes ls-sc1     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes ls-sc2     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(12px)} }
@keyframes ls-blink   { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes ls-tdot    { 0%,80%,100%{opacity:0} 40%{opacity:1} }
@keyframes ls-gslide  { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes ls-type    { 0%{width:0} 50%{width:6ch} 100%{width:0} }
@keyframes ls-wave    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes ls-fade    { 0%,100%{opacity:.1} 50%{opacity:1} }
@keyframes ls-neon    { 0%,100%{text-shadow:0 0 8px #7c6fff,0 0 20px rgba(124,111,255,.4)} 50%{text-shadow:0 0 16px #7c6fff,0 0 40px rgba(124,111,255,.7)} }
@keyframes ls-glitch  { 0%,100%{text-shadow:none;transform:none} 10%{text-shadow:2px 0 #06b6d4,-2px 0 #ec4899;transform:translate(1px,0)} 20%{text-shadow:none;transform:none} 30%{text-shadow:-2px 0 #06b6d4,2px 0 #ec4899;transform:translate(-1px,0)} 40%,90%{text-shadow:none;transform:none} }
@keyframes ls-sqspin  { 0%{transform:rotate(0deg)} 100%{transform:rotate(180deg)} }
@keyframes ls-diam    { 0%,100%{transform:rotate(45deg) scale(.6);opacity:.4} 50%{transform:rotate(45deg) scale(1);opacity:1} }
@keyframes ls-morph   { 0%,100%{border-radius:50%} 25%{border-radius:0 50% 50% 50%} 50%{border-radius:50% 0 50% 50%} 75%{border-radius:50% 50% 0 50%} }
@keyframes ls-cas     { 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} }
@keyframes ls-dna1    { 0%,100%{transform:scaleX(1)} 50%{transform:scaleX(-1)} }
@keyframes ls-dna2    { 0%,100%{transform:scaleX(-1)} 50%{transform:scaleX(1)} }

/* Keyframes + classes partagées pour les modèles "Cliquer pour entrer" */
@keyframes ls-enter-neon-pulse    { 0%,100%{box-shadow:0 0 8px #06b6d4,0 0 20px rgba(6,182,212,.4);} 50%{box-shadow:0 0 20px #06b6d4,0 0 45px rgba(6,182,212,.7);} }
@keyframes ls-enter-blink-caret   { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes ls-enter-heartbeat     { 0%,100%{transform:scale(1)} 25%{transform:scale(1.15)} 40%{transform:scale(1)} 60%{transform:scale(1.1)} }
@keyframes ls-enter-gradient-slide{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes ls-enter-arrow-nudge   { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }

.ls-enter-btn {
  font-family: 'Inter', sans-serif;
  outline: none;
}
.ls-enter-classic{padding:16px 38px;border-radius:14px;background:linear-gradient(135deg,#7c6fff,#6366f1);color:#fff;font-weight:700;font-size:1rem;border:none;cursor:pointer;letter-spacing:0.02em;box-shadow:0 8px 30px rgba(124,111,255,0.4);transition:transform 0.2s ease,box-shadow 0.2s ease;}
.ls-enter-classic:hover{transform:scale(1.06);box-shadow:0 12px 40px rgba(124,111,255,0.55);}
.ls-enter-neon{padding:15px 36px;border-radius:12px;background:transparent;border:2px solid #06b6d4;color:#06b6d4;font-weight:800;font-size:0.95rem;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;animation:ls-enter-neon-pulse 1.6s ease-in-out infinite;transition:transform 0.2s ease;}
.ls-enter-neon:hover{transform:scale(1.05);}
.ls-enter-minimal{background:none;border:none;color:#f0f0ff;font-weight:500;font-size:0.95rem;letter-spacing:0.05em;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px;}
.ls-enter-minimal .ls-enter-caret{animation:ls-enter-blink-caret 1s step-end infinite;color:#7c6fff;font-weight:700;}
.ls-enter-heart{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;color:#f0f0ff;}
.ls-enter-heart .ls-enter-heart-icon{font-size:2rem;animation:ls-enter-heartbeat 1.3s ease-in-out infinite;}
.ls-enter-heart .ls-enter-heart-label{font-size:0.85rem;font-weight:600;color:rgba(200,200,240,0.75);}
.ls-enter-gradient{padding:16px 40px;border-radius:99px;border:none;color:#fff;font-weight:800;font-size:0.95rem;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;background:linear-gradient(90deg,#7c6fff,#06b6d4,#a78bfa,#7c6fff);background-size:250%;animation:ls-enter-gradient-slide 3s linear infinite;transition:transform 0.2s ease;}
.ls-enter-gradient:hover{transform:scale(1.05);}
.ls-enter-dashed{padding:14px 30px;border-radius:12px;background:rgba(124,111,255,0.06);border:1.5px dashed rgba(124,111,255,0.5);color:#a78bfa;font-weight:700;font-size:0.9rem;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background 0.2s ease,border-color 0.2s ease;}
.ls-enter-dashed:hover{background:rgba(124,111,255,0.15);border-color:rgba(124,111,255,0.8);}
.ls-enter-dashed .ls-enter-arrow{display:inline-block;animation:ls-enter-arrow-nudge 1s ease-in-out infinite;}


@media (max-width: 600px) {
  .ls-menu-container { width:100%; max-width:100%; border-radius:24px 24px 0 0; margin-top:auto; }
  .ls-menu-header { padding:20px 20px 0; }
  .ls-grid { grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
  .ls-card { padding:12px 8px 10px; }
}
.stats-toplinks-list { display: flex; flex-direction: column; gap: 7px; }
.stats-toplinks-empty {
  display: flex; align-items: center; gap: 10px; padding: 14px;
  background: rgba(124,111,255,0.04);
  border: 1px dashed rgba(120,120,255,0.15);
  border-radius: 12px; color: rgba(200,200,240,0.3); font-size: 0.82rem;
}
.stats-toplink-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(124,111,255,0.05);
  border: 1px solid rgba(120,120,255,0.1);
  border-radius: 10px;
  font-size: 0.82rem;
  transition: border-color 0.2s;
}
.stats-toplink-item:hover { border-color: rgba(124,111,255,0.28); }
.stats-toplink-rank { font-weight: 800; color: rgba(167,139,250,0.35); min-width: 22px; }
.stats-toplink-name { min-width: 80px; color: rgba(200,200,240,0.65); flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.stats-toplink-bar-wrap { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; }
.stats-toplink-bar { height: 100%; background: linear-gradient(90deg, #7c6fff, #a78bfa); border-radius: 99px; transition: width 0.5s ease; }
.stats-toplink-count { font-weight: 800; font-size: 0.85rem; color: #a78bfa; min-width: 24px; text-align: right; }

/* Score profil */
.stats-score-block {
  background: rgba(124,111,255,0.04);
  border: 1px solid rgba(120,120,255,0.12);
  border-radius: 16px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.stats-score-bar-wrap {
  height: 6px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden;
}
.stats-score-bar { height: 100%; background: linear-gradient(90deg, #7c6fff, #a78bfa); border-radius: 99px; transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1); }
.stats-score-items { display: flex; flex-direction: column; gap: 5px; }
.stats-score-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: rgba(200,200,240,0.4);
  padding: 5px 8px; border-radius: 8px;
  transition: all 0.2s;
}
.stats-score-item.score-ok { color: rgba(200,200,240,0.75); background: rgba(124,111,255,0.08); }
.stats-score-item.score-no { color: rgba(200,200,240,0.28); }
.score-icon { font-size: 0.9rem; }
.stats-score-tip {
  font-size: 0.78rem; color: rgba(167,139,250,0.75);
  padding: 8px 10px;
  background: rgba(124,111,255,0.08);
  border: 1px solid rgba(124,111,255,0.16);
  border-radius: 8px;
}

/* Milestones */
.stats-milestones-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.stats-milestone {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 8px; border-radius: 14px; text-align: center;
  border: 1px solid rgba(120,120,255,0.1);
  position: relative; overflow: hidden;
  transition: all 0.2s;
}
.milestone-done {
  background: linear-gradient(135deg, rgba(124,111,255,0.12), rgba(167,139,250,0.05));
  border-color: rgba(124,111,255,0.28);
}
.milestone-done::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,111,255,0.5), transparent);
}
.milestone-todo { background: rgba(255,255,255,0.02); opacity: 0.5; }
.stats-milestone-icon { font-size: 1.4rem; }
.stats-milestone-label { font-size: 0.75rem; font-weight: 700; color: rgba(200,200,240,0.7); }
.stats-milestone-desc { font-size: 0.65rem; color: rgba(200,200,240,0.3); }
.stats-milestone-check {
  position: absolute; top: 5px; right: 7px;
  font-size: 0.65rem; font-weight: 800; color: #a78bfa;
}


/* ===== PREMIUM MODAL ===== */
#premiumModal .prem-feature-list,
#premiumMemberModal .prem-feature-list {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  text-align: left;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Title accent override — keep gold for Premium branding, but match font */
#premiumModal [style*="DM Sans"],
#premiumMemberModal [style*="DM Sans"] {
  font-family: 'Syne', 'Inter', sans-serif !important;
}

/* ===== ACHIEVEMENTS MODAL — MemoryLink design language ===== */
.ach-container {
  background: rgba(10,10,22,0.97);
  border: 1px solid rgba(120,120,255,0.15);
  border-radius: 24px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(120,120,255,0.06);
  font-family: 'Inter', sans-serif;
  color: #f0f0ff;
  width: 96%;
  max-width: 680px;
  max-height: 88vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,111,255,0.2) transparent;
  display: flex;
  flex-direction: column;
}
.ach-container::-webkit-scrollbar { width: 4px; }
.ach-container::-webkit-scrollbar-thumb { background: rgba(124,111,255,0.25); border-radius: 4px; }

.ach-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 26px 16px 26px;
  position: sticky; top: 0;
  background: rgba(10,10,22,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(120,120,255,0.12);
  z-index: 5;
  margin-bottom: 0;
}
.ach-header-left { display: flex; align-items: center; gap: 14px; }
.ach-header-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(124,111,255,0.1);
  border: 1px solid rgba(124,111,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: #a78bfa;
}
.ach-header h2 { margin: 0; font-size: 1.2rem; font-weight: 700; color: #f0f0ff; }
.ach-header-sub { margin: 0; font-size: 0.76rem; color: rgba(200,200,240,0.45); }

/* Barre de progression — violette, pas dorée */
.ach-progress-bar-wrap {
  margin: 16px 26px 0 26px;
  height: 4px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden;
}
.ach-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #7c6fff, #a78bfa);
  border-radius: 99px;
  transition: width 0.9s cubic-bezier(0.34,1.56,0.64,1);
}

/* Filtres — violet, pas doré */
.ach-filters {
  display: flex; gap: 6px; padding: 16px 26px 16px 26px;
  margin-top: 0;
}
.ach-filter {
  padding: 6px 16px; border-radius: 99px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  border: 1px solid rgba(120,120,255,0.12); background: rgba(255,255,255,0.03);
  color: rgba(200,200,240,0.45); transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}
.ach-filter.active {
  background: rgba(124,111,255,0.14);
  border-color: rgba(124,111,255,0.45);
  color: #a78bfa;
  box-shadow: 0 0 10px rgba(124,111,255,0.1);
}
.ach-filter:hover:not(.active) {
  background: rgba(124,111,255,0.06);
  border-color: rgba(124,111,255,0.2);
  color: rgba(200,200,240,0.75);
}

.ach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 20px 24px 20px;
}

/* Cards succès — violet au lieu d'or */
.ach-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(120,120,255,0.1);
  background: rgba(124,111,255,0.04);
  position: relative; overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
  cursor: default;
}
.ach-card:hover {
  border-color: rgba(124,111,255,0.28);
  background: rgba(124,111,255,0.08);
}
.ach-card.ach-done {
  background: linear-gradient(135deg, rgba(124,111,255,0.1), rgba(167,139,250,0.04));
  border-color: rgba(124,111,255,0.28);
}
.ach-card.ach-done::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,111,255,0.55), transparent);
}
.ach-card.ach-locked {
  opacity: 0.42;
  filter: grayscale(0.3);
}

.ach-icon-wrap {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0;
}
.ach-done .ach-icon-wrap {
  background: rgba(124,111,255,0.14);
  border: 1px solid rgba(124,111,255,0.28);
  color: #a78bfa;
}
.ach-locked .ach-icon-wrap {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  color: rgba(200,200,240,0.25);
}

.ach-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ach-name { font-size: 0.86rem; font-weight: 700; color: rgba(200,200,240,0.85); line-height: 1.2; }
.ach-locked .ach-name { color: rgba(200,200,240,0.35); }
.ach-desc { font-size: 0.72rem; color: rgba(200,200,240,0.35); margin-top: 3px; line-height: 1.3; }

/* Badge check violet */
.ach-badge {
  position: absolute; top: 9px; right: 9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #7c6fff, #a78bfa);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 8px rgba(124,111,255,0.4);
}
.ach-badge svg { width: 10px; height: 10px; stroke: #fff; }

/* Mini progress bar sur les succès en cours */
.ach-progress-mini {
  margin-top: 5px; height: 3px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden;
}
.ach-progress-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c6fff, #a78bfa);
  border-radius: 99px; transition: width 0.5s;
}

.ach-cat-label {
  grid-column: 1 / -1;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(167,139,250,0.45);
  padding: 6px 0 2px 4px; margin-top: 4px;
}

@media (max-width: 480px) {
  .ach-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   NOUVEAU MENU PARAMÈTRES — sidebar à onglets
   (Profil / Sécurité / Badges / Confidentialité / Notifications / Compte)
══════════════════════════════════════════ */

.settings-modal-container {
  max-width: 720px;
  width: 92%;
  height: 600px;
  max-height: 88vh;
  overflow: hidden;
}

.settings-layout {
  display: flex;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.settings-sidebar {
  width: 176px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding-right: 4px;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  position: relative;
}

.settings-nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.settings-nav-item:hover {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.85);
}

.settings-nav-item.active {
  background: rgba(99,102,241,0.15);
  border-color: rgba(99,102,241,0.3);
  color: #c7d2fe;
}

.settings-nav-tag {
  margin-left: auto;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(167,139,250,0.18);
  color: #c4b5fd;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(167,139,250,0.3);
  white-space: nowrap;
}

.settings-nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 6px 4px;
}

.settings-nav-danger {
  color: rgba(239,68,68,0.65);
}

.settings-nav-danger:hover {
  background: rgba(239,68,68,0.1);
  color: #f87171;
}

.settings-nav-danger.active {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.3);
  color: #f87171;
}

/* Tabs horizontaux façon Paramètres (ex: Serveur Discord — Lien d'invitation / Mes serveurs) */
.settings-tab-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 11px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.settings-tab-btn:hover {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.85);
}

.settings-tab-btn.active {
  background: rgba(99,102,241,0.15);
  border-color: rgba(99,102,241,0.3);
  color: #c7d2fe;
}

.settings-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-right: 6px;
}

.settings-panel {
  display: none;
  flex-direction: column;
  gap: 22px;
}

.settings-panel.active {
  display: flex;
}

/* Ligne d'info statique (avatar / bannière) */
.settings-static-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}

.settings-static-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(124,111,255,0.12);
  color: #a78bfa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-static-avatar svg { width: 18px; height: 18px; }

.settings-static-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.settings-static-name {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}

.settings-static-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
}

/* Boutons secondaires / avertissement */
.settings-secondary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 11px;
  border: 1px solid rgba(120,120,255,0.2);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.8);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, transform 0.15s;
}

.settings-secondary-btn svg { width: 16px; height: 16px; }

.settings-secondary-btn:hover {
  background: rgba(99,102,241,0.12);
  transform: translateY(-1px);
}

.settings-warning-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 11px;
  border: 1px solid rgba(251,191,36,0.3);
  background: rgba(251,191,36,0.08);
  color: #fbbf24;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, transform 0.15s;
}

.settings-warning-btn svg { width: 16px; height: 16px; }

.settings-warning-btn:hover {
  background: rgba(251,191,36,0.16);
  transform: translateY(-1px);
}

/* Toggle switch */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}

.settings-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-toggle-title {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}

.settings-toggle-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  line-height: 1.4;
}

.toggle-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  cursor: pointer;
  transition: 0.25s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.25s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.toggle-switch input:checked + .toggle-slider {
  background: rgba(99,102,241,0.75);
  border-color: rgba(99,102,241,0.5);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* Comptes liés / sessions */
.linked-account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}

.linked-account-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.linked-google { background: rgba(66,133,244,0.12); color: #4285f4; }
.linked-discord { background: rgba(88,101,242,0.12); color: #5865f2; }

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

.linked-account-name {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}

.linked-account-status {
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
}

.linked-account-status.connected { color: #4ade80; }

.linked-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.linked-btn:hover { background: rgba(255,255,255,0.09); }

.linked-btn.danger {
  border-color: rgba(239,68,68,0.25);
  color: #f87171;
}

.linked-btn.danger:hover { background: rgba(239,68,68,0.1); }

.linked-btn.linked-btn-disabled,
.linked-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.linked-btn.linked-btn-disabled:hover,
.linked-btn:disabled:hover {
  background: rgba(255,255,255,0.04);
}

/* Visibilité du profil */
.visibility-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.visibility-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.visibility-card:hover { background: rgba(255,255,255,0.04); }

.visibility-card.selected {
  border-color: rgba(99,102,241,0.5);
  background: rgba(99,102,241,0.08);
}

.visibility-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: border-color 0.2s;
}

.visibility-card.selected .visibility-radio { border-color: #818cf8; }

.visibility-card.selected .visibility-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #818cf8;
}

.visibility-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}

.visibility-card-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.42);
  margin-top: 2px;
  line-height: 1.4;
}

/* Badges */
.badge-active-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124,111,255,0.1), rgba(167,139,250,0.05));
  border: 1px solid rgba(124,111,255,0.2);
}

.badge-active-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.badge-active-icon svg { width: 20px; height: 20px; }

.badge-active-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.4);
  font-weight: 700;
}

.badge-active-name {
  font-size: 14.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-top: 2px;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 10px;
}

.badge-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  opacity: 0.6;
  filter: grayscale(0.35);
  transition: opacity 0.2s, transform 0.15s, border-color 0.2s, background 0.2s;
}

.badge-card:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.badge-card.locked {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.6);
}

.badge-card.locked:hover {
  transform: none;
  opacity: 0.45;
}

.badge-card.unlocked {
  opacity: 1;
  filter: none;
  border-color: rgba(255,255,255,0.14);
}

.badge-card.active-badge {
  border-color: rgba(124,111,255,0.6);
  background: rgba(124,111,255,0.1);
  box-shadow: 0 0 0 1px rgba(124,111,255,0.25) inset;
}

.badge-card-status {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  text-align: center;
  line-height: 1.3;
}

.badge-card.unlocked .badge-card-status { color: #a5b4fc; }
.badge-card.active-badge .badge-card-status { color: #4ade80; }

.badge-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-card-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-align: center;
}

.badge-soon-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(167,139,250,0.18);
  color: #c4b5fd;
  padding: 2px 5px;
  border-radius: 6px;
  border: 1px solid rgba(167,139,250,0.3);
  letter-spacing: 0.03em;
}

/* Responsive : sidebar en barre horizontale sur mobile */
@media (max-width: 640px) {
  .settings-modal-container {
    width: 94%;
    height: 86vh;
    padding: 20px;
  }
  .settings-layout {
    flex-direction: column;
    gap: 14px;
  }
  .settings-sidebar {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 6px;
    gap: 6px;
  }
  .settings-nav-item {
    flex-shrink: 0;
    width: auto;
  }
  .settings-nav-item span:not(.settings-nav-tag) {
    display: none;
  }
  .settings-nav-divider {
    display: none;
  }
  .badge-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}
/* ===== Barre d'outils de style du pseudo / de la bio ===== */
.style-toolbar {
  position: absolute;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 14px;
  background: rgba(15, 15, 24, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  animation: styleToolbarPop 0.12s ease-out;
  font-family: 'Inter', sans-serif;
}

@keyframes styleToolbarPop {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.style-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.style-toolbar-btn:hover {
  background: rgba(124, 111, 255, 0.18);
}

.style-toolbar-btn.active {
  background: rgba(124, 111, 255, 0.28);
  border-color: rgba(124, 111, 255, 0.6);
  color: #a78bfa;
}

.style-toolbar-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.style-toolbar-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 2px;
  flex-shrink: 0;
}

.style-toolbar-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 30px;
  max-width: 138px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a5a5c0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  color: #f0f0ff;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 0 22px 0 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.style-toolbar-select:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

.style-toolbar-select:focus {
  outline: none;
  border-color: rgba(124, 111, 255, 0.6);
  background-color: rgba(124, 111, 255, 0.1);
}

.style-toolbar-select option {
  background: #14141f;
  color: #f0f0ff;
  font-family: 'Inter', sans-serif;
}

.style-toolbar-color {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}

.style-toolbar-reset {
  font-size: 14px;
}

/* ===== Édition de la couleur des badges de profil (Certifié, Premium,
   Staff, Membre de la première heure...) en mode édition ===== */
.badge-editable {
  cursor: pointer;
  border-radius: 8px;
  outline: 1.5px dashed transparent;
  outline-offset: 3px;
  transition: outline-color 0.15s ease, background-color 0.15s ease;
}

.badge-editable:hover {
  outline-color: rgba(124, 111, 255, 0.6);
  background-color: rgba(124, 111, 255, 0.12);
}

/* Les badges vues/likes/signalement sont des pastilles (border-radius:999px,
   voir .views-badge) : on garde le contour pointillé + surbrillance de
   .badge-editable au survol, mais avec un rayon d'arrondi qui suit leur
   forme plutôt que le border-radius:8px générique. */
.views-badge.badge-editable {
  border-radius: 999px;
}

.badge-color-popover {
  position: absolute;
  z-index: 100000;
  display: none;
  flex-direction: column;
  gap: 10px;
  width: 220px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(15, 15, 24, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  animation: styleToolbarPop 0.12s ease-out;
  font-family: 'Inter', sans-serif;
}

.badge-color-popover-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(230, 230, 245, 0.8);
}

.badge-color-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.badge-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease;
}

.badge-color-swatch:hover {
  transform: scale(1.15);
}

.badge-color-popover-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-color-input {
  flex: 1;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}

/* ===== Bouton "Masquer ce badge" dans le popover de couleur ===== */
.badge-color-popover-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 2px 0;
}

.badge-hide-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.badge-hide-btn:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.4);
}

.badge-hide-btn svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.badge-hide-btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* ===== Popover "Style du badge" (vues / likes / signalement) ===== */
.stats-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stats-style-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.stats-style-option:hover {
  background: rgba(124,111,255,0.1);
  border-color: rgba(124,111,255,0.3);
}

.stats-style-option.active {
  border-color: rgba(124,111,255,0.7);
  background: rgba(124,111,255,0.14);
}

.stats-style-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(230,230,245,0.75);
}

.stats-style-preview {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  pointer-events: none;
}

.stats-style-preview i,
.stats-style-preview svg {
  width: 12px;
  height: 12px;
}

.stats-style-preview.style-glass {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
}

.stats-style-preview.style-solid {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: 1px solid rgba(255,255,255,0.18);
}

.stats-style-preview.style-outline {
  background: rgba(10,10,22,0.3);
  border: 1.5px solid rgba(124,111,255,0.55);
  color: #c4b5fd;
}

.stats-style-preview.style-minimal {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  text-shadow: 0 1px 4px rgba(0,0,0,0.65);
}

/* ===== Effet de texte arc-en-ciel (pseudo / bio) ===== */
.rainbow-text {
  background-image: linear-gradient(
    90deg,
    #ff4466, #ff9d2e, #ffee00, #4dff6d, #00c2ff, #7c6fff, #ff4dd8, #ff4466
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation: rainbowTextShift 4s linear infinite;
}

@keyframes rainbowTextShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Aperçu visuel sur le bouton de la barre d'outils quand actif */
.style-toolbar-btn[data-action="rainbow"].active {
  background: linear-gradient(90deg, rgba(255,68,102,.25), rgba(255,238,0,.25), rgba(0,194,255,.25), rgba(124,111,255,.25));
  border-color: rgba(255,255,255,0.25);
}
/* ═══════════════════════════════════════════════════════
   Template "Scroll" : la première page est une copie strictement
   identique du format choisi (voir TEMPLATES.scroll dans le JS, qui
   réutilise directement le "apply" du format choisi, sans aucune
   adaptation) — cette section ne stylise QUE les pages ajoutées en
   dessous, qui s'enchaînent dans le flux normal de la page (scroll
   classique du navigateur, pas de plein écran forcé).
   ═══════════════════════════════════════════════════════ */

#scrollPagesWrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-top: 26px;
}

.scroll-page-card {
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 2.2rem 1.8rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  transform: translateZ(0);
  transform-origin: center center;
  will-change: transform;
}

.scroll-page-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
}

.scroll-page-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #f0f0ff;
  background: transparent;
  text-align: center;
  margin: 0;
}

input.scroll-page-title {
  border: none;
  border-bottom: 1px dashed rgba(124,111,255,0.4);
  outline: none;
  padding: 4px 2px 8px;
  width: 260px;
}

.scroll-page-del {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,80,80,0.08);
  border: 1px solid rgba(255,80,80,0.3);
  color: #f87171;
  cursor: pointer;
  transition: 0.15s;
}
.scroll-page-del:hover {
  background: rgba(255,80,80,0.18);
}
.scroll-page-del i,
.scroll-page-del svg {
  width: 14px;
  height: 14px;
}

.scroll-page-widgets {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scroll-page-widgets:empty::before,
.scroll-page-widgets:not(:has(.scroll-frame-widget > *)):not(:has(> :not(.scroll-frame-widget)))::before {
  content: 'Aucun widget dans cette page pour le moment.';
  display: block;
  font-size: 0.8rem;
  color: rgba(200,200,240,0.4);
}

.scroll-page-add-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 4px;
}
.scroll-page-add-btn button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 14px;
  border: 1.5px dashed rgba(124,111,255,0.45);
  background: rgba(124,111,255,0.08);
  color: #a78bfa;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: 0.15s;
}
.scroll-page-add-btn button:hover {
  background: rgba(124,111,255,0.16);
}
.scroll-page-add-btn button i,
.scroll-page-add-btn button svg {
  width: 15px;
  height: 15px;
}

/* ═══════════ Template Scroll : liens & widgets regroupés par page ═══════════
   Dans le menu de gauche, chaque page du template Scroll a son propre bloc
   (voir renderLinksAndWidgetsEditor en JS). On change un widget de page en
   le glissant d'un bloc à l'autre ; les liens restent sur la première page. */
#leftLinksEditor.scroll-grouped {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.scrollPageGroup {
  border: 1px solid rgba(120,120,255,0.14);
  border-radius: 16px;
  background: rgba(124,111,255,0.035);
  padding: 10px;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.scrollPageGroup.drag-over {
  border-color: rgba(124,111,255,0.7);
  background: rgba(124,111,255,0.1);
  border-style: dashed;
}

/* Pendant qu'on glisse un lien, les pages autres que la 1ère sont grisées :
   un lien ne peut pas y être déposé. */
#leftLinksEditor.is-dragging-link .scrollPageGroup:not(.scrollPageGroup-first) {
  opacity: 0.4;
}

.scrollPageGroupHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 10px;
}

.scrollPageGroupNum {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.scrollPageGroupTitleWrap {
  flex: 1;
  min-width: 0;
}

.scrollPageGroupTitle {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f0f0ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scrollPageGroupCount {
  font-size: 0.7rem;
  color: rgba(200,200,240,0.5);
  margin-top: 1px;
}

.scrollPageGroupAdd {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(124,111,255,0.3);
  background: rgba(124,111,255,0.12);
  color: #c4b5fd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.scrollPageGroupAdd:hover {
  background: rgba(124,111,255,0.3);
}

.scrollPageGroupAdd i,
.scrollPageGroupAdd svg {
  width: 15px;
  height: 15px;
}

.scrollPageGroupBody .linkEdit:last-of-type {
  margin-bottom: 0;
}

.scrollPageGroupEmpty {
  padding: 14px 10px;
  border: 1.5px dashed rgba(124,111,255,0.25);
  border-radius: 12px;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(200,200,240,0.45);
}

/* Bloc non vide : la zone de dépôt n'apparaît que pendant un glissement. */
.scrollPageGroupEmpty.is-compact {
  display: none;
  margin-top: 8px;
  padding: 8px 10px;
}

#leftLinksEditor.is-dragging-widget .scrollPageGroupEmpty.is-compact {
  display: block;
}

.scrollPageGroupTip {
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(200,200,240,0.45);
  text-align: center;
  padding: 4px 8px;
}

.widgetFrameRow {
  padding: 0 16px 12px;
  margin-top: -6px;
}
.widgetFrameSelect {
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: rgba(200,200,240,0.75);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(120,120,255,0.15);
  border-radius: 8px;
  padding: 6px 8px;
  outline: none;
  cursor: pointer;
}

/* Aperçu mini dans la grille de templates */
.tpl-scroll {
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 6px !important;
}
.tpl-scroll-frame {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  justify-content: center;
}
.tpl-scroll-arrow {
  font-size: 10px;
  line-height: 1;
  color: rgba(167,139,250,0.7);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════
   Template "Sidebar" : cadre gauche (profil) + cadre droit (widgets)
   ═══════════════════════════════════════════════════════ */

.template-sidebar {
  max-width: 880px !important;
  text-align: left;
}
.template-sidebar .header {
  padding: 2.2rem;
}
.template-sidebar .sidebar-row {
  display: flex;
  align-items: flex-start;
  gap: 2.2rem;
}
.template-sidebar .sidebar-left {
  flex: 0 0 240px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  border-right: 1px solid rgba(255,255,255,0.08);
  padding-right: 2.2rem;
}
.template-sidebar .sidebar-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.template-sidebar #avatarContainer {
  margin-bottom: 10px;
}
.template-sidebar #avatarContainer img {
  width: 92px;
  height: 92px;
  border-radius: 22px;
  object-fit: cover;
  display: block;
}
.template-sidebar #name {
  justify-content: flex-start;
  font-size: 1.35rem;
  margin: 4px 0;
}
.template-sidebar #extraInfos {
  margin: 4px 0 10px 0;
}
.template-sidebar #bio {
  font-size: 0.88rem;
  text-align: left;
  margin-bottom: 0;
}
.template-sidebar #links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.template-sidebar #musicPlayer {
  margin-top: 14px;
}
.template-sidebar .sidebar-stats-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}
.template-sidebar .sidebar-stats-row .views-badge {
  position: static;
  top: auto;
  right: auto;
}
.template-sidebar .sidebar-stats-row #likes {
  position: static !important;
  top: auto !important;
  right: auto !important;
}
.template-sidebar .sidebar-stats-row #reportBtn {
  position: static !important;
  top: auto !important;
  right: auto !important;
}

/* La bulle de statut Discord part par défaut à droite de l'avatar (voir
   .discord-status-bubble plus haut dans ce fichier), mais la colonne de
   gauche du template Sidebar ne fait que 240px de large : la bulle
   débordait donc sur la colonne de droite et venait recouvrir le premier
   lien (ex: le bouton Twitch). On la fait plutôt apparaître au-dessus de
   l'avatar, avec sa pointe qui redescend vers lui, en restant dans la
   largeur de la colonne gauche. */
.template-sidebar .discord-status-bubble {
  top: auto;
  bottom: calc(100% + 14px);
  left: 0;
  max-width: 205px;
}
.template-sidebar .discord-status-bubble::after {
  top: auto;
  right: auto;
  bottom: -8px;
  left: 18px;
  border: 8px solid transparent;
  border-top-color: var(--discord-bubble-tail);
  border-bottom: 0;
  margin-right: 0;
}

@media (max-width: 860px) {
  .template-sidebar .sidebar-row {
    flex-direction: column;
  }
  .template-sidebar .sidebar-left {
    flex: none;
    max-width: 100%;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-right: 0;
    padding-bottom: 1.6rem;
    margin-bottom: 1.6rem;
  }
}

/* Aperçu mini dans la grille de templates */
.tpl-sidebar {
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 8px !important;
}
.tpl-sidebar-left {
  flex: 0 0 34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid rgba(255,255,255,0.1);
  padding-right: 6px;
}
.tpl-sidebar-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

/* ═══════════════════════════════════════════════════════
   Template "Scroll" : un seul cadre visible à l'écran à la fois, et un
   scroll fait passer proprement au suivant. #profile devient lui-même le
   conteneur de scroll (au lieu du body). Chaque cadre (le premier =
   .header, les suivants = .scroll-page-card) est enveloppé dans une
   ".scroll-slide" invisible qui, elle, prend 100vh et porte le
   scroll-snap — le cadre à l'intérieur garde donc sa taille naturelle
   (celle de son contenu), sans espace vide forcé dans le cadre lui-même,
   juste centré dans l'écran.
   ═══════════════════════════════════════════════════════ */
body:has(.profile.template-scroll) {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}

.profile.template-scroll {
  width: 100%;
  max-width: 100% !important;
  height: 100vh;
  /* "dvh" (dynamic viewport height) suit la hauteur RÉELLEMENT visible sur
     mobile, barre d'adresse comprise/exclue selon qu'elle est rétractée ou
     non — contrairement à "vh", qui reste figée sur une valeur et fait donc
     bouger les points de snap (et donc "saute"/tremble à l'écran) à chaque
     apparition/disparition de cette barre pendant le scroll. Ignorée par les
     navigateurs qui ne la supportent pas : la valeur "vh" au-dessus reste
     alors appliquée. */
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.scroll-slide {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

#scrollPagesWrap {
  margin-top: 0;
  gap: 0;
}

.scroll-page-add-btn {
  padding: 32px 0 60px;
}

/* Petite flèche sous le cadre principal (1ère page) du template Scroll,
   pour indiquer qu'on peut descendre. Elle vit à l'intérieur du 1er
   ".scroll-slide" (voir initScrollNav en JS) donc elle défile avec lui et
   disparaît naturellement une fois qu'on a quitté la première page. */
.scroll-down-arrow {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 50;

  width: 42px;
  height: 42px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(10,10,22,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(230,230,245,0.9);

  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  animation: scrollDownArrowBounce 1.8s ease-in-out infinite;
}

.scroll-down-arrow.visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-down-arrow:hover {
  background: rgba(124,111,255,0.35);
  border-color: rgba(124,111,255,0.5);
}

.scroll-down-arrow i,
.scroll-down-arrow svg {
  width: 20px;
  height: 20px;
}

@keyframes scrollDownArrowBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(7px); }
}

/* Points de navigation à droite de l'écran (un par cadre) — PC uniquement,
   le point du cadre actuellement visible s'allume. */
.scroll-dots-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99990;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

.scroll-dots-nav .scroll-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  padding: 0;

  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;

  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.scroll-dots-nav .scroll-dot:hover {
  background: rgba(255,255,255,0.5);
  transform: scale(1.2);
}

.scroll-dots-nav .scroll-dot.active {
  background: #a78bfa;
  border-color: #a78bfa;
  box-shadow: 0 0 10px rgba(167,139,250,0.85);
  transform: scale(1.3);
}

@media (max-width: 768px) {
  .scroll-dots-nav {
    display: none !important;
  }

  /* Le scroll-snap "façon TikTok" (un cadre = un écran plein, on "clique"
     au suivant) reste actif sur mobile, exactement comme sur PC — c'est
     tout l'intérêt du template Scroll, et le désactiver entièrement (ancien
     comportement ci-dessous en commentaire) redonnait un simple scroll
     basique, sans le verrouillage écran par écran.
     Exception ciblée : un cadre du template Scroll (le premier="header", les
     suivants=".scroll-page-card") est PARFOIS plus haut que l'écran (avatar +
     nom + bio + liens + plusieurs widgets empilés), et dépasse alors le
     100vh du ".scroll-slide" qui le contient. Pour CE cadre précis
     uniquement (classe .scroll-slide-tall, ajoutée/retirée dynamiquement en
     JS par updateScrollSlideSnapMode(), voir initScrollNav dans main.html —
     recalculée à chaque rendu, à la rotation de l'écran et via un
     ResizeObserver si son contenu change de hauteur), on retire le snap
     pour ne pas bloquer l'accès à son contenu en bas de page — sans
     pénaliser tous les autres cadres, qui tiennent dans l'écran dans
     l'immense majorité des cas. */
  /* CORRECTIF : un cadre trop haut ne doit PAS perdre son point d'accroche.
     Avant, il passait en "scroll-snap-align: none" alors que le conteneur
     restait en "mandatory" : le navigateur était alors OBLIGÉ de s'arrêter
     sur un autre point d'accroche — le haut du cadre suivant. Résultat, quand
     c'était le 1er cadre qui dépassait de l'écran, on atterrissait direct sur
     la 2e page sans pouvoir remonter. Désormais le cadre trop haut garde son
     accroche en haut (on peut donc toujours y revenir), mais sans "stop"
     forcé, et le conteneur passe en "proximity" (voir .scroll-snap-has-tall)
     pour laisser défiler librement l'intérieur du cadre. */
  .scroll-slide.scroll-slide-tall {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  .profile.template-scroll.scroll-snap-has-tall {
    scroll-snap-type: y proximity;
  }

  /* Deux autres cas où on désactive tout le snap sur mobile (en plus du cas
     "cadre trop haut" ci-dessus) — les deux classes ci-dessous sont posées/
     retirées en JS par initScrollNav() dans main.html, voir les commentaires
     là-bas pour le détail :
     1) .scroll-snap-not-ready : les toutes premières millisecondes après le
        chargement de la page, le temps que la barre d'adresse mobile finisse
        de se rétracter et que l'avatar/les images aient fini de charger —
        activer le snap trop tôt pouvait faire "sauter" l'écran vers le
        mauvais cadre dès l'arrivée (jusqu'à donner l'impression de ne pas
        apparaître sur son propre cadre principal).
     2) .scroll-snap-editing : pendant que le propriétaire édite son profil
        (chaque frappe dans le pseudo/la bio redéclenche tout ce pipeline de
        rendu) — réévaluer/rebasculer le snap à chaque frappe provoquait des
        micro-sauts de scroll très perceptibles ("saccadé"), pour un effet
        plein écran de toute façon inutile pendant qu'on tape. */
  .profile.template-scroll.scroll-snap-not-ready,
  .profile.template-scroll.scroll-snap-editing {
    scroll-snap-type: none;
  }

  .scroll-snap-not-ready .scroll-slide,
  .scroll-snap-editing .scroll-slide {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
}

/* ==================== MESSAGERIE PRIVÉE ==================== */

/* Le bouton "Contacter" doit être visuellement identique au bouton
   "Voir profil" (même règle .user-box button) — on ajoute juste ce qu'il
   faut pour aligner l'icône avec le texte. */
#userBoxContactBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#userBoxContactBtn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ==================== HOTBAR : bouton "Partager" ====================
   Même gabarit que #dashboardBottomBtn (voir plus haut dans ce fichier),
   juste à droite de #closeBottomBtn dans #bottomBar (voir main.html). */
#shareBottomBtn {
  display: flex;
  align-items: center;
  gap: 6px;

  background: rgba(124,111,255,0.2);
  border: 1px solid rgba(124,111,255,0.35);
  color: #c4b5fd;

  padding: 8px 14px;
  border-radius: 999px;

  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;

  transition: 0.2s;
}

#shareBottomBtn i {
  width: 16px;
  height: 16px;
}

#shareBottomBtn:hover {
  background: rgba(124,111,255,0.4);
  transform: scale(1.04);
}

/* ==================== HOTBAR : bouton "Revoir le tuto" ====================
   Même gabarit que #dashboardBottomBtn/#shareBottomBtn ci-dessus — rejoue le
   tutoriel d'accueil à la demande (voir startOnboardingTour(true) tout en
   bas de main.html), seule entrée manuelle vers le tuto vu que le menu
   Paramètres de main.html a été retiré (voir plus haut dans ce fichier). */
#replayTutorialBtn {
  display: flex;
  align-items: center;
  gap: 6px;

  background: rgba(124,111,255,0.2);
  border: 1px solid rgba(124,111,255,0.35);
  color: #c4b5fd;

  padding: 8px 14px;
  border-radius: 999px;

  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;

  transition: 0.2s;
}

#replayTutorialBtn i {
  width: 16px;
  height: 16px;
}

#replayTutorialBtn:hover {
  background: rgba(124,111,255,0.4);
  transform: scale(1.04);
}

/* ==================== MODALE "Partager ce profil" ====================
   Ouverte depuis #shareBottomBtn (voir openShareModal en JS dans main.html).
   Réutilise .modal / .modal-content (voir plus haut) avec un gabarit un peu
   plus large pour les deux lignes d'URL + la rangée de réseaux sociaux.
   Léger flou du fond derrière la fenêtre (contrairement à .modal, qui reste
   un simple voile sombre) : le profil garde plein de widgets/couleurs
   visibles derrière, le flou aide à faire ressortir la fenêtre sans en
   rajouter un élément de plus à l'écran. */
#shareModal {
  background: rgba(5,5,15,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.share-modal-content {
  position: relative;
  width: 360px;
  max-width: 90vw;
}

.share-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.share-qr-box {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  display: inline-flex;
  margin: 4px 0 18px;
}

.share-url-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(120,120,255,0.12);
  text-align: left;
}

.share-url-row i {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #a78bfa;
}

.share-url-text {
  flex: 1;
  min-width: 0;
  font-family: monospace;
  font-size: 0.82rem;
  color: rgba(230,230,245,0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-copy-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.share-copy-btn i {
  width: 15px;
  height: 15px;
}

.share-socials-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

/* .share-social-btn utilise déjà .icon-btn (cercle 42px + hover, voir plus
   haut dans ce fichier) pour la forme et le survol — on ajoute juste ce qui
   lui manque : ne pas grossir au clic comme les autres .icon-btn (les icônes
   de marque ci-dessous sont plus grandes que les 20px habituels) et un
   alignement propre de l'<img> à l'intérieur. */
.share-social-btn:hover {
  transform: translateY(-2px);
}

.share-social-btn img {
  display: block;
}

/* ═══════════ Tutoriel d'accueil interactif (onboarding) ═══════════
   Petit guide pas-à-pas qui s'affiche automatiquement au tout premier
   passage du PROPRIÉTAIRE sur son propre profil (voir initOnboardingTour /
   startOnboardingTour en JS, tout en bas de main.html). Jamais affiché à un
   visiteur, jamais en aperçu téléphone (#phonePreviewIframe).

   Technique du "spotlight" : 4 rideaux opaques (haut/bas/gauche/droite)
   positionnés en JS autour du rectangle de l'élément ciblé, qui laissent un
   vrai trou cliquable au milieu (l'élément reste utilisable si besoin)
   plutôt qu'un simple box-shadow purement visuel qui n'aurait bloqué aucun
   clic ailleurs sur la page. Un 5e rideau plein écran (#obCurtainCenter)
   sert aux étapes "centrées" (bienvenue / fin) qui ne pointent rien.
   Reprend les tokens de couleur déjà déclarés en haut de ce fichier
   (--accent/--accent2/--text/--muted/--border-e/--surface-e) : rien de
   codé en dur, donc cohérent avec le thème sombre "verre" du reste du site
   (main.html ne propose pas de thème clair, contrairement à
   choose-username.html — pas besoin de variante ici). */

#onboardingTour {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999990; /* sous #uploadErrorModal (2147483647, la valeur la plus
                          haute utilisable) mais au-dessus de tout le reste,
                          y compris #mobileEditTabs (100003) et #editor/
                          #leftEditor (99998) qu'il doit pouvoir recouvrir
                          tout en les gardant visibles/atteignables via le
                          trou du spotlight. */
}

#onboardingTour.active {
  display: block;
}

.ob-curtain {
  position: fixed;
  background: rgba(6, 4, 20, 0.74);
  backdrop-filter: blur(1.5px);
  transition: top 0.25s ease, left 0.25s ease, right 0.25s ease,
              bottom 0.25s ease, width 0.25s ease, height 0.25s ease,
              opacity 0.2s ease;
}

#obCurtainCenter {
  inset: 0;
  display: none;
}

#onboardingTour.ob-centered #obCurtainCenter {
  display: block;
}

#onboardingTour.ob-centered .ob-curtain:not(#obCurtainCenter),
#onboardingTour.ob-centered #obSpotlightRing {
  display: none;
}

#obSpotlightRing {
  position: fixed;
  pointer-events: none;
  border-radius: 18px;
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px rgba(167, 139, 250, 0.35),
              0 0 34px 6px rgba(124, 111, 255, 0.55);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease,
              height 0.25s ease, border-radius 0.25s ease;
  animation: obPulse 1.8s ease-in-out infinite;
}

@keyframes obPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px rgba(167, 139, 250, 0.35),
                0 0 34px 6px rgba(124, 111, 255, 0.55);
  }
  50% {
    box-shadow: 0 0 0 4px var(--accent2), 0 0 0 9px rgba(167, 139, 250, 0.22),
                0 0 46px 12px rgba(124, 111, 255, 0.75);
  }
}

#obCard {
  position: fixed;
  width: min(340px, calc(100vw - 32px));
  background: var(--surface-e);
  border: 1px solid var(--border-e);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  padding: 20px 22px 18px;
  color: var(--text);
  transition: top 0.25s ease, left 0.25s ease, transform 0.25s ease;
}

#onboardingTour.ob-centered #obCard {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 32px));
  text-align: center;
}

.ob-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  margin-bottom: 12px;
}

#onboardingTour.ob-centered .ob-card-icon {
  margin-left: auto;
  margin-right: auto;
  width: 52px;
  height: 52px;
}

.ob-card-icon i {
  width: 22px;
  height: 22px;
}

#obCard h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

#obCard p {
  margin: 0 0 16px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

.ob-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

#onboardingTour.ob-centered .ob-progress {
  justify-content: center;
}

.ob-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(200, 200, 240, 0.25);
  transition: background 0.2s ease, width 0.2s ease;
}

.ob-dot.ob-dot-active {
  width: 18px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.ob-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#onboardingTour.ob-centered .ob-actions {
  justify-content: center;
}

.ob-skip {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  white-space: nowrap;
}

.ob-skip:hover {
  color: var(--text);
}

.ob-nav {
  display: flex;
  gap: 8px;
}

.ob-btn {
  border: 1px solid var(--border-e);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.ob-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ob-btn:active {
  transform: scale(0.97);
}

.ob-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
}

.ob-btn-primary:hover {
  filter: brightness(1.08);
}

.ob-btn[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 768px) {
  #obCard {
    width: calc(100vw - 24px);
    padding: 16px 18px 14px;
    /* Zone d'affichage sûre sur mobile (encoche/barre home) : le tutoriel
       partage cette convention avec le reste de l'app (voir #mobileEditTabs
       plus haut dans ce fichier). */
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  #obCard h3 {
    font-size: 0.98rem;
  }

  #obCard p {
    font-size: 0.84rem;
  }

  .ob-skip {
    font-size: 0.76rem;
  }

  .ob-btn {
    padding: 8px 11px;
    font-size: 0.78rem;
  }
}
/* ═══════════ Twitch : tag LIVE sur la photo de profil ═══════════
   Affiché uniquement quand le tag est activé ET que la personne est en live
   (voir renderTwitchLiveTag). Centré sous l'avatar pour ne pas gêner la
   pastille de statut Discord (en bas à droite). */
#avatarMediaWrap.twitch-live-ring > img,
#avatarMediaWrap.twitch-live-ring > .avatar-default-icon {
  box-shadow: 0 0 0 3px #eb0400, 0 0 22px rgba(235,4,0,0.45);
  animation: twitchLiveRing 2.4s ease-in-out infinite;
}

@keyframes twitchLiveRing {
  0%, 100% { box-shadow: 0 0 0 3px #eb0400, 0 0 14px rgba(235,4,0,0.35); }
  50%      { box-shadow: 0 0 0 3px #eb0400, 0 0 26px rgba(235,4,0,0.6); }
}

.twitch-live-tag {
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  z-index: 6;

  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 8px;
  border-radius: 6px;

  background: #eb0400;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-decoration: none;

  border: 2px solid rgba(10,10,22,0.95);
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.twitch-live-tag:hover {
  transform: translateX(-50%) scale(1.07);
}

.twitch-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: twitchLiveBlink 1.4s ease-in-out infinite;
}

@keyframes twitchLiveBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ═══════════ Twitch : widget "Live" (visible seulement en live) ═══════════ */
.twitch-live-slot {
  width: 100%;
  margin-top: 15px;
}

.twitch-live-card {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(145,70,255,0.08);
  border: 1px solid rgba(145,70,255,0.28);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  text-align: left;
}

.twitch-live-card.twitch-live-ghost {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-style: dashed;
  opacity: 0.7;
  box-shadow: none;
}

.twitch-live-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0e0e10 center / cover no-repeat;
}

.twitch-live-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.twitch-live-media .twitch-live-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 5px;
  background: #eb0400;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.twitch-live-viewers {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}

.twitch-live-viewers i,
.twitch-live-viewers svg {
  width: 12px;
  height: 12px;
}

.twitch-live-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: rgba(145,70,255,0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  transition: transform 0.15s ease, background 0.15s ease;
}

.twitch-live-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: #9146FF;
}

.twitch-live-play i,
.twitch-live-play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.twitch-live-info {
  padding: 12px 14px 0;
  min-width: 0;
}

.twitch-live-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twitch-live-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 0.76rem;
  color: rgba(200,200,240,0.6);
}

.twitch-live-sep {
  opacity: 0.5;
}

.twitch-live-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 14px 14px;
  padding: 9px;
  border-radius: 10px;
  background: #9146FF;
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  transition: background 0.15s ease;
}

.twitch-live-cta:hover {
  background: #772ce8;
}
/* ═══════════ Mobile : cadre de profil en plein écran ═══════════
   Sur téléphone, le cadre (.header, et chaque .scroll-page-card du template
   Scroll) occupe tout l'écran, bord à bord : plus de marge autour, plus de
   coins arrondis, et au moins la hauteur de l'écran — on ne voit donc plus
   l'arrière-plan "nu" autour ou en dessous du cadre. L'arrière-plan reste
   visible À TRAVERS le cadre (couleur/opacité/flou réglés dans le menu
   "Cadre de profil", voir applyFrameStyle). Bloc placé en fin de fichier
   (+ !important) pour passer devant les règles des templates et les styles
   inline posés en JS (max-width/margin du Scroll, zoom auto). */
@media (max-width: 768px) {

  body {
    padding: 0 !important;
    align-items: stretch;
    justify-content: stretch;
  }

  .profile,
  .profile.template-landscape,
  .profile.template-banner,
  .profile.template-minimal,
  .profile.template-sidebar,
  .profile.template-classic {
    width: 100%;
    max-width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    zoom: 1 !important;
  }

  .header,
  .scroll-page-card {
    flex: 1 0 auto;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    zoom: 1 !important;

    /* Zones sûres (encoche en haut, barre home en bas) */
    padding-top: calc(2.4rem + env(safe-area-inset-top)) !important;
    padding-bottom: calc(6rem + env(safe-area-inset-bottom)) !important;
    padding-left: max(1.2rem, env(safe-area-inset-left)) !important;
    padding-right: max(1.2rem, env(safe-area-inset-right)) !important;
  }

  /* Contenu centré verticalement dans le cadre plein écran.
     "align-content: center" centre le contenu d'un bloc normal (Classic,
     Minimal, Sidebar, 1re page du Scroll) ET d'une grille (Paysage) sans
     changer leur mise en page (marges, float de l'avatar Minimal…).
     Banner et les pages du Scroll sont déjà en flex colonne : c'est
     "justify-content" qui centre dans ce cas. Si le contenu est plus haut
     que l'écran, le cadre grandit simplement (min-height) : rien n'est coupé. */
  .header {
    align-content: center;
  }

  .template-banner .header,
  .scroll-page-card {
    justify-content: center;
  }

  /* Banner : la bannière doit rester collée en haut, bord à bord */
  .template-banner .header {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Template Scroll : chaque page = un écran plein, cadre compris */
  .scroll-slide {
    align-items: stretch;
  }

  /* L'effet 3D (inclinaison vers la souris) décalerait le cadre et
     laisserait apparaître des bords d'arrière-plan : désactivé sur mobile. */
  .header.profile-3d-active,
  .scroll-page-card.profile-3d-active {
    transform: none !important;
  }
}

/* ═══════════ Mobile : scroll fluide (plus d'affichage "à moitié chargé") ═══════════
   Sur téléphone, pendant 1-2 s de scroll, une partie de la page restait
   noire / à moitié dessinée. Deux causes, toutes deux propres au mobile :

   1) "background-attachment: fixed" sur <body> : les navigateurs mobiles
      (Chrome Android surtout) ne savent pas l'accélérer et redessinent TOUTE
      la page à chaque image du scroll — ils prennent du retard et affichent
      des zones vides le temps de rattraper. On passe le fond en "scroll", et
      on le recopie (background: inherit = même image/couleur/dégradé que
      celle posée en JS sur <body>) dans un calque fixe plein écran
      (body::before) : visuellement identique (le fond ne bouge toujours
      pas), mais dessiné une seule fois. z-index -3 : sous la vidéo
      d'arrière-plan (#bgVideoEl, -2) et sous .bg-overlay (-1).

   2) Les flous "verre dépoli" imbriqués (backdrop-filter sur chaque lien,
      badge, carte… À L'INTÉRIEUR d'un cadre lui-même déjà flouté) : très
      coûteux à recalculer pendant le scroll sur un téléphone, pour une
      différence quasi invisible (ce qu'il y a derrière eux est déjà flou).
      On garde le flou du cadre lui-même (réglage "Cadre de profil"), on
      retire seulement ceux qui sont dedans. */
@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background: inherit;
    background-attachment: scroll;
  }

  .header *,
  .scroll-page-card * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ═══════════ Mobile : flou du cadre sans ralentir le scroll ═══════════
   Sur téléphone, le haut des cadres (surtout en template Scroll) restait
   parfois vide 1-2 s pendant le scroll. Cause : chaque cadre plein écran
   portait son propre "backdrop-filter: blur" (+ will-change / translateZ,
   qui en font un énorme calque GPU chacun). Plusieurs calques de la taille
   de l'écran avec flou en direct dépassent la mémoire graphique d'un
   téléphone : le navigateur jette des morceaux et les redessine en retard.

   Or sur mobile le cadre couvre TOUT l'écran : flouter ce qu'il y a derrière
   lui revient exactement à flouter l'arrière-plan entier. On applique donc
   le flou UNE seule fois, sur le calque de fond fixe (body::before, voir
   bloc précédent) et sur la vidéo de fond, avec la valeur réglée dans
   "Cadre de profil" (variable --frame-blur posée par applyFrameStyle), et
   on retire le flou en direct des cadres. Rendu identique, scroll léger. */
@media (max-width: 768px) {
  body::before {
    inset: -60px;              /* évite les bords flous/transparents */
    filter: blur(var(--frame-blur, 20px));
  }

  #bgVideoEl {
    filter: blur(var(--frame-blur, 20px));
    transform: scale(1.08);
  }

  .header,
  .scroll-page-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
    transform: none !important;
  }
}

/* ═══════════ Correctif : scroll horizontal parasite sur mobile ═══════════
   L'infobulle "Signaler ce profil" du bouton drapeau (#reportBtn, collé au
   bord droit du cadre) était centrée sous/au-dessus du bouton : même
   invisible (opacity 0), elle dépassait de l'écran à droite, ce qui
   élargissait la page d'une vingtaine de pixels → on pouvait scroller vers
   la droite. On l'affiche désormais à GAUCHE du bouton, toujours dans
   l'écran. */
#reportBtn.profile-badge-tip::before {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 8px);
  transform: translateY(-50%) translateX(4px);
}

#reportBtn.profile-badge-tip:hover::before {
  transform: translateY(-50%) translateX(0);
}

/* Filet de sécurité : sur mobile, rien ne doit jamais pouvoir élargir la
   page (infobulle, widget trop large, effet…). "clip" (et non "hidden") ne
   crée pas de conteneur de scroll : n'affecte ni position: sticky ni le
   scroll vertical. "hidden" juste avant = repli pour les vieux navigateurs. */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    overflow-x: clip;
  }
}

/* ═══════════ Cadre de profil : coins carrés / photo carrée ═══════════
   Classes posées sur <body> par applyFrameStyle() (userData.frameShape /
   userData.avatarShape, menu "Cadre de profil"). !important nécessaire :
   chaque template fixe son propre border-radius, et render() pose un
   border-radius:50% en style inline sur la photo. Sur mobile, le cadre est
   déjà en plein écran sans arrondi (voir "Mobile : cadre de profil en plein
   écran"), donc seule la photo change là-bas. */
body.frame-shape-square .header,
body.frame-shape-square .scroll-page-card {
  border-radius: 0 !important;
}

body.avatar-shape-square #avatarMediaWrap,
body.avatar-shape-square #avatarMediaWrap > img,
body.avatar-shape-square #avatarMediaWrap > .avatar-default-icon,
body.avatar-shape-square #avatarMediaWrap > .avatar-upload-placeholder,
body.avatar-shape-square #avatarMediaWrap .avatar-edit-overlay {
  border-radius: 0 !important;
}

/* ═══════════ Widget "Rendez-vous" : rendu sur le profil ═══════════
   Carte glassmorphique alignée sur les autres widgets (voir .link,
   .location-widget-card). Ouvre .booking-modal (fenêtre de réservation :
   type → jour → heure → coordonnées), injectée en JS dans <body>. */
.booking-widget {
  width: 100%;
  margin-top: 15px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: left;
  box-sizing: border-box;
}
.booking-widget:empty { display: none; }
.booking-widget-top { display: flex; align-items: center; gap: 12px; }
.booking-widget-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,111,255,0.18); color: #c4b5fd;
}
.booking-widget-icon i, .booking-widget-icon svg { width: 20px; height: 20px; }
.booking-widget-info { min-width: 0; }
.booking-widget-title { font-weight: 700; font-size: 0.95rem; color: #fff; }
.booking-widget-sub { font-size: 0.8rem; color: rgba(200,200,240,0.65); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-widget-desc { font-size: 0.84rem; line-height: 1.45; color: rgba(230,230,245,0.8); margin-top: 10px; white-space: pre-line; }
.booking-widget-btn {
  margin-top: 14px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; border-radius: 12px; border: none;
  background: #fff; color: #111;
  font-family: inherit; font-weight: 700; font-size: 0.86rem;
  cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease;
}
.booking-widget-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.booking-widget-btn i, .booking-widget-btn svg { width: 16px; height: 16px; }
.booking-widget.booking-widget-hint {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1.5px dashed rgba(124,111,255,0.35);
  color: rgba(200,200,240,0.65);
  font-size: 0.84rem; line-height: 1.45;
}
.booking-widget-hint i, .booking-widget-hint svg { width: 22px; height: 22px; flex-shrink: 0; color: #a78bfa; }
.booking-widget-hint a { color: #a78bfa; font-weight: 600; text-decoration: none; }
.booking-widget-hint a:hover { text-decoration: underline; }

/* ── Fenêtre de réservation ── */
.booking-modal {
  position: fixed; inset: 0; z-index: 2147483000;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: none; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}
.booking-modal.active { display: flex; }
.booking-dialog {
  width: 100%; max-width: 420px; max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  background: rgba(12,12,26,0.98);
  border: 1px solid rgba(120,120,255,0.15);
  border-radius: 22px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8);
  color: #f0f0ff;
  overflow: hidden;
  animation: bookingIn 0.22s ease;
}
@keyframes bookingIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.booking-head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 10px; }
.booking-head-text { flex: 1; min-width: 0; text-align: center; }
.booking-head-title { font-weight: 700; font-size: 1rem; }
.booking-head-sub { font-size: 0.78rem; color: rgba(200,200,240,0.6); margin-top: 2px; min-height: 1em; }
.booking-back, .booking-close {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.05);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 13px; transition: 0.2s;
}
.booking-back:hover { background: rgba(124,111,255,0.25); }
.booking-close:hover { background: rgba(239,68,68,0.25); border-color: rgba(239,68,68,0.3); }
.booking-back i, .booking-back svg { width: 18px; height: 18px; }
.booking-steps { display: flex; gap: 6px; padding: 0 16px 12px; }
.booking-step {
  flex: 1; text-align: center; font-size: 0.68rem; font-weight: 600;
  color: rgba(200,200,240,0.4); padding-top: 7px;
  border-top: 3px solid rgba(255,255,255,0.08);
}
.booking-step.done { color: rgba(200,200,240,0.7); border-top-color: rgba(124,111,255,0.55); }
.booking-step.current { color: #c4b5fd; border-top-color: #7c6fff; }
.booking-body { padding: 4px 16px 18px; overflow-y: auto; }

.booking-types { display: flex; flex-direction: column; gap: 8px; }
.booking-type {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; border-radius: 14px; text-align: left;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: #fff; font-family: inherit; cursor: pointer; transition: 0.2s;
}
.booking-type:hover { background: rgba(124,111,255,0.12); border-color: rgba(124,111,255,0.35); }
.booking-type-icon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(124,111,255,0.18); color: #c4b5fd; }
.booking-type-icon i, .booking-type-icon svg { width: 18px; height: 18px; }
.booking-type-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.booking-type-text b { font-size: 0.9rem; }
.booking-type-text small { font-size: 0.76rem; color: rgba(200,200,240,0.6); }
.booking-type-arrow { width: 16px; height: 16px; color: rgba(200,200,240,0.4); }

.booking-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.booking-cal-month { font-weight: 700; font-size: 0.92rem; }
.booking-cal-nav {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.booking-cal-nav:hover:not(:disabled) { background: rgba(124,111,255,0.25); }
.booking-cal-nav:disabled { opacity: 0.3; cursor: default; }
.booking-cal-nav i, .booking-cal-nav svg { width: 16px; height: 16px; }
.booking-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.booking-cal-dow span { text-align: center; font-size: 0.68rem; font-weight: 700; color: rgba(200,200,240,0.4); padding: 4px 0; }
.booking-day {
  aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: rgba(200,200,240,0.28);
  font-family: inherit; font-size: 0.84rem; font-weight: 600; cursor: default;
  position: relative; transition: 0.15s;
}
.booking-day.available { background: rgba(124,111,255,0.12); color: #fff; cursor: pointer; }
.booking-day.available:hover { background: rgba(124,111,255,0.3); }
.booking-day.today::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.booking-day.selected { background: #7c6fff; color: #fff; }
.booking-tz { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 0.74rem; color: rgba(200,200,240,0.5); }
.booking-tz i, .booking-tz svg { width: 13px; height: 13px; }

.booking-date-label { font-weight: 700; font-size: 0.9rem; margin-bottom: 12px; text-align: center; }
.booking-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.booking-time {
  padding: 11px 0; border-radius: 11px; border: 1px solid rgba(124,111,255,0.3);
  background: rgba(124,111,255,0.08); color: #fff;
  font-family: inherit; font-weight: 700; font-size: 0.86rem; cursor: pointer; transition: 0.15s;
}
.booking-time:hover { background: rgba(124,111,255,0.25); border-color: rgba(124,111,255,0.6); }
.booking-time.selected { background: #7c6fff; border-color: #7c6fff; }

.booking-recap {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px;
  border-radius: 14px; background: rgba(124,111,255,0.1); border: 1px solid rgba(124,111,255,0.25);
}
.booking-recap > i, .booking-recap > svg { width: 20px; height: 20px; color: #c4b5fd; flex-shrink: 0; }
.booking-recap b { display: block; font-size: 0.88rem; }
.booking-recap span { font-size: 0.78rem; color: rgba(200,200,240,0.7); }
.booking-form { display: flex; flex-direction: column; gap: 10px; }
.booking-form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; font-weight: 600; color: rgba(200,200,240,0.7); text-align: left; }
.booking-form label small { font-weight: 500; color: rgba(200,200,240,0.4); }
.booking-form input, .booking-form textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 11px;
  border: 1px solid rgba(120,120,255,0.18); background: rgba(255,255,255,0.04);
  color: #fff; font-family: inherit; font-size: 0.88rem; outline: none; resize: vertical;
  transition: border-color 0.15s ease;
}
.booking-form input:focus, .booking-form textarea:focus { border-color: rgba(124,111,255,0.7); }
.booking-error { color: #f87171; font-size: 0.8rem; min-height: 0; }
.booking-error:empty { display: none; }
.booking-primary {
  width: 100%; padding: 12px 14px; margin-top: 4px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
  font-family: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: 0.2s;
}
.booking-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 25px rgba(99,102,241,0.35); }
.booking-primary:disabled { opacity: 0.6; cursor: default; }
.booking-note { font-size: 0.74rem; color: rgba(200,200,240,0.5); text-align: center; }

.booking-loading, .booking-empty { text-align: center; padding: 28px 10px; font-size: 0.84rem; color: rgba(200,200,240,0.6); }
.booking-spinner { display: block; width: 22px; height: 22px; margin: 0 auto 10px; border-radius: 50%; border: 2.5px solid rgba(124,111,255,0.25); border-top-color: #7c6fff; animation: bookingSpin 0.8s linear infinite; }
@keyframes bookingSpin { to { transform: rotate(360deg); } }

.booking-done { text-align: center; padding: 8px 0 0; }
.booking-done-icon { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(74,222,128,0.14); color: #4ade80; }
.booking-done-icon.pending { background: rgba(251,191,36,0.14); color: #fbbf24; }
.booking-done-icon i, .booking-done-icon svg { width: 28px; height: 28px; }
.booking-done-title { font-weight: 800; font-size: 1.1rem; }
.booking-done-when { margin-top: 8px; font-weight: 600; font-size: 0.9rem; }
.booking-done-when span { font-size: 0.76rem; font-weight: 500; color: rgba(200,200,240,0.55); }
.booking-done-text { font-size: 0.82rem; line-height: 1.5; color: rgba(200,200,240,0.7); margin: 12px 0 14px; }
.booking-done-details { text-align: left; padding: 10px 12px; margin-bottom: 14px; border-radius: 12px; background: rgba(255,255,255,0.05); font-size: 0.82rem; line-height: 1.45; white-space: pre-line; word-break: break-word; }
.booking-done-details b { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #a78bfa; margin-bottom: 4px; }

@media (max-width: 480px) {
  .booking-modal { align-items: flex-end; padding: 0; }
  .booking-dialog { max-width: none; max-height: 92vh; border-radius: 22px 22px 0 0; }
}

/* ═══════════ Widgets Creator personnalisables ═══════════
   Produit vedette / Galerie / Carrousel / Liste / Don / Formule VIP.
   Apparence pilotée par des variables posées en JS (voir crwWrap) :
   --crw-accent (couleur), --crw-on-accent (texte sur bouton plein),
   classes crw-r-* (arrondis) et crw-b-* (style de bouton). */
.crw {
  --crw-accent: #7c6fff;
  --crw-on-accent: #fff;
  --crw-rad: 16px;
  --crw-rad-sm: 10px;
  width: 100%;
  margin-top: 15px;
  text-align: left;
  color: #fff;
  box-sizing: border-box;
}
.crw *, .crw *::before, .crw *::after { box-sizing: border-box; }
.crw.crw-r-square { --crw-rad: 4px; --crw-rad-sm: 3px; }
.crw.crw-r-round { --crw-rad: 26px; --crw-rad-sm: 999px; }

.crw-head { margin-bottom: 12px; }
.crw-title { font-weight: 800; font-size: 1.02rem; line-height: 1.25; }
.crw-subtitle { font-size: 0.82rem; color: rgba(220,220,245,0.65); margin-top: 3px; line-height: 1.4; }
.crw-name { font-weight: 700; font-size: 0.93rem; line-height: 1.3; overflow-wrap: anywhere; }
.crw-desc { font-size: 0.8rem; line-height: 1.45; color: rgba(220,220,245,0.68); margin-top: 4px; white-space: pre-line; overflow-wrap: anywhere; }
.crw-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.crw-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--crw-accent); margin-bottom: 4px; }
.crw-price { font-weight: 800; font-size: 0.95rem; margin-top: 6px; }
.crw-price s { font-weight: 500; font-size: 0.8rem; color: rgba(220,220,245,0.45); margin-left: 4px; }
.crw-owned { color: #4ade80; }
.crw-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 4px 10px; border-radius: var(--crw-rad-sm);
  background: var(--crw-accent); color: var(--crw-on-accent);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

/* Boutons */
.crw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; margin-top: 12px; border-radius: var(--crw-rad-sm);
  border: 1.5px solid var(--crw-accent);
  background: var(--crw-accent); color: var(--crw-on-accent);
  font-family: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.crw-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.crw-btn:disabled { opacity: 0.6; cursor: default; }
.crw-btn i, .crw-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.crw-b-outline .crw-btn { background: transparent; color: #fff; }
.crw-b-outline .crw-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--crw-accent) 18%, transparent); }
.crw-b-light .crw-btn { background: #fff; border-color: #fff; color: #111; }
.crw-btn-block { width: 100%; }
.crw-btn-sm { padding: 7px 12px; margin-top: 8px; font-size: 0.78rem; }
.crw-btn-price { margin-left: auto; padding-left: 10px; font-weight: 800; opacity: 0.9; }

/* Vignettes */
.crw-thumb {
  position: relative; width: 100%; overflow: hidden;
  border-radius: var(--crw-rad-sm);
  background: linear-gradient(145deg, color-mix(in srgb, var(--crw-accent) 28%, #0b0b16), #0b0b16);
}
.crw-thumb img, .crw-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.crw-thumb img.crw-locked-img { transform: scale(1.08); }
.crw-thumb-icon { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.8); }
.crw-thumb-icon > i, .crw-thumb-icon > svg { position: relative; }
.crw-lock {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: #fff; backdrop-filter: blur(6px);
}
.crw-play { right: 50%; bottom: 50%; transform: translate(50%, 50%); width: 36px; height: 36px; }
.crw-ratio-square { aspect-ratio: 1 / 1; }
.crw-ratio-portrait { aspect-ratio: 4 / 5; }
.crw-ratio-landscape { aspect-ratio: 16 / 10; }

/* Produit vedette */
.crw-product-inner {
  border-radius: var(--crw-rad); overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.crw-product-media { position: relative; cursor: pointer; }
.crw-product-media .crw-thumb { border-radius: 0; }
.crw-thumb-hero { aspect-ratio: 16 / 10; }
.crw-product-body { padding: 16px; }
.crw-product-card .crw-product-body .crw-btn { width: 100%; }
.crw-product-horizontal .crw-product-inner { display: flex; align-items: stretch; }
.crw-product-horizontal .crw-product-media { width: 40%; flex-shrink: 0; }
.crw-product-horizontal .crw-thumb-hero { aspect-ratio: auto; height: 100%; min-height: 150px; }
.crw-product-horizontal .crw-product-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.crw-product-horizontal .crw-btn { align-self: flex-start; }
.crw-product-banner .crw-product-inner { position: relative; }
.crw-product-banner .crw-thumb-hero { aspect-ratio: 16 / 9; }
.crw-product-banner .crw-product-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85)); pointer-events: none; }
.crw-product-banner .crw-product-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 12px; pointer-events: none; }
.crw-product-banner .crw-product-body > * { pointer-events: auto; }
.crw-product-banner .crw-product-body > .crw-kind,
.crw-product-banner .crw-product-body > .crw-name,
.crw-product-banner .crw-product-body > .crw-desc,
.crw-product-banner .crw-product-body > .crw-countdown { flex-basis: 100%; }
.crw-product-banner .crw-desc { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.crw-product-banner .crw-btn { margin-top: 6px; }
.crw-product-banner .crw-product-media .crw-lock { display: none; }
@media (max-width: 480px) {
  .crw-product-horizontal .crw-product-inner { flex-direction: column; }
  .crw-product-horizontal .crw-product-media { width: 100%; }
  .crw-product-horizontal .crw-thumb-hero { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .crw-product-banner .crw-thumb-hero { aspect-ratio: 4 / 5; }
}
.crw-countdown {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 6px 10px; border-radius: var(--crw-rad-sm);
  background: color-mix(in srgb, var(--crw-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--crw-accent) 45%, transparent);
  font-size: 0.76rem; color: #fff;
}
.crw-countdown b { font-variant-numeric: tabular-nums; }
.crw-countdown i, .crw-countdown svg { color: var(--crw-accent); }
.crw-product-button .crw-countdown { display: flex; justify-content: center; }

/* Galerie */
.crw-grid { display: grid; gap: 10px; }
.crw-tile {
  display: block; width: 100%; padding: 0; border: none; background: none; color: inherit;
  font-family: inherit; text-align: left; cursor: pointer;
  transition: transform 0.2s ease;
}
.crw-tile:hover { transform: translateY(-3px); }
.crw-tile .crw-thumb { border: 1px solid rgba(255,255,255,0.08); border-radius: var(--crw-rad); }
.crw-tile-info { display: flex; flex-direction: column; gap: 1px; padding: 7px 2px 0; min-width: 0; }
.crw-tile-name { font-weight: 700; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crw-tile-price { font-size: 0.75rem; font-weight: 700; color: var(--crw-accent); }

/* Carrousel */
.crw-car-wrap { position: relative; }
.crw-car-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--crw-card, 170px); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 2px 2px 6px;
}
.crw-car-track::-webkit-scrollbar { display: none; }
.crw-car-card {
  scroll-snap-align: start; display: flex; flex-direction: column;
  border-radius: var(--crw-rad); overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.09);
}
.crw-car-card .crw-tile:hover { transform: none; }
.crw-car-card .crw-tile .crw-thumb { border: none; border-radius: 0; }
.crw-car-body { padding: 10px 11px 12px; display: flex; flex-direction: column; flex: 1; }
.crw-car-body .crw-name { font-size: 0.84rem; }
.crw-car-body .crw-price { font-size: 0.85rem; margin-top: auto; padding-top: 6px; }
.crw-car-body .crw-btn { width: 100%; }
.crw-car-nav {
  position: absolute; top: 35%; z-index: 2; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,22,0.8); border: 1px solid rgba(255,255,255,0.14); color: #fff;
  cursor: pointer; backdrop-filter: blur(8px); transition: 0.2s;
}
.crw-car-nav:hover { background: var(--crw-accent); color: var(--crw-on-accent); }
.crw-car-nav.prev { left: -10px; }
.crw-car-nav.next { right: -10px; }
@media (hover: none) { .crw-car-nav { display: none; } }

/* Liste */
.crw-rows {
  border-radius: var(--crw-rad); overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.09);
}
.crw-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.crw-row + .crw-row { border-top: 1px solid rgba(255,255,255,0.07); }
.crw-num { width: 22px; flex-shrink: 0; text-align: center; font-weight: 800; font-size: 0.85rem; color: var(--crw-accent); }
.crw-row-thumb { width: 48px; flex-shrink: 0; padding: 0; border: none; background: none; cursor: pointer; }
.crw-row-thumb .crw-thumb-icon i, .crw-row-thumb .crw-thumb-icon svg { width: 20px !important; height: 20px !important; }
.crw-row-thumb .crw-lock { width: 18px; height: 18px; right: 3px; bottom: 3px; }
.crw-row-thumb .crw-lock i, .crw-row-thumb .crw-lock svg { width: 10px !important; height: 10px !important; }
.crw-row-body { flex: 1; min-width: 0; }
.crw-row-body .crw-name { font-size: 0.88rem; }
.crw-row-body .crw-desc { margin-top: 2px; font-size: 0.76rem; }
.crw-row-end { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; }
.crw-row-end .crw-price { margin-top: 0; font-size: 0.88rem; }
.crw-row-end .crw-btn { margin-top: 5px; }

/* Don */
.crw-donation {
  padding: 20px 18px; text-align: center; border-radius: var(--crw-rad);
  background: linear-gradient(160deg, color-mix(in srgb, var(--crw-accent) 22%, transparent), rgba(255,255,255,0.03));
  border: 1px solid color-mix(in srgb, var(--crw-accent) 40%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.crw-don-icon { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--crw-accent); color: var(--crw-on-accent); }
.crw-donation .crw-desc { margin-top: 8px; }
.crw-amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; margin-top: 16px; }
.crw-amount {
  padding: 10px 6px; border-radius: var(--crw-rad-sm);
  border: 1.5px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: #fff;
  font-family: inherit; font-weight: 800; font-size: 0.9rem; cursor: pointer; transition: 0.15s;
}
.crw-amount:hover { border-color: var(--crw-accent); }
.crw-amount.active { background: var(--crw-accent); border-color: var(--crw-accent); color: var(--crw-on-accent); }
.crw-custom { position: relative; margin-top: 10px; }
.crw-custom input {
  width: 100%; padding: 10px 30px 10px 12px; border-radius: var(--crw-rad-sm);
  border: 1.5px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: #fff;
  font-family: inherit; font-size: 0.88rem; font-weight: 600; outline: none; text-align: center;
}
.crw-custom input:focus { border-color: var(--crw-accent); }
.crw-custom span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: rgba(220,220,245,0.5); font-weight: 700; }

/* Formule VIP */
.crw-lifetime {
  padding: 22px 20px; border-radius: var(--crw-rad);
  background: linear-gradient(150deg, color-mix(in srgb, var(--crw-accent) 26%, transparent), rgba(255,255,255,0.03) 70%);
  border: 1px solid color-mix(in srgb, var(--crw-accent) 45%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.crw-lifetime.crw-glow { box-shadow: 0 0 0 1px color-mix(in srgb, var(--crw-accent) 40%, transparent), 0 14px 40px color-mix(in srgb, var(--crw-accent) 30%, transparent); }
.crw-lifetime .crw-title { font-size: 1.15rem; }
.crw-big-price { font-size: 1.6rem; font-weight: 900; margin: 10px 0 4px; }
.crw-big-price small { font-size: 0.72rem; font-weight: 500; color: rgba(220,220,245,0.6); }
.crw-perks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.crw-perks li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem; color: rgba(230,230,250,0.85); }
.crw-perks li i, .crw-perks li svg { flex-shrink: 0; margin-top: 1px; color: var(--crw-accent); }
.crw-lifetime .crw-btn { margin-top: 16px; }

/* Aide (propriétaire uniquement) */
.crw-hint {
  display: flex; align-items: center; gap: 12px; margin-top: 15px; padding: 14px;
  border-radius: 14px; border: 1.5px dashed rgba(124,111,255,0.35); background: rgba(255,255,255,0.03);
  color: rgba(200,200,240,0.65); font-size: 0.84rem; line-height: 1.45; text-align: left;
}
.crw-hint i, .crw-hint svg { flex-shrink: 0; color: #a78bfa; }
.crw-hint a { color: #a78bfa; font-weight: 600; text-decoration: none; }

/* Fiche produit */
.crw-modal {
  position: fixed; inset: 0; z-index: 99990;
  display: none; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-family: 'Inter', sans-serif;
}
.crw-modal.active { display: flex; }
.crw-modal-dialog {
  position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto;
  margin: 0; border-radius: var(--crw-rad);
  background: rgba(12,12,26,0.98); border: 1px solid rgba(120,120,255,0.15);
  box-shadow: 0 40px 100px rgba(0,0,0,0.8);
  animation: crwIn 0.2s ease;
}
@keyframes crwIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.crw-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 13px; cursor: pointer;
}
.crw-modal-close:hover { background: rgba(239,68,68,0.6); }
.crw-modal-media { position: relative; background: #000; min-height: 180px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.crw-modal-media img, .crw-modal-media video { display: block; width: 100%; max-height: 55vh; object-fit: contain; }
.crw-modal-media.locked img { transform: scale(1.06); }
.crw-modal-icon { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.8); background: linear-gradient(145deg, color-mix(in srgb, var(--crw-accent) 30%, #0b0b16), #0b0b16); }
.crw-modal-lock {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  font-size: 0.76rem; font-weight: 600;
}
.crw-modal-body { padding: 18px; }
.crw-modal-body .crw-name { font-size: 1.1rem; }
.crw-modal-body .crw-desc { font-size: 0.86rem; }
.crw-modal-body .crw-price { font-size: 1.2rem; margin-top: 10px; }
.crw-modal-body .crw-btn { margin-top: 14px; padding: 12px 16px; }
@media (max-width: 480px) {
  .crw-modal { align-items: flex-end; padding: 0; }
  .crw-modal-dialog { max-width: none; max-height: 92vh; border-radius: 22px 22px 0 0; }
}

/* ── Fenêtre de personnalisation (éditeur) ── */
.crw-config { max-width: 1040px; height: auto; max-height: 90vh; padding: 24px; }
.crw-config .widget-header h2 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.crw-config-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; min-height: 0; flex: 1; overflow: hidden; }
.crw-config-form { overflow-y: auto; padding-right: 6px; display: flex; flex-direction: column; gap: 14px; }
.crw-config-preview { display: flex; flex-direction: column; min-height: 0; }
.crw-preview-label { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(167,139,250,0.8); margin-bottom: 8px; }
.crw-preview-stage {
  flex: 1; overflow-y: auto; padding: 18px; border-radius: 18px;
  background: radial-gradient(circle at top, #1f1f38, #0a0a12);
  border: 1px solid rgba(255,255,255,0.06);
}
.crw-preview-stage #crwPreview { pointer-events: none; }
.crw-preview-stage .crw:first-child, .crw-preview-stage .crw-hint:first-child { margin-top: 0; }
.crw-config-foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.crw-config-foot .settings-apply-btn { min-width: 200px; }
.crw-section { padding: 16px; border-radius: 16px; background: rgba(255,255,255,0.025); border: 1px solid rgba(120,120,255,0.1); display: flex; flex-direction: column; gap: 12px; }
.crw-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(167,139,250,0.8); }
.crw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.crw-field > label { font-size: 0.78rem; font-weight: 600; color: rgba(200,200,240,0.6); margin: 0 !important; }
.crw-field .settings-input { width: 100%; }
.crw-field .settings-hint a { color: #a78bfa; }
.crw-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crw-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(120,120,255,0.12); }
.crw-seg button { flex: 1; min-width: 0; padding: 7px 8px; border-radius: 8px; border: none; background: transparent; color: rgba(200,200,240,0.65); font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: 0.15s; }
.crw-seg button:hover { color: #fff; }
.crw-seg button.active { background: rgba(124,111,255,0.35); color: #fff; }
.crw-toggle { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; font-size: 0.84rem !important; font-weight: 500 !important; color: rgba(230,230,245,0.85) !important; cursor: pointer; }
.crw-toggle input { width: 16px; height: 16px; accent-color: #7c6fff; margin: 0; cursor: pointer; }
.crw-colors { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crw-color { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); cursor: pointer; padding: 0; transition: transform 0.15s; position: relative; }
.crw-color:hover { transform: scale(1.1); }
.crw-color.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(124,111,255,0.6); }
.crw-color-custom { display: flex !important; align-items: center; justify-content: center; margin: 0 !important; background: conic-gradient(#f43f5e, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef, #f43f5e); color: #fff; overflow: hidden; }
.crw-color-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.crw-color-custom i, .crw-color-custom svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); pointer-events: none; }
.crw-picker { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; margin-top: 8px; }
.crw-pick { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid transparent; }
.crw-pick.on { background: rgba(124,111,255,0.12); border-color: rgba(124,111,255,0.3); }
.crw-pick label { flex: 1; min-width: 0; display: flex !important; align-items: center; gap: 8px; margin: 0 !important; font-size: 0.82rem !important; font-weight: 500 !important; color: #fff !important; cursor: pointer; }
.crw-pick label span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crw-pick label small { color: rgba(200,200,240,0.5); font-size: 0.74rem; flex-shrink: 0; }
.crw-pick input, .crw-toggle input { width: 16px !important; height: 16px !important; min-width: 0 !important; flex: 0 0 16px !important; padding: 0 !important; accent-color: #7c6fff; margin: 0 !important; }
.crw-pick-move { display: flex; gap: 2px; flex-shrink: 0; }
.crw-pick-move button { width: 24px; height: 24px; border-radius: 6px; border: none; background: rgba(255,255,255,0.06); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.crw-pick-move button:disabled { opacity: 0.25; cursor: default; }
@media (max-width: 860px) {
  .crw-config { padding: 18px; max-height: 94vh; width: 96%; }
  .crw-config-cols { grid-template-columns: 1fr; overflow-y: auto; }
  .crw-config-form { overflow: visible; padding-right: 0; }
  .crw-config-preview { order: -1; }
  .crw-preview-stage { max-height: 300px; }
  .crw-2col { grid-template-columns: 1fr; }
}


/* ═══════════ Éditeur "Aperçu du lien" (carte og:image Discord / X) ═══════════
   Voir #ogEditorModal dans main.html. Deux colonnes : aperçu à gauche
   (canvas éditable ou simulation Discord / X), réglages à droite. */

#ogEditorModal { z-index: 100000; }

.og-editor {
  width: 94%;
  max-width: 1280px;
  height: 88vh;
  max-height: 860px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  background: rgba(10,10,22,0.97);
  border: 1px solid rgba(120,120,255,0.15);
  border-radius: 24px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  color: #f0f0ff;
}

.og-editor-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 26px 20px;
  gap: 14px;
}

.og-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.og-editor-close-mobile { display: none; }

.og-view-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.og-view-tabs-spacer { flex: 1; }

.og-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(230,230,245,0.7);
  font: 600 0.8rem 'Inter', sans-serif;
  cursor: pointer;
  transition: 0.15s;
}

.og-view-tab i { width: 14px; height: 14px; }

.og-view-tab:hover { background: rgba(124,111,255,0.12); color: #fff; }

.og-view-tab.active {
  background: rgba(124,111,255,0.22);
  border-color: rgba(124,111,255,0.45);
  color: #fff;
}

.og-mini-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(230,230,245,0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.15s;
  padding: 0;
}

.og-mini-btn i { width: 15px; height: 15px; }
.og-mini-btn:hover { background: rgba(124,111,255,0.2); color: #fff; }
.og-mini-btn:disabled { opacity: 0.35; cursor: default; }

[data-og-tip] { position: relative; }
[data-og-tip]::after {
  content: attr(data-og-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(10,10,22,0.96);
  color: rgba(255,255,255,0.9);
  font: 600 0.7rem 'Inter', sans-serif;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
  border: 1px solid rgba(120,120,255,0.2);
  pointer-events: none;
  opacity: 0;
  transition: 0.15s;
  z-index: 5;
}
[data-og-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.og-stage-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.og-view { display: none; flex-direction: column; gap: 10px; min-height: 0; }
.og-view.active { display: flex; }

.og-stage {
  position: relative;
  width: 100%;
  max-height: calc(88vh - 280px);
  aspect-ratio: 1200 / 630;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background:
    repeating-conic-gradient(rgba(255,255,255,0.04) 0% 25%, transparent 0% 50%) 50% / 20px 20px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 20px 60px rgba(0,0,0,0.5);
}

/* La hauteur max limite la largeur via aspect-ratio : on centre. */
@supports (aspect-ratio: 1) {
  .og-stage { width: min(100%, calc((88vh - 280px) * 1200 / 630)); }
}

#ogCanvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  touch-action: none;
}

#ogCanvas.og-can-drag { cursor: grab; }
#ogCanvas.og-dragging { cursor: grabbing; }

.og-loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,22,0.6);
  color: rgba(230,230,245,0.75);
  font-size: 0.85rem;
  font-weight: 600;
}
.og-loading.active { display: flex; }

.og-stage-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: 0.75rem;
  color: rgba(200,200,240,0.45);
  text-align: center;
}
.og-stage-hint i { width: 13px; height: 13px; flex-shrink: 0; }

/* Simulation Discord */
.og-discord {
  background: #313338;
  border-radius: 14px;
  padding: 18px 18px 22px;
  font-family: 'Inter', 'gg sans', sans-serif;
  overflow-y: auto;
  max-height: calc(88vh - 240px);
}

.og-discord-msg { display: flex; gap: 14px; }

.og-discord-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #5865f2 center / cover no-repeat;
  flex-shrink: 0;
}

.og-discord-body { min-width: 0; flex: 1; }

.og-discord-author { font-weight: 600; font-size: 0.95rem; color: #f2f3f5; }
.og-discord-author span { font-weight: 500; font-size: 0.72rem; color: #949ba4; margin-left: 6px; }

.og-discord-link { color: #00a8fc; font-size: 0.92rem; margin: 2px 0 6px; word-break: break-all; }

.og-discord-embed {
  max-width: 432px;
  background: #2b2d31;
  border-left: 4px solid #7c6fff;
  border-radius: 4px;
  padding: 10px 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.og-discord-site { font-size: 0.72rem; color: #b5bac1; }
.og-discord-title { font-size: 0.95rem; font-weight: 600; color: #00a8fc; }
.og-discord-desc { font-size: 0.84rem; color: #dbdee1; line-height: 1.35; white-space: pre-line; }
.og-discord-desc:empty { display: none; }

.og-discord-image {
  width: 100%;
  border-radius: 4px;
  margin-top: 8px;
  display: block;
}

/* Simulation X / Twitter */
.og-twitter {
  background: #000;
  border-radius: 14px;
  padding: 22px;
  overflow-y: auto;
  max-height: calc(88vh - 240px);
}

.og-twitter-card {
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid #2f3336;
  border-radius: 16px;
  overflow: hidden;
}

.og-twitter-imgwrap { position: relative; }
.og-twitter-imgwrap img { display: block; width: 100%; }

.og-twitter-domain-over {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(0,0,0,0.77);
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.og-twitter-from {
  max-width: 520px;
  margin: 6px auto 0;
  font-size: 0.8rem;
  color: #71767b;
}

.og-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.og-enable-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin: 0 !important;
}
.og-enable-row strong { display: block; font-size: 0.85rem; color: #f0f0ff; }
.og-enable-row small { display: block; font-size: 0.74rem; color: rgba(200,200,240,0.5); margin-top: 2px; }

.og-footer-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.og-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 11px;
  font: 600 0.82rem 'Inter', sans-serif;
  cursor: pointer;
  transition: 0.15s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.og-btn i { width: 15px; height: 15px; }

.og-btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  box-shadow: 0 8px 22px rgba(99,102,241,0.35);
}
.og-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(99,102,241,0.5); }
.og-btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; }

.og-btn-ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(230,230,245,0.8);
}
.og-btn-ghost:hover { background: rgba(255,255,255,0.09); color: #fff; }

.og-btn-soft {
  background: rgba(124,111,255,0.1);
  border-color: rgba(124,111,255,0.25);
  color: #c4b5fd;
  flex: 1;
  padding: 9px 8px;
}
.og-btn-soft:hover { background: rgba(124,111,255,0.2); color: #fff; }

.og-btn-danger {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.25);
  color: #fca5a5;
}
.og-btn-danger:hover { background: rgba(239,68,68,0.22); }

/* Colonne de réglages */
.og-editor-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid rgba(120,120,255,0.1);
  background: rgba(255,255,255,0.015);
}

.og-side-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 12px;
}

.og-side-tabs {
  flex: 1;
  display: flex;
  padding: 4px;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
}

.og-side-tab {
  flex: 1;
  padding: 8px 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(230,230,245,0.6);
  font: 600 0.8rem 'Inter', sans-serif;
  cursor: pointer;
  transition: 0.15s;
}
.og-side-tab:hover { color: #fff; }
.og-side-tab.active { background: rgba(124,111,255,0.28); color: #fff; }

.og-side-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 18px 24px;
}

.og-side-panel { display: none; }
.og-side-panel.active { display: block; }

.og-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(167,139,250,0.8);
  margin: 18px 0 10px;
}
.og-section-label:first-child { margin-top: 6px; }

.og-preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.og-preset {
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  cursor: pointer;
  transition: 0.15s;
  color: rgba(230,230,245,0.8);
  font: 600 0.74rem 'Inter', sans-serif;
  text-align: center;
}
.og-preset canvas { display: block; width: 100%; aspect-ratio: 1200 / 630; }
.og-preset span { display: block; padding: 6px 4px 7px; }
.og-preset:hover { border-color: rgba(124,111,255,0.5); transform: translateY(-2px); }

.og-field { margin-bottom: 12px; }

.og-label {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: rgba(200,200,240,0.6) !important;
  margin: 0 0 6px !important;
}

.og-label output, .og-count {
  font-weight: 600;
  font-size: 0.72rem;
  color: rgba(196,181,253,0.85);
  font-variant-numeric: tabular-nums;
}

.og-editor .og-input {
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(120,120,255,0.15);
  background: rgba(255,255,255,0.04);
  color: #f0f0ff;
  font: 500 0.85rem 'Inter', sans-serif;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
}
.og-editor .og-input:focus { border-color: rgba(124,111,255,0.55); }
.og-editor select.og-input { cursor: pointer; }
.og-editor select.og-input option { background: #12121f; color: #f0f0ff; }

.og-editor input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  padding: 0;
  margin: 6px 0;
  border: none;
  border-radius: 99px;
  background: rgba(255,255,255,0.1);
  outline: none;
}
.og-editor input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #a78bfa;
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.og-editor input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #a78bfa;
  border: 2px solid #fff;
  cursor: pointer;
}

.og-color-row { display: flex; gap: 8px; align-items: center; }

.og-editor input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 36px;
  flex-shrink: 0;
  padding: 3px;
  margin: 0;
  border-radius: 10px;
  border: 1px solid rgba(120,120,255,0.2);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
}
.og-editor input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.og-editor input[type="color"]::-webkit-color-swatch { border: none; border-radius: 7px; }
.og-editor input[type="color"]::-moz-color-swatch { border: none; border-radius: 7px; }

.og-seg {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}
.og-seg button {
  flex: 1;
  padding: 7px 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(230,230,245,0.6);
  font: 600 0.74rem 'Inter', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.og-seg button i { width: 14px; height: 14px; }
.og-seg button:hover { color: #fff; }
.og-seg button.active { background: rgba(124,111,255,0.3); color: #fff; }

.og-toggle-line {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: rgba(230,230,245,0.8) !important;
  cursor: pointer;
}

.og-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

.og-add-row { display: flex; gap: 6px; margin: 6px 0 12px; }

.og-layer-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.og-layer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: 0.12s;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(230,230,245,0.85);
}
.og-layer:hover { background: rgba(255,255,255,0.06); }
.og-layer.selected { border-color: rgba(124,111,255,0.5); background: rgba(124,111,255,0.14); }
.og-layer.hidden-layer .og-layer-name { opacity: 0.4; text-decoration: line-through; }
.og-layer > i { width: 15px; height: 15px; opacity: 0.7; flex-shrink: 0; }

.og-layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.og-layer-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: rgba(230,230,245,0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.og-layer-btn i { width: 14px; height: 14px; pointer-events: none; }
.og-layer-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.og-layer-btn.danger:hover { background: rgba(239,68,68,0.2); color: #fca5a5; }

.og-props {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(124,111,255,0.18);
  background: rgba(124,111,255,0.05);
}

.og-props-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.og-props-title i { width: 15px; height: 15px; color: #a78bfa; }

.og-props-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.og-props-actions .og-btn { flex: 1; padding: 8px 6px; font-size: 0.76rem; }

.og-empty {
  text-align: center;
  padding: 22px 10px;
  font-size: 0.8rem;
  color: rgba(200,200,240,0.45);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 12px;
}

.og-help {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(200,200,240,0.6);
  margin: 6px 0 16px;
}
.og-help-muted {
  display: flex;
  gap: 8px;
  color: rgba(200,200,240,0.45);
  margin-top: 18px;
}
.og-help-muted i { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

.og-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.og-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  padding: 0;
}
.og-swatch:hover { transform: scale(1.12); }

@media (max-width: 900px) {
  .og-editor {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .og-editor-main { padding: 16px 16px 12px; gap: 10px; }
  .og-editor-header p { display: none; }
  .og-editor-close-mobile { display: block; }
  .og-editor-close-desktop { display: none; }
  .og-stage { width: 100%; max-height: none; }
  .og-stage-hint { display: none; }
  .og-discord, .og-twitter { max-height: 42vh; }
  .og-editor-side { border-left: none; border-top: 1px solid rgba(120,120,255,0.1); }
  .og-side-top { padding: 12px 16px 8px; }
  .og-side-scroll { padding: 4px 16px 20px; }
  .og-view-tab span { display: none; }
  .og-footer-actions .og-btn-ghost span { display: none; }
}

/* Lucide remplace les <i data-lucide> par des <svg> : mêmes tailles. */
.og-view-tab svg { width: 14px; height: 14px; }
.og-mini-btn svg { width: 15px; height: 15px; }
.og-stage-hint svg { width: 13px; height: 13px; flex-shrink: 0; }
.og-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.og-seg button svg { width: 14px; height: 14px; }
.og-layer > svg { width: 15px; height: 15px; opacity: 0.7; flex-shrink: 0; }
.og-layer-btn svg { width: 14px; height: 14px; pointer-events: none; }
.og-props-title svg { width: 15px; height: 15px; color: #a78bfa; }
.og-help-muted svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

/* ═══════════ Bulle de statut Discord — côté gauche de l'avatar ═══════════
   Sur les templates où l'avatar est centré (Classic, Banner), la bulle à
   droite chevauchait les pastilles vues/likes/signalement (en haut à
   droite), et c'était pire avec un statut long. On la bascule à GAUCHE de
   l'avatar, zone toujours vide : la queue pointe maintenant vers la droite. */
.template-classic .discord-status-bubble,
.template-banner .discord-status-bubble {
  left: auto;
  right: calc(100% + 14px);
  max-width: min(190px, calc(50vw - 95px));
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 6px;
  animation-name: discordBubblePopLeft;
}
.template-classic .discord-status-bubble::after,
.template-banner .discord-status-bubble::after {
  right: auto;
  left: 100%;
  border: 8px solid transparent;
  border-left-color: var(--discord-bubble-tail);
  border-right: 0;
  margin-right: 0;
  margin-left: -1px;
}
@keyframes discordBubblePopLeft {
  from { opacity: 0; transform: translateY(4px) scale(0.85); transform-origin: right center; }
  to   { opacity: 1; transform: translateY(0) scale(1); transform-origin: right center; }
}
@media (max-width: 600px) {
  .template-classic .discord-status-bubble,
  .template-banner .discord-status-bubble {
    left: auto;
    right: calc(100% + 10px);
    max-width: min(130px, calc(50vw - 80px));
  }
}

/* ═══════════ Icônes perso des liens : plus grandes ═══════════ */
.link .link-custom-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  flex-shrink: 0;
}
.link.link-icon-only .link-custom-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
}
.linkPreviewLeft .link-custom-icon {
  width: 26px;
  height: 26px;
}


/* ═══════════ Bulle de statut Discord — template Minimal ═══════════
   Sortie de l'avatar par placeDiscordStatusBubble() et insérée dans le
   flux sous les infos : plus aucun chevauchement avec le nom, les badges,
   les infos ou les pastilles vues/likes. */
.discord-status-bubble.in-flow {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  display: inline-flex;
  max-width: min(260px, 100%);
  margin: 10px 0 12px 0;
  border-radius: 16px;
  border-top-left-radius: 6px;
  animation-name: discordBubblePop;
}
.discord-status-bubble.in-flow::after {
  top: auto;
  bottom: 100%;
  left: 14px;
  right: auto;
  border: 7px solid transparent;
  border-bottom-color: var(--discord-bubble-tail);
  border-top: 0;
  margin: 0 0 -1px 0;
}

/* ══════ Sous-panneau "Édition de la photo de profil" (#avatarEditorPanel) ══════ */
#avatarEditorPanel .settings-divider { margin: 20px 0; flex-shrink: 0; }
.avatar-edit-section { scroll-margin-top: 10px; flex-shrink: 0; }
.avatar-edit-section-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.95rem; font-weight: 700; color: #fff; margin: 4px 0 14px;
}
.avatar-edit-section-title i, .avatar-edit-section-title svg { width: 17px; height: 17px; color: #a78bfa; }
.avatar-edit-photo-row { display: flex; align-items: center; gap: 16px; }
.avatar-edit-preview {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: rgba(255,255,255,0.06); border: 2px solid rgba(167,139,250,0.45);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4);
  transition: border-radius 0.2s;
}
.avatar-edit-preview.is-square { border-radius: 0; }
.avatar-edit-preview img, .avatar-edit-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-edit-preview svg { width: 32px; height: 32px; }
.avatar-edit-photo-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.avatar-edit-photo-actions .settings-apply-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.avatar-edit-photo-actions .settings-apply-btn svg { width: 15px; height: 15px; }

/* ═══════════ Bulle de statut Discord — template Paysage (landscape) ═══════════
   L'avatar est dans une colonne à gauche et le nom / la bio / les tags juste
   à sa droite : la bulle en position absolue (à droite de l'avatar) venait
   recouvrir tout ça. Ici on la remet dans le flux, SOUS l'avatar, dans sa
   propre colonne (toujours vide en dessous), avec la queue vers le haut. */
.template-landscape .discord-status-bubble {
  /* Absolue SOUS la photo : en position relative elle agrandissait
     #avatarMediaWrap, et le badge de statut (ancré en bas à droite du wrap)
     se retrouvait en bas de la bulle au lieu d'être sur la photo. */
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  right: auto;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  line-height: 1.35;
  padding: 9px 11px;
  font-size: 0.76rem;
  border-radius: 14px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 14px;
  animation-name: discordBubblePop;
}
.template-landscape .discord-status-bubble::after {
  top: auto;
  bottom: 100%;
  left: 16px;
  right: auto;
  border: 7px solid transparent;
  border-bottom-color: var(--discord-bubble-tail);
  border-top: 0;
  margin: 0 0 -1px 0;
}
.template-landscape .discord-status-bubble.emoji-only {
  display: inline-flex;
}
/* Colonne étroite : l'emoji passe au-dessus du texte si besoin, et le
   texte (souvent une URL longue) ne déborde jamais de la bulle. */
.template-landscape .discord-status-bubble {
  box-sizing: border-box;
  flex-wrap: wrap;
  align-items: flex-start;
  /* pas d'overflow:hidden ici : ça couperait la queue (::after) */
}
.template-landscape .discord-status-bubble-text {
  flex: 1 1 100px;
}
/* ".template-landscape #avatarContainer img" (photo en 100x100) touchait
   aussi l'emoji custom, d'où l'emoji géant : on le remet à sa taille. */
.template-landscape #avatarContainer img.discord-status-bubble-emoji.is-custom {
  width: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}
.template-landscape #avatarContainer .discord-status-bubble.emoji-only img.discord-status-bubble-emoji.is-custom {
  width: 1.6rem;
  height: 1.6rem;
}
/* ═══════════════════════════════════════════════════════
   Effets du pseudo / de la bio — DEUX catégories cumulables
   .txt-fx-c-<id> = COULEUR    (style.colorFx)
   .txt-fx-m-<id> = MOUVEMENT  (style.motionFx)
   Classes posées par applyTextStyle() dans main.html.

   Pour pouvoir cumuler les deux, aucune classe ne pose directement
   "animation" ou "filter" : chacune remplit une variable, et .txt-fx
   les combine.
     --fxa-c : animation de l'effet couleur (text-shadow / dégradé)
     --fxa-m : animation de l'effet mouvement (transform / opacity / filter)
     --fx-filter : filtre de base de l'effet couleur (halo des dégradés),
                   réutilisé par les keyframes de mouvement qui touchent filter
   --fx-color = couleur perso choisie (ou violet par défaut).
   ═══════════════════════════════════════════════════════ */
.txt-fx {
  display: inline-block;
  --fx-color: #a78bfa;
  --fxa-c: none;
  --fxa-m: none;
  --fx-filter: opacity(1);
  animation: var(--fxa-c), var(--fxa-m);
  filter: var(--fx-filter);
}

/* Les animations / transform / filter créent un nouveau contexte
   d'empilement : le z-index du tooltip (::before) restait alors bloqué
   dans le pseudo et passait SOUS la photo de profil. Au survol, on remonte
   le pseudo entier au-dessus du reste et on met les effets en pause pour
   que le tooltip reste stable et lisible. */
.txt-fx.profile-badge-tip:hover {
  z-index: 99999;
  animation-play-state: paused;
}

/* Le tooltip ne doit hériter d'aucun effet (ombre, contour, police Matrix...) */
.txt-fx.profile-badge-tip::before {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-style: normal;
  letter-spacing: 0.02em !important;
}

/* ─────────────── COULEUR ─────────────── */
.txt-fx-c-glow { text-shadow: 0 0 6px var(--fx-color), 0 0 14px var(--fx-color), 0 0 28px var(--fx-color); }

.txt-fx-c-neon { color: #fff !important; --fxa-c: txtfxNeon 1.6s ease-in-out infinite alternate; }
@keyframes txtfxNeon {
  from { text-shadow: 0 0 2px #fff, 0 0 6px var(--fx-color), 0 0 12px var(--fx-color); }
  to   { text-shadow: 0 0 4px #fff, 0 0 14px var(--fx-color), 0 0 30px var(--fx-color), 0 0 50px var(--fx-color); }
}

.txt-fx-c-fire { color: #fff3c4 !important; --fxa-c: txtfxFire 0.9s ease-in-out infinite alternate; }
@keyframes txtfxFire {
  from { text-shadow: 0 -1px 4px #fff, 0 -3px 10px #ffd000, 0 -8px 18px #ff8000, 0 -14px 28px #ff2200; }
  to   { text-shadow: 0 -1px 4px #fff, 0 -4px 12px #ffea00, 0 -10px 22px #ff6a00, 0 -18px 34px #e01000; }
}

.txt-fx-c-matrix {
  color: #4dff6d !important;
  font-family: 'Courier New', monospace !important;
  text-shadow: 0 0 6px #00ff41, 0 0 14px rgba(0,255,65,.6);
}

/* Dégradés (remplacent la couleur perso) */
.txt-fx-c-rainbow, .txt-fx-c-ice, .txt-fx-c-gold, .txt-fx-c-chrome, .txt-fx-c-galaxy,
.txt-fx-c-sunset, .txt-fx-c-toxic, .txt-fx-c-shine {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  background-size: 250% 100%;
  --fxa-c: txtfxGradientMove 4s linear infinite;
}
@keyframes txtfxGradientMove { 0% { background-position: 0% 50%; } 100% { background-position: 250% 50%; } }

.txt-fx-c-rainbow {
  background-image: linear-gradient(90deg, #ff4466, #ff9d2e, #ffee00, #4dff6d, #00c2ff, #7c6fff, #ff4dd8, #ff4466);
}
.txt-fx-c-ice    { background-image: linear-gradient(90deg, #e0f7ff, #7dd3fc, #ffffff, #38bdf8, #e0f7ff); --fx-filter: drop-shadow(0 0 6px rgba(125,211,252,.6)); }
.txt-fx-c-gold   { background-image: linear-gradient(90deg, #a86f00, #ffd700, #fff6c2, #ffb300, #a86f00); --fx-filter: drop-shadow(0 0 5px rgba(255,200,0,.45)); }
.txt-fx-c-chrome { background-image: linear-gradient(90deg, #6b7280, #f9fafb, #9ca3af, #ffffff, #6b7280); --fx-filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.txt-fx-c-galaxy { background-image: linear-gradient(90deg, #6d28d9, #ec4899, #3b82f6, #a855f7, #22d3ee, #6d28d9); --fx-filter: drop-shadow(0 0 8px rgba(168,85,247,.55)); }
.txt-fx-c-sunset { background-image: linear-gradient(90deg, #f97316, #ec4899, #8b5cf6, #f43f5e, #f97316); }
.txt-fx-c-toxic  { background-image: linear-gradient(90deg, #a3e635, #22c55e, #facc15, #84cc16, #a3e635); --fx-filter: drop-shadow(0 0 7px rgba(163,230,53,.6)); }
.txt-fx-c-shine  {
  background-image: linear-gradient(110deg, var(--fx-color) 40%, #ffffff 50%, var(--fx-color) 60%);
  --fxa-c: txtfxShine 2.6s linear infinite;
}
@keyframes txtfxShine { 0% { background-position: 150% 50%; } 100% { background-position: -100% 50%; } }

.txt-fx-c-outline {
  -webkit-text-stroke: 1.5px var(--fx-color);
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
.txt-fx-c-shadow3d {
  text-shadow: 1px 1px 0 var(--fx-color), 2px 2px 0 var(--fx-color), 3px 3px 0 var(--fx-color),
               4px 4px 0 rgba(0,0,0,.35), 6px 6px 12px rgba(0,0,0,.5);
}
.txt-fx-c-retro {
  color: #fff !important;
  text-shadow: 3px 3px 0 #ec4899, 6px 6px 0 #06b6d4;
}

/* ─────────────── MOUVEMENT / APPARENCE ───────────────
   N'animent que transform / opacity / filter, jamais text-shadow ni
   background : ils se cumulent donc avec n'importe quel effet couleur.
   (La machine à écrire est gérée en JS, voir startTextAnim.) */
.txt-fx-m-float  { --fxa-m: txtfxFloat 3s ease-in-out infinite; }
@keyframes txtfxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.txt-fx-m-pulse  { --fxa-m: txtfxPulse 1.2s ease-in-out infinite; }
@keyframes txtfxPulse { 0%,100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(1); } 45% { transform: scale(1.05); } }

.txt-fx-m-bounce { --fxa-m: txtfxBounce 1.4s cubic-bezier(.28,.84,.42,1) infinite; }
@keyframes txtfxBounce { 0%,100% { transform: translateY(0) scale(1,1); } 10% { transform: scale(1.05,.95); } 40% { transform: translateY(-10px) scale(.97,1.03); } 60% { transform: translateY(0) scale(1.03,.97); } }

.txt-fx-m-shake  { --fxa-m: txtfxShake 0.5s linear infinite; }
@keyframes txtfxShake { 0%,100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(-1px,1px) rotate(-1deg); } 50% { transform: translate(1px,-1px) rotate(1deg); } 75% { transform: translate(-1px,-1px) rotate(0); } }

.txt-fx-m-swing  { transform-origin: top center; --fxa-m: txtfxSwing 2.4s ease-in-out infinite; }
@keyframes txtfxSwing { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* Glitch : décalage + aberration chromatique via drop-shadow (filter), pour
   ne pas écraser le text-shadow d'un effet couleur (lueur, néon...). */
.txt-fx-m-glitch { --fxa-m: txtfxGlitch 2.2s steps(1) infinite; }
@keyframes txtfxGlitch {
  0%, 12%, 57%, 100% { transform: none; filter: var(--fx-filter); }
  8%  { transform: translate(1px, 0);                filter: drop-shadow(2px 0 0 #06b6d4) drop-shadow(-2px 0 0 #ec4899) var(--fx-filter); }
  10% { transform: translate(-2px, 1px) skewX(-6deg); filter: drop-shadow(-3px 0 0 #06b6d4) drop-shadow(3px 0 0 #ec4899) var(--fx-filter); }
  55% { transform: translate(-1px, 0);               filter: drop-shadow(2px 1px 0 #06b6d4) drop-shadow(-2px -1px 0 #ec4899) var(--fx-filter); }
}

.txt-fx-m-flicker { --fxa-m: txtfxFlicker 3s linear infinite; }
@keyframes txtfxFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.3; }
}

.txt-fx-m-ghost  { --fxa-m: txtfxGhost 3s ease-in-out infinite; }
@keyframes txtfxGhost {
  0%,100% { opacity: 1;   transform: translateY(0);    filter: var(--fx-filter); }
  50%     { opacity: .35; transform: translateY(-4px); filter: blur(1px) var(--fx-filter); }
}

.txt-fx-m-blur   { --fxa-m: txtfxBlur 3.5s ease-in-out infinite; }
@keyframes txtfxBlur {
  0%,100% { filter: blur(0) var(--fx-filter); letter-spacing: normal; }
  50%     { filter: blur(2px) var(--fx-filter); letter-spacing: .08em; }
}

/* Accessibilité : pas d'animation si l'utilisateur l'a désactivé */
@media (prefers-reduced-motion: reduce) {
  .txt-fx { animation: none !important; }
}

/* ═══════ Menus déroulants d'effets (Couleur / Mouvement) de la hotbar ═══════ */
.fx-dd { position: relative; }
.fx-dd-btn {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 8px 0 9px; max-width: 150px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #f0f0ff; font: 600 0.78rem 'Inter', sans-serif;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.fx-dd-btn:hover { background: rgba(255,255,255,0.1); }
.fx-dd.active .fx-dd-btn {
  border-color: rgba(167,139,250,0.55);
  background: rgba(124,111,255,0.18);
}
.fx-dd-current { display: flex; align-items: center; gap: 6px; overflow: hidden; }
.fx-dd-current span { overflow: hidden; text-overflow: ellipsis; }
.fx-dd-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.fx-dd-btn .fx-dd-caret { width: 13px; height: 13px; opacity: .6; transition: transform .15s; }
.fx-dd.open .fx-dd-caret { transform: rotate(180deg); }

.fx-dd-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 200px; max-height: 300px; overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: rgba(15,15,24,0.98);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  z-index: 10000;
  animation: styleToolbarPop 0.12s ease-out;
}
.fx-dd.open .fx-dd-menu { display: block; }
.fx-dd-title {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px 8px;
  color: rgba(200,200,240,0.55);
  font: 700 0.68rem 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .06em;
}
.fx-dd-title svg { width: 13px; height: 13px; }
.fx-dd-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 9px;
  border: 0; border-radius: 8px; background: transparent;
  color: #e5e7eb; font: 500 0.82rem 'Inter', sans-serif; text-align: left;
  cursor: pointer;
}
.fx-dd-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }
.fx-dd-item:hover { background: rgba(255,255,255,0.08); }
.fx-dd-item.selected { background: rgba(124,111,255,0.22); color: #fff; }
.fx-dd-item.selected svg { color: #a78bfa; opacity: 1; }

/* Mobile : la hotbar est dockée en bas → le menu s'ouvre vers le haut */
@media (max-width: 768px) {
  .fx-dd-menu { top: auto; bottom: calc(100% + 6px); max-height: 50vh; }
}

/* ═══════════ Liens "icône seule" : nom du lien au survol ═══════════
   Élément enfant (.link-hover-label) plutôt que ::before/::after, déjà
   utilisés (et coupés) sur .link.link-icon-only. */
.link.link-icon-only .link-hover-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  background: rgb(10, 10, 22);
  color: #fff;
  -webkit-text-fill-color: #fff;
  backdrop-filter: none;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(120, 120, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);

  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 99999;
}
.link.link-icon-only:hover .link-hover-label,
.link.link-icon-only:focus-visible .link-hover-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Le "img/svg 32px" des icônes seules ne doit pas toucher le label */
.link.link-icon-only .link-hover-label { height: auto; }

/* Fondu au survol sur l'icône uniquement (pas sur le nom au survol) */
.link.link-icon-only > :not(.link-hover-label) { transition: opacity 0.2s ease; }
.link.link-icon-only:hover > :not(.link-hover-label) { opacity: 0.85; }


/* ═══════════ Widget "Message direct" ═══════════
   Base visuelle = .booking-widget (même carte que "Rendez-vous"). */
.dm-widget-icon { overflow: hidden; }
.dm-widget-icon img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; border: 0; }
.dm-widget-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  min-height: 84px;
  max-height: 220px;
  resize: vertical;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: #fff;
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.45;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dm-widget-input::placeholder { color: rgba(200,200,240,0.45); }
.dm-widget-input:focus { border-color: rgba(124,111,255,0.6); background: rgba(0,0,0,0.35); }
.dm-widget-input:disabled { opacity: 0.6; cursor: not-allowed; }
.dm-widget-foot {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  margin-top: 6px; font-size: 0.74rem; min-height: 1em;
}
.dm-widget-error { color: #f87171; font-weight: 600; }
.dm-widget-count { color: rgba(200,200,240,0.45); margin-left: auto; flex-shrink: 0; }
.dm-widget .booking-widget-btn { margin-top: 10px; text-decoration: none; box-sizing: border-box; }
.dm-widget .booking-widget-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.dm-widget .booking-widget-btn.is-loading { opacity: 0.6; cursor: progress; }
.dm-widget-note {
  margin-top: 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(124,111,255,0.12); border: 1px solid rgba(124,111,255,0.25);
  color: rgba(230,230,245,0.85); font-size: 0.8rem; line-height: 1.45;
}
.dm-widget-sent {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  color: #4ade80; font-weight: 700; font-size: 0.9rem;
}
.dm-widget-sent svg, .dm-widget-sent i { width: 20px; height: 20px; }
.dm-widget-actions { display: flex; flex-direction: column; gap: 6px; }
.dm-widget-again {
  background: none; border: none; padding: 6px; cursor: pointer;
  color: rgba(200,200,240,0.7); font-family: inherit; font-size: 0.8rem; font-weight: 600;
}
.dm-widget-again:hover { color: #fff; text-decoration: underline; }

/* Fenêtre de réglages du widget */
.dm-widget-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 16px;
}
.dm-widget-modal.open { display: flex; }
.dm-widget-dialog {
  width: 100%; max-width: 420px; box-sizing: border-box;
  background: rgb(14,14,28); border: 1px solid rgba(120,120,255,0.18);
  border-radius: 20px; padding: 22px; color: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.dm-widget-dialog h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 1.05rem; }
.dm-widget-dialog h3 svg { width: 18px; height: 18px; color: #a78bfa; }
.dm-widget-dialog label { display: block; font-size: 0.8rem; font-weight: 600; color: rgba(220,220,245,0.85); margin-bottom: 12px; }
.dm-widget-dialog label span { font-weight: 400; color: rgba(200,200,240,0.5); }
.dm-widget-dialog .settings-input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.dm-widget-dialog-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.dm-widget-dialog-btns button {
  padding: 9px 16px; border-radius: 10px; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 0.84rem;
}
.dm-widget-cancel { background: rgba(255,255,255,0.08); color: #fff; }
.dm-widget-save { background: #fff; color: #111; }


/* ═══════════ Template Scroll : réordonner les pages ═══════════ */
.scrollPageGroupHeader.is-draggable { cursor: grab; }
.scrollPageGroupHeader.is-draggable:active { cursor: grabbing; }
.scrollPageGroupMove { display: flex; gap: 4px; flex-shrink: 0; margin-left: auto; }
.scrollPageGroupMove + .scrollPageGroupAdd { margin-left: 0; }
.scrollPageGroupMoveBtn {
  width: 28px; height: 28px; border-radius: 8px; padding: 0;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05); color: rgba(220,220,245,0.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s ease, opacity 0.15s ease;
}
.scrollPageGroupMoveBtn:hover:not(:disabled) { background: rgba(124,111,255,0.2); color: #fff; }
.scrollPageGroupMoveBtn:disabled { opacity: 0.3; cursor: default; }
.scrollPageGroupMoveBtn svg, .scrollPageGroupMoveBtn i { width: 15px; height: 15px; }
.scrollPageGroup.is-page-dragging { opacity: 0.4; }
.scrollPageGroup.page-drop-before { box-shadow: 0 -3px 0 0 #7c6fff; }
.scrollPageGroup.page-drop-after  { box-shadow: 0 3px 0 0 #7c6fff; }


/* ═══════════════════════════════════════════════════════════════════
   Template "Plein écran" — aucun cadre, le profil prend tout l'écran
   ═══════════════════════════════════════════════════════════════════
   Structure posée par TEMPLATES.fullscreen.apply (main.html) :
     .header
       .fs-topbar  (@pseudo  ·  vues / likes / signalement)
       .fs-stage
         .fs-hero     avatar, pseudo, infos, bio (+ tags)
         .fs-content  liens + widgets
       .footer
   ≥ 1000px : deux colonnes, l'identité reste collée à gauche pendant le
   scroll. En dessous : une colonne centrée.
   Couleur / flou / forme du cadre et effet 3D : ignorés (pas de cadre). */

/* Le menu "Cadre de profil" n'a pas de sens ici */
body.tpl-fullscreen-body .frame-menu-entry { display: none !important; }

body.tpl-fullscreen-body {
  padding: 0 !important;
  align-items: stretch;
  justify-content: stretch;
}
.profile.template-fullscreen {
  --fs-accent: #8b7bff;
  --fs-accent-2: #ec4899;
  width: 100%;
  max-width: none !important;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  text-align: left;
  zoom: 1 !important;
}
.template-fullscreen .header {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  margin: 0;
  padding: 0 clamp(1.2rem, 5vw, 5rem) 2rem;
  display: flex;
  flex-direction: column;

  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  /* transform / will-change créeraient un repère pour les calques en
     position:fixed ci-dessous (ils ne couvriraient plus l'écran). */
  transform: none !important;
  will-change: auto;
}
.template-fullscreen .header.profile-3d-active,
.template-fullscreen .header.is-tilting { transform: none !important; }

/* Ambiance : voile de lisibilité à gauche + deux halos de couleur */
.template-fullscreen .header::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 12% 30%, color-mix(in srgb, var(--fs-accent) 30%, transparent), transparent 70%),
    radial-gradient(35vw 35vw at 92% 85%, color-mix(in srgb, var(--fs-accent-2) 18%, transparent), transparent 70%),
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.05) 100%),
    rgba(6, 6, 14, var(--fs-dim, 0.5));
}
/* Pseudo géant en filigrane, en bas de l'écran */
.template-fullscreen .header::after {
  content: attr(data-handle);
  position: fixed;
  left: -0.04em;
  bottom: -0.2em;
  z-index: -1;
  pointer-events: none;
  font-size: clamp(6rem, 19vw, 20rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.07);
  text-transform: lowercase;
}

/* Barre du haut */
.template-fullscreen .fs-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 0 10px;
  position: relative;
  z-index: 5;
}
.template-fullscreen .fs-handle {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.template-fullscreen .fs-stats { display: inline-flex; align-items: center; gap: 8px; }
.template-fullscreen .fs-topbar .views-badge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
}

/* Scène */
.template-fullscreen .fs-stage {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  padding: 2rem 0;
  box-sizing: border-box;
}
.template-fullscreen .fs-hero,
.template-fullscreen .fs-content { width: 100%; min-width: 0; }
.template-fullscreen .fs-hero { max-width: 640px; text-align: center; }
.template-fullscreen .fs-content { max-width: 560px; }

.template-fullscreen #avatarContainer img {
  width: 150px !important;
  height: 150px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.2);
  box-shadow:
    0 0 0 10px rgba(255,255,255,0.04),
    0 0 60px color-mix(in srgb, var(--fs-accent) 45%, transparent),
    0 24px 60px rgba(0,0,0,0.55);
}
.template-fullscreen #name {
  margin: 1.4rem 0 0.6rem;
  font-size: clamp(2.4rem, 5.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  justify-content: center;
  flex-wrap: wrap;
  text-shadow: 0 6px 30px rgba(0,0,0,0.45);
}
.template-fullscreen #extraInfos {
  justify-content: center;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
}
.template-fullscreen #bio {
  margin: 1.1rem 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(235,235,250,0.82);
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.template-fullscreen .bio-tags-row { justify-content: center; margin-top: 0.9rem; }

.template-fullscreen #links { margin-top: 0; gap: 14px; }
.template-fullscreen #links .link:not(.link-icon-only) {
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(10,10,20,0.55);
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.template-fullscreen #links .link:not(.link-icon-only):hover {
  transform: translateX(6px);
  background: rgba(20,20,40,0.6);
  border-color: color-mix(in srgb, var(--fs-accent) 60%, transparent);
  box-shadow: -4px 0 0 0 var(--fs-accent), 0 14px 40px rgba(0,0,0,0.35);
}

.template-fullscreen .footer {
  margin-top: 0;
  padding-top: 1rem;
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.75;
}

/* Arrivée en douceur, élément par élément */
@keyframes fsRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.template-fullscreen.fs-intro .fs-hero > *,
.template-fullscreen.fs-intro .fs-content > #links > * {
  animation: fsRise 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.template-fullscreen .fs-hero > :nth-child(2) { animation-delay: 0.06s; }
.template-fullscreen .fs-hero > :nth-child(3) { animation-delay: 0.12s; }
.template-fullscreen .fs-hero > :nth-child(4) { animation-delay: 0.18s; }
.template-fullscreen .fs-content > #links > :nth-child(1) { animation-delay: 0.15s; }
.template-fullscreen .fs-content > #links > :nth-child(2) { animation-delay: 0.21s; }
.template-fullscreen .fs-content > #links > :nth-child(3) { animation-delay: 0.27s; }
.template-fullscreen .fs-content > #links > :nth-child(4) { animation-delay: 0.33s; }
.template-fullscreen .fs-content > #links > :nth-child(n+5) { animation-delay: 0.39s; }
@media (prefers-reduced-motion: reduce) {
  .template-fullscreen .fs-hero > *,
  .template-fullscreen .fs-content > #links > * { animation: none; }
}

/* Une colonne : bulle Discord à gauche de l'avatar (centré), comme Classic */
.template-fullscreen .discord-status-bubble {
  left: auto;
  right: calc(100% + 14px);
  max-width: min(220px, calc(50vw - 110px));
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 6px;
  animation-name: discordBubblePopLeft;
}
.template-fullscreen .discord-status-bubble::after {
  right: auto;
  left: 100%;
  border: 8px solid transparent;
  border-left-color: var(--discord-bubble-tail);
  border-right: 0;
  margin-right: 0;
  margin-left: -1px;
}

/* ── Grand écran : deux colonnes ── */
@media (min-width: 1000px) {
  .template-fullscreen .fs-stage {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(3rem, 7vw, 8rem);
    padding: clamp(2rem, 8vh, 6rem) 0 3rem;
  }
  .template-fullscreen .fs-hero {
    flex: 1 1 52%;
    max-width: 660px;
    text-align: left;
    position: sticky;
    top: clamp(2rem, 12vh, 7rem);
  }
  .template-fullscreen .fs-content {
    flex: 0 1 46%;
    max-width: 540px;
  }
  .template-fullscreen #name { justify-content: flex-start; font-size: clamp(3.2rem, 6vw, 6rem); }
  .template-fullscreen #extraInfos,
  .template-fullscreen #extraInfos.info-horizontal,
  .template-fullscreen .bio-tags-row { justify-content: flex-start; }
  .template-fullscreen #bio { max-width: 34em; }
  .template-fullscreen .footer { text-align: left; }

  /* Avatar aligné à gauche : la bulle Discord repart à droite (place libre) */
  .template-fullscreen .discord-status-bubble {
    right: auto;
    left: calc(100% + 16px);
    max-width: 260px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 20px;
    animation-name: discordBubblePop;
  }
  .template-fullscreen .discord-status-bubble::after {
    left: auto;
    right: 100%;
    border: 8px solid transparent;
    border-right-color: var(--discord-bubble-tail);
    border-left: 0;
    margin-left: 0;
    margin-right: -1px;
  }
}

/* Aperçu dans le sélecteur de template */
.tpl-preview.tpl-fullscreen {
  flex-direction: row;
  gap: 8px;
  padding: 0 10px;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(124,111,255,0.4), transparent 65%),
    radial-gradient(ellipse at 90% 90%, rgba(236,72,153,0.25), transparent 60%),
    rgba(255,255,255,0.02);
  border-style: dashed;
}
.tpl-fs-hero { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tpl-fs-hero .tpl-line-lg { width: 90%; height: 8px; }
.tpl-fs-hero .tpl-line-sm { width: 60%; }
.tpl-fs-links { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tpl-fs-links .tpl-btn { width: 100%; height: 8px; border-radius: 3px; background: rgba(255,255,255,0.14); }


/* ═══════════════════════════════════════════════════════════════════
   Template "Terminal" — le profil façon fenêtre de terminal
   ═══════════════════════════════════════════════════════════════════ */
.template-terminal {
  --term-accent: #50fa7b;
  --term-accent-soft: rgba(80,250,123,0.16);
  --term-mono: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  text-align: left;
}
.template-terminal .header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.2rem;
  align-items: center;
  padding: 0 1.6rem 1.4rem;
  border-radius: 14px;
  background: rgba(12, 14, 18, 0.86) !important;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 30px 90px rgba(0,0,0,0.65), 0 0 0 1px rgba(80,250,123,0.05), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Tout ce qui n'est pas avatar / pseudo / infos prend toute la largeur */
.template-terminal .header > * { grid-column: 1 / -1; min-width: 0; }
.template-terminal .header > #avatarContainer { grid-column: 1; grid-row: span 2; align-self: start; margin-top: 4px; }
.template-terminal .header > #name,
.template-terminal .header > #extraInfos { grid-column: 2; }

/* Barre de titre */
.template-terminal .term-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -1.6rem 1.4rem;
  padding: 10px 14px;
  border-radius: 14px 14px 0 0;
  background: rgba(255,255,255,0.045);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-family: var(--term-mono);
  font-size: 0.74rem;
  color: rgba(220,225,235,0.6);
}
.template-terminal .term-dots { display: inline-flex; gap: 7px; flex-shrink: 0; }
.template-terminal .term-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.template-terminal .term-dots i:nth-child(1) { background: #ff5f57; }
.template-terminal .term-dots i:nth-child(2) { background: #febc2e; }
.template-terminal .term-dots i:nth-child(3) { background: #28c840; }
.template-terminal .term-title {
  flex: 1; min-width: 0; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.template-terminal .term-stats { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.template-terminal .term-bar .views-badge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 6px;
  background: rgba(0,0,0,0.35);
}
.template-terminal .term-bar .views-badge svg,
.template-terminal .term-bar .views-badge i { width: 13px !important; height: 13px !important; }

/* Avatar / pseudo / infos */
.template-terminal #avatarContainer img {
  width: 84px !important;
  height: 84px !important;
  border-radius: 12px !important;
  object-fit: cover;
  border: 2px solid rgba(80,250,123,0.35);
  box-shadow: 0 0 24px rgba(80,250,123,0.12);
}
.template-terminal #name {
  margin: 0;
  font-size: 1.65rem;
  justify-content: flex-start;
  align-self: end;
}
.template-terminal #extraInfos {
  align-self: start;
  margin-top: 4px;
  font-size: 0.85rem;
  justify-content: flex-start;
}

/* Invites de commande */
.template-terminal #bio {
  margin: 1.3rem 0 0;
  text-align: left;
  color: rgba(225,230,240,0.85);
}
.template-terminal #bio::before {
  content: "$ cat bio.txt";
  display: block;
  margin-bottom: 6px;
  font-family: var(--term-mono);
  font-size: 0.78rem;
  color: var(--term-accent);
  white-space: nowrap;
}
.template-terminal .bio-tags-row { justify-content: flex-start; }
.template-terminal #links { margin-top: 1.3rem; }
.template-terminal #links::before {
  content: "$ ls ./liens";
  display: block;
  font-family: var(--term-mono);
  font-size: 0.78rem;
  color: var(--term-accent);
  margin-bottom: -2px;
}
.template-terminal #links:empty::before { content: none; }

/* Liens : lignes sobres façon sortie de commande */
.template-terminal #links .link:not(.link-icon-only) {
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(80,250,123,0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.template-terminal #links .link:not(.link-icon-only):hover {
  border-color: rgba(80,250,123,0.55);
  background: var(--term-accent-soft);
  box-shadow: 0 0 22px rgba(80,250,123,0.12);
}
.template-terminal .linkIconsRow { justify-content: flex-start; }

/* Pied de page = fin de session, avec curseur qui clignote */
.template-terminal .footer {
  margin-top: 1.4rem;
  text-align: left;
  font-family: var(--term-mono);
  font-size: 0.74rem;
}
.template-terminal .footer::after {
  content: "$ ▋";
  display: block;
  margin-top: 10px;
  color: var(--term-accent);
  animation: termBlink 1.1s steps(1) infinite;
}
@keyframes termBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .template-terminal .footer::after { animation: none; }
}

/* Bulle Discord (en flux sous les infos, voir placeDiscordStatusBubble) */
.template-terminal .discord-status-bubble.in-flow { grid-column: 1 / -1; justify-self: start; margin: 12px 0 0; }

/* Aperçu dans le sélecteur de template */
.tpl-preview.tpl-terminal {
  padding: 0; gap: 0; overflow: hidden;
  justify-content: flex-start; align-items: stretch;
  background: rgba(12,14,18,0.9);
}
.tpl-term-bar { display: flex; gap: 3px; padding: 5px 6px; background: rgba(255,255,255,0.06); }
.tpl-term-bar i { width: 5px; height: 5px; border-radius: 50%; background: #ff5f57; }
.tpl-term-bar i:nth-child(2) { background: #febc2e; }
.tpl-term-bar i:nth-child(3) { background: #28c840; }
.tpl-term-body { padding: 8px 9px; display: flex; flex-direction: column; gap: 6px; }
.tpl-term-line { display: flex; align-items: center; gap: 4px; }
.tpl-term-line b { color: #50fa7b; font: 700 8px/1 monospace; }
.tpl-term-line span { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.25); }
.tpl-term-line em { width: 4px; height: 7px; background: #50fa7b; animation: termBlink 1.1s steps(1) infinite; }

/* Plein écran — pseudo :
   1) le texte en dégradé (background-clip:text) est découpé à la boîte du
      texte : en italique / très grande taille, la fin de la dernière lettre
      dépassait et était coupée. Un peu de marge intérieure lui laisse la place.
   2) badges "au-dessus / en dessous" : main.html pose align-items:center en
      inline sur #name → en deux colonnes on recolle tout à gauche. */
.template-fullscreen #name .name-text {
  padding: 0 0.14em 0.06em 0.02em;
  margin-right: -0.14em;
  overflow: visible;
}
@media (min-width: 1000px) {
  .template-fullscreen #name { align-items: flex-start !important; }
  .template-fullscreen #name[style*="column"] { justify-content: flex-start !important; }
}

/* Plein écran — main.html révèle le profil avec un transform inline
   (translateY(0)). Un transform, même nul, fait du profil le repère des
   éléments en position:fixed : le voile sombre et le pseudo en filigrane
   s'arrêtaient donc au bas du profil au lieu de couvrir tout l'écran
   (bande "vide" non assombrie en bas de page). */
.profile.template-fullscreen {
  transform: none !important;
  filter: none !important;
}

/* ===== Lumière au survol du cadre (main.html > initFrameSpotlight) =====
   Calque injecté en premier enfant du cadre (.header / .scroll-page-card) :
   un grand rond de lumière centré sur la souris (--spot-x / --spot-y).
   mix-blend-mode: screen = il éclaire le cadre et son contenu sans les
   masquer. z-index élevé mais pointer-events:none : il ne bloque aucun clic. */
.frame-spotlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.35s ease;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle var(--spot-size, 350px) at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(var(--spot-rgb, 255,255,255), var(--spot-alpha, 0.35)) 0%,
    rgba(var(--spot-rgb, 255,255,255), calc(var(--spot-alpha, 0.35) * 0.45)) 35%,
    rgba(var(--spot-rgb, 255,255,255), 0) 70%
  );
}
.frame-spotlight.is-visible { opacity: 1; }
@media (pointer: coarse) { .frame-spotlight { display: none; } }

/* ===== Liens au format "Carré" (main.html > render, l.square) =====
   Les liens carrés qui se suivent forment une grille de tuiles : icône au
   centre, nom en dessous. Ils gardent le style .link du template (fond,
   bordure, reflet au survol) ; seule la mise en page change. Placé en fin de
   fichier pour passer après les réglages .link des templates. */
.linkSquaresGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  width: 100%;
  flex: 1 1 100%;      /* templates où #links est en ligne (landscape, minimal) */
  grid-column: 1 / -1; /* templates où #links est une grille */
}
#links .linkSquaresGrid .link.link-square {
  aspect-ratio: 1 / 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 8px;
  border-radius: 16px;
  text-align: center;
}
#links .linkSquaresGrid .link.link-square:hover {
  transform: translateY(-4px) scale(1.03);
}
.link-square-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.link-square-icon img,
.link-square-icon svg,
.link-square-icon i {
  width: 28px !important;
  height: 28px !important;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.25));
}
.link-square-title {
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .linkSquaresGrid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
  .link-square-title { font-size: 0.74rem; }
}

/* Sélecteur de format dans l'éditeur de liens (Rectangle / Carré / Icône). */
.linkFormatRow { flex-wrap: wrap; }
.linkFormatPicker { display: flex; gap: 6px; }
.linkFormatBtn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 10px; min-width: 64px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.65);
  font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.linkFormatBtn:hover { border-color: rgba(255,255,255,0.25); color: #fff; }
.linkFormatBtn.active { border-color: rgba(124,111,255,0.8); background: rgba(124,111,255,0.18); color: #fff; }
.linkFormatPic { display: block; border: 1.5px solid currentColor; border-radius: 3px; opacity: 0.85; }
.linkFormatPic.pic-rect { width: 26px; height: 10px; }
.linkFormatPic.pic-square { width: 14px; height: 14px; }
.linkFormatPic.pic-icon { width: 12px; height: 12px; border-radius: 50%; margin: 1px 0; }