/*
 * Le Cercle — styles dédiés. S'appuie sur les variables de charte.css (couleurs,
 * typographie, thème sombre) déjà chargée avant ce fichier. On ne redéfinit ici
 * que la mise en page propre au réseau social.
 */

.cercle-main{
  width: var(--largeur-contenu);
  max-width: 900px;
  margin: 24px auto 64px;
  padding: 0 4vw;
}

.cercle-carte{
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 22px 24px;
  margin: 0 0 22px;
}
.cercle-etroit{ max-width: 560px; margin-left: auto; margin-right: auto; }

.cercle-note{ font-size: var(--taille-petite); color: var(--texte-attenue); }
.cercle-mono{ font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--texte-attenue); }

.cercle-erreur{
  background: #fbeaea; color: #7a1f1f; border: 1px solid #e2b3b3;
  padding: 10px 14px; border-radius: var(--rayon);
}
.cercle-succes{
  background: #e9f4e9; color: #245a24; border: 1px solid #b6d8b6;
  padding: 10px 14px; border-radius: var(--rayon);
}
[data-theme="sombre"] .cercle-erreur{ background:#3a2020; color:#ffb4b4; border-color:#5a2e2e; }
[data-theme="sombre"] .cercle-succes{ background:#1f3320; color:#a9e6ab; border-color:#33512f; }

/* --- Formulaires ---------------------------------------------------------- */
.cercle-form label{ display:block; margin: 0 0 14px; font-weight:600; }
.cercle-form input[type=text],
.cercle-form input[type=email],
.cercle-form input[type=password],
.cercle-form input[type=number],
.cercle-form input[type=file],
.cercle-form textarea{
  display:block; width:100%; margin-top:6px;
  font: inherit; font-weight:400;
  padding:10px 12px;
  background: var(--fond); color: var(--texte);
  border:1px solid var(--bordure); border-radius: var(--rayon);
}
.cercle-form textarea{ resize: vertical; }
.cercle-inline{ font-weight:400 !important; display:flex; gap:10px; align-items:flex-start; }
.cercle-inline input{ width:auto; margin-top:4px; }

.cercle-bouton{
  display:inline-block; cursor:pointer;
  background: var(--accent-vert); color:#fff;
  border:1px solid transparent; border-radius: var(--rayon);
  padding:11px 20px; font: inherit; font-weight:700;
  text-decoration:none; min-height: var(--cible-tactile);
}
.cercle-bouton:hover{ filter:brightness(1.07); }
.cercle-bouton-doux{ background:transparent; color:var(--accent-vert); border-color:var(--accent-vert); }
.cercle-bouton-petit{ padding:7px 14px; min-height:auto; font-size:var(--taille-petite); }
.cercle-bouton-danger{ background:var(--accent-chaud); }
.cercle-lien-annuler{ margin-left:12px; font-size:var(--taille-petite); }

/* --- Charte --------------------------------------------------------------- */
.cercle-charte{ border:1px solid var(--bordure); border-radius:var(--rayon); padding:14px 16px; margin:14px 0; }
.cercle-charte legend{ font-weight:700; padding:0 8px; }
.cercle-charte-texte{
  white-space: pre-wrap; font: inherit; font-size:var(--taille-petite);
  max-height: 260px; overflow:auto; background:var(--fond);
  border:1px solid var(--bordure); border-radius:var(--rayon); padding:12px;
}

/* --- Accueil -------------------------------------------------------------- */
.cercle-accroche{ font-size:1.05em; }
.cercle-accueil-liste{ line-height:1.8; }
.cercle-accueil-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }

/* --- Statut --------------------------------------------------------------- */
.cercle-statut{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:var(--taille-petite); font-weight:700; }
.cercle-statut-valide{ background:#e9f4e9; color:#245a24; }
.cercle-statut-en_attente{ background:#fdf3e0; color:#8a5a12; }
.cercle-statut-suspendu{ background:#fdeede; color:#8a4a1c; }
.cercle-statut-exclu{ background:#fbeaea; color:#7a1f1f; }

/* --- Annuaire ------------------------------------------------------------- */
.cercle-recherche{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px; }
.cercle-recherche label{ flex:1 1 260px; font-weight:600; }
.cercle-recherche input{ display:block; width:100%; margin-top:6px; padding:10px 12px; font:inherit;
  background:var(--fond); color:var(--texte); border:1px solid var(--bordure); border-radius:var(--rayon); }

.cercle-annuaire{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.cercle-annuaire-lien{ display:flex; gap:12px; align-items:center; padding:12px; border:1px solid var(--bordure);
  border-radius:var(--rayon); text-decoration:none; color:var(--texte); background:var(--fond); }
.cercle-annuaire-lien:hover{ border-color:var(--accent-vert); }
.cercle-annuaire-txt{ display:flex; flex-direction:column; gap:2px; }
.cercle-type{ font-size:var(--taille-petite); color:var(--accent-vert); }
.cercle-loc{ font-size:var(--taille-petite); color:var(--texte-attenue); }

.cercle-avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.cercle-avatar-grand{ width:110px; height:110px; border-radius:12px; object-fit:cover; }
.cercle-avatar-vide{ display:flex; align-items:center; justify-content:center;
  background:var(--accent-vert); color:#fff; font-weight:700; text-transform:uppercase; }
.cercle-avatar.cercle-avatar-vide{ font-size:20px; }
.cercle-avatar-grand.cercle-avatar-vide{ font-size:44px; }

/* --- Fiche profil --------------------------------------------------------- */
.cercle-profil-entete{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.cercle-profil-champs{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:18px 0; }
.cercle-profil-champs dt{ font-weight:700; color:var(--texte-attenue); }
.cercle-profil-champs dd{ margin:0; }
.cercle-photo-actuelle{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.cercle-badge-radio{ display:inline-block; padding:4px 12px; border:1px dashed var(--bordure); border-radius:999px; font-size:var(--taille-petite); }
.cercle-profil-liens{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.cercle-options{ border:1px solid var(--bordure); border-radius:var(--rayon); padding:14px 16px; margin:14px 0; }
.cercle-options legend{ font-weight:700; padding:0 8px; }

/* --- Fil / posts ---------------------------------------------------------- */
.cercle-post{ background:var(--fond-carte); border:1px solid var(--bordure); border-radius:var(--rayon);
  box-shadow:var(--ombre); padding:18px 20px; margin:0 0 16px; }
.cercle-post-entete{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.cercle-post-auteur{ font-weight:700; text-decoration:none; }
.cercle-post-date{ font-size:var(--taille-petite); color:var(--texte-attenue); }
.cercle-post-corps{ margin:10px 0; }
.cercle-post-medias{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; }
.cercle-post-photo{ max-width:100%; width:auto; max-height:420px; border-radius:var(--rayon); border:1px solid var(--bordure); }
.cercle-post-video{ max-width:100%; max-height:460px; border-radius:var(--rayon); background:#000; }

.cercle-commentaires{ border-top:1px solid var(--bordure); margin-top:12px; padding-top:12px; }
.cercle-commentaire{ padding:8px 0; border-bottom:1px dashed var(--bordure); }
.cercle-comm-auteur{ font-weight:700; text-decoration:none; margin-right:8px; }
.cercle-comm-date{ font-size:var(--taille-petite); color:var(--texte-attenue); }
.cercle-comm-corps{ margin-top:2px; }
.cercle-comm-form{ display:flex; gap:8px; margin-top:10px; }
.cercle-comm-form input[type=text]{ flex:1; padding:9px 12px; font:inherit;
  background:var(--fond); color:var(--texte); border:1px solid var(--bordure); border-radius:var(--rayon); }

/* --- Tube ----------------------------------------------------------------- */
.cercle-tube-grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.cercle-tube-item{ margin:0; }
.cercle-tube-video{ width:100%; border-radius:var(--rayon); background:#000; }

/* --- Chat ----------------------------------------------------------------- */
.cercle-chat-fil{ max-height:52vh; overflow-y:auto; border:1px solid var(--bordure); border-radius:var(--rayon);
  padding:12px; margin:12px 0; background:var(--fond); }
.cercle-chat-msg{ padding:6px 0; border-bottom:1px dashed var(--bordure); }
.cercle-chat-auteur{ font-weight:700; text-decoration:none; margin-right:8px; }
.cercle-chat-date{ font-size:var(--taille-petite); color:var(--texte-attenue); }
.cercle-chat-corps{ margin-top:2px; }
.cercle-chat-form{ display:flex; gap:8px; }
.cercle-chat-form input[type=text]{ flex:1; padding:11px 12px; font:inherit;
  background:var(--fond); color:var(--texte); border:1px solid var(--bordure); border-radius:var(--rayon); }

/* --- Annonces ------------------------------------------------------------- */
.cercle-annonces{ list-style:none; padding:0; margin:0; }
.cercle-annonce{ border:1px solid var(--bordure); border-radius:var(--rayon); padding:16px 18px; margin-bottom:14px; background:var(--fond); }
.cercle-annonce-titre{ margin:0 0 4px; }
.cercle-annonce-meta{ font-size:var(--taille-petite); color:var(--texte-attenue); margin:0 0 8px; }
.cercle-annonce-photo{ max-width:100%; max-height:360px; border-radius:var(--rayon); border:1px solid var(--bordure); }

/* --- Modération ----------------------------------------------------------- */
.cercle-mod-liste{ list-style:none; padding:0; margin:0; }
.cercle-mod-item{ border:1px solid var(--bordure); border-radius:var(--rayon); padding:14px 16px; margin-bottom:12px; background:var(--fond); }
.cercle-mod-tete{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.cercle-mod-detail{ display:flex; gap:16px; flex-wrap:wrap; font-size:var(--taille-petite); color:var(--texte-attenue); margin:8px 0; }
.cercle-mod-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.cercle-mod-form{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.cercle-mod-form input[type=text]{ padding:7px 10px; font:inherit; background:var(--fond-carte);
  color:var(--texte); border:1px solid var(--bordure); border-radius:var(--rayon); }
.cercle-jours{ width:70px; padding:7px 10px; font:inherit; background:var(--fond-carte);
  color:var(--texte); border:1px solid var(--bordure); border-radius:var(--rayon); }

@media (max-width:600px){
  .cercle-carte{ padding:16px; }
  .cercle-profil-champs{ grid-template-columns:1fr; }
}