/* =========================================================
   FAY-AUX-LOGES CPA
   Bandeau de la page d'accueil
   ========================================================= */

/*
 * Police manuscrite utilisée pour la carte à droite
 */
@import url('https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap');


/* Sections très claires */
.bg-cpa-light {
    background-color: #fbf9f4;
}

/* Sections légèrement plus soutenues */
.bg-cpa-beige {
    background-color: #eee8da;
}

/* Sections vertes */
.bg-cpa-green {
    background-color: rgb(83, 105, 72);
    color: #fff;
}
.bg-cpa-green_light {
    background-color: rgba(83, 105, 72, 0.2);
    color: #000;
}


.bottom-b {
  padding: 20px;
}


.card {
  border: 0;
}
.card-body {
  padding: 0;
}
.container-top-a>*, .container-top-b>*, .container-bottom-a>*, .container-bottom-b>* {
  margin: 0;
}

.container-header .navbar-brand {
  margin: 0;
}
.container-header .navbar-brand-slogan {
    margin-inline-end: auto;
}


main h1, main .h1, main h2, main .h2, main h3, main .h3, .bottom-b h2 {
    color: #344b39;
    font-family: Georgia, "Times New Roman", serif;
}

main h1 {
    font-size: 3rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    text-align: center;
    padding: 30px 0 10px 0;
}

main h1::before,
main h1::after {
    content: "";
    flex: 1;
    min-width: 0;
    height: 10px;
    background-image:
        linear-gradient(#b8aa87, #b8aa87),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1 9 5 5 9 1 5Z' fill='none' stroke='%23b8aa87'/%3E%3C/svg%3E");
    background-size: calc(100% - 10px) 1px, 10px 10px;
    background-repeat: no-repeat;
}

main h1::before {
    background-position: left center, right center;
}

main h1::after {
    background-position: right center, left center;
}

@media (max-width: 600px) {
    main h1::before,
    main h1::after {
        display: none;
    }
}

@media (max-width: 800px) {
  .cpa-message-slogan {
    position: relative !important;
  }
}

.bottom-a .h5 {
    font-family: Georgia, "Times New Roman", serif;
    text-align: center;
    padding-bottom: 20px;  
}
/* =========================================================
   Main Menu
   ========================================================= */

.container-header .grid-child {
  padding: 0 0 1px 0;
}

.dj-megamenu-default li:hover a.dj-up_a, .dj-megamenu-default li.hover a.dj-up_a, .dj-megamenu-default li.active a.dj-up_a {
    color: #fff !important;
    border-left-color: initial !important;
    background: #526747 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(52, 75, 57, 1)), to(rgba(82, 103, 71, 1))) !important;
    background: -o-linear-gradient(top, rgba(52, 75, 57, 1) 0%, rgba(82, 103, 71, 1) 100%) !important;
    background: linear-gradient(to bottom, rgba(52, 75, 57, 1) 0%, rgba(82, 103, 71, 1) 100%) !important;
    border-radius: 10px 10px 5px 5px;
    padding: 0 30px;
}

.dj-megamenu-default {
  background: none !important;
}

.dj-megamenu-default li a.dj-up_a {
  color: inherit !important;
}

.dj-megamenu-default li a.dj-up_a {
    border-right: 1px solid rgb(246, 242, 232) !important;
    border-left: 1px solid rgb(246, 242, 232) !important;
}

.dj-megamenu-default li a.dj-up_a {
    height: 50px !important;
}

.dj-megamenu-default li a.dj-up_a > span {
    line-height: 50px !important;
}
/* =========================================================
   Logo texte - Fay-aux-Loges CPA
   ========================================================= */

header .logo_slogan {
      color: #344b39;
}
header .logo_slogan .slogan-title::after {
          background-color: rgba(82, 103, 71, 0.55);
}
footer .logo_slogan .slogan-title::after {
          background-color: rgb(246, 242, 232);
}

.logo_slogan {
    text-align: center;
}


/* Titre principal
--------------------------------------------------------- */

.logo_slogan .slogan-title {
    position: relative;
    margin: 0;
    padding: 0 8px 7px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.04em;
    padding-top: 15px;
}


/* Trait sous le titre */

.logo_slogan .slogan-title::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 2px;
}


/* Sous-titre
--------------------------------------------------------- */

