/* ==========================
   GLOBAL RESET & BASICS
========================== */
* { box-sizing: border-box; }

body {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 18px;
  font-family: "Lucida Console", monospace;
  font-size: 15px;
  color: #d884b2;
  line-height: 1.2;
  background: #ffffff url("https://files.catbox.moe/ew8xd4.jpg");
}

::selection { background: rgba(0,0,0,0.2); }

mark {
  background-color: inherit;
  color: #d884b2;
  text-shadow: 1px 1px 4px #ffc9e1;
}

a {
  text-decoration: underline;
  color: #ffc9e1;
}
a:hover, a:focus { 
  color: #e57fb8;
  text-decoration: none;
}

/* ==========================
   LAYOUT GRID
========================== */
.layout {
  width: 1000px;
  display: grid;
  grid-gap: 18px;
  grid-template: 
    "header header" auto
    "leftSidebar main" auto
    "footer footer" auto / 224px auto;
}

main {
  grid-area: main;
  padding: 26px;
  background: #fff3f9ff;
  border: 3px solid #ff9eb8;
  border-radius: 26px;
  line-height: 1.5;
  overflow-y: auto;
}

/* ==========================
   HEADER
========================== */
header {
  grid-area: header;
  font-size: 1.2em;
  border: 3px solid #ff9eb8;
  border-radius: 26px;
  background: #fff3f9ff;
}
.header-content { padding: 22px; }
.header-title {
  font-family: "Homemade Apple", cursive;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
   text-shadow: 1px 1px 2px #ddc7d3;
}

/* ==========================
   SIDEBARS
========================== */
aside {
  grid-area: aside;
  border: 3px solid #ff9eb8;
  border-radius: 26px;
  background: #ffffff;
  padding: 25px;
  color: #d884b2;
  overflow: hidden;
}

.left-sidebar {
  grid-area: leftSidebar;
  position: sticky;
  top: 18px; 
  align-self: start; 
  height: 430px;
 width: 330px;        
  margin-left: -120px;
}


.sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  font-family: "Lucida Console", monospace;
}

.sidebar-section:not(:last-child) { margin-bottom: 3em; }
.sidebar-section ul, .sidebar-section ol { padding-left: 1.5em; }
.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) { margin-top: 10px; }

