/*!
 * Pharmacie des Ouches — production stylesheet
 * Path: /css/5ccad3b.css
 * Theme palette: primary #333, secondary #66D4BD, tertiary #fff, dark #4A9988
 * Typography: Archivo Black + Roboto (Google Fonts loaded in HTML head)
 * Layout system: Bootstrap 4 grid (row / col-*)
 * Icon font: Icofont (icofont-*)
 *
 * NB: many palette / per-section colour rules already live in an inline <style>
 * block in the page (kept by Vistalid CMS). This file owns the structural,
 * grid, navigation, carousel, button base, form base and responsive layers
 * that are NOT in the inline block — without them the page renders flat.
 */

/* ===================================================================
 * 1. CSS reset + base
 * =================================================================== */

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

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    text-align: left;
    background-color: #ffffff;
    overflow-x: hidden;
}

article, aside, figcaption, figure, footer, header, hgroup,
main, nav, section {
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

ol, ul, dl {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 0;
    list-style: none;
}

a {
    color: #66D4BD;
    text-decoration: none;
    background-color: transparent;
}

a:hover,
a:focus {
    color: #4a9988;
    text-decoration: none;
    opacity: 0.85;
    transition: 0.3s;
}

img {
    vertical-align: middle;
    border-style: none;
    max-width: 100%;
    height: auto;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button {
    overflow: visible;
    text-transform: none;
    -webkit-appearance: button;
    cursor: pointer;
}

iframe {
    max-width: 100%;
    border: 0;
}

strong {
    font-weight: 700;
}

/* ===================================================================
 * 2. Layout containers & Bootstrap 4 grid
 * =================================================================== */

.container,
.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container {
    max-width: 1140px;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }
}
@media (min-width: 768px) {
    .container { max-width: 720px; }
}
@media (min-width: 992px) {
    .container { max-width: 960px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.row-eq-height {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.row-eq-height > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* core column generators */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8,
.col-9, .col-10, .col-11, .col-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12,
.col-xs-4, .col-xs-8 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }

@media (min-width: 576px) {
    .col-sm-6  { flex: 0 0 50%;        max-width: 50%; }
    .col-sm-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 768px) {
    .col-md-3  { flex: 0 0 25%;        max-width: 25%; }
    .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-6  { flex: 0 0 50%;        max-width: 50%; }
    .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
    .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
    .col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 1200px) {
    .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
}

/* flex utilities */
.d-flex            { display: flex !important; }
.justify-content-start  { justify-content: flex-start !important; }
.justify-content-center { justify-content: center     !important; }
.justify-content-end    { justify-content: flex-end   !important; }
.justify-content-between{ justify-content: space-between !important; }
.align-items-center { align-items: center !important; }
.flex-wrap         { flex-wrap: wrap !important; }

.text-center  { text-align: center !important; }
.text-left    { text-align: left   !important; }
.text-right   { text-align: right  !important; }

/* spacing utilities (sample subset) */
.p-3   { padding:    1rem !important; }
.mr-4  { margin-right: 1.5rem !important; }
.mt-4  { margin-top:  1.5rem !important; }
.mb-4  { margin-bottom: 1.5rem !important; }

/* ===================================================================
 * 3. Body / page wrapper
 * =================================================================== */

body.container-fluid.row {
    /* the Vistalid skin literally puts container-fluid+row on <body>;
       neutralise the side gutter so the navbar bleeds edge-to-edge. */
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

body.page-accueil > .container-fluid {
    padding: 0;
}

#content.margin-top-main {
    /* main content sits below the fixed-top navbar */
    margin-top: 0;
    padding-top: 0;
}

#content > .container-fluid {
    padding: 0;
}

/* ===================================================================
 * 4. Top navigation (Bootstrap 4 navbar shape)
 * =================================================================== */

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 2rem;
    z-index: 1030;
}

.navbar.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

.navbar-top.affix-top {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.navbar-brand {
    display: inline-block;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    margin-right: 1rem;
    line-height: inherit;
    white-space: nowrap;
}

.navbar-brand img {
    max-height: 60px;
    width: auto;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    flex-wrap: wrap;
}

.navbar-nav > li {
    position: relative;
    padding: 0 0.6rem;
}

.navbar-nav > li > .nav-link {
    display: block;
    padding: 0.5rem 0.4rem;
    font-family: "Archivo Black", sans-serif;
    font-size: 0.92rem;
    letter-spacing: 1.5px;
    color: #333;
    text-transform: uppercase;
    text-align: center;
    transition: color 0.3s;
}

.navbar-nav > li > .nav-link:hover,
.navbar-nav > li.active > .nav-link {
    color: #66D4BD;
    opacity: 1;
}

.navbar-expand-lg {
    flex-flow: row nowrap;
    justify-content: flex-start;
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-toggler { display: none; }
}

.navbar-toggler {
    padding: 0.4rem 0.7rem;
    font-size: 1.15rem;
    line-height: 1;
    background-color: #66D4BD;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.social-network {
    display: flex;
    align-items: center;
    margin-left: 1.5rem;
}

.social-network ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-network ul li {
    margin-left: 0.5rem;
}

.social-network ul li a {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background-color: #66D4BD;
    font-size: 1rem;
    text-decoration: none;
    transition: opacity 0.3s;
}

.social-network ul li a:hover {
    opacity: 0.85;
}

/* ===================================================================
 * 5. Carousel / homepage hero slider
 * =================================================================== */

.slider-content {
    position: relative;
    overflow: hidden;
}

.carousel {
    position: relative;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    min-height: 100vh;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    display: block;
}

.carousel-fade .carousel-item {
    opacity: 0;
    transition-property: opacity;
    transform: none;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 1.4rem;
    left: 0;
    z-index: 15;
    display: flex;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}

.carousel-indicators li {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    margin-right: 4px;
    margin-left: 4px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: 0.55;
    transition: opacity 0.6s ease;
}

.carousel-indicators .active {
    opacity: 1;
}

.slider-content {
    position: relative;
    height: 100vh;
    min-height: 600px;
}

.slider-content .carousel,
.slider-content .carousel-inner,
.slider-content .carousel-item {
    height: 100%;
}

.slider-content .background-opacity-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.4;
    z-index: 2;
}

.slider-content .home-slider-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    color: #fff;
    text-align: center;
    padding: 0 1rem;
}

