/* /assets/css/screen.css */

/* 1. Reset et réglages globaux */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 100%; } /* 1rem = 16px */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
  margin: 0;
}

/* 2. Variables globales */
:root {
  --color-dark-petrol: #081E23;
  --color-terracotta: #D65A3A;
  --color-off-white: #F3F2F0;
  --color-soft-gray: #A8B0B3;

  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-serif: 'Literata', Georgia, serif;
  --font-arabic: 'Amiri Quran', 'Noto Naskh Arabic', serif;

  --bg-color: var(--color-dark-petrol);
  --text-color: var(--color-off-white);
  --accent-color: var(--color-terracotta);
  --secondary-text-color: var(--color-soft-gray);
}
[data-theme="light"] {
  --bg-color: var(--color-off-white);
  --text-color: var(--color-dark-petrol);
  --secondary-text-color: #5b6f73;
}

/* 3. Structure du site */
.site-wrapper { display:flex; flex-direction:column; min-height:100vh; }
.site-main { flex-grow:1; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 4vw; }

/* 4. Typographie de base */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1.2;
  margin: 0 0 .6em 0;
}
p { margin: 0 0 1.25em 0; }
a { color: var(--accent-color); text-decoration: none; transition: opacity .2s ease-in-out; }
a:hover { opacity: .8; }

/* 4bis. En-tête du site */
.site-header { padding: 2rem 0; }
.site-header-container { display:flex; justify-content:space-between; align-items:center; }
.site-logo .logo-word { fill: var(--text-color); transition: fill .3s ease; }
.site-logo .logo-dot { fill: var(--accent-color); }

/* Menu Trigger (Hamburger) */
.menu-trigger {
  background: none; border: none; cursor: pointer; padding: 8px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  width: 32px; height: 32px;
}
.menu-trigger-line { display:block; background-color: var(--text-color); height:2px; width:100%; transition: transform .3s ease; }

/* 5. Pied de page du site */
.site-footer { padding: 4rem 0 2rem; border-top: 1px solid rgba(243,242,240,.1); margin-top: 4rem; }
.footer-container { }
.footer-title { font-size: 1.5rem; margin-bottom: .5rem; }
.footer-subtitle { color: var(--secondary-text-color); margin-bottom: 2rem; }
.footer-form { display:flex; border:1px solid rgba(168,176,179,.3); border-radius:8px; padding:4px; background-color: rgba(255,255,255,.05); }
.footer-form input {
  flex-grow:1; background:none; border:none; color:var(--text-color);
  padding:.5rem 1rem; font-size:1rem; font-family:var(--font-sans);
}
.footer-form input:focus { outline:none; }
.footer-form-button {
  background-color: var(--accent-color); color: var(--color-dark-petrol);
  border:none; border-radius:6px; cursor:pointer; padding:.6rem; display:flex; align-items:center; justify-content:center; transition: background-color .2s ease;
}
.footer-form-button:hover { background-color: #e96f53; }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  font-size:.9rem; color: var(--secondary-text-color); padding-top:2rem; border-top:1px solid rgba(243,242,240,.1);
}
.footer-social, .footer-nav { display:flex; gap:1.5rem; }
.footer-social a, .footer-nav a { color: var(--secondary-text-color); }
.footer-social a:hover, .footer-nav a:hover { color: var(--accent-color); }

/* 6. Menu Latéral (Drawer) */
.menu-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; transition: visibility .3s; }
.menu-overlay { position:absolute; inset:0; background-color: rgba(8,30,35,.7); opacity:0; transition: opacity .3s ease-out; }
.menu-panel {
  position:absolute; top:0; right:0; bottom:0; width:min(400px, 90vw);
  background-color: var(--bg-color); border-left:1px solid rgba(243,242,240,.1);
  transform: translateX(100%); transition: transform .3s ease-out;
  display:flex; flex-direction:column; padding:1.5rem 2rem;
}
body.menu-is-open .menu-drawer { visibility: visible; }
body.menu-is-open .menu-overlay { opacity: 1; }
body.menu-is-open .menu-panel { transform: translateX(0); }
/* Transformation de l'icône hamburger */
body.menu-is-open .menu-trigger-line:first-child { transform: translateY(4px) rotate(45deg); }
body.menu-is-open .menu-trigger-line:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu-header { display:flex; justify-content:flex-end; align-items:center; padding-bottom:2rem; }
.menu-close { background:none; border:none; padding:8px; cursor:pointer; color:var(--text-color); }
.menu-nav { flex-grow:1; font-family:var(--font-sans); font-size:1.5rem; font-weight:500; }
.menu-nav ul { list-style:none; padding:0; margin:0; }
.menu-nav li { margin-bottom:1.5rem; }
.menu-nav a { color: var(--text-color); }
.menu-nav a:hover, .menu-nav .nav-current a { color: var(--accent-color); }
.menu-footer { padding-top:2rem; display:flex; gap:1.5rem; font-size:.9rem; color:var(--secondary-text-color); }
.menu-footer a { color: var(--secondary-text-color); }
.menu-footer a:hover { color: var(--accent-color); }