.logo_slogan .slogan-description {
    margin: 4px 0 0;
    padding: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1.1;
}

.cpa-message-slogan {
    width: 250px;
    padding: 20px 22px;
    color: #725c45;
    font-family: "Monsieur La Doulaise", cursive;
    font-size: 2rem;
    font-weight: 400;
    line-height: 0.95;
    transform: rotate(-10deg);
    text-align: initial;
    margin-top: -20px;
}

/* =========================================================
   Tablette
   ========================================================= */

@media (max-width: 991.98px) {

    #mod-custom111 .slogan-title {
        font-size: 2.5rem;
    }

    #mod-custom111 .slogan-description {
        font-size: 1.3rem;
    }
}


/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 575.98px) {

    #mod-custom111 .slogan-title {
        font-size: 2rem;
        padding-bottom: 6px;
    }

    #mod-custom111 .slogan-description {
        margin-top: 3px;
        font-size: 1.05rem;
    }
  #mod-custom111 {
    margin-left: 0;
  }
}

/* =========================================================
   BANDEAU PRINCIPAL
   ========================================================= */

.cpa-hero {
    position: relative;
    min-height: 440px;

    color: #fff;

    background-image:
        linear-gradient(
            90deg,
            rgba(20, 18, 13, 0.80) 0%,
            rgba(20, 18, 13, 0.58) 27%,
            rgba(20, 18, 13, 0.12) 50%,
            rgba(20, 18, 13, 0) 70%
        ),
        url("/images/Rue-des-maillets-6-1919.webp");

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* =========================================================
   CONTENEUR BOOTSTRAP
   ========================================================= */

.cpa-hero > .container {
    position: relative;
    min-height: 440px;
}


/* =========================================================
   CONTENU GAUCHE
   ========================================================= */

.cpa-hero-content {
    position: relative;
    z-index: 2;

    max-width: 620px;

    padding: 65px 0 55px 60px;
}


/* =========================================================
   TITRE
   ========================================================= */

.cpa-hero h1 {
    margin: 0 0 18px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 500;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.30);
}


.cpa-hero h1 span {
    display: block;
}


/* =========================================================
   TEXTE D'INTRODUCTION
   ========================================================= */

.cpa-hero-intro {
    margin: 0 0 25px;

    color: #fff;

    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.35;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.55);
}


/* =========================================================
   BOUTONS
   ========================================================= */

.cpa-hero-buttons {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
}


.cpa-hero-buttons .btn, .btn {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 22px;

    padding: 11px 16px;

    border-radius: 5px;

    font-size: 0.9rem;
    font-weight: 500;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* ---------------------------------------------------------
   Bouton principal
   --------------------------------------------------------- */

.btn-primary {
    color: #fff;

    background-color: #526747;

    border: 1px solid #526747;
}


.btn-primary:hover,
.btn-primary:focus {
    color: #fff;

    background-color: #3f5237;

    border-color: #3f5237;

    transform: translateX(3px);
}


/* ---------------------------------------------------------
   Bouton secondaire
   --------------------------------------------------------- */

.btn-secondary {
    color: #26231e;

    background-color: rgba(249, 246, 237, 0.95);

    border: 1px solid rgba(249, 246, 237, 0.95);
}


.btn-secondary:hover,
.btn-secondary:focus {
    color: #26231e;

    background-color: #fff;

    border-color: #fff;

    transform: translateX(3px);
}


/* ---------------------------------------------------------
   Flèches des boutons
   --------------------------------------------------------- */

.cpa-hero-buttons .btn span {
    font-size: 1.15rem;
    line-height: 1;
}


/* =========================================================
   CARTE MANUSCRITE À DROITE
   ========================================================= */

.cpa-hero-message {
    position: absolute;
    z-index: 2;

    right: 25px;
    bottom: 70px;

    width: 190px;

    padding: 20px 22px;

    color: #725c45;

    background-color: rgba(245, 237, 216, 0.95);

    font-family: "Monsieur La Doulaise", cursive;

    font-size: 2rem;
    font-weight: 400;

    line-height: 0.95;

    transform: rotate(-10deg);

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.20);
}


/*
 * Chaque ligne du message
 */

.cpa-hero-message span {
    position: relative;
    z-index: 2;

    display: block;
}


/*
 * Fine bordure intérieure
 * pour donner un aspect carte postale
 */

