/* =====================================================================
   Blogue CIC / CAQ
   Les couleurs propres à chaque site sont dans .blog-cic et .blog-caq.
   ===================================================================== */

.blog-cic {
    --blog-principale: #00AE69;   /* vert CIC */
    --blog-lien: #007A4D;         /* vert foncé, lisible sur fond blanc */
    --blog-fonce: #263E4A;        /* ardoise du pied de page */
    --blog-etiquette: #7FD9AE;    /* vert clair, lisible sur l'ardoise */
}

.blog-caq {
    --blog-principale: #51C2C6;   /* turquoise CAQ */
    --blog-lien: #00727A;         /* turquoise foncé, lisible sur fond blanc */
    --blog-fonce: #0F3F56;        /* marine du pied de page */
    --blog-etiquette: #51C2C6;    /* turquoise, lisible sur le marine */
}

.blog {
    --blog-texte: #1F2A30;
    --blog-gris: #5B6670;
    --blog-ligne: #E2E5E7;
    --blog-fond: #F6F7F7;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px 50px;
    box-sizing: border-box;
    color: var(--blog-texte);
    text-align: left;
}

.blog *,
.blog *::before,
.blog *::after {
    box-sizing: border-box;
}

.blog a {
    color: var(--blog-lien);
}

/* ---------- En-tête ---------- */

.blog-entete {
    max-width: 960px;
    margin-bottom: 35px;
}

.blog-h1 {
    margin: 0 0 12px;
    font-size: 38px;
    line-height: 1.15;
    color: var(--blog-fonce);
}

/* Surtitre « LE BLOGUE COTTAGESINCANADA » au-dessus du grand titre */
.blog .blog-surtitre {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.08em;
    color: var(--blog-lien);
}

.blog-h1-accueil {
    font-size: 36px;
    line-height: 1.15;
}

/* Titre de section au-dessus de la grille */
.blog-section-titre {
    margin: 0 0 20px;
    font-size: 28px;
    line-height: 1.2;
    color: var(--blog-fonce);
}

.blog-intro {
    max-width: 760px;
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--blog-gris);
}

.blog-date {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--blog-gris);
}

/* ---------- Filtres par destination et par sujet ---------- */

.blog-filtres {
    margin: -10px 0 25px;
}

.blog-filtres-destinations {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--blog-ligne);
}

.blog-filtres-sujets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding-top: 14px;
    font-size: 16px;
}

.blog-filtres-libelle {
    margin-right: 6px;
    font-size: 15px;
    color: var(--blog-gris);
}

/* Boutons de destination */
.blog .blog-puce {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid #C9CED1;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--blog-texte);
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
}

.blog .blog-puce:hover,
.blog .blog-puce:focus-visible {
    border-color: var(--blog-lien);
    color: var(--blog-lien);
}

.blog .blog-puce-active,
.blog .blog-puce-active:hover {
    border-color: var(--blog-lien);
    background: var(--blog-lien);
    color: #FFFFFF;
}

/* Liens de sujet */
.blog .blog-sujet {
    font-weight: bold;
    text-decoration: none;
}

.blog .blog-sujet:hover,
.blog .blog-sujet:focus-visible,
.blog .blog-sujet-actif {
    text-decoration: underline;
}

/* Bouton « Voir les chalets à louer » (page de destination et fin d'article) */
.blog-chalets {
    margin: 22px 0 0;
}

/* Destination au-dessus du titre d'une carte */
.blog-carte-etiquette {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blog-lien);
}

/* Destination et sujet sous la date d'un article */
.blog-article-categories {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: bold;
}

.blog-article-categories a {
    text-decoration: none;
}

.blog-article-categories a:hover {
    text-decoration: underline;
}

.blog-article .blog-chalets {
    margin-top: 35px;
    padding-top: 30px;
    border-top: 1px solid var(--blog-ligne);
}

/* ---------- Article à la une ---------- */