.sidebar-section blockquote {
  background: rgba(0,0,0,0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
  
}

/* ==========================
   NAVIGATION
========================== */
nav { margin-bottom: 3em; }
nav .sidebar-title { margin-bottom: 0.5em; }

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav ul li { margin-bottom: 0; }
nav ul li > a,
nav ul li > details summary,
nav ul li > strong { display: inline-block; padding: 5px 10px; }
nav ul summary { cursor: pointer; }
nav ul ul li > a { padding-left: 30px; }

/* ==========================
   MAIN CONTENT STYLING
========================== */
main a, main a:visited { color: #ffc9e1; }
main a:hover, main a:focus { color: #e57fb8; text-decoration-style: wavy; }

main p, main .image, main .full-width-image, main .two-columns { margin: 0.75em 0; }
main ol, main ul { margin: 0.5em 0; padding-left: 1.5em; }
main ol li, main ul li { margin-bottom: 0.2em; line-height: 1.3; }

main blockquote { background: rgba(0,0,0,0.1); padding: 15px; margin: 1em 0; border-radius: 10px; }
main pre { margin: 1em 0 1.5em; }
main code { text-transform: none; }
main hr { border: 0; border-top: 3px solid #ff9eb8; margin: 1.5em 0; }

main h1,h2,h3,h4,h5,h6 { font-family: "Lucida Console", monospace; margin-bottom:0; line-height:1.5; }
main h1 { font-size: 1.5em; }
main h2 { font-size: 1.4em; }
main h3 { font-size: 1.3em; }
main h4 { font-size: 1.2em; }
main h5 { font-size: 1.1em; }
main h6 { font-size: 1em; }

/* TWO COLUMNS */
.two-columns { display: flex; }
.two-columns > * { flex:1 1 0; margin:0; }
.two-columns > *:first-child { padding-right: 0.75em; }
.two-columns > *:last-child { padding-left: 0.75em; }

/* IMAGES */
.image { display:block; max-width:100%; height:auto; }
.full-width-image { display:block; width:100%; height:auto; }
.images {
  display:flex;
  width: calc(100% + 10px);
  margin: 0 -5px;
}
.images img { width:100%; padding:5px; ; margin:0; max-width: 100%; height: auto; overflow:hidden; }

.img-left {
  float: left;
  margin: 10px 15px 10px 0;   
  width: 150px;            
  height: auto;            
  max-width: 150px;        
  border-radius: 10px;
}

.img-right {
  float: right;
  margin: 0 0 10px 15px;
  width: 150px;
  height: auto;
  max-width: 150px;
  border-radius: 10px;
}

.circle-gallery {
  display: flex;             
  gap: 15px;                
  justify-content: center;  
  flex-wrap: wrap;       
 
}

.circle-gallery img {
  width: 200px;             
  height: 200px;            
  border-radius: 50%;      
  object-fit: cover;         
  display: block;  
  transition: box-shadow 0.3s ease, transform 0.3s ease; 
  border: 4px solid #FF9EB8; 
}

.circle-gallery img:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); 
  transform: scale(1.05); 
  border-color: #cc6ea0;
}

/* SITE BUTTON */
.site-button { display:flex; flex-direction:column; align-items:center; }
.site-button textarea { font-family: monospace; font-size: 0.7em; }

/* ==========================
   MAIN SECTIONS
========================== */
main {
  grid-area: main;
  padding: 0;          
  background: transparent; 
  border: none;           
  overflow-y: auto;
}


main section {
  margin-bottom: 2em;        
  padding: 26px;             
  border: 3px solid #ff9eb8; 
  border-radius: 26px;       
  background-color: #fff3f9ff; 
}

.emoji {
  width: 20px;           
  height: 20px;
  vertical-align: middle; 
  margin-right: 10px;     
}

* { box-sizing: border-box; }

.toggle-menu {
  cursor: pointer;
  background: none;
  border: 1px solid #FF9EB8;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #D884B2;   
  font-family: "Lucida Console", monospace;
}

.dropdown {
  display: none;             
  border: 2px solid #FF9EB8;
  border-radius: 10px;
  background-color: #FFF3F9;
  margin-top: 8px;
  padding: 10px;
}


.scrollable-gallery {
  max-height: 340px;         
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 8px;
}

/* itemsstyle */
.gallery-item {
  text-align: center;

}

.gallery-item img {
  width: 100%;
  max-width: 120px;   
  height: auto;       
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

.gallery-item p {
  margin-top: 5px;
  font-size: 14px;
  color: #D884B2;   
  font-family: "Lucida Console", monospace;
}

/* scrollbar personnalisée */
.scrollable-gallery::-webkit-scrollbar {
  width: 9px;
}

.scrollable-gallery::-webkit-scrollbar-track {
  background: #FFE6F0;
  border-radius: 10px;
}

.scrollable-gallery::-webkit-scrollbar-thumb {
  background-color: #FF9EB8;
  border-radius: 10px;
  border: 2px solid #FFE6F0;
}

.scrollable-gallery::-webkit-scrollbar-thumb:hover {
  background-color: #FF6F96;
}

/* ==========================
   ACCESSIBILITY
========================== */
#skip-to-content-link {
  position: fixed;
  top:0;
  left:0;
  display:inline-block;
  padding:0.375rem 0.75rem;
  font-size:1.25rem;
  background-color: #fff3f9ff;
  color: #717d5f;
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}
#skip-to-content-link:focus, #skip-to-content-link:focus-within { transform: translateY(0); }

/* ==========================
   RESPONSIVE (MAX 800px)
========================== */
@media (max-width:800px){
  body { font-size:14px; }
  .layout { width:100%; grid-template:"header" auto "main" auto "footer" auto / 1fr; }
  .left-sidebar, .right-sidebar { display:none; }
  aside { border-bottom:1px solid; padding:9px; font-size:0.9em; }
  main { max-height:none; padding:15px; }
  .images { flex-wrap:wrap; }
  .images img { width:100%; }
  #skip-to-content-link { font-size:1rem; }
}