.cpa-hero-message::before {
    content: "";

    position: absolute;

    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;

    border:
        1px solid rgba(102, 84, 65, 0.12);

    pointer-events: none;
}


/*
 * Très légère texture / variation du papier
 */

.cpa-hero-message::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(120, 90, 50, 0.07),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 75%,
            rgba(120, 90, 50, 0.04),
            transparent 40%
        );

    pointer-events: none;
}


/* =========================================================
   LÉGENDE DE LA PHOTO
   ========================================================= */

.cpa-hero-caption {
    position: absolute;

    right: 15px;
    bottom: 8px;

    color: rgba(255, 255, 255, 0.90);

    font-size: 0.72rem;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.80);
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 991.98px) {

    .cpa-hero,
    .cpa-hero > .container {
        min-height: 400px;
    }


    .cpa-hero-content {
        max-width: 480px;

        padding-top: 55px;
        padding-bottom: 45px;
    }


    .cpa-hero-message {
        right: 20px;
        bottom: 55px;

        width: 165px;

        padding: 17px 18px;

        font-size: 1.75rem;
    }

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 767.98px) {

    .cpa-hero {
        min-height: 500px;

        background-position: 58% center;

        background-image:
            linear-gradient(
                90deg,
                rgba(20, 18, 13, 0.86) 0%,
                rgba(20, 18, 13, 0.67) 65%,
                rgba(20, 18, 13, 0.28) 100%
            ),
            url("/images/Rue-des-maillets-6-1919.webp");
    }


    .cpa-hero > .container {
        min-height: 500px;
    }


    /* Contenu */

    .cpa-hero-content {
        max-width: 360px;

        padding-top: 55px;
        padding-bottom: 40px;
    }


    /* Titre */

    .cpa-hero h1 {
        font-size: 3.1rem;
    }


    /* Introduction */

    .cpa-hero-intro {
        font-size: 1.05rem;
    }


    /*
     * On masque la carte manuscrite sur smartphone
     * afin de conserver la lisibilité du bandeau.
     */

    .cpa-hero-message {
        display: none;
    }


    /* Légende */

    .cpa-hero-caption {
        right: 12px;
        bottom: 8px;

        font-size: 0.65rem;
    }

}


/* =========================================================
   PETITS SMARTPHONES
   ========================================================= */

@media (max-width: 480px) {

    .cpa-hero h1 {
        font-size: 2.65rem;
    }


    .cpa-hero-buttons {
        align-items: stretch;
    }


    .cpa-hero-buttons .btn {
        width: 100%;
        min-width: 0;
    }

}

/* =========================================================
   FOOTER
   ========================================================= */

footer .logo_slogan .mod-custom {
    display: flex;
    align-items: center;
    gap: 1rem;
}

footer .logo_slogan .mod-custom img {
    display: block;
}

footer .logo_slogan .mod-custom p {
    margin: 0;
}

.container-footer-bottom {
  border-top: solid 1px;
}

/* En-tête : logo | nom du site | slogan */
.container-header .grid-child:has(> .navbar-brand-slogan) {
    display: flex;
    align-items: center;
    width: 100%;
}

.container-header .grid-child > .navbar-brand {
    flex: 0 0 33.333%;
}

.container-header .navbar-brand-slogan {
    flex: 0 0 66.667%;
}

.container-header .navbar-brand-slogan .mod-custom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
}

.container-header .navbar-brand-slogan .mod-custom > div:first-child {
    text-align: center;
}

.container-header .cpa-message-slogan {
    justify-self: end;   /* place la div à droite de sa colonne */
    width: max-content;  /* évite qu'elle occupe toute la colonne */
    text-align: left;    /* conserve l'alignement des trois lignes */
}

/* Sur petit écran, les éléments se placent les uns sous les autres */
@media (max-width: 767px) {
    .container-header .grid-child:has(> .navbar-brand-slogan) {
        flex-direction: column;
    }

    .container-header .grid-child > .navbar-brand,
    .container-header .navbar-brand-slogan {
        flex-basis: auto;
        width: 100%;
    }

    .container-header .navbar-brand-slogan .mod-custom {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .container-header .navbar-brand,
    .container-header .navbar-brand-slogan .mod-custom > div:first-child {
        text-align: center;
    }

  .container-header .cpa-message-slogan {
    display: none;
  }
}