.slider-content .home-slider-text .content {
    width: 100%;
    max-width: 1100px;
}

.slider-content .home-slider-text .logo-content {
    margin-bottom: 1.6rem;
}

.slider-content .home-slider-text .logo-content img {
    max-width: 280px;
    height: auto;
}

.slider-content .home-slider-text h1 {
    color: #fff;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.45);
    margin-bottom: 0.6rem;
}

.slider-content .home-slider-text h2 {
    margin-bottom: 1.6rem;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.45);
}

.slider-content .btn-slider-content {
    margin-top: 1.4rem;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.arrow-down-content {
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    color: #fff;
    font-size: 2rem;
    animation: bounce-down 1.8s ease-in-out infinite;
}

@keyframes bounce-down {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(10px); }
}

/* ===================================================================
 * 6. Buttons
 * =================================================================== */

.btn {
    display: inline-block;
    font-weight: 400;
    color: #595959;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid #2b2b2b;
    padding: 15px 36px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease-out;
}

.btn:hover,
.btn:focus {
    text-decoration: none;
    outline: 0;
}

.btn-cookie {
    background-color: #fff;
    color: #66D4BD;
    border: none;
    padding: 8px 16px;
}

/* slider buttons sit on a dark photographic background */
.btn-slider,
.btn-slider-call-to-action {
    color: #fff;
    border-color: #fff;
    background-color: rgba(0, 0, 0, 0.08);
}

.btn-slider:hover,
.btn-slider-call-to-action:hover {
    background-color: #66D4BD;
    border-color: #66D4BD;
    color: #fff;
}

.btn-image-full-width-text {
    color: #fff;
    border-color: #fff;
    background: transparent;
}

.btn-image-full-width-text:hover {
    background: #fff;
    color: #66D4BD;
}

.btn-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.4rem 0;
}

.btn-content a {
    display: inline-block;
    margin: 0.4rem;
}

/* ===================================================================
 * 7. Two-columns / activity / informations blocks
 * =================================================================== */

