:root {
  --wp--preset--color--primary-background: #F9FAF9; 
  --wp--preset--color--secondary-background: #E4EBE7;
  --wp--preset--color--third-background: #DEE8E3;
  --wp--preset--color--primary-text: #1C2A24;
  --wp--preset--color--secondary-text: #435850;
  --wp--preset--color--link: #1F6450; 
  --wp--preset--color--highlight: #B3CDCE;
  --wp--preset--color--white: #ffffff;
  --radius: 12px;
}

body.app-active, #wrapper.app-wrapper { background-color: var(--wp--preset--color--primary-background) !important; }
.cursor-pointer { cursor: pointer; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Boutons harmonisés */
#wrapper.app-wrapper .is-style-fill { 
    background-color: var(--wp--preset--color--link) !important; 
    color: var(--wp--preset--color--white) !important; 
    border-radius: var(--radius) !important; 
    border: none !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}
#wrapper.app-wrapper .is-style-fill:hover {
    transform: translateY(-2px);
}

/* BARRE DE RECHERCHE */
.explore-header { width: 100%; margin: 0 auto 3rem auto; text-align: center; }
.previoos-search-box { display: flex; gap: 15px; align-items: stretch; width: 100%; max-width: 100%; margin-top: 2rem; }
.previoos-search-box input[type="search"] { 
    flex: 1 !important; 
    width: 100% !important; 
    max-width: 100% !important; 
    border-radius: var(--radius); 
    padding: 15px 20px; 
    border: 1px solid var(--wp--preset--color--third-background); 
}

/* GRILLE GLOBALE */
.previoos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; width: 100%; }

.project-card { transition: transform 0.25s ease, box-shadow 0.25s ease; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--third-background); display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); width: 100%; }
.project-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(28, 42, 36, 0.08); border-color: var(--wp--preset--color--highlight); }
.truncate-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* LAYOUT PROJET FIXE */
.project-layout { display: flex; gap: 40px; align-items: flex-start; width: 100%; }
.project-layout-images { width: calc(65% - 20px); min-height: 400px; display: flex; flex-direction: column; gap: 20px; }
.project-layout-images img { width: 100%; border-radius: var(--radius); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

.project-layout-text { 
    width: calc(35% - 20px);
    position: sticky; 
    top: 40px; 
    background: var(--wp--preset--color--white); 
    border: 1px solid var(--wp--preset--color--third-background);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    padding: 30px; 
    border-radius: var(--radius); 
    max-height: calc(100vh - 80px); 
    overflow-y: auto; 
    scrollbar-width: thin;
    scrollbar-color: var(--wp--preset--color--highlight) transparent;
}
.project-layout-text::-webkit-scrollbar { width: 6px; }
.project-layout-text::-webkit-scrollbar-track { background: transparent; }
.project-layout-text::-webkit-scrollbar-thumb { background-color: var(--wp--preset--color--highlight); border-radius: 10px; }

.author-block-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 5px 10px; border-radius: var(--radius); transition: background 0.2s; margin-left:-10px; }
a.author-block-link:hover { background: var(--wp--preset--color--third-background); }

body.portfolio-active #breadcrumb, body.portfolio-active .breadcrumbs { display: none !important; }

@media (max-width: 900px) {
  .profile-header-container { flex-direction: column !important; align-items: center !important; gap: 15px !important; }
  .profile-text-container { text-align: center !important; padding-top: 0 !important; }
  #profile-actions { justify-content: center !important; } /* Mise à jour de l'ID */
  
  .project-layout { flex-direction: column; gap: 30px; }
  .project-layout-images { width: 100%; min-height: 200px; }
  .project-layout-text { width: 100%; position: relative; top: 0; max-height: none; overflow-y: visible; }
}

@media (max-width: 600px) {
  .previoos-search-box { flex-direction: column !important; }
  .previoos-search-box input, .previoos-search-box button { width: 100% !important; max-width: 100% !important; }
}