/*
 * Mini-sites des membres : trois mises en page (body.mp-mise-carnet,
 * .mp-mise-couverture, .mp-mise-voile), nourries par les réglages de chaque
 * membre, posés en variables par inc/theme.php :
 *   --mp-fond, --mp-image             couleur et image de fond (galerie)
 *   --mp-texte                        texte posé sur le fond (contraste corrigé)
 *   --mp-cadre, --mp-texte-cadre      cadres ; --mp-voile : cadre translucide
 *   --mp-accent, --mp-accent-texte    couleur vive du membre, lisible sur papier ; texte posé dessus
 *   --mp-accent-voile                 accent lisible sur la couleur des cadres
 *   --mp-teinte                       fond très clair tiré des cadres (couverture)
 *   --mp-entete, --mp-entete-texte    voile de couleur sur l'image du bandeau (couverture) et son texte
 *   --mp-filet                        filets et bordures (accent très pâle)
 *   --mp-police-titre / --mp-police-poemes, --mp-taille-titre / -titres / -poemes
 */

/* ======================================================================
   COMMUN
   ====================================================================== */

body.mp-site {
    background-color: var(--mp-fond);
    background-image: var(--mp-image);
    background-repeat: repeat;
    color: #2b2b2b;
    --bs-body-color: #2b2b2b;
    --bs-link-color: var(--mp-accent);
    --bs-link-hover-color: var(--mp-accent);
}
.mp-site a { color: var(--mp-accent); text-underline-offset: .15em; }

.mp-colonne { max-width: 56rem; }

