/* ================================================
   Pages éditoriales (accueil, biographie, contact, mentions)
   Reprend la mise en page des anciennes pages Elementor :
   contenu de 1140 px, colonnes à 10 px de marge intérieure, 20 px d'écart.
================================================ */

/* ─── Mise en page ────────────────────────────────────────── */
.page-section {
    display        : flex;
    flex-direction : column;
    padding        : 0 10px;
}

.page-section__inner {
    display        : flex;
    flex-direction : column;
    gap            : 20px;
    width          : 100%;
    max-width      : 1140px;
    margin         : 0 auto;
}

.page-row {
    display        : flex;
    flex-direction : row;
    gap            : 20px;
    padding        : 0;
}

.page-col {
    display        : flex;
    flex-direction : column;
    gap            : 20px;
    flex           : 1 1 0;
    min-width      : 0;
    padding        : 10px;
}

.page-col--middle {
    justify-content : center;
}

.page-col--center {
    justify-content : center;
    align-items     : center;
}

/* ─── Contenus ────────────────────────────────────────────── */
.page h1,
.page h2,
.page h3,
.page h4,
.page h5 {
    margin      : 0;
    padding     : 0;
    line-height : 1;
    text-align  : center;
}

.page__texte {
    display    : flow-root; /* garde la marge du dernier paragraphe dans le bloc */
    text-align : center;
}

.page__texte p {
    margin : 0 0 14.4px;
}

.page__image {
    text-align : center;
}

.page__image img {
    display        : inline-block;
    vertical-align : middle;
    border         : 1px solid #c8bfaa;
}

.page__image--arrondie img {
    border-radius : 50px;
}

/* Bouton du site (même style que « Statistiques » / « Diaporama » de la liste des tableaux).
   Préfixe .page : l'emporte sur le reset des <button>, chargé après */
