@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/lora-500-normal.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/lora-700-normal.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/lora-400-italic.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/lora-500-italic.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-normal.woff2') format('woff2')}
@font-face{font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/great-vibes-400-normal.woff2') format('woff2')}

/* Ombres et Passions : surcouche sur Casper. Charte « Lumière dorée » (gabarits Instagram d'Amandine). */
:root {
  /* palette de la charte */
  --oep-cream: #F5EEE4;      /* Crème lin */
  --oep-parch: #D8CBC3;      /* Parchemin */
  --oep-rose: #F3D3D8;       /* Rose poudré */
  --oep-gold: #B8893B;       /* Or baroque */
  --oep-glow: #F1DDA6;       /* Or lumière */
  --oep-wine: #7B2D3B;       /* Bordeaux */
  --oep-night: #2B2028;      /* Nuit */
  --oep-euca: #6F8466;       /* Eucalyptus */
  /* rôles (clair) */
  --oep-bg: var(--oep-cream); --oep-surface: #FFFFFF; --oep-fg: #2B2028; --oep-muted: #5B3A2E;
  --oep-accent: var(--oep-wine); --oep-line: #E4D5C3; --oep-band: var(--oep-night); --oep-bandfg: var(--oep-glow);
  --oep-plum: #3A2A33;
  /* tokens dérivés (hors charte, nommés pour ne plus être codés en dur) */
  --oep-ink-parch: #4A2F26;   /* texte sur parchemin */
  --oep-wine-tint: #FBEFEF;   /* fond d'avertissement */
  --oep-gold-on-dark: #D4A857;/* libellés dorés sur fond nuit */
  --oep-star: #E3B965;        /* étoiles */
  --oep-on-dark: #F3E9E0;     /* texte courant sur fond nuit */
  --oep-on-dark-soft: #CDB8A8;
  --oep-focus: var(--oep-wine);
  /* RÈGLE : or baroque, eucalyptus et bordeaux sur nuit n'atteignent pas 4,5:1 → décor ou grands titres uniquement, jamais du texte courant. */
  --oep-todo: #FFF0C2; --oep-todofg: #5B3A2E;
  --oep-display: Lora, Georgia, serif; --oep-body: Poppins, system-ui, sans-serif; --oep-script: 'Great Vibes', 'Snell Roundhand', cursive;
  --oep-lueur: 0 0 28px rgba(241,221,166,.42), 0 0 10px rgba(241,221,166,.30);
}
@media (prefers-color-scheme: dark) {
  :root {
    --oep-bg: #1D1519; --oep-surface: #2A1F25; --oep-fg: #F3E9E0; --oep-muted: #CDB8A8;
    --oep-accent: #E8A3B0; --oep-line: #4A3A40; --oep-band: #120C0F;
    --oep-todo: #4A3D1C; --oep-todofg: #F1DDA6; --oep-focus: #F1DDA6;
  }
}
body { --ghost-accent-color: var(--oep-accent); --gh-font-body: var(--oep-body); --gh-font-heading: var(--oep-display); }
.gh-head-members { display: none !important; }
.site-footer-nav a[href*="portal"], .gh-head-menu a[href*="portal"] { display: none !important; }

/* ───────── Base */
html, body, .viewport, .site-main { background: var(--oep-bg) !important; color: var(--oep-fg); }
body { font-family: var(--oep-body); }
a { color: var(--oep-accent); }
::selection { background: var(--oep-rose); color: var(--oep-wine); }

/* Petites capitales de la charte */
.oep-smallcaps, .oep-kicker-label, .oep-home-kicker, .post-card-meta, .oep-fiche dt, .oep-byline {
  font-family: var(--oep-body); text-transform: uppercase; letter-spacing: .2em; font-weight: 500;
}
.oep-star-sep { color: var(--oep-gold); font-size: .8em; padding: 0 .35em; }

/* ───────── En-tête : bandeau nuit, logo script doré */
.gh-head { background: var(--oep-night) !important; color: var(--oep-bandfg); border-bottom: 1px solid rgba(184,137,59,.5); }
.gh-head a, .gh-head-menu a, .gh-head .gh-icon-btn { color: var(--oep-glow) !important; }
.gh-head-logo { font-family: var(--oep-script) !important; font-weight: 400 !important; font-size: 3.4rem !important; letter-spacing: 0 !important; color: #fff !important; text-shadow: var(--oep-lueur); line-height: 1; }
.gh-head-menu a { font-size: 1.2rem !important; text-transform: uppercase; letter-spacing: .2em; font-weight: 500; }
.gh-head-menu a:hover { color: #fff !important; text-shadow: var(--oep-lueur); }
.gh-burger::before, .gh-burger::after { background-color: var(--oep-glow) !important; }

/* ───────── Bandeau décoratif commun (accueil + article) : nuit, bokeh, paillettes */
.site-header-content, .oep-hero {
  position: relative; overflow: hidden; color: #F3E9E0;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(123,45,59,.38), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(184,137,59,.16), transparent 50%),
    linear-gradient(170deg, #3A2A33 0%, #2B2028 70%) !important;
}
.site-header-content::before, .oep-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
    url("../images/oep/bokeh.webp") no-repeat -70px -60px / 240px,
    url("../images/oep/bokeh.webp") no-repeat right 6% bottom -90px / 300px,
    url("../images/oep/bokeh.webp") no-repeat right 26% top -40px / 120px,
    url("../images/oep/paillette.webp") no-repeat 12% 12% / 46px,
    url("../images/oep/paillette.webp") no-repeat 52% 14% / 34px,
    url("../images/oep/paillette.webp") no-repeat 93% 38% / 40px;
}
.site-header-content > *, .oep-hero > * { position: relative; }

/* ───────── Accueil */
.site-header-content { display: block !important; height: auto !important; padding: 142px 0 52px !important; margin: 0 !important; min-height: 0 !important; max-height: none !important; }
.site-header-content .site-header-inner { padding: 0 !important; margin: 0 auto !important; }
.site-header-inner { text-align: center; }
.oep-home-kicker { margin: 0 0 6px; font-size: 1.2rem; color: var(--oep-glow); }
.site-title { font-family: var(--oep-script) !important; font-weight: 400 !important; color: #fff !important; text-shadow: var(--oep-lueur);
  font-size: clamp(6rem, 11vw, 10.4rem) !important; line-height: 1.05 !important; letter-spacing: 0 !important; margin: 0 !important; }
.site-description { font-family: var(--oep-display) !important; font-style: italic; font-size: 2rem !important; color: var(--oep-glow) !important; opacity: .95; max-width: 640px; margin: 10px auto 0 !important; }
.oep-orn { display: block; width: 180px; height: 14px; margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, var(--oep-gold) 35%, var(--oep-gold) 65%, transparent) center/100% 1px no-repeat, url("../images/oep/paillette.webp") center/34px no-repeat; }

.post-card-image-link { position: relative; border-radius: 4px; overflow: hidden; background: var(--oep-night); }
.post-card-image-link::before { content: ""; position: absolute; z-index: 2; inset: 10px; border: 1px solid rgba(241,221,166,.55); border-radius: 2px; pointer-events: none; }
.post-card-image { transition: transform .5s ease; }
.post-card:hover .post-card-image { transform: scale(1.03); }
.post-card-primary-tag, .article-tag a {
  display: inline-block; background: var(--oep-rose); color: var(--oep-wine) !important; border-radius: 999px; padding: 2px 14px 3px;
  font-family: var(--oep-display); font-style: italic; font-weight: 500; font-size: 1.4rem !important; letter-spacing: 0; text-transform: none;
  box-shadow: 0 2px 8px rgba(43,32,40,.16);
}
.post-card-primary-tag.is-dark, .oep-pill.is-dark { background: var(--oep-wine); color: var(--oep-rose) !important; }
.post-card-title, .post-card-title a { font-family: var(--oep-display); color: var(--oep-fg) !important; }
.post-card-excerpt { color: var(--oep-muted) !important; }
.post-card-meta { font-size: 1.2rem; color: var(--oep-muted) !important; }
.post-card-meta-length::before { content: "✦"; color: var(--oep-gold); padding: 0 .6em; }
.post-card-byline-content, .post-card-byline-content a { color: var(--oep-muted) !important; }

/* ───────── Article : hero (texte + photo encadrée) */
.post-template .article { padding-top: 0 !important; }
.post-template .site-main { margin-top: 0 !important; padding-top: 0 !important; }
.oep-hero { padding: 54px 0 70px; }
.oep-hero-inner { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 4vw; display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,400px); gap: 56px; align-items: center; }
.oep-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.oep-kicker-label { font-size: 1.2rem; color: var(--oep-glow); }
.oep-pill { display: inline-block; background: var(--oep-rose); color: var(--oep-wine) !important; border-radius: 999px; padding: 2px 14px 3px;
  font-family: var(--oep-display); font-style: italic; font-weight: 500; font-size: 1.4rem; box-shadow: 0 2px 8px rgba(0,0,0,.25); text-decoration: none; }
.oep-hero .article-title { font-family: var(--oep-script) !important; font-weight: 400 !important; color: #fff !important; text-shadow: var(--oep-lueur);
  font-size: clamp(4.4rem, 5.4vw, 6.4rem) !important; line-height: 1.12 !important; letter-spacing: 0 !important; margin: 0 0 14px !important; text-wrap: balance; }
.oep-hero .article-excerpt { font-family: var(--oep-display) !important; font-style: italic; font-size: 1.8rem !important; line-height: 1.55 !important; color: var(--oep-glow) !important; margin: 0 0 18px !important; opacity: .95; }
.oep-byline { font-size: 1.2rem; color: #D9C7BD; margin: 0; }
.oep-frame { margin: 0; justify-self: center; width: 100%; max-width: 400px; position: relative; }
.oep-frame::before { content: ""; position: absolute; inset: -8%; background: radial-gradient(closest-side, rgba(241,221,166,.22), transparent); pointer-events: none; }
.oep-frame-inner { position: relative; border: 15px solid transparent; border-image: url("../images/oep/cadre_dore.webp") 38 / 15px stretch; background: var(--oep-night);
  box-shadow: 0 22px 48px rgba(0,0,0,.5); }
.oep-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* ───────── Corps de l'article */
.gh-content { font-family: var(--oep-body); color: var(--oep-fg); padding-top: 48px; }
.gh-content > p, .gh-content > ul, .gh-content > ol { font-family: var(--oep-body) !important; font-size: 1.75rem; line-height: 1.8; color: var(--oep-fg); }
.gh-content > h2 { font-family: var(--oep-script) !important; font-weight: 400 !important; font-size: 4.4rem !important; line-height: 1.15 !important; letter-spacing: 0 !important;
  color: var(--oep-accent) !important; text-shadow: 0 0 22px rgba(184,137,59,.28); text-wrap: balance; margin-top: 1.3em; margin-bottom: .35em; }
.gh-content > hr { border: 0; height: 14px; margin: 44px auto; max-width: 220px; background: linear-gradient(90deg, transparent, var(--oep-gold) 35%, var(--oep-gold) 65%, transparent) center/100% 1px no-repeat, url("../images/oep/paillette.webp") center/32px no-repeat; }

/* « En bref » : parchemin + sceau */
.gh-content > blockquote {
  position: relative; border: 0 !important; margin: 40px 0 !important; padding: 44px 52px !important; font-style: normal; color: var(--oep-ink-parch);
  background: url("../images/oep/parchemin_bande.webp") center/100% 100% no-repeat; filter: drop-shadow(0 8px 14px rgba(43,32,40,.22));
}
.gh-content > blockquote p { margin: 0; font-family: var(--oep-display); font-style: italic; font-size: 1.75rem; line-height: 1.7; color: var(--oep-ink-parch); }
.gh-content > blockquote strong { font-family: var(--oep-body); font-style: normal; font-weight: 600; font-size: 1.2rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oep-wine); margin-right: .4em; }
.gh-content > blockquote::before { content: "" !important; position: absolute; left: auto !important; right: 18px; top: -18px; height: 58px; width: 58px; height: 58px; background: url("../images/oep/sceau_or.webp") center/contain no-repeat; font-size: 0; }
.gh-content > blockquote::after { content: none !important; }

/* Fiche du livre : carte nuit à filet doré (slide « fiche lecture ») */
.oep-fiche { position: relative; margin: 0 0 40px; padding: 26px 30px 14px; border: 1px solid var(--oep-gold); border-radius: 16px; color: #F3E9E0;
  background: linear-gradient(165deg, #3A2A33, #2B2028); box-shadow: 0 14px 34px rgba(43,32,40,.28), inset 0 0 46px rgba(241,221,166,.05); }
.oep-fiche::before { content: ""; position: absolute; right: 22px; top: -26px; width: 54px; height: 54px; border: 1px solid var(--oep-gold); border-radius: 50%;
  background: #2B2028 url("../images/oep/icone_chroniques.webp") center/34px no-repeat; }
.oep-fiche.is-audio::before { background-image: url("../images/oep/icone_audio.webp"); }
.oep-fiche .oep-fiche-title { margin: 0 0 14px !important; text-align: center; font-family: var(--oep-script) !important; font-weight: 400 !important; font-size: 4rem !important;
  line-height: 1.1 !important; color: #fff !important; text-shadow: var(--oep-lueur); }
.oep-fiche dl { margin: 0; }
.oep-fiche .oep-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 10px 0; border-top: 1px solid rgba(184,137,59,.32); }
.oep-fiche dt { float: none !important; width: auto !important; margin: 0 !important; text-align: left !important; flex: none; font-size: 1.2rem; color: var(--oep-gold-on-dark); }
.oep-fiche dd { margin: 0; min-width: 0; text-align: right; font-family: var(--oep-display); font-style: italic; font-weight: 500; font-size: 1.7rem; color: #F3E9E0; overflow-wrap: anywhere; }
.oep-fiche .oep-stars { font-style: normal; color: var(--oep-star); letter-spacing: .14em; font-size: 1.8rem; text-shadow: 0 0 10px rgba(241,221,166,.35); }
.oep-fiche .oep-stars .off, .oep-fiche .oep-spice .off { opacity: .28; }
.oep-fiche .oep-stars .half { background: linear-gradient(90deg, #E3B965 50%, rgba(227,185,101,.28) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.oep-fiche .oep-spice { font-style: normal; letter-spacing: .1em; font-size: 1.6rem; }
.oep-todo { background: var(--oep-todo); color: var(--oep-todofg); padding: 0 8px; border-radius: 3px; font-family: var(--oep-body); font-style: normal; font-size: .75em; }

/* Étiquettes de tropes : rose poudré (romance, romantasy) / bordeaux (dark romance) */
.oep-chips { margin: -8px 0 34px !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.oep-chip { background: var(--oep-rose); color: var(--oep-wine); border-radius: 999px; padding: 3px 16px 4px; font-family: var(--oep-display); font-style: italic; font-weight: 500; font-size: 1.5rem; box-shadow: 0 3px 9px rgba(43,32,40,.2); }
.oep-chips.is-dark .oep-chip { background: var(--oep-wine); color: var(--oep-rose); }

/* Mention service presse + avertissement + appel final */
.oep-sp { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.oep-sp p { margin: 0 !important; font-size: 1.55rem !important; line-height: 1.6 !important; }
.oep-seal { flex: none; width: 56px; height: 56px; display: grid; place-items: center; font-family: var(--oep-display); font-weight: 700; font-size: 1.5rem; color: #FBEFEF;
  background: url("../images/oep/sceau_bordeaux.webp") center/contain no-repeat; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.oep-warn { margin: 0 0 26px !important; padding: 12px 18px; border-left: 4px solid var(--oep-wine); border-radius: 0 10px 10px 0; background: var(--oep-wine-tint); color: var(--oep-ink-parch); font-size: 1.55rem !important; line-height: 1.65 !important; }
@media (prefers-color-scheme: dark) { .oep-warn { background: #3A2A33; color: #F3E9E0; border-left-color: var(--oep-rose); } .gh-content > blockquote, .gh-content > blockquote p { color: var(--oep-ink-parch); } }

.oep-cta { position: relative; margin: 56px 0 8px; padding: 34px 28px 30px; text-align: center; border-radius: 16px; color: #F3E9E0; overflow: hidden;
  background: radial-gradient(ellipse at 20% 0%, rgba(123,45,59,.4), transparent 60%), linear-gradient(165deg, #3A2A33, #2B2028); border: 1px solid var(--oep-gold); }
.oep-cta-title { font-family: var(--oep-script); font-size: 5rem; line-height: 1; color: #fff; text-shadow: var(--oep-lueur); margin: 0 0 8px; }
.oep-cta-q { font-family: var(--oep-display); font-style: italic; font-size: 1.8rem; line-height: 1.6; margin: 0 0 22px; color: var(--oep-glow); }
.oep-btn, .oep-btn:visited { display: inline-block; background: var(--oep-rose); color: var(--oep-wine) !important; border-radius: 999px; padding: 9px 24px 10px; text-decoration: none; font-family: var(--oep-display); font-style: italic; font-weight: 500; font-size: 1.6rem; box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: transform .2s; }
.oep-btn:hover { transform: translateY(-2px); }

/* ───────── Pied de page : nuit, script doré */
.site-footer { background: var(--oep-night) !important; border-top: 1px solid rgba(184,137,59,.5) !important; color: #CDB8A8 !important; padding: 56px 4vw 40px !important; margin-top: 70px; }
.site-footer .inner.oep-footer { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 640px; grid-template-columns: none; }
.oep-footer-logo { font-family: var(--oep-script); font-size: 5rem; line-height: 1; color: #fff !important; text-shadow: var(--oep-lueur); text-decoration: none; }
.oep-footer-tag { margin: 0 0 8px; font-family: var(--oep-display); font-style: italic; font-size: 1.6rem; color: var(--oep-glow); }
.site-footer-nav a { color: var(--oep-glow) !important; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .2em; }
.oep-footer-copy { margin: 14px 0 0; font-size: 1.2rem; letter-spacing: .08em; color: #A8948A; }
.oep-footer-copy a { color: #A8948A !important; }

/* ───────── Mobile */
@media (max-width: 900px) {
  .oep-hero { padding: 38px 0 52px; }
  .oep-hero-inner { grid-template-columns: 1fr; gap: 34px; text-align: left; }
  .oep-frame { max-width: 320px; }
  .oep-hero .article-title { font-size: 4.6rem !important; }
  .gh-content > h2 { font-size: 3.8rem !important; }
}
@media (max-width: 600px) {
  .site-header-content { padding: 120px 0 40px !important; }
  .oep-fiche { padding: 22px 18px 10px; }
  .oep-fiche dd { font-size: 1.55rem; }
  .gh-content > blockquote { padding: 38px 30px !important; }
  .oep-cta { padding: 30px 18px 26px; }
  .gh-head-logo { font-size: 3rem !important; }
}

/* ───────── Accessibilité */
.oep-skip { position: absolute; left: 12px; top: -80px; z-index: 1000; background: var(--oep-glow); color: var(--oep-night) !important; padding: 10px 18px; border-radius: 0 0 10px 10px;
  font-family: var(--oep-body); font-size: 1.5rem; font-weight: 600; text-decoration: none; }
.oep-skip:focus { top: 0; }
:focus-visible { outline: 3px solid var(--oep-focus); outline-offset: 3px; }
.gh-head :focus-visible, .site-footer :focus-visible, .oep-hero :focus-visible, .oep-cta :focus-visible, .oep-fiche :focus-visible, .site-header-content :focus-visible { outline-color: var(--oep-glow); }
.oep-btn:focus-visible { outline-color: var(--oep-glow); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .post-card:hover .post-card-image, .oep-btn:hover { transform: none; }
}