.blog-vedette {
    margin-bottom: 40px;
    background: #FFFFFF;
    border-bottom: 3px solid var(--blog-principale);
}

.blog-vedette-lien {
    display: grid;
    grid-template-columns: 3fr 2fr;
    text-decoration: none;
    color: inherit !important;
}

.blog-vedette-sans-photo .blog-vedette-lien {
    grid-template-columns: 1fr;
}

.blog-vedette-photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    max-height: 440px;
    object-fit: cover;
    background: var(--blog-fond);
}

.blog-vedette-texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 35px 40px;
}

/* Pastilles « À LA UNE » et destination */
.blog-pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.blog-pastille.blog-pastille-destination {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px #C9CED1;
    text-transform: uppercase;
}

.blog-pastille {
    align-self: flex-start;
    margin-bottom: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: #F2C500;
    color: #1F2A30;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.06em;
}

.blog-vedette-titre {
    margin: 0 0 12px;
    font-size: 32px;
    line-height: 1.15;
    color: var(--blog-fonce);
}

.blog-vedette-desc {
    display: block;
    font-size: 18px;
    line-height: 1.55;
    color: var(--blog-texte);
}

.blog-vedette-suite {
    display: inline-block;
    margin-top: 18px;
    font-size: 17px;
    font-weight: bold;
    color: var(--blog-lien);
}

.blog-vedette-lien:hover .blog-vedette-titre,
.blog-vedette-lien:focus-visible .blog-vedette-titre {
    text-decoration: underline;
}

/* ---------- Liste des articles ---------- */

.blog-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.blog-carte {
    background: #FFFFFF;
    border-bottom: 3px solid var(--blog-principale);
}

.blog-carte-lien {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit !important;
}

.blog-carte-photo {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--blog-fond);
}

.blog-carte-texte {
    display: block;
    padding: 18px 20px 22px;
}

.blog-carte-titre {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.25;
    color: var(--blog-fonce);
}

.blog-carte-desc {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    color: var(--blog-texte);
}

.blog-carte-suite {
    display: inline-block;
    margin-top: 12px;
    font-weight: bold;
    color: var(--blog-lien);
}

.blog-carte-lien:hover .blog-carte-titre,
.blog-carte-lien:focus-visible .blog-carte-titre {
    text-decoration: underline;
}

.blog-vide {
    font-size: 17px;
    color: var(--blog-gris);
}

/* ---------- Pagination ---------- */

.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    font-size: 16px;
}

.blog-pagination a {
    padding: 10px 18px;
    border: 2px solid var(--blog-lien);
    text-decoration: none;
    font-weight: bold;
}

/* ---------- Article ---------- */

.blog-article {
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 50px 50px;
    background: #FFFFFF;
}

.blog-retour {
    display: inline-block;
    margin-bottom: 24px;
    padding: 6px 0;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
}

    .blog-retour:hover,
    .blog-retour:focus-visible {
        text-decoration: underline;
    }

.blog-article-photo {
    display: block;
    width: 100%;
    height: auto;
    margin: 20px 0 30px;
}

.blog-contenu {
    font-size: 18px;
    line-height: 1.7;
}

.blog-contenu h2 {
    margin: 40px 0 12px;
    font-size: 28px;
    line-height: 1.25;
    color: var(--blog-fonce);
}

.blog-contenu h3 {
    margin: 30px 0 10px;
    font-size: 22px;
    color: var(--blog-fonce);
}

.blog-contenu p {
    margin: 0 0 20px;
}

.blog-contenu ul,
.blog-contenu ol {
    margin: 0 0 20px;
    padding-left: 24px;
}

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

.blog-contenu figure {
    margin: 30px 0;
}

.blog-contenu figcaption {
    margin-top: 8px;
    font-size: 14px;
    color: var(--blog-gris);
}

.blog-contenu blockquote {
    margin: 30px 0;
    padding: 4px 0 4px 20px;
    border-left: 4px solid var(--blog-principale);
    color: var(--blog-gris);
}

