/*
 * Portage de migration-source/legacy-assets/style.css (ancien site).
 *
 * Les surcharges Bootstrap 3 du fichier source (.navbar-default, .navbar-brand, .navbar-nav,
 * .dropdown-menu, .navbar-toggle, .navbar-form, et le bloc .carousel/.carousel-inner/#myCarousel
 * qui surchargeait le composant carousel de Bootstrap) ne sont PAS reprises ici : le nouveau
 * site n'utilise pas Bootstrap. Leurs équivalents visuels (nav, slider) sont réimplémentés
 * dans theme.css avec des classes propres au thème. Tout le reste ci-dessous est repris
 * verbatim (aucune dépendance Bootstrap dans ces règles).
 */

/* Bootstrap posait box-sizing: border-box globalement ; sans lui, les éléments en width:100%
   + padding (ex. .site-header) débordent de leur conteneur au lieu de compter le padding dans
   la largeur — d'où le décalage du header par rapport au reste du site. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ============================================================
   Polices
   ============================================================ */

h1, h2, h4, span, li, button, a {
    font-family: 'Stencil std', calibri;
}

p {
    font-family: 'Courier New', Courier, Arial;
    font-size: 1.3em;
}

section p {
    color: #000000;
}


/* ============================================================
   Généralités
   ============================================================ */

body {
    max-width: 1900px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}

.mur {
    background: url(images/mur.jpg) center no-repeat fixed;
    background-size: cover;
}