.two-columns-content,
.two-columns-slider-content {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.two-columns-content .row,
.two-columns-slider-content .row {
    margin: 0;
}

.two-columns-content .bloc-left,
.two-columns-content .bloc-right,
.two-columns-slider-content .bloc-left,
.two-columns-slider-content .bloc-right {
    width: 100%;
}

.two-columns-content .text-content {
    padding: 0;
}

.two-columns-content .position-text {
    color: #1b1b1b;
}

.two-columns-content .position-text h2 {
    margin-bottom: 0.4rem;
}

.two-columns-content .img-content {
    min-height: 380px;
}

/* activity (3-up tiles below hero) */
.activity-content {
    color: #fff;
}

.activity-content .bloc-content {
    position: relative;
    margin-bottom: 1.4rem;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.06);
    transition: transform 0.3s ease;
}

.activity-content .bloc-content:hover {
    transform: translateY(-6px);
}

.activity-content .img-content {
    overflow: hidden;
}

.activity-content .img-content img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.activity-content .bloc-content:hover .img-content img {
    transform: scale(1.05);
}

.activity-content .text-content {
    padding: 1rem;
    color: #fff;
}

.activity-content .text-content h3 {
    color: #fff;
    font-family: "Archivo Black", sans-serif;
    letter-spacing: 2px;
    margin-bottom: 0.6rem;
}

.activity-content .text-content p {
    color: rgba(255, 255, 255, 0.95);
}

.activity-content .btn-content {
    position: relative;
    z-index: 2;
}

.activity-content .btn-content a {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    margin: 0.6rem auto;
    background-color: #66D4BD;
    color: #fff;
    font-family: "Archivo Black", sans-serif;
    letter-spacing: 1.5px;
    text-decoration: none;
    border-radius: 0;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.activity-content .btn-content a:hover {
    background-color: #fff;
    color: #66D4BD;
}

.activity-content .title-content {
    color: #fff;
    text-align: center;
    margin-bottom: 1.4rem;
}

/* informations block */
.informations-content {
    padding: 3em 1em;
    color: #fff;
}

.informations-content .informations-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.informations-content .item {
    padding: 1.2rem;
    margin: 0.6rem auto;
}

.informations-content .icon-content {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: #000;
}

.informations-content .icon-content i {
    color: #000;
}

.informations-content .informations strong {
    display: block;
    color: #000;
    font-family: "Archivo Black", sans-serif;
    letter-spacing: 1.5px;
    margin-bottom: 0.4rem;
}

.informations-content .informations p {
    margin-bottom: 0.2rem;
    color: #000;
}

.informations-content .map-content {
    padding: 1rem;
}

.informations-content .map-content iframe {
    width: 100%;
    min-height: 320px;
    display: block;
}

/* text-bloc-content (Roboto-text on tinted band) */
.text-bloc-content {
    padding: 3em 2em;
    text-align: center;
    color: #fff;
}

.text-bloc-content h2,
.text-bloc-content h3,
.text-bloc-content h4 {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.18);
}

.text-bloc-content .animation-content {
    max-width: 800px;
    margin: 0 auto;
}

.text-bloc-content .liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.4rem;
}

.text-bloc-content .liens .btn-content {
    margin: 0.4rem;
}

.text-bloc-content .liens .btn {
    color: #fff;
    border-color: #fff;
}

.text-bloc-content .liens .btn:hover {
    background-color: #fff;
    color: #4a9988;
}

/* ===================================================================
 * 8. Banner / article-page-content (inner page hero + body)
 * =================================================================== */

.banner-content {
    position: relative;
    overflow: hidden;
}

.banner-content .text-content {
    color: #fff;
}

.banner-content h1,
.banner-content h2 {
    color: #fff;
}

.article-page-content {
    padding: 5em 2em;
}

.article-page-content .container {
    max-width: 940px;
}

.article-page-content h2 {
    margin-top: 0;
    margin-bottom: 1.4rem;
}