.blog-contenu table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

/* ---------- Propriétaires ---------- */

.blog-proprio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    margin-top: 60px;
    padding: 35px;
    background: var(--blog-fonce);
    color: #FFFFFF;
}

.blog-proprio-texte {
    flex: 1 1 420px;
}

.blog-proprio-titre {
    margin: 0 0 8px;
    font-size: 26px;
    line-height: 1.2;
    color: #FFFFFF;
}

.blog-proprio p {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
}

/* Petite étiquette au-dessus du titre */
.blog .blog-proprio-etiquette {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.08em;
    color: var(--blog-etiquette);
}

.blog-proprio-boutons {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}

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

.blog .blog-bouton {
    display: inline-block;
    padding: 15px 24px;
    background: var(--blog-principale);
    color: var(--blog-texte);
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

.blog .blog-bouton:hover,
.blog .blog-bouton:focus-visible {
    background: #FFFFFF;
}

.blog-entete .blog-bouton {
    margin-top: 20px;
}

.blog-entete .blog-bouton:hover {
    background: var(--blog-fonce);
    color: #FFFFFF;
}


/* ---------- Bouton propriétaires : même style que « LIST YOUR COTTAGE » du menu ---------- */

.blog .blog-bouton-proprio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: #FFFFFF;
    box-sizing: content-box;
}

/* CAQ : le bouton du menu est marine, comme l'encart ; un contour blanc le fait ressortir */
.blog-caq .blog-bouton-proprio {
    border: 2px solid #FFFFFF;
}

/* Bouton « Lire le guide » : même forme que le bouton d'inscription, mais transparent avec un contour blanc */
.blog .blog-bouton-guide,
.blog .blog-bouton-guide:hover,
.blog .blog-bouton-guide:focus-visible {
    background: transparent;
    color: #FFFFFF;
}

.blog .blog-bouton-guide:hover,
.blog .blog-bouton-guide:focus-visible {
    text-decoration: underline;
}

/* CIC : contour dessiné à l'intérieur, pour garder la même hauteur que le bouton vert */
.blog-cic .blog-bouton-guide {
    box-shadow: inset 0 0 0 2px #FFFFFF;
}


/* ---------- Mobile ---------- */

@media (max-width: 700px) {
    .blog-article {
        padding: 25px 20px 30px;
    }

    .blog {
        padding: 0 15px 40px;
    }

    .blog-h1,
    .blog-h1-accueil {
        font-size: 28px;
    }

    .blog-section-titre {
        font-size: 24px;
    }

    .blog-contenu {
        font-size: 17px;
    }

    .blog-proprio {
        padding: 25px;
    }

    .blog-vedette-lien {
        grid-template-columns: 1fr;
    }

    .blog-vedette-photo {
        min-height: 0;
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .blog-vedette-texte {
        padding: 22px 20px 25px;
    }

    .blog-vedette-titre {
        font-size: 26px;
    }
}


/* -- Override Section Recheche -- */

.divRechercher {
    height: 55px !Important;
}

.divBtnRechercherPadding {
    padding-left: 0 !Important;
}

@media only screen and (max-width: 765px) {
    .divRechercher {
        height: 107px !Important;
    }
}

@media only screen and (max-width: 600px) {
    .divRechercher {
        height: 158px !Important;
    }

    .divBtnRechercherPadding {
        padding-left: 3px !Important;
    }
}

/* ***********/
.divPageContent {
    border-top-width: 0 !Important;
}


/* CAQ : bouton d'inscription turquoise dans l'encart propriétaires */
.blog-caq .blog-proprio .blog-bouton-proprio:not(.blog-bouton-guide) {
    border: none;
    background: #51C2C6 !important;
    color: #0F3F56 !important;
}

    .blog-caq .blog-proprio .blog-bouton-proprio:not(.blog-bouton-guide):hover {
        background: #FFFFFF !important;
    }