/*
Theme Name: LOVELYBIBI
Description: Theme sur mesure reproduisant le design Joomla jp-interior du site LOVELYBIBI.
             Reprend les images d'origine (fond illustre, degrade du menu, banniere, pied de page),
             dont la transparence est integree aux PNG.
Author: Bibi
Version: 1.0
*/

:root {
    --img: /wp-content/uploads/lovelybibi;

    --framboise:        #a0285c;
    --framboise-clair:  #c7407f;
    --rose:             #ca4695;
    --orange:           #d58a55;
    --jaune:            #dcb72b;
    --creme:            #fff6e9;
    --creme-doux:       #fdf3e4;
    --texte-sombre:     #3b2430;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: Georgia, "Droid Serif", "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.75;
    color: var(--texte-sombre);

    /* l'illustration de fond reste visible derriere tout le contenu */
    background-color: #e9c9b8;
    background-image: url("/wp-content/uploads/lovelybibi/wallpaper_100_by_amazinglife2011-d6th7ps.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

a { color: var(--framboise); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

.lb-contenu { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------- barre de menu */
/* backcont.png : degrade rose -> orange -> jaune, transparence a 78% dans le PNG */
.lb-barre {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background-image: url("/wp-content/uploads/lovelybibi/backcont.png");
    background-repeat: repeat-y;
    background-size: 100% auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

/* le menu est SEUL dans la barre, et tient sur UNE seule ligne */
.lb-barre .lb-contenu {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

.lb-menu {
    display: flex;
    flex-wrap: nowrap;          /* jamais de deuxieme ligne */
    align-items: center;
    gap: 2px;
    margin: 0; padding: 0;
    list-style: none;
    max-width: 100%;
    overflow-x: auto;           /* si l'ecran est trop etroit : on fait defiler, on ne replie pas */
    scrollbar-width: none;
}
.lb-menu::-webkit-scrollbar { display: none; }

.lb-menu a {
    display: block;
    padding: 12px 11px;
    color: #fff;
    font-variant: small-caps;
    font-size: .99em;
    letter-spacing: .04em;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.lb-menu a:hover,
.lb-menu .current-menu-item > a,
.lb-menu li.actif > a {
    background: rgba(255, 255, 255, .22);
    border-radius: 4px;
    text-decoration: none;
}

/* la recherche descend SOUS la barre de menu, alignee a droite */
.lb-recherche-ligne {
    padding: 58px 16px 0;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
}
.lb-recherche { display: flex; gap: 6px; }
.lb-recherche input[type="search"] {
    border: 0; border-radius: 14px;
    padding: 7px 14px;
    font-family: inherit; font-size: .95em;
    background: rgba(255, 255, 255, .88);
    min-width: 150px;
}
.lb-recherche button {
    border: 0; border-radius: 14px;
    padding: 7px 14px;
    background: var(--framboise); color: #fff;
    font-family: inherit; cursor: pointer;
}
.lb-recherche button:hover { background: var(--framboise-clair); }

/* --------------------------------------------------------- la banniere */
/* le decalage sous la barre fixe est desormais porte par .lb-recherche-ligne */
.lb-banniere { padding-top: 8px; text-align: center; }
.lb-banniere img { display: block; margin: 0 auto; max-width: 1000px; width: 100%; }
.lb-banniere a { display: block; }

/* ------------------------------------------------------------ panneaux */
/* fond2.png (rose saumon, 75%) pour les blocs courts ; creme pour la lecture longue */
.lb-panneau {
    background-color: rgba(160, 40, 92, .80);
    background-image: url("/wp-content/uploads/lovelybibi/fond2.png");
    background-blend-mode: multiply;
    color: var(--creme);
    border-radius: 12px;
    padding: 26px 30px;
    margin: 0 0 26px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
}
.lb-panneau a { color: #ffe9b8; }
.lb-panneau h1, .lb-panneau h2, .lb-panneau h3 { color: var(--creme); }

/* panneau de lecture : creme, pour lire 25 000 caracteres sans fatigue */
.lb-lecture {
    background: rgba(253, 243, 228, .94);
    color: var(--texte-sombre);
    border-radius: 12px;
    padding: 30px 38px;
    margin-bottom: 26px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
}
.lb-lecture img { border-radius: 6px; }

/* -------------------------------------------------------------- titres */
.lb-titre-page {
    margin: 0 0 6px;
    font-size: 2.1em;
    font-variant: small-caps;
    letter-spacing: .03em;
    text-align: center;
}
.lb-soustitre { margin: 0 0 22px; text-align: center; opacity: .92; font-style: italic; }

/* ------------------------------------------------- sommaire de l'accueil */
.lb-recits { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; }

.lb-recit {
    display: flex; flex-direction: column;
    background: rgba(253, 243, 228, .93);
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
    border-top: 5px solid var(--rose);
}
.lb-recit h3 { margin: 0 0 6px; font-size: 1.16em; font-variant: small-caps; letter-spacing: .02em; }
.lb-recit h3 a { color: var(--framboise); }
.lb-recit .lb-compte { font-size: .88em; color: #7a5568; margin-bottom: 10px; }
.lb-recit .lb-extrait { font-size: .93em; margin-bottom: 14px; flex-grow: 1; }
.lb-recit .lb-commencer {
    display: inline-block; align-self: flex-start;
    background: var(--framboise); color: #fff;
    padding: 7px 15px; border-radius: 16px; font-size: .9em;
}
.lb-recit .lb-commencer:hover { background: var(--framboise-clair); text-decoration: none; }

/* les titres de rubrique ont leur propre bandeau : sur l'illustration de fond,
   du texte pose a nu n'est pas lisible */
.lb-groupe-titre {
    margin: 30px 0 16px;
    padding: 11px 26px;
    font-size: 1.45em;
    font-variant: small-caps;
    letter-spacing: .06em;
    color: var(--creme);
    text-align: center;
    background: rgba(160, 40, 92, .88);
    border-radius: 10px;
    border-bottom: 4px solid rgba(220, 183, 43, .85);
    box-shadow: 0 3px 14px rgba(0, 0, 0, .3);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* --------------------------------------------- albums (rubrique GALERIE) */
.lb-albums {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: 16px;
}
.lb-album {
    display: flex; flex-direction: column;
    background: rgba(253, 243, 228, .93);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
    border-top: 5px solid var(--rose);
    color: var(--texte-sombre);
}
.lb-album:hover { text-decoration: none; box-shadow: 0 5px 18px rgba(0, 0, 0, .34); }
.lb-album-image {
    display: block;
    aspect-ratio: 4 / 3;
    background: rgba(222, 165, 150, .45);
    overflow: hidden;
}
.lb-album-image img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .25s;
}
.lb-album:hover .lb-album-image img { transform: scale(1.06); }
.lb-album-titre {
    display: block;
    padding: 11px 14px 2px;
    font-variant: small-caps;
    letter-spacing: .02em;
    font-size: 1.05em;
    color: var(--framboise);
}
.lb-album-compte {
    display: block;
    padding: 0 14px 12px;
    font-size: .86em;
    color: #7a5568;
}

/* ------------------------------------------- liste des chapitres (categorie) */
.lb-chapitres { list-style: none; margin: 0; padding: 0; counter-reset: chap; }
.lb-chapitres li {
    display: flex; align-items: baseline; gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px dashed rgba(255, 233, 184, .35);
}
.lb-chapitres li:last-child { border-bottom: 0; }
.lb-chapitres .lb-num {
    flex: 0 0 auto; min-width: 2.6em;
    font-size: .85em; opacity: .75;
    font-variant-numeric: tabular-nums;
}
.lb-chapitres .lb-lien { flex: 1 1 auto; }
.lb-chapitres .lb-date { flex: 0 0 auto; font-size: .82em; opacity: .7; }

/* ------------------------------------------------------- navigation chapitre */
.lb-nav-chapitre {
    display: flex; justify-content: space-between; align-items: stretch; gap: 12px;
    margin-bottom: 26px; flex-wrap: wrap;
}
.lb-nav-chapitre a, .lb-nav-chapitre span {
    flex: 1 1 30%;
    background: rgba(160, 40, 92, .84);
    color: var(--creme);
    border-radius: 9px;
    padding: 11px 15px;
    font-size: .92em;
}
.lb-nav-chapitre a:hover { background: var(--framboise-clair); text-decoration: none; }
.lb-nav-chapitre .lb-milieu { text-align: center; }
.lb-nav-chapitre .lb-suivant { text-align: right; }
.lb-nav-chapitre .lb-vide { background: rgba(120, 90, 105, .45); }
.lb-nav-chapitre small { display: block; opacity: .82; font-size: .84em; }

/* ------------------------------------------------------------ pagination */
.lb-pagination { text-align: center; margin: 24px 0; }
.lb-pagination .page-numbers {
    display: inline-block; padding: 7px 13px; margin: 2px;
    background: rgba(253, 243, 228, .9); border-radius: 6px; color: var(--framboise);
}
.lb-pagination .page-numbers.current { background: var(--framboise); color: #fff; }

/* -------------------------------------------------------------- footer */
/* UN SEUL pied de page : bouforet.jpg en fond (Bourriquet dans la foret d'automne,
   il repond aux feuilles de la banniere) et les 4 blocs poses PAR-DESSUS.
   L'image fait 1400x552 ; la hauteur suit desormais le contenu, avec un minimum
   pour que la foret reste lisible meme sur un pied de page court. */
.lb-pied {
    margin: 40px auto 0;
    max-width: 1400px;
    width: 100%;
    min-height: 420px;
    background-image: url("/wp-content/uploads/lovelybibi/bouforet.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    color: var(--creme);
}
/* le voile assombrit juste ce qu'il faut : l'image reste visible, le texte lisible */
.lb-pied-voile {
    min-height: inherit;
    background: linear-gradient(rgba(38, 16, 28, .55), rgba(38, 16, 28, .85));
    padding: 34px 0 16px;
}
.lb-pied a { color: #ffe9b8; }
.lb-pied-texte {
    max-width: 1180px;
    margin: 26px auto 0;
    padding: 16px 16px 0;
    border-top: 1px solid rgba(255, 233, 184, .22);
    text-align: center;
    font-size: .9em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.lb-pied-texte p { margin: 4px 0; }
.lb-pied-texte a { color: #ffd9a8; }

/* ---------------------------------------------------- retour en haut */
.lb-haut {
    position: fixed; right: 20px; bottom: 20px; z-index: 90;
    width: 46px; height: 46px; line-height: 44px;
    text-align: center; border-radius: 50%;
    background: rgba(160, 40, 92, .85); color: #fff;
    font-size: 1.3em; box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
    opacity: 0; pointer-events: none; transition: opacity .25s;
}
.lb-haut.visible { opacity: 1; pointer-events: auto; }
.lb-haut:hover { background: var(--framboise-clair); text-decoration: none; }

/* --------------------------------------------------------- commentaires */
.lb-commentaires { margin-top: 8px; }
.lb-commentaires ol, .lb-commentaires ul { list-style: none; padding-left: 0; }

/* ATTENTION : .lb-commentaires est pose dans .lb-panneau, qui impose du texte creme.
   Sans cette regle le texte creme se retrouve sur le fond creme du commentaire
   et devient illisible. Le corps du commentaire reprend donc du texte sombre. */
.lb-commentaires .comment-body {
    background: rgba(255, 252, 246, .97);
    color: var(--texte-sombre);
    border-left: 5px solid var(--rose);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
}
.lb-commentaires .comment-body,
.lb-commentaires .comment-body p,
.lb-commentaires .comment-body li,
.lb-commentaires .comment-body blockquote { color: var(--texte-sombre); }

.lb-commentaires .comment-body a { color: var(--framboise); }
.lb-commentaires .comment-body p:last-child { margin-bottom: 0; }

.lb-commentaires .comment-author { font-weight: bold; color: var(--framboise); }
.lb-commentaires .comment-author a { color: var(--framboise); }
.lb-commentaires .comment-metadata,
.lb-commentaires .comment-metadata a { font-size: .84em; color: #7a5568; }
.lb-commentaires .reply a { font-size: .86em; color: var(--framboise); }

/* les reponses de Bibi (badge auteur) se distinguent */
.lb-commentaires .bypostauthor > .comment-body {
    background: rgba(255, 240, 228, .97);
    border-left-color: var(--framboise);
}

.lb-commentaires .children { padding-left: 26px; border-left: 1px dashed rgba(255, 233, 184, .35); }

/* le formulaire reste sur le panneau framboise : texte creme */
.lb-commentaires .comment-respond label { color: var(--creme); }
.lb-commentaires .comment-respond input:not([type="submit"]),
.lb-commentaires .comment-respond textarea {
    background: rgba(255, 252, 246, .97);
    color: var(--texte-sombre);
    border: 0; border-radius: 6px; padding: 9px 12px;
    font-family: inherit; font-size: 1em;
}
.lb-commentaires .comment-respond input[type="submit"] {
    background: var(--framboise); color: #fff;
    border: 0; border-radius: 16px; padding: 9px 20px;
    font-family: inherit; cursor: pointer;
}

/* ---------------------------------------------------- diaporama d'accueil */
/* reprend les images du diaporama Joomla d'origine (images/sldeshow), 1280x868 */
.lb-diaporama {
    position: relative;
    margin: 0 0 26px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 22px rgba(0, 0, 0, .32);
    aspect-ratio: 1280 / 868;
    max-height: 60vh;
    background: rgba(160, 40, 92, .25);
}
.lb-diapos { position: absolute; inset: 0; }
.lb-diapo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .9s ease;
}
.lb-diapo.active { opacity: 1; }

.lb-d-bouton {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(160, 40, 92, .78);
    color: #fff; border: 0;
    width: 46px; height: 46px; border-radius: 50%;
    font-size: 1.4em; line-height: 1; cursor: pointer;
}
.lb-d-bouton:hover { background: var(--framboise-clair); }
.lb-d-prec { left: 14px; }
.lb-d-suiv { right: 14px; }

.lb-d-points {
    position: absolute; bottom: 14px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 8px;
}
.lb-d-point {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid #fff; background: transparent;
    cursor: pointer; padding: 0;
}
.lb-d-point.active { background: #fff; }

/* ------------------------------------------- lien newsletter (ligne du haut) */
.lb-recherche-ligne { gap: 12px; align-items: center; flex-wrap: wrap; }
.lb-lien-newsletter {
    margin-right: auto;
    background: rgba(160, 40, 92, .88);
    color: var(--creme);
    padding: 8px 16px;
    border-radius: 14px;
    font-size: .95em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.lb-lien-newsletter:hover { background: var(--framboise-clair); color: #fff; text-decoration: none; }

/* ------------------------------------------------------------ formulaires */
.lb-formulaire p { margin: 0 0 12px; }
.lb-formulaire label { display: block; margin-bottom: 4px; font-size: .93em; }
.lb-formulaire .lb-facultatif { opacity: .7; font-size: .88em; }
.lb-formulaire input[type="text"],
.lb-formulaire input[type="email"],
.lb-formulaire textarea {
    width: 100%;
    background: rgba(255, 252, 246, .97);
    color: var(--texte-sombre);
    border: 0; border-radius: 7px;
    padding: 10px 13px;
    font-family: inherit; font-size: 1em;
}
.lb-formulaire textarea { resize: vertical; }
.lb-formulaire button {
    background: var(--framboise); color: #fff;
    border: 0; border-radius: 18px;
    padding: 10px 24px;
    font-family: inherit; font-size: 1em; cursor: pointer;
}
.lb-formulaire button:hover { background: var(--framboise-clair); }
.lb-formulaire .lb-mentions { font-size: .84em; opacity: .85; margin-bottom: 0; }

/* le piege a robots ne doit jamais etre visible ni atteignable au clavier */
.lb-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lb-retour {
    border-radius: 8px; padding: 11px 15px; margin: 0 0 14px;
    font-size: .95em;
}
.lb-retour-ok   { background: rgba(232, 255, 232, .95); color: #14532d; border-left: 5px solid #16a34a; }
.lb-retour-info { background: rgba(255, 249, 224, .95); color: #6b4b12; border-left: 5px solid #d9a040; }
.lb-retour-err  { background: rgba(255, 233, 233, .95); color: #7a1226; border-left: 5px solid #c02c40; }

.lb-bouton {
    display: inline-block;
    background: var(--framboise); color: #fff;
    padding: 9px 20px; border-radius: 18px; font-size: .95em;
}
.lb-bouton:hover { background: var(--framboise-clair); color: #fff; text-decoration: none; }

/* -------------------------------------------------- blocs du pied de page */
.lb-pied-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 28px;
}
/* les blocs sont poses SUR l'image du pied de page : fond translucide,
   assez soutenu pour que le texte reste lisible, assez leger pour voir la foret */
.lb-pied-bloc {
    background: rgba(88, 22, 52, .58);
    border-radius: 10px;
    padding: 16px 18px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 233, 184, .18);
}
.lb-pied-bloc h3 {
    margin: 0 0 10px;
    font-size: 1.15em;
    font-variant: small-caps;
    letter-spacing: .05em;
    border-bottom: 2px solid rgba(220, 183, 43, .75);
    padding-bottom: 6px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.lb-pied-bloc p { font-size: .93em; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.lb-pied-bloc a { color: #ffe9b8; }
.lb-pied-liste { list-style: none; margin: 0; padding: 0; font-size: .93em; }
.lb-pied-liste li { padding: 4px 0; border-bottom: 1px dashed rgba(255, 233, 184, .22); }
.lb-pied-liste li:last-child { border-bottom: 0; }

.lb-form-newsletter.lb-compact p { margin-bottom: 9px; }
.lb-form-newsletter.lb-compact .lb-mentions { font-size: .8em; }

/* ------------------------------------------------------------ galeries */
/* Remplacent les galeries DropPics. Vignettes carrees comme a l'origine (180px). */
.lb-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 22px 0;
}
.lb-galerie .lb-vignette {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    border: 3px solid rgba(255, 255, 255, .8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    background: rgba(222, 165, 150, .4);
}
.lb-galerie .lb-vignette img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s;
}
.lb-galerie .lb-vignette:hover { border-color: var(--rose); text-decoration: none; }
.lb-galerie .lb-vignette:hover img { transform: scale(1.07); }

/* la visionneuse */
#lb-visionneuse {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(28, 12, 20, .94);
    display: none;
    align-items: center; justify-content: center;
}
#lb-visionneuse.ouverte { display: flex; }
#lb-visionneuse img {
    max-width: 92vw; max-height: 88vh;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}
#lb-visionneuse .lb-v-bouton {
    position: absolute;
    background: rgba(160, 40, 92, .85);
    color: #fff; border: 0;
    width: 52px; height: 52px;
    border-radius: 50%;
    font-size: 1.6em; line-height: 1;
    cursor: pointer;
}
#lb-visionneuse .lb-v-bouton:hover { background: var(--framboise-clair); }
#lb-visionneuse .lb-v-prec { left: 16px; }
#lb-visionneuse .lb-v-suiv { right: 16px; }
#lb-visionneuse .lb-v-fermer { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 1.3em; }
#lb-visionneuse .lb-v-compteur {
    position: absolute; bottom: 18px; left: 0; right: 0;
    text-align: center; color: var(--creme); font-size: .9em;
}

/* ------------------------------------------------------------ mobile */
@media (max-width: 860px) {
    body { font-size: 16px; background-attachment: scroll; }
    /* la barre reste sur une ligne : elle defile lateralement au doigt */
    .lb-barre .lb-contenu { justify-content: flex-start; }
    .lb-menu a { padding: 10px 9px; font-size: .93em; }
    .lb-recherche-ligne { padding-top: 56px; justify-content: center; }
    .lb-recherche input[type="search"] { min-width: 0; flex: 1 1 auto; }
    .lb-pied { border-radius: 0; }
    .lb-lecture { padding: 20px 18px; }
    .lb-panneau { padding: 20px 18px; }
    .lb-nav-chapitre a, .lb-nav-chapitre span { flex: 1 1 100%; text-align: left !important; }
}