.article-page-content p {
    color: #444;
    font-family: "Roboto", sans-serif;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.article-page-content a {
    color: #66D4BD;
    text-decoration: underline;
}

.article-page-content a:hover {
    color: #4a9988;
}

/* image-full-width-text (parallax CTA strip) */
.image-full-width-text-content {
    position: relative;
}

.image-full-width-text-content .container-fluid {
    min-height: 420px;
    display: flex;
    align-items: center;
    padding: 4em 1em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.image-full-width-text-content .text-content {
    width: 100%;
}

.image-full-width-text-content h2,
.image-full-width-text-content p {
    color: #fff;
}

.parallax .container-fluid {
    background-attachment: fixed !important;
}

@media (max-width: 768px) {
    .parallax .container-fluid {
        background-attachment: scroll !important;
    }
}

/* ===================================================================
 * 9. Forms
 * =================================================================== */

.form-control {
    display: block;
    width: 100%;
    padding: 0.6rem 0.9rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    outline: 0;
}

textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

.form-contact-content {
    padding: 3em 1em;
    background-color: #fafafa;
}

.form-contact-content .container {
    max-width: 760px;
}

.form-contact-content label {
    font-family: "Archivo Black", sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 0.3rem;
    display: block;
}

.form-contact-content .form-group {
    margin-bottom: 1.2rem;
}

.form-contact-content .sending-message {
    margin-top: 1.2rem;
    text-align: center;
}

.form-contact-content .sending-message i {
    font-size: 1.4rem;
}

/* ===================================================================
 * 10. Footer
 * =================================================================== */

.footer-content {
    padding: 3em 1em 2em;
    color: #fff;
}

.footer-content .container {
    max-width: 1100px;
}

.footer-content .seo-content {
    margin-bottom: 1.6rem;
}

.footer-content .btn-seo {
    background-color: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    padding: 10px 24px;
    font-family: "Archivo Black", sans-serif;
    letter-spacing: 2px;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
}

.footer-content .btn-seo:hover {
    background-color: #fff;
    color: #4a9988;
}

.footer-content #frequently_searched {
    margin-top: 1rem;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.06);
    text-align: center;
    line-height: 1.9;
    font-size: 0.85rem;
}

.footer-content #frequently_searched a {
    color: #fff;
    margin: 0 4px;
    text-decoration: none;
}

.footer-content #frequently_searched a:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.footer-content .informations-seo-content {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
}

.footer-content .informations-seo-content p {
    margin: 0;
    padding: 0.4rem 0;
}

.footer-content .informations-seo-content a {
    color: #fff;
    text-decoration: underline;
}

/* SEO page (long-form footer content blocks) */
.seo-page {
    padding: 3em 1em;
}

.seo-page .container {
    max-width: 940px;
}

.seo-page h2 {
    text-align: center;
    margin-bottom: 1.4rem;
}

/* ===================================================================
 * 11. Cookie banner / scroll-top / collapse
 * =================================================================== */

.cookieinfo {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    padding: 1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.12);
}

.cookieinfo span {
    flex: 1 1 60%;
    min-width: 240px;
}

.cookieinfo .btn-cookie {
    cursor: pointer;
    padding: 8px 22px;
    border-radius: 0;
    background-color: #4a9988;
    color: #fff;
    font-family: "Archivo Black", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.78rem;
    transition: opacity 0.3s;
}

.cookieinfo .btn-cookie:hover {
    opacity: 0.85;
}

.scrollTop {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1035;
    border-radius: 50%;
    color: #fff;
    background-color: #66D4BD;
    text-decoration: none;
    transition: opacity 0.3s, transform 0.3s;
}

.scrollTop:hover {
    transform: translateY(-3px);
}

.collapse {
    display: none;
}

.collapse.show {
    display: block;
}

/* ===================================================================
 * 12. Icofont icons — minimal shapes for the icons used on the site
 * (icofont-* class names are referenced in HTML; webfont file is
 *  not loaded in this build, so we draw glyphs with unicode/CSS
 *  fallbacks so users still see SOMETHING instead of empty boxes.)
 * =================================================================== */

[class^="icofont-"],
[class*=" icofont-"] {
    font-family: "icofont", sans-serif;
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    speak: none;
}

.icofont-2x { font-size: 2em; }

/* unicode fallback glyphs — render even without the icofont webfont */
.icofont-facebook::before       { content: "f"; }
.icofont-location-pin::before   { content: "\1F4CD"; }   /* round pin */
.icofont-phone::before          { content: "\260E"; }    /* phone */
.icofont-letter::before         { content: "\2709"; }    /* envelope */
.icofont-arrow-right::before    { content: "\2192"; }    /* right arrow */
.icofont-rounded-down::before   { content: "\02C5"; font-size: 1.4em; }
.icofont-long-arrow-up::before  { content: "\2191"; }

