/* Variables de base */
:root {
  --bg: #fcfcfc;
  --grid: #ebebeb;
  --font: 'Outfit', sans-serif;
  --accent: #ffaad4;
  --accent-hover: #ff92c4;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  background-color: var(--bg);
  background-image: linear-gradient(0deg, transparent 24%, var(--grid) 25%),
                    linear-gradient(90deg, transparent 24%, var(--grid) 25%);
  background-size: 40px 40px;
  color: #222;
}

/* Header */
header.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid transparent;
  position: relative;
}

.logo { font-size: 1.8rem; font-weight: 700; letter-spacing: 1px; }

/* Barre de recherche */
.search-container {
  width: 100%;
  max-width: calc(100% - 700px);
  margin: 0 auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  z-index: 0;
  padding: 0 40px;
}

@media (max-width: 1000px) {
  .search-container { max-width: 90%; padding: 0 20px; }
}

.search-container input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #ccc;
  font-size: 1rem;
  outline: none;
  background: white;
  box-shadow: 0 0 0 3px transparent;
  transition: all 0.2s;
}
.search-container input:focus { border-color: var(--accent); }

/* Liens nav */
nav a { margin-left: 20px; text-decoration: none; color: #333; transition: 0.3s; }
nav a:hover { color: #000; }

#login-btn { padding: 8px 16px; border-radius: 8px; border: none; background-color: var(--accent); color: white; font-weight: bold; cursor: pointer; }

/* Grille principale */
main.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 250px);
  gap: 20px;
  justify-content: center;
  padding: 40px;
  max-width: calc(100% - 700px);
  margin: 0 auto;
  grid-auto-rows: minmax(min-content, auto);
}
@media (max-width: 1000px) { main.grid { max-width: 1200px; } }
@media (min-width: 1200px) { main.grid { grid-template-columns: repeat(4, 1fr); } }

/* Cartes */
.card {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 250px;
  height: 200px;
  padding: 5px;
  border-radius: 16px;
  background-color: white;
  color: #111;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, background 0.2s;
  border: 2px solid transparent;
  box-sizing: border-box;
  font-size: 1rem;
}
.card:hover { transform: scale(1.02); }
.card.large { width: 520px; } .card.tall { height: 420px; } .card.large.tall { width: 520px; height: 420px; }