.shadow {
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.shadowText {
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.cadreText {
    background-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    width: 75%;
}

.blueTitle {
    color: #1b345d;
}

.ombreout {
    background-color: #fff;
    margin-top: 15px;
    padding: 25px;
    box-shadow: 2px 2px 10px gray;
}

.transparent {
    background-color: rgba(255,255,255,0.5);
    width: 50%;
}


/* ============================================================
   Bouton retour (baleine)
   ============================================================ */

.retour {
    text-align: center;
    margin: 3em 0 2em;
}

.retour a {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.7em 1.8em;
    background-color: #1b345d;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-family: 'Stencil std', calibri;
    letter-spacing: 0.03em;
    box-shadow: 2px 2px 10px gray;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.retour a:hover {
    background-color: #f8b912;
    color: #1b345d;
    transform: translateX(-4px);
}

.retour img {
    width: 150px;
    transition: transform .2s;
}

.retour img:hover {
    transform: scale(1.2);
}


/* ============================================================
   Page d'accueil — grille de navigation (les 8 vignettes `theme`)
   ============================================================ */

.content {
    display: flex;
    flex-wrap: wrap;
}

.up {
    width: calc(25% - 0.6em);
    margin: 0.3em;
}

.up img {
    height: 600px;
    width: 100%;
    object-fit: cover;
}

.section {
    display: flex;
    flex-wrap: wrap;
}

.down {
    width: calc(25% - 0.6em);
    margin: 0.3em;
}

.down img {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

/* Effet survol sur la grille de navigation (tuile image + légende en dégradé) */

.nav-grid a {
    position: relative;
    display: block;
    overflow: hidden;
}

.nav-grid a img {
    display: block;
    transition: transform 0.5s ease;
}

.nav-grid a:hover img {
    transform: scale(1.06);
}

.nav-grid .caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 1.2em 1.4em;
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba(27,52,93,0.92) 0%, rgba(27,52,93,0.35) 55%, rgba(27,52,93,0) 100%);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-grid a:hover .caption {
    opacity: 1;
    transform: translateY(0);
}

.nav-grid .titre {
    color: #fff;
    font-weight: bold;
    font-size: 26px;
    margin: 0;
}

.up .titre {
    font-size: 30px;
}

.down .titre {
    font-size: 22px;
}


/* ============================================================
   Page générique (.page)
   ============================================================ */

.page {
    background: url(images/fondPage.jpg) center no-repeat fixed;
    background-size: cover;
}

.page section {
    max-width: 60%;
    margin: 3em auto;
    padding: 2.5em 3em;
    background-color: rgba(255,255,255,0.92);
    box-shadow: 2px 2px 10px gray;
}

.page section h1 {
    margin-top: 0;
}

section {
    margin: 2em;
    padding: 2em;
}

section p {
    text-align: justify;
}

article a,
section a {
    color: #1b7fbb;
    font-family: 'Courier New', Courier, Arial;
}

.textAccueil {
    width: 75%;
    margin: 10px;
}

.textAccueil p {
    font-size: 1.1em;
    text-align: justify;
}

.textAccueil h2 {
    font-size: 1.7em;
}


/* ============================================================
   Template Thème
   ============================================================ */

.contenuTheme {
    width: 50%;
    margin: 0 0.5em;
    padding: 0 2em;
}

.contenuTheme p {
    text-align: justify;
}


/* ============================================================
   Liste d'articles (catégorie, actualités)
   ============================================================ */

.articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.article {
    width: calc(50% - 0.6em);
    margin: 0.3em;
}

.article img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/* Effet survol articles (même traitement visuel que la grille de navigation).
   Scopé à .article (présente sur chaque tuile) plutôt qu'à article a : la balise <article>
   englobe aussi le corps de texte (the_content()) en single publication/thème, un sélecteur
   article a non scopé casserait les liens et spans normaux du contenu éditorial. */

.article a {
    position: relative;
    display: block;
    overflow: hidden;
}

.article a img {
    display: block;
    transition: transform 0.5s ease;
}

.article a:hover img {
    transform: scale(1.06);
}

.article .caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.2em 1.4em;
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba(27,52,93,0.92) 0%, rgba(27,52,93,0.35) 55%, rgba(27,52,93,0) 100%);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.article a:hover .caption {
    opacity: 1;
    transform: translateY(0);
}

.article .titre {
    color: #fff;
    font-weight: bold;
    font-size: calc(1vw + 0.6vh + 0.6vmin + 12px);
    margin: 0;
}

.article .date {
    color: #f8b912;
    margin: 0.3em 0 0;
    font-weight: bold;
    font-size: calc(0.4vw + 0.4vh + 0.3vmin + 10px);
}

.article .extrait {
    color: rgba(255,255,255,0.9);
    margin: 0.4em 0 0;
    font-size: calc(0.3vw + 0.3vh + 0.2vmin + 10px);
}

.wrapper article {
    width: 55%;
    text-align: justify;
}

.datePolice .date {
    font-family: 'Courier New', Courier, Arial;
    font-size: calc(0.4vw + 0.4vh + 0.3vmin + 9px);
}

.datePolice .extrait {
    font-family: 'Courier New', Courier, Arial;
    font-size: calc(0.3vw + 0.3vh + 0.2vmin + 9px);
}

.titreP {
    margin-left: 3em;
}


/* ============================================================
   Single post
   ============================================================ */

article .singlePost {
    margin: 2em;
}

/* Portée à .layout-two-col (au lieu du sélecteur générique `main` du fichier source) : cette
   mise en page flex sert aux deux vues à deux colonnes (single publication : article + aside ;
   single theme : bannière + .contenuTheme, dont le width:50% ci-dessous n'a de sens qu'à côté
   d'un autre élément). Un sélecteur `main` non scopé casse la mise en page de toutes les autres
   pages qui utilisent aussi la balise sémantique <main> (accueil, pages, recherche). */
.layout-two-col {
    display: flex;
}

aside {
    width: 380px;
    flex-shrink: 0;
    align-self: flex-start;
    padding: 2em;
    margin-left: 55px;
    background-color: rgba(255,255,255,0.94);
    box-shadow: 2px 2px 10px gray;
    box-sizing: border-box;
}

aside h2 {
    color: #1b345d;
    font-size: 1.2em;
    margin: 0 0 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #f8b912;
}

aside .vignette {
    display: flex;
    align-items: center;
    gap: 0.9em;
    padding: 0.6em;
    margin-bottom: 0.2em;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

aside .vignette:hover {
    background-color: #f5f5f5;
}

aside .vignette img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    margin: 0;
    flex-shrink: 0;
}

aside .vignette .vignetteText {
    align-self: center;
}

aside .vignette .vignetteText h4 {
    margin: 0;
    font-size: 1em;
    color: #1b345d;
}

aside .vignette a {
    text-decoration: none;
}

aside .vignette a:hover h4 {
    color: #f8b912;
}

.imagePdf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5em;
    margin-bottom: 1em;
}

.imagePdf img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
    transition: transform 0.2s ease;
}