.page .bouton {
    display         : inline-flex;
    align-items     : center;
    gap             : 0.6em;
    padding         : 0.65rem 1.3rem;
    border          : 1px solid #9a8a72;
    border-radius   : 0;
    background      : #fff;
    font-family     : 'Georgia', serif;
    font-size       : 12px;
    font-style      : normal;
    letter-spacing  : 0.18em;
    line-height     : 1.5;
    text-transform  : uppercase;
    text-decoration : none;
    color           : #5a4e3c;
    cursor          : pointer;
    transition      : color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.page .bouton:hover,
.page .bouton:focus-visible {
    background   : #2c2416;
    border-color : #2c2416;
    color        : #f0ece3;
}

/* Bloc d'un lien, centré sur sa propre ligne */
.page__bouton {
    text-align : center;
}

/* Lien souligné discret (« Voir la rue », « Cliquez ici ») ;
   préfixe .page : l'emporte sur le reset des <button>, chargé après */
.page .page__lien {
    display         : inline-block;
    padding         : 4px 0;
    font-family     : 'Georgia', serif;
    font-size       : 13px;
    font-style      : italic;
    font-weight     : 500;
    letter-spacing  : 0.08em;
    line-height     : 1;
    text-align      : center;
    text-decoration : none;
    color           : #5a4e3c;
    background      : transparent;
    border          : none;
    border-bottom   : 1px solid #9a8a72;
    border-radius   : 0;
    cursor          : pointer;
    transition      : color 0.3s ease, border-color 0.3s ease;
}

.page .page__lien:hover,
.page .page__lien:focus {
    color               : #2c2416;
    background          : transparent;
    border-bottom-color : #2c2416;
}

/* ─── Accueil ─────────────────────────────────────────────── */
.accueil__intro {
    padding : 40px 10px 10px;
}

.accueil__rubriques {
    padding : 10px;
}

.accueil__rubrique h3 {
    margin-bottom : -20px;
}

.accueil__rubrique .page__image {
    padding  : 20px;
    overflow : hidden;
}

.accueil__rubrique .page__image a {
    display        : inline-block;
    vertical-align : middle;
}

.accueil__rubrique img {
    border        : 1px solid #1a1410;
    border-radius : 20px;
    box-shadow    : 4px 4px 10px rgba(0, 0, 0, 0.25);
    transition    : transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
}

.accueil__rubrique .page__image:hover img {
    transform  : scale(1.04);
    box-shadow : 6px 6px 16px rgba(0, 0, 0, 0.35);
    filter     : brightness(0.93);
}

.accueil__fin {
    height : 20px;
}

/* ─── Biographie ──────────────────────────────────────────── */
/* Mise en page « catalogue de musée » : frise chronologique,
   lettrine, exergue, cadres décalés, bandeau pour la maison. */
.biographie {
    --bio-encre  : #2c2416;
    --bio-brun   : #5a4e3c;
    --bio-sepia  : #9a8a72;
    --bio-filet  : #c8bfaa;
    --bio-papier : #e8e1d3;
    padding-bottom : 30px;
}

/* En-tête */
.bio-hero {
    margin : 40px 0 10px;
}

.bio-hero .page-section__inner {
    align-items : center;
    gap         : 18px;
}

.page .bio-hero__titre {
    max-width      : 900px;
    font-size      : 34px !important;
    font-style     : italic;
    letter-spacing : 0.01em !important;
    text-transform : none !important;
    line-height    : 1.35 !important;
}

.bio-hero__titre sup {
    font-size : 0.55em;
}

/* Frise chronologique */
.bio-frise {
    margin : 30px 0 20px;
}

.bio-frise__liste {
    position        : relative;
    display         : flex;
    justify-content : space-between;
    margin          : 0 auto;
    padding         : 0;
    width           : 100%;
    max-width       : 900px;
    list-style      : none;
}

/* Ligne reliant les repères, à hauteur des points */
.bio-frise__liste::before {
    content    : "";
    position   : absolute;
    top        : 52px;
    left       : 12.5%;
    right      : 12.5%;
    height     : 1px;
    background : var(--bio-filet);
}

.bio-frise__liste li {
    position       : relative;
    flex           : 1 1 0;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 22px;
    text-align     : center;
}

/* Point sur la ligne */
.bio-frise__liste li::after {
    content       : "";
    position      : absolute;
    top           : 47px;
    width         : 9px;
    height        : 9px;
    border        : 1px solid var(--bio-sepia);
    border-radius : 50%;
    background    : #f0ece3;
}

.bio-frise__annee {
    font-family : 'Georgia', serif;
    font-size   : 30px;
    font-style  : italic;
    line-height : 40px;
    color       : var(--bio-encre);
}

.bio-frise__texte {
    max-width      : 170px;
    font-size      : 11px;
    letter-spacing : 0.18em;
    line-height    : 1.7;
    text-transform : uppercase;
    color          : var(--bio-brun);
}

/* Rangées texte / image */
.bio-rangee {
    padding     : 40px 0;
    gap         : 60px;
    align-items : center;
}

.page .bio-titre-section {
    position      : relative;
    padding-bottom: 14px;
    font-size     : 26px !important;
    color         : var(--bio-encre) !important;
    text-align    : left;
}

/* Petit filet sous les titres de section */
.bio-titre-section::after {
    content    : "";
    position   : absolute;
    left       : 0;
    bottom     : 0;
    width      : 48px;
    height     : 1px;
    background : var(--bio-sepia);
}

.page .bio-titre-section--centre {
    text-align : center;
}

.bio-titre-section--centre::after {
    left      : 50%;
    transform : translateX(-50%);
}

.page .bio-texte {
    text-align : left;
}

.page .bio-texte p {
    text-align : justify !important;
    hyphens    : auto;
}

/* Lettrine */
.bio-lettrine::first-letter {
    float       : left;
    margin      : 6px 10px 0 0;
    font-family : 'Georgia', serif;
    font-size   : 64px;
    line-height : 0.8;
    color       : var(--bio-brun);
}

/* Exergue de Jean Agamemnon */
.bio-exergue {
    position    : relative;
    margin      : 0;
    padding     : 22px 26px 20px 34px;
    border-left : 2px solid var(--bio-sepia);
    background  : var(--bio-papier);
}

.bio-exergue::before {
    content     : "«";
    position    : absolute;
    top         : -6px;
    left        : 8px;
    font-family : 'Georgia', serif;
    font-size   : 52px;
    line-height : 1;
    color       : var(--bio-filet);
}

.page .bio-exergue p {
    margin      : 0 0 10px;
    font-size   : 17px !important;
    font-style  : italic;
    line-height : 1.7 !important;
    color       : var(--bio-encre) !important;
}

.bio-exergue cite,
.bio-citation cite {
    display        : block;
    font-family    : 'Georgia', serif;
    font-size      : 11px;
    font-style     : normal;
    letter-spacing : 0.24em;
    text-transform : uppercase;
    color          : var(--bio-sepia);
}

.bio-exergue cite::before,
.bio-citation cite::before {
    content : "— ";
}

.page .bio-rangee .page__bouton {
    text-align : left;
}

/* Images encadrées, avec un second cadre décalé derrière */
.bio-cadre {
    position : relative;
    margin   : 18px 18px 0 0;
}

.bio-cadre::before {
    content  : "";
    position : absolute;
    inset    : -18px -18px 18px 18px;
    border   : 1px solid var(--bio-sepia);
    z-index  : 0;
}

.bio-cadre--gauche {
    margin : 18px 0 0 18px;
}

.bio-cadre--gauche::before {
    inset : -18px 18px 18px -18px;
}

.bio-cadre img {
    position   : relative;
    z-index    : 1;
    display    : block;
    width      : 100%;
    height     : auto;
    border     : 8px solid #fff;
    box-shadow : 0 14px 30px rgba(44, 36, 22, 0.22);
}

.bio-cadre figcaption {
    margin-top     : 14px;
    font-family    : 'Georgia', serif;
    font-size      : 12px;
    font-style     : italic;
    letter-spacing : 0.06em;
    text-align     : center;
    color          : var(--bio-sepia);
}

/* La maison : bande de papier sur toute la largeur */
.bio-maison {
    margin-top : 30px;
    background : var(--bio-papier);
    border-top    : 1px solid var(--bio-filet);
    border-bottom : 1px solid var(--bio-filet);
}

.bio-maison .bio-rangee {
    padding : 60px 0;
}

/* Rétrospectives */
.bio-retrospectives {
    margin-top : 60px;
}

.bio-retrospectives .page-section__inner {
    align-items : center;
    gap         : 10px;
}

.page .bio-indication {
    margin     : 0;
    font-size  : 13px !important;
    font-style : italic;
    color      : var(--bio-sepia) !important;
}

.bio-livres {
    width          : 100%;
    max-width      : 760px;
    margin-top     : 25px;
    align-items    : flex-end;
}

.bio-livre-col {
    align-items : center;
    gap         : 16px;
}

.bio-livre-annee {
    padding        : 4px 14px;
    border         : 1px solid var(--bio-filet);
    font-size      : 12px;
    letter-spacing : 0.24em;
    color          : var(--bio-brun);
    background     : #fff;
}

/* Livres : cadre blanc, agrandissement au clic */
.page .biographie__livre {
    display    : inline-block;
    border     : 0;
    padding    : 0;
    background : none;
    cursor     : pointer;
}

/* Pas de fond au survol (le reset des <button> en met un, rouge) */
.page .biographie__livre:hover,
.page .biographie__livre:focus {
    background : transparent;
}

.biographie__livre img {
    display    : block;
    border     : 8px solid #fff;
    box-shadow : 3px 6px 14px rgba(44, 36, 22, 0.2);
    transition : transform 0.4s ease, box-shadow 0.4s ease;
}

.biographie__livre:hover img,
.biographie__livre:focus-visible img {
    transform  : translateY(-6px) rotate(-1.5deg);
    box-shadow : 8px 14px 26px rgba(44, 36, 22, 0.3);
}

/* Citation finale */
.bio-citation {
    margin : 70px 0 30px;
}

.bio-citation .page-section__inner {
    align-items : center;
}

.bio-citation blockquote {
    position   : relative;
    max-width  : 680px;
    margin     : 0;
    padding    : 30px 40px;
    border-top    : 1px solid var(--bio-filet);
    border-bottom : 1px solid var(--bio-filet);
    text-align : center;
}

.bio-citation blockquote::before {
    content     : "“";
    position    : absolute;
    top         : -30px;
    left        : 50%;
    transform   : translateX(-50%);
    padding     : 0 14px;
    background  : #f0ece3;
    font-family : 'Georgia', serif;
    font-size   : 60px;
    line-height : 1;
    color       : var(--bio-sepia);
}

.page .bio-citation p {
    margin      : 0 0 14px;
    font-size   : 26px !important;
    font-style  : italic;
    line-height : 1.4 !important;
    text-align  : center !important;
    color       : var(--bio-encre) !important;
}

@media (max-width: 767px) {
    .bio-hero {
        margin-top : 25px;
    }

    .page .bio-hero__titre {
        font-size : 24px !important;
    }

    .bio-hero__titre br {
        display : none;
    }

    /* Frise verticale */
    .bio-frise__liste {
        flex-direction : column;
        gap            : 18px;
        max-width      : 320px;
    }

    .bio-frise__liste::before {
        top    : 8px;
        bottom : 8px;
        left   : 88px;
        right  : auto;
        width  : 1px;
        height : auto;
    }

    .bio-frise__liste li {
        flex-direction : row;
        gap            : 34px;
        text-align     : left;
    }

    .bio-frise__liste li::after {
        top  : 16px;
        left : 84px;
    }

    .bio-frise__annee {
        flex      : 0 0 70px;
        font-size : 24px;
        text-align: right;
    }

    .bio-rangee {
        gap     : 30px;
        padding : 25px 0;
    }

    /* Image avant le texte pour la maison aussi */
    .bio-maison .bio-rangee {
        padding : 40px 0;
    }

    /* Les trois catalogues restent côte à côte */
    .page-row.bio-livres {
        flex-direction  : row;
        justify-content : center;
        gap             : 10px;
        padding         : 0;
    }

    .bio-livres .bio-livre-col {
        flex    : 1 1 0;
        padding : 0;
    }

    .page .biographie__livre {
        max-width : 100%;
    }

    .biographie__livre img {
        max-width : 100%;
        height    : auto;
        border-width : 5px;
    }

    .page .bio-citation p {
        font-size : 21px !important;
    }

    .bio-citation blockquote {
        padding : 30px 10px;
    }
}

/* ─── Mentions légales ────────────────────────────────────── */
.mentions .page-section {
    padding-bottom : 10px;
}

.mentions .page-section__inner {
    padding-top : 10px;
}

.mentions h1 {
    margin : 30px 20px 0; /* titre à ~40 px de la navigation, comme les autres pages */
}

.mentions__contenu {
    align-items : center;
    padding     : 10px;
}

.mentions__contenu h5 {
    font-size : 20px;
}

.mentions__hebergeur {
    margin-top : 5px !important;
}

.mentions__credits {
    margin      : 10px !important;
    line-height : 21px !important;
}

/* ─── Contact ─────────────────────────────────────────────── */
.contact .page-section {
    padding-block : 10px;
}

.contact__entete {
    margin  : 20px auto 0;
    padding : 10px;
}

/* Accroche plus discrète que les h2 du site */
.contact__entete h2 {
    font-size : 17px !important;
}

.contact__formulaire {
    padding : 10px;
}

.contact__widget {
    align-self : center;
    width      : 61%;
    margin     : 15px 20px 20px;
}

/* Un peu d'air entre le libellé et son champ */
.contact .wpcf7-form label > input:not([type="file"]),
.contact .wpcf7-form label > textarea {
    margin-top : 8px;
}

/* ─── Erreur 404 ──────────────────────────────────────────── */
.erreur__contenu {
    padding : 40px 10px 100px;
}

/* ─── Mobile ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    .page-row {
        flex-direction : column;
    }

    .page-col {
        flex : 0 0 auto;
    }

    .contact__entete {
        margin : 20px auto 0;
    }

    .contact__widget {
        width  : 100%;
        margin : 15px 0 20px;
    }
}