/* ================================
   base.css — Styles généraux ZaraSpace
   ================================ */

:root {
  --header-h: 60px;
  --stick-top: 65px;
}

/* ---------- Structure globale ---------- */
html,
body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: lightgrey;
}

.page-viewport {
  min-height: 100vh;
  padding-top: var(--header-h);
}

.page-viewport.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* =========================================================
   TYPOGRAPHIE GLOBALE — POLICES, TAILLES, TITRES, LIENS
   ========================================================= */

/* Police principale */
html, body {
  font-family: "Inter", "Roboto", "Segoe UI", Arial, sans-serif;
  font-size: 15px;          /* Base 15px → lisible et moderne */
  line-height: 1.5;
  color: #212529;           /* Couleur texte par défaut */
}

/* Paragraphes */
p {
  margin-top: 0;
  margin-bottom: 0.8rem;
  font-size: 1rem;          /* = 15px */
  line-height: 1.5;
}

/* Titres (hiérarchie moderne, espacement régulier) */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.25;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
  color: #111;
}

h1 { font-size: 1.2rem; }   
h2 { font-size: 1.175rem; } 
h3 { font-size: 1.15rem; }  
h4 { font-size: 1.125rem; }  
h5 { font-size: 1.1rem; }  
h6 { font-size: 1.1rem; }  

/* Liens */
a {
  color: #0d6efd;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

a:hover {
  color: #0a58ca;
  text-decoration: none;
}

/* Petits textes ou hints */
.small,
small {
  font-size: 0.8rem;
  color: #6c757d;
}

/* Listes */
ul, ol {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 1.25rem;
}


/* =========================================================
   SIDEbars FIXES + SCROLL INTERNE
   ========================================================= */

@media (min-width: 992px) {
  .sidebar-left,
  .sidebar-right {
    position: sticky;
    top: var(--stick-top);
    max-height: calc(100vh - var(--stick-top));
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1.5rem;
  }

  .main-surface {
    min-height: calc(100vh - var(--stick-top));
    padding-bottom: 1.5rem;
  }
}

/* Cacher scrollbars internes */
.sidebar-left,
.sidebar-right {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-left::-webkit-scrollbar,
.sidebar-right::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* =========================================================
   MODALES — RÈGLES RESPONSIVES 
   ========================================================= */

/* Contenu scrollable */
.modal-dialog-scrollable .modal-body {
  max-height: 95vh;
  overflow-y: auto;
  overflow-x: hidden; /* >>> AJOUT : pas de scroll horizontal dans le body scrollable */
}

/* >>> AJOUT : Casser les mots/URLs longs à l'intérieur des modales */
.modal-body,
.modal-body p,
.modal-body a,
.modal-body span,
.modal-body div {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* >>> AJOUT : Sécuriser aussi les listes internes des modals (likes, comments, intéressés) */
.likes-items,
.comments-items,
.interesses-items {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --- Très petits écrans (téléphones) : 100% largeur + hauteur --- */
@media (max-width: 576px) {

  .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;              /* Aucune marge */
    height: 100% !important;
  }

  .modal-content {
    height: 100vh !important;          /* Remplit l'écran en hauteur */
    border-radius: 0 !important;       /* Pas d'arrondi */
    max-width: 100vw;                  /* >>> AJOUT : ne dépasse jamais la largeur de l'écran */
    overflow-x: hidden;                /* >>> AJOUT : on coupe toute dérive horizontale */
  }

  .modal-lg-custom {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* --- Écrans moyens (576px–991px) : 90% --- */
@media (min-width: 576px) and (max-width: 991px) {
  .modal-lg-custom {
    max-width: 90% !important;
    margin: 0 auto !important;
  }
}

/* --- Écrans larges (992px–1399px) : 80% --- */
@media (min-width: 992px) and (max-width: 1399px) {
  .modal-lg-custom {
    max-width: 80% !important;
    margin: 0 auto !important;
  }
}

/* --- Très grands écrans ( ≥ 1400px ) : 70% --- */
@media (min-width: 1400px) {
  .modal-lg-custom {
    max-width: 70% !important;
    margin: 0 auto !important;
  }
}

/* =========================================================
   CKEDITOR 5 — TYPO & COULEUR DU TEXTE
   ========================================================= */

/* Zone éditable CKEditor : même style que les paragraphes globaux */
.ck-editor__editable,
.ck-content {
  font-family: "Inter", "Roboto", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: #000 !important;  /* Force texte bien lisible (noir/gris foncé) */
}

/* Paragraphes et listes à l'intérieur de l'éditeur */
.ck-content p,
.ck-content li {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

/* Optionnel : s'assurer que le texte dans les modales reste noir par défaut */
.modal-body {
  color: #000;
}

/* =======================
   Cover générique ZaraSpace
   ======================= */

.zs-cover-photo-wrapper {
  border-radius: .5rem;
  overflow: hidden;
}

/* Quand une vraie image existe : pleine largeur, hauteur auto */
.zs-cover-photo-img {
  width: 100%;
  height: auto;
  display: block;
}

.zs-cover-overlay {
  position: absolute;
  inset: 0;
  padding: .5rem 1rem;
}

.zs-cover-name {
  font-weight: 600;
  font-size: 1.5rem;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
  color: #fff;
}

.zs-cover-subtitle {
  font-size: .95rem;
  color: #f8f9fa;
  opacity: .9;
}

/* Fallback "cover" grise par défaut */
.zs-cover-default {
  width: 100%;
  background: #e9ecef;                /* gris clair */
}

.zs-cover-name-default {
  color: #343a40;
  text-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.zs-cover-subtitle-default {
  color: #6c757d;
}

/* Wrapper pour affichage carrée des images des publications */
.zs-img-square-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%;        /* ratio 1:1 */
  background-color: #ffffff;
  overflow: hidden;
  border-radius: .25rem;
}
.zs-img-square-wrapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;      /* on ne coupe pas l’image, on ajoute du blanc */
}

/* Wrapper pour affichage pleine dimension (talent, partenaire, etc.) */
.zs-img-full-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: .25rem;
}
/* Pour que le texte tronqué et le lien soient sur la même ligne */
.zs-card-text-inline p {
  display: inline;
  margin: 0;          /* enlève l'espace vertical qui provoquait la "ligne" */
}

/* Optionnel : éviter le retour à la ligne entre "..." et "En savoir plus" */
.zs-card-text-inline .zs-more-link {
  white-space: nowrap;
}