/*
Theme Name: Grimoire Child
Template: generatepress
Author: Karasumei
Author URI: https://le-grimoire.fr
Description: Habillage « Le Grimoire » (dark fantasy, or & parchemin, Cormorant/EB Garamond) calé sur le-grimoire.fr.
Version: 1.2.0
*/

:root{
  --bg-0:#06080f; --bg-1:#0a0d1a; --bg-2:#0f1326; --bg-3:#151a31;
  --bg-card:#121733; --bg-card-t:rgba(18,23,44,.62);
  --ink:#ece7d8; --ink-soft:#b8b2a2; --ink-dim:#7e7869;
  --gold:#c9a85c; --gold-bright:#e9cf86; --gold-deep:#9a7d3c; --gold-glow:rgba(201,168,92,.35);
  --crimson:#9e1b1b; --crimson-bright:#c12626;
  --line:rgba(201,168,92,.16); --line-strong:rgba(201,168,92,.42);
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'EB Garamond',Georgia,serif;
  --black-letter:'UnifrakturMaguntia',serif;
  --radius:14px; --radius-sm:9px;
}

/* ── Base ─────────────────────────────────────────────── */
body{
  background:var(--bg-0);
  background-image:
    radial-gradient(1200px 700px at 72% -12%, #0f1326 0%, transparent 60%),
    radial-gradient(900px 600px at 0% 100%, #0a0d1a 0%, transparent 55%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--body);
  font-size:19px; line-height:1.72;
}
::selection{ background:var(--gold); color:var(--bg-0); }
.grid-container{ max-width:1100px; }

/* ── Titres ───────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6,.entry-title{
  font-family:var(--display); color:var(--ink); font-weight:600; line-height:1.12; letter-spacing:.01em;
}
.entry-title a{ color:var(--ink); }
.entry-title a:hover{ color:var(--gold-bright); }

/* ── Liens ────────────────────────────────────────────── */
a{ color:var(--gold); text-decoration:none; transition:color .25s ease; }
a:hover{ color:var(--gold-bright); }
.entry-content a{ text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; }
.entry-content a:hover{ text-decoration-color:var(--gold); }

/* ── En-tête & navigation ─────────────────────────────── */
.site-header{ background:rgba(6,8,15,.86); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); }
.main-title a, .site-title a{ font-family:var(--black-letter); color:var(--gold-bright); font-weight:400; }
.site-description{ font-family:var(--display); color:var(--ink-soft); font-style:italic; }
.main-navigation, .main-navigation .inside-navigation{ background:transparent; }
.main-navigation a{ color:var(--ink-soft); font-family:var(--body); letter-spacing:.02em; }
.main-navigation a:hover,
.main-navigation .current-menu-item > a{ color:var(--gold-bright); background:transparent; }
.main-navigation .main-nav ul ul{ background:var(--bg-2); border:1px solid var(--line-strong); }

/* ── Articles / cartes ────────────────────────────────── */
.separate-containers .inside-article,
.one-container .site-content .inside-article{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
}
.entry-meta, .posted-on, .byline, .entry-meta a, .cat-links, .tags-links{ color:var(--ink-dim); font-size:.92rem; }
.entry-meta a:hover{ color:var(--gold); }

/* ── Boutons ──────────────────────────────────────────── */
button, .button, input[type=submit], .wp-block-button__link, a.read-more, .read-more{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#1a1406; border:1px solid var(--gold-deep); border-radius:var(--radius-sm);
  font-family:var(--body); font-weight:600; letter-spacing:.02em;
  box-shadow:0 0 18px var(--gold-glow); transition:all .3s ease;
}
button:hover, .button:hover, .wp-block-button__link:hover, .read-more:hover{ filter:brightness(1.08); box-shadow:0 0 26px var(--gold-glow); }
.wp-block-button.is-style-outline .wp-block-button__link{ background:transparent; color:var(--gold-bright); border-color:var(--line-strong); box-shadow:none; }

/* ── Citations & séparateurs ──────────────────────────── */
blockquote{ border-left:3px solid var(--gold); background:var(--bg-2); color:var(--ink-soft); font-style:italic; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
hr, .wp-block-separator{ border:0; height:1px; background:linear-gradient(90deg,transparent,var(--line-strong),transparent); }

/* ── Formulaires ──────────────────────────────────────── */
input, textarea, select{ background:var(--bg-2); border:1px solid var(--line-strong); color:var(--ink); border-radius:var(--radius-sm); }
input:focus, textarea:focus, select:focus{ border-color:var(--gold); outline:none; box-shadow:0 0 0 2px var(--gold-glow); }

/* ── Widgets / barre latérale ─────────────────────────── */
.widget-area .widget{ background:var(--bg-card-t); border:1px solid var(--line); border-radius:var(--radius); }
.widget-title{ font-family:var(--display); color:var(--gold); }

/* ── Pagination ───────────────────────────────────────── */
.nav-links a, .page-numbers{ color:var(--ink-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.4em .8em; }
.page-numbers.current, .nav-links a:hover{ background:var(--gold); color:var(--bg-0); border-color:var(--gold-deep); }

/* ── Pied de page ─────────────────────────────────────── */
.site-footer, .site-info{ background:var(--bg-1); color:var(--ink-dim); border-top:1px solid var(--line); }
.site-info a{ color:var(--gold); }

/* ── Logo d'en-tête (le G gothique) ───────────────────── */
.site-logo img, .header-image{ max-height:58px; width:auto; filter:drop-shadow(0 0 8px var(--gold-glow)); }

/* ── Grille de cartes (accueil / archives / recherche) ── */
.blog .site-main, .archive .site-main, .search-results .site-main{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:30px; align-items:start;
}
.blog .site-main > *:not(article), .archive .site-main > *:not(article),
.search-results .site-main > *:not(article){ grid-column:1/-1; }
.blog .inside-article, .archive .inside-article, .search-results .inside-article{
  display:flex; flex-direction:column; height:100%; overflow:hidden; padding:0;
}
.blog .inside-article > *:not(.grim-feat),
.archive .inside-article > *:not(.grim-feat){ padding-left:26px; padding-right:26px; }
.blog .grim-feat, .archive .grim-feat{ order:-1; padding:0; }
.blog .entry-header, .archive .entry-header{ padding-top:20px; }
.blog .entry-summary, .archive .entry-summary{ padding-bottom:26px; color:var(--ink-soft); }
.blog .entry-title, .archive .entry-title{ font-size:1.5rem; }

/* ── Image à la une (+ fallback dark fantasy) ─────────── */
.grim-feat img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog .grim-feat, .archive .grim-feat{ aspect-ratio:16/10; overflow:hidden; }
.grim-feat__fallback{
  width:100%; height:100%; min-height:190px; display:grid; place-items:center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(201,168,92,.18), transparent 60%),
    linear-gradient(160deg,#0f1326,#06080f);
}
.grim-feat__mark{ font-family:var(--display); font-size:2.6rem; color:var(--gold); text-shadow:0 0 18px var(--gold-glow); opacity:.85; }
.grim-feat--single{ margin-bottom:28px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.grim-feat--single img{ max-height:460px; }
.grim-feat--single .grim-feat__fallback{ aspect-ratio:21/9; }

/* ── Ligne de date « journal » + Lettrine (article seul) ─ */
.grim-dateline{ font-style:italic; color:var(--ink-soft); font-size:1.05rem; letter-spacing:.02em; margin-bottom:1.3em; }
.single .entry-content > p:first-of-type:not(.grim-dateline)::first-letter,
.single .entry-content > p.grim-dateline + p::first-letter{
  font-family:var(--black-letter); float:left; font-size:4.4rem; line-height:.78;
  padding:6px 12px 0 0; color:var(--gold-bright); text-shadow:0 0 16px var(--gold-glow);
}

/* ── Séparateurs décoratifs « ✦ » ─────────────────────── */
.entry-content hr, .entry-content .wp-block-separator{
  border:0; height:1px; overflow:visible; margin:2.6em 0; position:relative;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}
.entry-content hr::after, .entry-content .wp-block-separator::after{
  content:"✦"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--bg-card); padding:0 16px; color:var(--gold); font-size:1.05rem; text-shadow:0 0 12px var(--gold-glow);
}

/* ── Encadré « À propos » (fin d'article) ─────────────── */
.grim-about{
  margin:52px 0 8px; padding:26px 28px; border:1px solid var(--line-strong); border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(18,23,44,.7),rgba(10,13,26,.7));
  display:flex; gap:22px; align-items:center;
}
.grim-about__logo{ flex:none; width:68px; height:68px; }
.grim-about__logo img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 10px var(--gold-glow)); }
.grim-about h3{ font-family:var(--display); color:var(--gold-bright); margin:0 0 6px; font-size:1.32rem; }
.grim-about p{ margin:0 0 14px; color:var(--ink-soft); font-size:1rem; line-height:1.55; }
@media(max-width:600px){ .grim-about{ flex-direction:column; text-align:center; } }

