/* Accueil et pages communes */

/* Bandeau d'accueil : photo à côté du texte */
.hero-accueil { position: relative; padding-block: 3.5rem 2rem; }
.hero-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero-texte .accroche { font-size: 1.6rem; font-style: italic; }
@media (max-width: 800px) {
  .hero-grille { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-photo { order: -1; max-width: 360px; }
}

/* Deux grandes cartes : lumière / frissons, et page Mes romans */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
.carte-univers { display: grid; grid-template-columns: 38% 1fr; gap: 1.5rem; align-items: center; padding: 1.5rem; border-radius: 14px; border: 3px solid var(--accent); }
.carte-univers > div { min-width: 0; }
.carte-univers img { box-shadow: 0 10px 26px rgb(0 0 0 / .3); transition: transform .3s; }
.carte-univers:hover img { transform: translateY(-6px) rotate(-1deg); }
.carte-univers h2, .carte-univers h3 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); overflow-wrap: break-word; hyphens: manual; }
.carte-univers[data-univers="thriller"] { border-color: var(--thr-accent); }
.carte-univers[data-univers="feelgood"] { border-color: var(--fg-turquoise); background: var(--fg-bg); }
.carte-grande { grid-template-columns: 42% 1fr; padding: 2rem; }
.carte-grande h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.carte-grande[data-univers="thriller"] h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: .02em; }
@media (max-width: 520px) { .carte-univers, .carte-grande { grid-template-columns: 1fr; } .carte-univers img { max-width: 220px; } }

/* Mes romans : sas */
.sas h1 { text-align: center; }
.sas-intro { text-align: center; max-width: 60ch; margin: 0 auto 2.5rem; font-family: var(--texte); font-size: 1.0625rem; line-height: 1.65; }