.mp-barre-portail {
    background: rgba(255, 255, 255, .92);
    color: #2c2333;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.mp-site .mp-barre-portail a { color: #5b2a6e; text-decoration: none; }
.mp-site .mp-barre-portail a:hover { text-decoration: underline; }
.mp-barre-marque { font-family: var(--mp-serif); font-size: 1rem; }

.mp-pied-site {
    background: rgba(255, 255, 255, .92);
    color: #2c2333;
}
.mp-site .mp-pied-site a { color: #5b2a6e; }

/* La page : la colonne du site (le corps est une colonne flex, la largeur doit être demandée). */
.mp-page { width: 100%; }

/* En-tête du site : logo et titre */
.mp-entete { text-align: center; }
.mp-titre-site {
    margin: 0;
    font-family: var(--mp-police-titre);
    font-size: clamp(1.4rem, 7vw, var(--mp-taille-titre));
    font-weight: 600;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.mp-site .mp-titre-site a { color: inherit; text-decoration: none; }
.mp-logo-lien { display: inline-block; max-width: 100%; }
/* width et height « auto » : la hauteur plafonnée entraîne la largeur (attributs width/height de l'image). */
.mp-logo { width: auto; max-width: 100%; height: auto; max-height: 220px; object-fit: contain; vertical-align: middle; }
.mp-logo-lien + .mp-titre-site { margin-top: 1.25rem; }

/* Menu */
.mp-menu-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1.75rem;
}
.mp-site .mp-menu-liste a {
    display: inline-block;
    padding: .5rem .15rem;
    text-decoration: none;
    color: inherit;
}

/* Textes */
.mp-titre-poeme {
    margin: 0;
    font-family: var(--mp-police-poemes);
    font-size: clamp(1.35rem, 6vw, var(--mp-taille-titres));
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.mp-meta { margin: .5rem 0 0; font-size: .925rem; opacity: .72; }
.mp-surtitre { margin: 0 0 .35rem; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.mp-intertitre {
    margin: 2.5rem 0 1rem;
    font-family: var(--mp-police-titre);
    font-size: 1.5rem;
    font-weight: 600;
}
.mp-intertitre small { font-size: .9rem; font-weight: 400; opacity: .7; }
.mp-entete-page { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.mp-entete-page .mp-intertitre { margin: 0; }

/* Un poème */
.mp-poeme-entete { margin-bottom: 2rem; }
.mp-poeme {
    font-family: var(--mp-police-poemes);
    font-size: var(--mp-taille-poemes);
    line-height: 1.85;
    overflow-wrap: anywhere;
}
.mp-poeme.mp-align-centre { text-align: center; }
.mp-poeme.mp-align-droite { text-align: right; }
.mp-poeme.mp-align-justifie { text-align: justify; }
.mp-figure { margin: 2rem 0; text-align: center; }
.mp-poeme-photo { max-width: 100%; height: auto; border-radius: 6px; }
.mp-photo-gauche { float: left; max-width: 45%; margin: .35rem 1.5rem .75rem 0; }
.mp-photo-droite { float: right; max-width: 45%; margin: .35rem 0 .75rem 1.5rem; }
@media (max-width: 575.98px) {
    .mp-photo-gauche, .mp-photo-droite { float: none; max-width: 100%; margin: 0 0 1rem; }
}
.mp-smiley { vertical-align: middle; max-height: 2em; }
.mp-puce { margin-right: .25rem; }

/* Note et votes */
.mp-note { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--mp-filet); font-size: .95rem; }
.mp-vote { margin-top: .75rem; }
.mp-notes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.mp-bouton-note {
    min-width: 2.5rem;
    min-height: 2.5rem;
    border: 1px solid var(--mp-filet);
    border-radius: 999px;
    background: transparent;
    color: inherit;
}
.mp-bouton-note:hover, .mp-bouton-note:focus-visible { border-color: var(--mp-accent); }
.mp-bouton-note.mp-choisi { background: var(--mp-accent); border-color: var(--mp-accent); color: var(--mp-accent-texte); }

/* Poèmes voisins */
.mp-voisins { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; margin: 2rem 0; }
.mp-site .mp-voisins a { padding: .4rem 0; text-decoration: none; }
.mp-site .mp-voisins a:hover { text-decoration: underline; }

/* Liste des poèmes */
.mp-liste-poemes { list-style: none; margin: 0; padding: 0; }
.mp-site .mp-liste-poemes a {
    display: block;
    padding: 1rem .25rem;
    border-bottom: 1px solid var(--mp-filet);
    color: inherit;
    text-decoration: none;
}
.mp-titre-liste {
    display: block;
    font-family: var(--mp-police-poemes);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
}
.mp-liste-poemes a:hover .mp-titre-liste, .mp-liste-poemes a:focus-visible .mp-titre-liste { color: var(--mp-accent); }
.mp-liste-poemes .mp-meta { display: block; margin-top: .2rem; }

/* Cartes : commentaires, livre d'or, liens, présentation, page « Moi » */
.mp-carte {
    margin-bottom: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    background: #fff;
    color: #2b2b2b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.mp-site .mp-carte a { color: var(--mp-accent); }
.mp-carte .mp-meta { margin: 0 0 .5rem; }
.mp-presentation { margin-bottom: 1.75rem; }
.mp-vide { padding: 2rem; text-align: center; }
.mp-formulaire { margin-top: 1.5rem; }
.mp-titre-lien { margin: 0 0 .25rem; font-size: 1.1rem; font-weight: 600; }
.mp-moi .mp-titre-poeme { margin-bottom: .75rem; }
.mp-photo-profil { max-width: 240px; height: auto; }

/* Boutons */
.mp-site .mp-bouton {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--mp-accent);
    color: var(--mp-accent-texte) !important; /* passe avant les couleurs de liens des mises en page */
    font-weight: 600;
    text-decoration: none;
}
.mp-site .mp-bouton:hover, .mp-site .mp-bouton:focus-visible { filter: brightness(.9); }
.mp-site .mp-bouton-secondaire {
    display: inline-flex;
    align-items: center;
    padding: .6rem 1.25rem;
    border: 1px solid var(--mp-filet);
    border-radius: 999px;
    color: inherit !important;
    text-decoration: none;
}

.mp-site .pagination {
    --bs-pagination-color: var(--mp-accent);
    --bs-pagination-bg: #fff;
    --bs-pagination-hover-color: var(--mp-accent);
    --bs-pagination-active-bg: var(--mp-accent);
    --bs-pagination-active-color: var(--mp-accent-texte);
    --bs-pagination-active-border-color: var(--mp-accent);
}

/* Champs de saisie : toujours lisibles, quelles que soient les couleurs du membre. */
.mp-site .form-control,
.mp-site .form-select {
    background-color: #fff;
    color: #212529;
    border-color: rgba(0, 0, 0, .25);
}
.mp-site .form-control::placeholder { color: #6c757d; }
.mp-site .form-label,
.mp-site .form-text { color: inherit; }

/* ======================================================================
   A · LE CARNET (par défaut) : le site sur une page de papier, posée sur
   le fond du membre ; ses couleurs en accent. Toujours lisible.
   ====================================================================== */

.mp-mise-carnet .mp-page {
    max-width: 48rem;
    margin: 3rem auto;
    padding: 3rem 4.5rem 3.5rem;
    border-radius: 6px;
    background: #fffdf8;
    box-shadow: 0 12px 48px rgba(20, 10, 30, .28);
}
.mp-mise-carnet .mp-titre-site { color: var(--mp-accent); }
.mp-mise-carnet .mp-menu {
    margin: 1rem 0 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--mp-filet);
}
.mp-site.mp-mise-carnet .mp-menu-liste a { border-bottom: 2px solid transparent; color: #5f5f5f; }
.mp-site.mp-mise-carnet .mp-menu-liste a.mp-actif { border-bottom-color: var(--mp-accent); color: #2b2b2b; font-weight: 600; }
.mp-mise-carnet .mp-poeme-entete { margin-bottom: 2rem; text-align: center; }
.mp-mise-carnet .mp-poeme-entete::after {
    content: "• • •";
    display: block;
    margin-top: 1.5rem;
    color: var(--mp-accent);
    letter-spacing: .35em;
}
.mp-mise-carnet .mp-poeme { max-width: 34em; margin: 0 auto; }
.mp-mise-carnet .mp-carte { background: rgba(0, 0, 0, .025); border: 1px solid var(--mp-filet); box-shadow: none; }

@media (max-width: 767.98px) {
    .mp-mise-carnet .mp-page { width: calc(100% - 1.5rem); margin: 1rem auto 1.5rem; padding: 1.75rem 1.35rem 2rem; }
    .mp-mise-carnet .mp-menu { margin-bottom: 1.75rem; padding-bottom: 1.25rem; }
    .mp-mise-carnet .mp-menu-liste { gap: .25rem 1.1rem; }
}

/* ======================================================================
   B · LA COUVERTURE : l'image et la couleur du membre en grand bandeau,
   la lecture sur un fond clair tiré de la couleur de ses cadres.
   ====================================================================== */

body.mp-mise-couverture { background-color: var(--mp-teinte); background-image: none; }
.mp-mise-couverture .mp-entete {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    min-height: 18rem;
    padding: 3rem 1rem 3.75rem;
    background-color: var(--mp-fond);
    background-image: linear-gradient(var(--mp-entete), var(--mp-entete)), var(--mp-image);
    background-repeat: repeat;
    color: var(--mp-entete-texte);
}
.mp-mise-couverture .mp-titre-site {
    font-size: clamp(1.8rem, 8vw, calc(var(--mp-taille-titre) * 1.5));
    font-weight: 700;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .12);
}
.mp-mise-couverture .mp-logo { max-height: 260px; }
.mp-mise-couverture .mp-logo-lien + .mp-titre-site { margin-top: .5rem; }
.mp-mise-couverture .mp-menu { position: relative; display: flex; justify-content: center; margin: -1.6rem 1rem 0; }
.mp-mise-couverture .mp-menu-liste {
    gap: .25rem;
    padding: .35rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
}
.mp-site.mp-mise-couverture .mp-menu-liste a { padding: .6rem 1.2rem; border-radius: 999px; color: #2b2b2b; }
.mp-site.mp-mise-couverture .mp-menu-liste a.mp-actif { background: var(--mp-accent); color: var(--mp-accent-texte); font-weight: 600; }
.mp-mise-couverture .mp-contenu { max-width: 46rem; margin: 2.5rem auto 3rem; padding: 0 1rem; }
.mp-mise-couverture .mp-article,
.mp-mise-couverture .mp-liste-poemes {
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.mp-mise-couverture .mp-article { padding: 3rem 4rem 2.5rem; }
.mp-mise-couverture .mp-liste-poemes { padding: .25rem 1.5rem; }
.mp-site.mp-mise-couverture .mp-liste-poemes li:last-child a { border-bottom: 0; }
.mp-mise-couverture .mp-poeme-entete { margin-bottom: 2rem; }

@media (max-width: 767.98px) {
    .mp-mise-couverture .mp-entete { min-height: 11rem; padding: 2rem 1rem 3rem; }
    .mp-mise-couverture .mp-menu { margin-inline: .5rem; }
    .mp-mise-couverture .mp-menu-liste { gap: 0; padding: .25rem; font-size: .95rem; }
    .mp-site.mp-mise-couverture .mp-menu-liste a { padding: .5rem .65rem; }
    .mp-mise-couverture .mp-contenu { margin-top: 1.5rem; padding: 0 .75rem; }
    .mp-mise-couverture .mp-article { padding: 1.75rem 1.35rem; }
    .mp-mise-couverture .mp-liste-poemes { padding: .25rem 1rem; }
}

/* ======================================================================
   C · LE VOILE : le fond du membre en plein écran, le contenu sur des
   panneaux translucides à la couleur de ses cadres.
   ====================================================================== */

.mp-mise-voile .mp-page { max-width: 50rem; margin: 2rem auto 3rem; padding: 0 .75rem; color: var(--mp-texte-cadre); }
/* Titre et menu dans un seul panneau : deux flous qui se touchent laissent un trait. */
.mp-mise-voile .mp-haut,
.mp-mise-voile .mp-contenu {
    background: var(--mp-voile);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .14);
}
.mp-mise-voile .mp-haut { padding: 1.75rem 1rem 1.1rem; }
.mp-mise-voile .mp-menu { margin-top: .5rem; }
.mp-mise-voile .mp-menu-liste { gap: .35rem; }
.mp-site.mp-mise-voile .mp-menu-liste a { padding: .5rem 1.1rem; border-radius: 999px; }
.mp-site.mp-mise-voile .mp-menu-liste a.mp-actif { background: var(--mp-texte-cadre); color: var(--mp-cadre); font-weight: 600; }
.mp-mise-voile .mp-contenu {
    margin-top: 1.25rem;
    padding: 2.75rem 4.5rem 2.5rem;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .14);
}
.mp-site.mp-mise-voile .mp-contenu a { color: var(--mp-accent-voile); }
.mp-site.mp-mise-voile .mp-contenu .mp-liste-poemes a { color: inherit; }
.mp-mise-voile .mp-note,
.mp-site.mp-mise-voile .mp-liste-poemes a,
.mp-mise-voile .mp-bouton-note { border-color: color-mix(in srgb, currentColor 20%, transparent); }
.mp-mise-voile .mp-carte { background: rgba(255, 255, 255, .62); }
.mp-site.mp-mise-voile .mp-carte a { color: var(--mp-accent); }
.mp-site.mp-mise-voile .mp-bouton { background: var(--mp-texte-cadre); color: var(--mp-cadre) !important; }

@media (max-width: 767.98px) {
    .mp-mise-voile .mp-page { margin-top: 1rem; }
    .mp-mise-voile .mp-haut { padding: 1.25rem .5rem .85rem; }
    .mp-mise-voile .mp-menu-liste { gap: .15rem; }
    .mp-site.mp-mise-voile .mp-menu-liste a { padding: .5rem .75rem; }
    .mp-mise-voile .mp-contenu { padding: 1.75rem 1.35rem; }
}