/* ══════════════════════════════════════════════════════════
   SURFACE DE LECTURE « PARCHEMIN » (page enluminée sur écrin sombre)
   La coque reste dark fantasy ; les articles/cartes deviennent des
   pages de parchemin (crème, encre brune, rouge rubrique).
   ══════════════════════════════════════════════════════════ */
:root{
  --parch:#efe6d1; --parch-2:#e7dabc; --parch-input:#fbf6e9;
  --ink2:#2a2118; --ink2-strong:#241d14; --ink2-soft:#6b5d45;
  --gold-ink:#8a6a2c; --rubric:#9e1b1b; --parch-line:rgba(138,106,44,.30);
}
/* 1. FOND PARCHEMIN — on reprend les MÊMES sélecteurs que les règles sombres plus
   haut (spécificité égale + règle postérieure = celle-ci gagne) + zone commentaires. */
.inside-article,
.separate-containers .inside-article,
.one-container .site-content .inside-article,
.comments-area{ background:var(--parch); color:var(--ink2); border-color:var(--parch-line); }
.comments-area{ margin-top:26px; padding:8px 28px 24px; border:1px solid var(--parch-line); border-radius:var(--radius); }

/* 2. Titres en encre foncée (le « > » évite l'encadré sombre « À propos » imbriqué) */
.inside-article .entry-title, .inside-article .entry-title a,
.entry-content > :is(h1,h2,h3,h4,h5,h6),
.comments-title, .comment-reply-title{ color:var(--ink2-strong); }
.inside-article .entry-title a:hover{ color:var(--rubric); }