.imagePdf img:hover {
    transform: scale(1.03);
}

.imagePdf button {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 16px;
    background-color: #007BBD;
    cursor: pointer;
}

.imagePdf button:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.banner {
    width: 100%;
    height: 420px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* ============================================================
   Album photos
   ============================================================ */

.photosAlbum {
    width: 20%;
    margin-top: 2em;
    display: flex;
}

.photosAlbum img {
    height: 350px;
    object-fit: cover;
    width: 100%;
}


/* ============================================================
   Footer
   ============================================================ */

.container2 {
    display: flex;
}

.footer {
    width: 33.333%;
    padding: 1em;
    min-height: 20%;
}

.footer p {
    font-size: 1.1em;
    font-family: 'Courier New', Courier, Arial;
}

.footer a {
    color: #ffffff;
    font-family: arial;
}

/* Couleurs aléatoires du footer */
.blue       { background-color: #085196; }
.green      { background-color: #359a16; }
.lightBlue  { background-color: #72afb0; }
.lightGreen { background-color: #82d954; }
.red        { background-color: #7db173; }


/* ============================================================
   Formulaire de contact
   ============================================================ */

.contact p {
    font-size: 1.1em;
}

.form {
    margin-bottom: 7em;
    margin-top: 8em;
}


/* ============================================================
   Responsive — tablettes et smartphones (≤ 1012px)
   ============================================================ */

@media (max-width: 1012px) {

    /* background-attachment: fixed est notoirement capricieux sur mobile (Safari iOS l'ignore
       ou saccade) : on repasse en scroll normal et on réduit un peu la hauteur du héros. */
    .banner {
        height: 260px;
        background-attachment: scroll;
    }

    .up,
    .down {
        width: 100%;
        margin: 0.3em;
    }

    .up img {
        height: 200px;
    }

    .article {
        width: 100%;
    }

    .article img {
        height: 100px;
    }

    aside {
        display: none;
    }

    .wrapper article p,
    .wrapper article {
        width: 100%;
        text-align: justify;
    }

    section p {
        width: 100%;
        text-align: justify;
    }

    .page section {
        max-width: 90%;
        padding: 1.5em;
    }

    .container2 {
        display: block;
    }

    .footer {
        width: 100%;
    }

    .layout-two-col {
        flex-direction: column;
    }

    .contenuTheme {
        width: 100%;
    }

    .contenuTheme h1.blueTitle {
        font-size: 1.6em;
    }

    .contenuTheme p {
        font-size: 0.9em;
    }

    .transparent {
        width: 90%;
    }

    .datePolice .date {
        font-size: 1em;
    }

    .datePolice .extrait {
        font-size: 1em;
        font-weight: bold;
    }

    .imagePdf {
        justify-content: center;
    }

    .imagePdf img {
        width: 160px;
        height: 160px;
    }

    .textAccueil {
        width: 90%;
    }

    /* Survol indisponible au toucher : légende toujours visible, pas de zoom image */
    .nav-grid .caption,
    .article .caption {
        opacity: 1;
        transform: none;
        padding: 0.8em;
    }

    .nav-grid .titre {
        font-size: 20px;
    }

    .article .titre {
        font-size: 18px;
    }

    .article .date {
        font-size: 13px;
    }

    .article .extrait {
        display: none;
    }

    .nav-grid a:hover img,
    .article a:hover img {
        transform: none;
    }
}


/* ============================================================
   Très petits écrans (≤ 440px)
   ============================================================ */

@media (max-width: 440px) {

    .nav-grid .titre {
        font-size: 24px;
    }

    .page {
        background-image: none;
    }

    .mur {
        background-image: none;
    }

    .ombreout {
        padding: 0;
        box-shadow: none;
    }

    .textAccueil p,
    .section p,
    .contenuTheme p,
    article {
        text-align: left;
    }
}