/* Classe utilitaire pour l'accessibilité */
.u-hidden-visually { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* 7. Bloc Verset Coranique */
.quran-verse {
  border-left: 4px solid var(--accent-color);
  background-color: rgba(8,30,35,.5);
  padding: 1.5rem 2rem; margin: 2.5rem 0; border-radius: 0 8px 8px 0; transition: background-color .3s ease;
}
[data-theme="light"] .quran-verse { background-color: rgba(214,90,58,.05); }
.quran-verse .ar {
  font-family: var(--font-arabic);
  font-size: clamp(1.6rem, 4vw, 2rem);
  line-height: 1.8; text-align:right; margin-bottom: 1.5rem; color: var(--text-color);
}
.quran-verse .tr {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.1rem); line-height:1.7; color: var(--text-color); opacity: .9;
}
.quran-verse .quran-reference {
  display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem;
  font-family: var(--font-sans); font-size:.85rem; color: var(--secondary-text-color);
}
.quran-verse .copy-reference {
  position:relative; background:none; border:none; cursor:pointer; color:inherit; opacity:.7; transition: opacity .2s ease, color .2s ease;
}
.quran-verse .copy-reference:hover { opacity:1; color: var(--accent-color); }
.copy-reference .feedback-copied { display:none; }
.copy-reference.is-copied .icon-copy { display:none; }
.copy-reference.is-copied .feedback-copied { display:inline; color: var(--accent-color); font-weight: 500; }

/* 8. Transitions de Page (Swup) */
html.is-animating { transition: opacity 220ms ease-out; }
html.is-leaving { opacity: 0; }
#swup { opacity: 0; transition: opacity 220ms ease-out; }
html.is-rendering #swup { opacity: 1; }

/* 9. Effet Parallax Image de Couverture */
.post-feature-image-wrapper {
  position: relative; width:100%; height:450px; max-height:60vh; overflow:hidden; margin-bottom:2rem;
}
.post-feature-image { width:100%; height:115%; object-fit:cover; will-change: transform; }

/* 10. Flux d'articles (Accueil) */
.post-feed { display:flex; flex-direction:column; margin-top:4rem; }
.post-card { border-top: 1px solid rgba(168,176,179,.2); padding: 2.5rem 0; }
.post-card:last-of-type { border-bottom: 1px solid rgba(168,176,179,.2); }
.post-card-featured { border-top:none; padding-top:0; }
.post-card-featured .post-card-title { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.post-card-header { margin-bottom: 1rem; }
.post-card-tag {
  font-family: var(--font-sans); font-size:.8rem; font-weight:500; color: var(--secondary-text-color);
  text-transform: uppercase; letter-spacing: .5px;
}
.post-card-title { font-size: 1.6rem; margin-top:.5rem; }
.post-card-title a { color: var(--text-color); transition: color .2s ease-in-out; }
.post-card-title a:hover { color: var(--accent-color); }
.post-card-excerpt { font-family: var(--font-serif); color: var(--secondary-text-color); font-size: 1.1rem; line-height:1.7; margin-bottom:1.5rem; }
.post-card-meta { font-family: var(--font-sans); font-size:.85rem; color: var(--secondary-text-color); }

/* 11. Pagination */
.pagination {
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--font-sans); font-size:.9rem; color: var(--secondary-text-color);
  margin-top:4rem; padding:1rem 0;
}
.pagination a { color: var(--text-color); }
.pagination a:hover { color: var(--accent-color); }
.pagination-newer, .pagination-older { flex:1; }
.pagination-older { text-align:right; }

/* 12. Ghost Koenig widths */
.kg-width-wide { max-width: 1200px; margin-left:auto; margin-right:auto; }
.kg-width-full {
  width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
}
@media (max-width: 1024px){
  .kg-width-full{ width:100%; left:0; right:0; margin-left:0; margin-right:0; }
}

/* Utilitaires */
.hidden{display:none!important;}


/* === Theme toggle === */
.theme-toggle { background:none; border:none; cursor:pointer; padding:8px; color: var(--accent-color); }
.theme-toggle .icon-theme { stroke: var(--accent-color); }

/* === TOC (Table of Contents) === */
.toc{position:sticky; top:120px; align-self:start; max-height:calc(100vh - 140px); overflow:auto; padding-left:1.2em}
.toc-list,.toc-sublist{list-style:none; margin:0; padding:0}
.toc-item{margin-bottom:.5em}
.toc-h3{padding-left:1em}
.toc-link{display:block; color:var(--secondary-text-color); text-decoration:none; font-size:.92em; line-height:1.5; transition:opacity .2s ease,color .2s ease; border-left:2px solid transparent; padding-left:.8em}
.toc-link:hover{opacity:1; color:var(--accent-color)}
.toc-link.is-active{opacity:1; color:var(--accent-color); border-left-color:var(--accent-color); font-weight:600}

/* Layout when TOC present */
.post-grid{display:grid; grid-template-columns: 1fr; gap:32px}
.post-sidebar{display:none}
@media(min-width: 1100px){
  .post-grid{grid-template-columns: minmax(0,1fr) 280px}
  .post-sidebar{display:block}
}

/* === Share icons === */
.share-icons{display:flex; align-items:center; gap:1.2rem; margin-top:24px; margin-bottom:8px}
.share-icons a,.share-icons button{display:inline-flex; background:none; border:none; padding:0; cursor:pointer; color: var(--accent-color); transition:color .2s ease, transform .2s ease}
.share-icons a:hover,.share-icons button:hover{color: var(--text-color); transform:translateY(-2px)}
.share-copy-link{position:relative}
.share-copy-link .copy-feedback{position:absolute; bottom:150%; left:50%; transform:translateX(-50%); background:var(--bg-color); color:var(--text-color); padding:.3em .8em; border:1px solid rgba(168,176,179,.3); border-radius:4px; font-size:.8em; white-space:nowrap; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease}
.share-copy-link.is-copied .copy-feedback{opacity:1; visibility:visible}