/* social-network facebook icon needs to read crisp */
.social-network ul li a .icofont-facebook {
    font-family: "Arial Black", sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1;
}

/* ===================================================================
 * 13. Mentions-légales / generic article page
 * =================================================================== */

.page-mentions-legales .article-page-content,
.page-mentions-legales {
    background-color: #fff;
}

.article-page-content ul,
.article-page-content ol {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
    list-style: disc;
}

.article-page-content ul li,
.article-page-content ol li {
    margin-bottom: 0.4rem;
    line-height: 1.7;
}

/* ===================================================================
 * 14. Responsive overrides (≤768px and ≤575px)
 * =================================================================== */

@media (max-width: 991.98px) {
    .navbar {
        padding: 0.6rem 1rem;
    }
    .navbar-collapse {
        display: none;
        width: 100%;
        order: 3;
    }
    .navbar-collapse.show {
        display: block;
    }
    .navbar-nav {
        flex-direction: column;
        padding: 0.6rem 0;
        width: 100%;
    }
    .navbar-nav > li {
        padding: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        text-align: left;
    }
    .navbar-nav > li > .nav-link {
        padding: 0.9rem 1rem;
        text-align: left;
    }
    .social-network {
        margin-left: 0;
        padding: 0.6rem 1rem;
    }
}

@media (max-width: 768px) {
    .slider-content {
        min-height: 500px;
    }
    .slider-content .home-slider-text h1 {
        font-size: 2.4em !important;
    }
    .slider-content .home-slider-text h2 {
        font-size: 1.2em !important;
    }
    .slider-content .home-slider-text .logo-content {
        padding-right: 0 !important;
    }
    .activity-content {
        padding: 2.5em 1em !important;
    }
    .two-columns-content .bloc-left,
    .two-columns-content .bloc-right {
        padding: 2.5em 1.4em !important;
    }
    .banner-content .text-content {
        padding: 2em 1em !important;
        padding-left: 1em !important;
    }
    .banner-content {
        height: 38vh !important;
    }
    .image-full-width-text-content .container-fluid {
        min-height: 320px;
        padding: 2.5em 1em;
    }
    .footer-content {
        padding: 2em 1em 1.5em;
    }
    .footer-content #frequently_searched {
        font-size: 0.78rem;
    }
}

@media (max-width: 575.98px) {
    .navbar-brand img {
        max-height: 44px;
    }
    .slider-content {
        min-height: 420px;
    }
    .slider-content .home-slider-text h1 {
        font-size: 1.9em !important;
    }
    .slider-content .home-slider-text h2 {
        font-size: 1em !important;
    }
    .slider-content .btn-slider-content {
        flex-direction: column;
        gap: 0.6rem;
    }
    .slider-content .btn-slider-content .btn {
        margin: 0;
        width: 100%;
        padding: 14px 18px;
    }
    .cookieinfo {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* ===================================================================
 * 15. AOS (Animate on Scroll) baseline
 * Tag elements with data-aos="fade-up" etc. — provide CSS transitions
 * so a missing aos.js still degrades gracefully (no hidden content).
 * =================================================================== */

[data-aos] {
    opacity: 1;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos="fade-up"],
[data-aos="fade-down"],
[data-aos="fade-left"],
[data-aos="fade-right"] {
    /* no initial hide — visibility guaranteed even without the AOS lib */
    opacity: 1;
    transform: none;
}

/* ===================================================================
 * 16. Misc layout fixes specific to Vistalid skin
 * =================================================================== */

.optinwrapper { display: none; }   /* hidden GDPR opt-in carrier */

.gtx-trans-icon { display: none; } /* google-translate hover-icon stub */

.bloc-content .position-btn {
    width: 100%;
    text-align: center;
}

.bloc-content .position-btn a {
    color: #fff;
    font-family: "Archivo Black", sans-serif;
}

.image-contain .img-content {
    background-size: contain !important;
}

.image-border .img-content {
    clip-path: inset(8% 8% 8% 8%);
}

/* Make sure the carousel never crops the H1 on tall screens */
@media (min-height: 900px) {
    .slider-content {
        max-height: 900px;
    }
}

/* end of file */