/* Surcharges Littlepipo par-dessus le thème Gloom (ne pas modifier static/gloom/). */

:root {
    --lp-olive: #514b32;
    --lp-gold: #c9a063;
}

/* Logo carré doré : on le cale sur la hauteur de la barre de navigation. */
.logo-img,
.nav-scroll .logo-img {
    width: auto;
    height: 64px;
}
@media screen and (max-width: 991px) {
    .logo-img,
    .nav-scroll .logo-img {
        height: 48px;
    }
}

/* Pied de page aux couleurs de la maison. */
.footer-section {
    background: var(--lp-olive);
}
.footer-section img {
    width: auto;
    height: 130px;
}
.footer-section p,
.footer-section p.copyright {
    color: rgba(255, 255, 255, 0.75);
}
.footer-section p a {
    color: inherit;
}
.footer-section .lp-h5 {
    color: var(--lp-gold);
}

/* Crédit photographe posé sur l'image. */
.photo {
    position: relative;
}
.photo-credit {
    position: absolute;
    right: 10px;
    bottom: 8px;
    z-index: 3;
    font-family: "Urbanist", sans-serif;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.3px;
    text-transform: none;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}
.header .item .photo-credit,
.testimonials .background > .photo-credit {
    right: 20px;
    bottom: 16px;
}

/* Texte riche : les questions de l'entretien « Qui suis-je ? » sont en gras. */
.rich-text b,
.section-padding b {
    color: #1b1b1b;
}

/* Le thème fixe 40px sur mobile : trop large pour un mot long. */
@media screen and (max-width: 575px) {
    .header .caption h1 {
        font-size: min(40px, 7vw);
    }
}

/* Le thème passe les liens de la section contact en blanc (prévu pour un fond sombre). */
.contact .item p a,
.contact .rich-text a {
    color: inherit;
}
.contact .item p a:hover,
.contact .rich-text a:hover {
    color: #1b1b1b;
}

/* Bandeau défilant : plus discret que celui du thème (24px gras). */
.scrolling.scrolling-ticker {
    padding: 22px 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}
.scrolling.scrolling-ticker .wrapper {
    --gap: 28px;
}
.scrolling.scrolling-ticker .wrapper .content span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #777;
}
.scrolling.scrolling-ticker .wrapper .content span img {
    max-width: 9px;
    margin-right: 28px;
    opacity: 0.45;
}

/* Blog */
.post-page .post-intro {
    font-size: 20px;
    color: #1b1b1b;
}
.post-page .rich-text h2,
.post-page .rich-text h3 {
    margin-top: 40px;
}
.post-page .rich-text img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 20px 0;
}
.post-page .rich-text blockquote {
    border-left: 2px solid var(--lp-gold);
    padding-left: 24px;
    margin: 30px 0;
    font-style: italic;
}

/* Fil d'Ariane des pages imbriquées (Inspirations). */
.breadcrumbs {
    padding-top: 30px;
}
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "Syne", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1b1b1b;
}
.breadcrumbs li + li::before {
    content: "/";
    margin: 0 12px;
    color: #bbb;
}
.breadcrumbs a {
    color: #777;
}
.breadcrumbs a:hover {
    color: #1b1b1b;
}
/* La section qui suit garde de l'air sans doubler le grand espace du thème. */
.breadcrumbs + .section-padding {
    padding-top: 60px;
}

/* Titres de section en <h2> : même rendu que les <h1> du thème (un seul <h1> par page). */
.section-padding h2.lp-title {
    font-size: 40px;
    line-height: 1.2em;
    font-weight: 800;
    margin-bottom: 0;
    color: #1b1b1b;
    text-transform: uppercase;
    overflow-wrap: break-word;
}
.header .caption h2.lp-title {
    position: relative;
    font-family: "Syne", sans-serif;
    font-size: 70px;
    line-height: 1em;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #fff;
    text-shadow: 2px 2px #222222;
}
@media screen and (max-width: 991px) {
    .header .caption h2.lp-title {
        font-size: 40px;
    }
}
@media (max-width: 767px) {
    .section-padding h2.lp-title {
        font-size: 30px;
    }
}
@media screen and (max-width: 575px) {
    .header .caption h2.lp-title {
        font-size: min(40px, 7vw);
    }
}

/* Le thème met tous les liens en blanc : on les rend lisibles dans les textes. */
.rich-text a {
    color: #1b1b1b;
    text-decoration: underline;
    text-decoration-color: var(--lp-gold);
    text-underline-offset: 3px;
}
.rich-text a:hover {
    color: var(--lp-olive);
}
.rich-text h2,
.rich-text h3 {
    font-size: 22px;
    margin-top: 32px;
}
.rich-text h3 a {
    text-decoration: none;
}