/* Nouveautés */
.nouveautes { margin-top: 2rem; padding-block: 3rem; background: var(--soft); }
.nouveautes-liste { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 960px) { .nouveautes-liste { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.nouveaute { display: flex; gap: 1.5rem; align-items: flex-start; }
.nouveaute .couv { width: 110px; flex: none; }
.nouveaute-texte { min-width: 0; }
.nouveaute-texte { display: flex; flex-direction: column; align-self: stretch; }
.nouveaute-texte h3 { font-size: 1.35rem; }
.nouveaute-texte p { font-size: .95rem; margin-bottom: .7em; }
.nouveaute-texte .boutons { margin-top: auto; padding-top: .4rem; }
.nouveaute .btn { padding: .5rem 1rem; font-size: .88rem; }
.badge.badge-bientot { background: var(--bientot); color: var(--blanc); }
.badge { display: inline-block; background: var(--portail-fg); color: var(--portail-bg); padding: .15rem .7rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border-radius: 3px; }
@media (max-width: 520px) {
  .nouveaute { flex-direction: column; align-items: center; text-align: center; }
  .nouveaute .boutons { justify-content: center; }
}

/* Lettre de Mélodie */
.lettre-grille { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
@media (max-width: 800px) { .lettre-grille { grid-template-columns: 1fr; } }

/* Agenda dynamique : prochaine date en vedette, tuiles calendrier */
.agenda-evts { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.evt { display: flex; gap: .9rem; align-items: center; background: var(--soft); padding: 1rem; border-radius: 10px; transition: transform .25s, box-shadow .25s; }
.evt[hidden] { display: none; }
.evt:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgb(0 0 0 / .15); }
.evt-cal { flex: none; width: 4.4rem; text-align: center; background: var(--bg); color: var(--fg); border-radius: 8px; border-top: 6px solid var(--accent); padding: .3rem .2rem .4rem; box-shadow: 0 3px 8px rgb(0 0 0 / .15); }
.evt-jour { display: block; font-family: var(--titre); font-weight: 700; font-size: 1.7rem; line-height: 1.05; }
.evt-mois { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; }
.evt-corps { min-width: 0; }
.evt-titre { font-size: 1.05rem; margin: 0 0 .2em; font-family: var(--texte); font-weight: 600; line-height: 1.25; }
.evt-lieu { font-size: .85rem; opacity: .85; }
.evt-compte { display: inline-block; background: var(--accent); color: var(--accent-fg); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .6rem; border-radius: 999px; margin-bottom: .4rem; }
.evt.vedette { grid-column: 1 / -1; background: var(--fg); color: var(--bg); padding: 1.6rem 2rem; gap: 1.8rem; }
.evt.vedette .evt-cal { width: 6.4rem; }
.evt.vedette .evt-jour { font-size: 3.1rem; }
.evt.vedette .evt-mois { font-size: .9rem; }
.evt.vedette .evt-titre { font-size: clamp(1.4rem, 3vw, 2rem); font-family: var(--titre); }
.evt.vedette .evt-lieu { font-size: 1rem; }
.evt.vedette .evt-compte { background: var(--bg); color: var(--fg); font-size: .8rem; }
.agenda-vide { font-style: italic; }
@media (max-width: 520px) { .evt.vedette { padding: 1.2rem; gap: 1rem; } .evt.vedette .evt-cal { width: 4.8rem; } .evt.vedette .evt-jour { font-size: 2.2rem; } }
.nouveaute-texte .badge { align-self: flex-start; }

/* Style festif (champ « style: noel ») : badge rouge, boutons dorés */
.nouveaute-noel .badge { background: var(--noel-rouge); color: var(--blanc); }
.livre-noel .btn:not(.btn-ghost), .nouveaute-noel .btn { background: var(--noel-or); border-color: var(--noel-or); color: var(--noel-texte); box-shadow: none; }
.livre-noel .btn:not(.btn-ghost):hover, .nouveaute-noel .btn:hover { background: var(--noel-or-survol); border-color: var(--noel-or-survol); }
.livre-noel .badge-couv { background: var(--noel-rouge); color: var(--blanc); }

/* Mention de prix et petit lien « premiers chapitres » (vignettes de saga) */
.distinction { font-weight: 600; font-size: .95rem; margin: -.2rem 0 .6rem; }
.lien-chapitres { margin: .5rem 0 0; font-size: .85rem; text-align: center; }
.lien-chapitres a { text-underline-offset: 3px; }

/* Rencontres : « Vos témoignages » (sous le texte, à gauche de la photo ; mobile : après la photo) */
@media (min-width: 801px) {
  .texte-photo.avec-temoignages { grid-template-rows: auto 1fr; row-gap: 1.75rem; }
  .avec-temoignages > .texte-long { grid-column: 1; grid-row: 1; }
  .avec-temoignages > .photo { grid-column: 2; grid-row: 1 / span 2; }
  .avec-temoignages > .vos-temoignages { grid-column: 1; grid-row: 2; }
}
@media (max-width: 800px) { .vos-temoignages { margin-top: 1rem; } }
.vos-temoignages { max-width: 68ch; }
.vt-titre { font-size: 1.6rem; margin-bottom: .9rem; }
.vt-item p { margin-bottom: .5em; }
.vt-compte { font-weight: 600; opacity: .8; margin-left: .3em; }

/* Style « bulles » */
.vt-bulles { display: grid; gap: 1.4rem; }
.vt-bulles .vt-titre { margin-bottom: 0; }
.vt-bulles .vt-item { position: relative; width: 90%; padding: 1rem 1.3rem .8rem; background: var(--soft); border-radius: 18px 18px 18px 4px; transition: transform .3s, box-shadow .3s; animation: vt-glisse-g .7s ease-out backwards; }
.vt-bulles .vt-item::after { content: ""; position: absolute; left: 0; bottom: -12px; border: 12px solid transparent; border-top-color: var(--soft); border-left-color: var(--soft); border-bottom: 0; border-right: 0; }
.vt-bulles .vt-item + .vt-item { justify-self: end; background: var(--blanc); border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent); border-radius: 18px 18px 4px 18px; animation-name: vt-glisse-d; animation-delay: .25s; }
.vt-bulles .vt-item + .vt-item::after { left: auto; right: 0; border: 12px solid transparent; border-top-color: var(--blanc); border-right-color: var(--blanc); border-bottom: 0; border-left: 0; }
.vt-bulles .vt-item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgb(0 0 0 / .15); }
.vt-bulles footer { font-size: .85rem; text-align: right; }
@keyframes vt-glisse-g { from { opacity: 0; transform: translateX(-40px); } }
@keyframes vt-glisse-d { from { opacity: 0; transform: translateX(40px); } }

/* Style « notes » */
.vt-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
.vt-notes .vt-titre { grid-column: 1 / -1; margin-bottom: 0; }
.vt-notes .vt-item { position: relative; padding: 1.5rem 1.1rem 1rem; background: var(--blanc); color: #333; box-shadow: 0 6px 16px rgb(0 0 0 / .18); transform: rotate(-2.5deg); transform-origin: top center; animation: vt-tombe .8s cubic-bezier(.3, 1.4, .5, 1) backwards; }
.vt-notes .vt-item + .vt-item { transform: rotate(2deg); animation-delay: .25s; }
.vt-notes .vt-item::before { content: ""; position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff8, transparent 40%), var(--bientot); box-shadow: 0 2px 4px rgb(0 0 0 / .35); }
.vt-notes .vt-item p { font-family: var(--fg-script); font-style: normal; font-size: 1.3rem; line-height: 1.3; }
.vt-notes footer { font-size: .85rem; }
.vt-notes .vt-item:hover { animation: vt-balance .9s ease-in-out; }
@keyframes vt-tombe { from { opacity: 0; transform: translateY(-40px) rotate(-12deg); } }
@keyframes vt-balance { 0%, 100% { rotate: 0deg; } 25% { rotate: 4deg; } 50% { rotate: -3deg; } 75% { rotate: 2deg; } }
@media (max-width: 560px) { .vt-notes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vt-item, .vt-item:hover { animation: none !important; transition: none; } }