.card .content { flex: 1 1 auto; padding: 0px 20px 20px 20px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; text-align:left; }
.card .content .title { font-size:2rem; margin-top:-25px; margin-bottom:8px; font-weight:700; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .content .text { font-size:1rem; color:#555; overflow:auto; }

/* Section d’icônes à droite */
.card .card-icons { width:48px; display:flex; flex-direction:column; justify-content:space-around; align-items:center; gap:0; padding:10px 5px; border-radius:12px; background-color:#f2f2f2; flex-shrink:0; }
.card .card-icons img { width:28px; height:28px; object-fit:contain; cursor:pointer; transition:transform .2s ease; } .card .card-icons img:hover { transform:scale(1.1); }

/* Image profil auteur ronde */
.author-pic { width:50px; height:50px; border-radius:50%; object-fit:cover; border:2px solid white; box-shadow:0 0 4px rgba(0,0,0,0.1); }

/* Couleurs de fond */
.pink { background-color: #ffaad4; } .blue { background-color: #a0d2ff; } .green { background-color: #baffc9; }
.purple { background-color: #d7bfff; } .yellow { background-color: #fff5b7; } .cyan { background-color: #b9f1ff; }

/* Footer */
footer { text-align:center; padding:20px; font-size:.9rem; color:#777; }

/* Menu profil aligné à droite */
#profile-menu { position:fixed; top:125px; right:20px; width:clamp(260px,20vw,350px); background:white; border-radius:16px; box-shadow:-5px 0 20px rgba(0,0,0,0.05); z-index:10; display:flex; flex-direction:column; padding:20px; transition:all .3s ease; }
@media (max-width:1000px) { #profile-menu { position:static; margin:40px auto 0; width:90%; } }
#profile-menu.hidden { display:none; }

.profile-main { text-align:center; margin-bottom:20px; }
.round.large { width:72px; height:72px; border-radius:50%; object-fit:cover; margin-bottom:10px; }
#profile-tab-pic { width:32px; height:32px; border-radius:50%; object-fit:cover; margin-right:8px; }

/* tabs */
.profile-tabs { display:flex; flex-direction:column; align-items:flex-start; margin-bottom:15px; gap:10px; }
.tab { display:flex; align-items:center; background:#eee; border-radius:12px; padding:8px 12px; cursor:pointer; width:100%; border:1px solid transparent; transition:background .2s; }
.tab-icon { width:24px; height:24px; margin-right:8px; border-radius:50%; object-fit:cover; }
.tab span { font-weight:bold; }
.tab.active { background-color:var(--accent); color:white; }

/* tab content */
.tab-content { display:none; animation:fadeIn .3s ease; } .tab-content.active { display:block; }
.tab-content input, .tab-content select { width:100%; padding:6px; margin-top:6px; margin-bottom:10px; border-radius:8px; border:1px solid #ccc; }
#save-pseudo { background-color:var(--accent); color:white; border:1px solid transparent; padding:8px; border-radius:10px; width:100%; margin-bottom:10px; } .logout { background-color:#ff7070; color:white; border:1px solid transparent; padding:8px; border-radius:10px; width:100%; margin-top:10px; }

/* ----------------- COMMENT MENU ----------------- */
#comment-menu {
  position: fixed;
  right: 20px;
  width: clamp(260px, 20vw, 350px);
  max-height: calc(100vh - 150px);
  background: white;
  border-radius: 16px;
  box-shadow: -5px 0 20px rgba(0,0,0,0.05);
  z-index: 999;
  display: flex;
  flex-direction: column;
  padding: 15px;
  overflow: hidden;
  transition: opacity .28s ease, transform .28s ease;
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  top: calc(125px + 400px);
}
#comment-menu.open { opacity:1; transform:translateX(0); pointer-events:auto; }
#comment-menu.hidden { display:none; }

@media (max-width:1000px) { #comment-menu { position:static; width:90%; margin:12px auto; max-height:60vh; } }

.comment-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
#comment-list { flex:1; overflow-y:auto; padding:5px; min-height:100px; }
#comment-form { flex-shrink:0; margin-top:10px; }

/* commentaire individuel */
#comment-list .comment { display:flex; align-items:flex-start; gap:8px; margin-bottom:10px; background:#f5f5f5; padding:8px; border-radius:10px; font-size:.9rem; position:relative; }
.comment-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid rgba(0,0,0,0.06); flex-shrink:0; }
.comment-content { flex:1; word-wrap:break-word; }

/* bouton options */
.comment-options-btn { background:transparent; border:none; cursor:pointer; font-size:18px; margin-left:8px; align-self:flex-start; }

/* menu options */
.comment-options { position:absolute; background:white; border:1px solid #ddd; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,0.1); margin-top:6px; right:10px; display:flex; flex-direction:column; z-index:2000; min-width:120px; }
.comment-options.hidden { display:none; }
.comment-options button { background:none; border:none; padding:8px 12px; text-align:left; cursor:pointer; font-size:.95rem; }
.comment-options button:hover { background:var(--accent); color:white; }

/* édition inline */
.edit-textarea { width:100%; resize:none; border-radius:6px; border:1px solid #ccc; padding:6px; margin-top:5px; font-size:.9rem; }
.save-edit-btn { margin-top:5px; background:var(--accent); color:white; border:none; border-radius:8px; padding:5px 10px; cursor:pointer; }
.cancel-edit-btn { margin-left:8px; margin-top:5px; background:#ddd; color:#333; border:none; border-radius:8px; padding:5px 10px; cursor:pointer; }
.save-edit-btn:hover { background:var(--accent-hover); }

/* form new comment */
#comment-form textarea { width:100%; resize:none; border-radius:8px; border:1px solid #ccc; padding:6px; margin-bottom:8px; }
#send-comment { background-color:var(--accent); color:white; border:none; padding:8px; border-radius:10px; width:100%; cursor:pointer; }

/* bouton fermer pastel */
#close-comments { background:var(--accent); color:white; border:none; border-radius:50%; width:28px; height:28px; font-size:18px; font-weight:bold; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s; }
#close-comments:hover { background:var(--accent-hover); transform:scale(1.1); }

/* DARK MODE */
body.dark { --bg:#1a1a1a; --grid:#333; color:white; }
body.dark header, body.dark footer, body.dark .card { background-color:#2a2a2a; border:2px solid var(--accent); }
body.dark nav a { color:#ccc; } body.dark nav a:hover { color:white; }
body.dark .search-container input { background-color:#2a2a2a; color:white; border:2px solid var(--accent); }
body.dark #profile-menu { background-color:#2b2b2b; color:white; }
body.dark .tab { background:#333; color:white; border:1px solid var(--accent); }
body.dark .tab.active { background-color:var(--accent); color:white; }
body.dark input, body.dark select, body.dark textarea { background-color:#222; color:white; border:1px solid var(--accent); }
body.dark #comment-menu { background:#2b2b2b; color:white; }
body.dark #comment-list .comment { background:#333; }
body.dark #comment-form textarea { background:#222; color:white; border:1px solid var(--accent); }

/* Utils */
.hidden { display:none !important; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:translateY(0);} }