/* Deux sections qui se suivent cumulaient 240px de blanc (120 + 120) : on n'en garde qu'un. */
.section-padding + .section-padding {
    padding-top: 0;
}

/* Bouton sur fond blanc : rond dans les tons olive du pied de page (gris dans le thème). */
.btn-block.color1 {
    background-color: rgba(81, 75, 50, 0.35);
}

/* Pied de page : logo + navigation + contact. */
.footer-main {
    row-gap: 36px;
    margin-bottom: 40px;
}
.footer-brand p {
    max-width: 260px;
    font-style: italic;
}
.footer-section .lp-h5 {
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.footer-section .lp-h5 a {
    color: inherit;
}
.footer-links {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.footer-links li {
    margin-bottom: 8px;
    line-height: 1.4;
}
.footer-links a {
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.2s;
}
.footer-links a:hover {
    color: var(--lp-gold);
}
.footer-section p.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 28px;
}

/* Formulaire de contact */
.contact-form .lp-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.contact-form .form-error {
    display: block;
    margin: -10px 0 14px;
    color: #b3261e;
}
.contact-form .form-help {
    display: block;
    margin: -10px 0 14px;
    color: #777;
}
.contact-form .form-note {
    margin-top: 18px;
    font-size: 14px;
    color: #777;
}
.contact-form .btn-link:hover .btn-block {
    left: 60%;
}

/* Articles : photos, séries de photos et vidéos dans le fil du texte. */
.post-page .article-figure,
.post-page .article-gallery,
.post-page .article-video {
    margin: 36px 0;
}
.post-page .article-figure a,
.post-page .article-gallery a {
    display: block;
}
.post-page .article-figure figcaption {
    margin-top: 10px;
    font-size: 14px;
    font-style: italic;
    color: #777;
    text-align: center;
}
.post-page .article-gallery {
    --bs-gutter-x: 16px;
    row-gap: 16px;
}
.post-page .rich-text img,
.post-page .article-gallery img,
.post-page .article-figure img {
    margin: 0;
}
.video-gallery .item {
    border-radius: 5px;
}

/* Carrousel de prestations : au survol, un voile sombre rend le texte blanc lisible. */
.services2 .wrapper-img::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: rgba(27, 27, 27, 0);
    transition: background 0.4s;
    pointer-events: none;
}
.services2 .img-block:hover .wrapper-img::after {
    background: rgba(27, 27, 27, 0.55);
}
.services2 .img-block:hover img {
    opacity: 1;
}
.services2 .title-block {
    z-index: 2;
    padding: 0 20px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.services2 .title-block p {
    color: #fff;
}

/* Entre 992 et 1200px, le menu à six entrées manquait de place et rognait la dernière lettre. */
.navbar .navbar-nav .nav-item {
    flex-shrink: 0;
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 13px;
        letter-spacing: 0.5px;
    }
    .logo-img,
    .nav-scroll .logo-img {
        height: 50px;
    }
}

/* Arrivée sur une ancre (#art-de-la-table…) : la section ne passe pas sous la barre fixe. */
section[id] {
    scroll-margin-top: 110px;
}
.footer-section p.copyright a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Cartes de collections : même hauteur sur une ligne, moins d'espace quand elles suivent
   directement la présentation de la prestation. */
.price .row > [class^="col-"] {
    display: flex;
}
.price .item {
    width: 100%;
}
.price .item .lp-h6 {
    /* le thème applique aux <p> des cartes une graisse et une couleur plus légères */
    font-weight: 700;
    color: #777;
    font-size: 11px;
    letter-spacing: 3px;
    margin-bottom: 6px;
}

/* Vidéo hébergée sur le site (lecteur du navigateur). */
.lp-video {
    margin: 0;
    text-align: center;
}
.lp-video video {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 80vh;
    margin: 0 auto;
    border-radius: 10px;
    background: #1b1b1b;
}
.lp-video figcaption {
    margin-top: 12px;
    font-size: 15px;
    color: #777;
}
.lp-video figcaption strong {
    color: #1b1b1b;
}

/* Les intertitres des articles gardent la taille du thème (la règle .rich-text h2 ci-dessus
   vise les textes des pages, comme les mentions légales). */
.post-page .rich-text h2 {
    font-size: 48px;
}
@media (max-width: 767px) {
    .post-page .rich-text h2 {
        font-size: 30px;
    }
}