/* 3. Liens du contenu en rouge rubrique (le bouton « À propos » reste sombre sur or) */
.entry-content a, .comment-content a{ color:var(--rubric); text-decoration:underline; text-decoration-color:rgba(158,27,27,.4); }
.entry-content a:hover, .comment-content a:hover{ color:#7a1414; }
.grim-about a.button{ color:#1a1406; text-decoration:none; }

/* 4. Méta & mentions en brun doux */
.entry-meta, .posted-on, .byline, .entry-meta a, .cat-links, .tags-links,
.blog .entry-summary, .archive .entry-summary, .single .entry-meta a,
.comment-metadata, .comment-metadata a, .comment-notes, .logged-in-as, .logged-in-as a,
.comment-form-cookies-consent, .comments-area > p, .comment-author .fn{ color:var(--ink2-soft); }
.entry-meta a:hover, .comment-metadata a:hover, .logged-in-as a:hover{ color:var(--rubric); }

/* 5. Lettrine / citations / séparateurs sur parchemin */
.single .entry-content > p:first-of-type:not(.grim-dateline)::first-letter,
.single .entry-content > p.grim-dateline + p::first-letter{ color:var(--gold-ink); text-shadow:none; }
blockquote{ background:var(--parch-2); border-left:3px solid var(--rubric); color:#3a2f22; }
.entry-content hr, .entry-content .wp-block-separator{ background:linear-gradient(90deg,transparent,var(--parch-line),transparent); }
.entry-content hr::after, .entry-content .wp-block-separator::after{ background:var(--parch); color:var(--gold-ink); text-shadow:none; }

/* 6. Champs commentaires → clairs et lisibles (fin de la « zone bleue ») */
.comments-area input, .comments-area textarea, .comments-area select,
.comment-form input, .comment-form textarea{ background:var(--parch-input); border:1px solid var(--parch-line); color:var(--ink2); }
.comment-form input:focus, .comment-form textarea:focus{ border-color:var(--gold-ink); box-shadow:0 0 0 2px rgba(138,106,44,.25); outline:none; }

/* L'encadré « À propos » reste une PLAQUE SOMBRE (ses textes ont des couleurs claires
   explicites → lisibles, et non touchés par l'encre grâce aux « > »). Le bandeau image aussi. */

/* ── Bandeau « masthead » en haut du blog (accueil/archives) ──
   height:auto sans object-fit → l'image s'affiche ENTIÈRE (aucun rognage),
   à son ratio naturel. Pour un rendu bandeau, fournir une image LARGE (voir README). */
.grim-hero{ display:block; width:100%; line-height:0; border-bottom:1px solid var(--line-strong); }
.grim-hero__img{ width:100%; height:auto; display:block; margin:0 auto; }

/* ── Navigation du header : visible & dorée ─────────────── */
.main-navigation, .main-navigation .inside-navigation{ background:transparent; }
.main-navigation .main-nav ul li a{ color:var(--ink); font-family:var(--body); letter-spacing:.03em; padding:0 18px; }
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a{ color:var(--gold-bright); background:transparent; }
.main-navigation .main-nav ul ul{ background:var(--bg-2); border:1px solid var(--line-strong); }
.main-navigation .main-nav ul ul li a{ color:var(--ink-soft); }
/* Desktop : menu horizontal garanti (pas de bascule hamburger involontaire) */
@media (min-width:769px){
  .main-navigation .menu-toggle{ display:none; }
  .main-navigation .main-nav{ display:block; }
  .main-navigation .main-nav > ul{ display:flex; }
}
/* Hamburger (mobile / fenêtre étroite) : bien visible, doré */
.menu-toggle, .mobile-menu-control-wrapper .menu-toggle{ color:var(--gold-bright); }

/* ── Icônes réseaux sociaux (pied de page) ──────────────── */
.grim-social{ display:flex; gap:16px; justify-content:center; align-items:center; margin-bottom:12px; }
.grim-social a{ color:var(--gold); display:inline-flex; transition:color .2s ease, transform .2s ease; }
.grim-social a:hover{ color:var(--gold-bright); transform:translateY(-2px); }
.grim-social svg{ width:22px; height:22px; fill:currentColor; }

/* ── Sélecteur de langue (barre de navigation, à droite) ── */
.grim-langbar{ display:inline-flex; align-items:center; gap:2px; margin-left:6px; padding-left:14px; border-left:1px solid var(--line-strong); }
.grim-langbar__lnk{ font-family:var(--body); font-size:.82rem; letter-spacing:.08em; color:var(--ink-soft); padding:4px 8px; border-radius:var(--radius-sm); transition:color .2s ease, background .2s ease; }
.grim-langbar__lnk:hover{ color:var(--gold-bright); }
.grim-langbar__cur{ color:var(--gold-bright); font-weight:600; pointer-events:none; }
@media (max-width:768px){
  .grim-langbar{ margin:0; padding:8px 0 0; border-left:0; justify-content:center; width:100%; }
}

/* ── En-tête d'archive (catégorie / recherche) : lisible sur le fond sombre ──
   GeneratePress met un fond blanc (.page-header) → titre crème pâle illisible.
   On rend l'en-tête transparent (le sombre du site ressort) + couleurs contrastées. */
.archive .page-header, .archive .inside-page-header,
.search-results .page-header, .search-results .inside-page-header{
  background-color:transparent; border-bottom:0; box-shadow:none;
}
.archive .page-title, .search-results .page-title{ color:var(--gold-bright); }
.archive .taxonomy-description, .archive .taxonomy-description p,
.archive .page-header p, .search-results .page-header p{ color:var(--ink-soft); }