/*
 Theme Name: themeananas
 Template: understrap
*/

body {
    margin: 0;
    /* Pour enlever les marges par défaut */
}

.page-wrapper {
    width: 100%;
    height: 100%;
}

h1 {
    color: black !important;
}


#region,
.region-content {
    margin: auto;
    max-width: 1200px;
    margin-bottom: 50px;
}

.region-black {
    background: #212121;
    color: #f8f4e9;
    padding: 40px 0px;
}

#region {
    /*display: flex;*/
    align-items: center;
    gap: 100px;
}

#region .header-info,
.region-content .header-info,
.tag-blue {
    color: #00f;
    border: 1px solid #00f;
    padding: 6px 14px;
    border-radius: 999px;
    text-transform: uppercase;

    display: inline-block;
    max-width: 100%;

    font-size: 12px;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: center;

    white-space: normal;
    word-break: break-word;
}

.region-content p,
.ps-section-2 p {
    color: #595757 !important;
}

#region a,
.region-content a {
    margin-top: 20px;
    color: #0000FF;
    font-weight: 800;
}

#region button,
.region-content button {
    margin-top: 20px;
}

h2 {
    margin-top: 30px;
}

#region h1,
.region-content h1 {
    margin-top: 10px;
}

#region h2,
.region-content h2 {
    margin-top: 10px;
}

#region ul li,
.region-content ul li {
    list-style: initial;
}

.citation {
    position: relative;
    font-size: 22px;
    font-size: 300;
    font-style: italic;
    padding-left: 70px;
    margin: 30px auto;
    padding-top: 25px;
    padding-bottom: 25px;
    border-top: 1px solid #0000FF;
    border-bottom: 1px solid #0000FF;
}

.citation::before {
    content: '“';
    font-family: 'Ponjoung', sans-serif;
    position: absolute;
    color: #0000FF;
    font-size: 75pt;
    font-weight: lighter;
    line-height: 90%;
    top: 25px;
    left: 0;
    z-index: 1;
}


.container-devis {
    padding: 30px;
    background: #f8f4e9;
    border-radius: 20px;
    text-align: center;
    margin: 50px auto;
}

.devis-button-region {
    margin-top: 20px;
}

.container-region-img,
.container-region-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 5em 0px;
}

.container-region-img div:first-child {
    flex: 3;
}

.container-region-img div:last-child {
    max-width: 450px;
    flex: 2;
}

.container-region-text div:last-child {
    max-width: 750px;
    flex: 2;
}

.container-region-text div:first-child {
    flex: 1;
}

.container-region-img img {
    border-radius: 25px;
    box-shadow: rgba(0, 0, 0, 0.21) 0px 2px 8px;
}

@media screen and (max-width: 1000px) {

    .container-region-text,
    .container-region-img {
        flex-wrap: wrap;
    }

    .container-region-text div:last-child,
    .container-region-img div:last-child {
        max-width: none;
    }

    .container-region-text div,
    .container-region-img div {
        width: 100%;
        flex: auto !important;
    }

    .container-region-img img {
        max-width: 350px;
        width: 100%;
        margin: auto;
    }
}


/* Pabe Locale*/

.ps-slider-section {
    padding: 10px 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.ps-slider-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 1. EN-TÊTE ASYMÉTRIQUE (Inspiré de image_8d436b.png) */
.ps-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
    width: 100%;
    gap: 24px;
    margin-top: 10px;
}

.ps-header-text {
    max-width: 650px;
}

.ps-slider-section .ps-tagline {
    color: #00f;
    border: 1px solid #00f;
    padding: 6px 14px;
    border-radius: 999px;
    text-transform: uppercase;

    display: inline-block;
    max-width: 100%;

    font-size: 12px;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: center;

    white-space: normal;
    word-break: break-word;
}


.ps-tagline-white {
    color: #f8f4e9;
    border: 1px solid #f8f4e9;
    padding: 6px 14px;
    border-radius: 999px;
    text-transform: uppercase;

    display: inline-block;
    max-width: 100%;

    font-size: 12px;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: center;

    white-space: normal;
    word-break: break-word;
}

.ps-slider-section h2.ps-main-title {
    font-size: 36px;
    line-height: 1.2;
}

.ps-slider-section p.ps-main-subtitle {
    font-size: 16px;
    color: #f8f4e9 !important;
    margin-top: 12px;
    line-height: 1.5;
}

/* Commandes du Slider (Flèches + CTA) */
.ps-header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Bouton CTA Pilule */
.ps-cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    background: #00f;
    border-radius: 50px;
    color: #f8f4e9 !important;
}

.ps-cta-pill:hover {
    transform: translateY(-2px);
    color: #f8f4e9 !important;
}

.ps-cta-pill .fa-arrow-right:before {
    color: #f8f4e9 !important;
}

.ps-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #E5E7EB;
    background-color: #FFFFFF;
    color: var(--ps-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.ps-nav-btn:hover {
    background-color: var(--ps-primary);
    color: #FFFFFF;
    border-color: var(--ps-primary);
}

.ps-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #F3F4F6;
    color: #9CA3AF;
    border-color: #E5E7EB;
}

/* 2. ZONE DU SLIDER ET GRILLE DE CARTES */
.ps-slider-container {
    width: 100%;
    position: relative;
}

/* Le conteneur à défilement horizontal fluide */
.ps-slider-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 10px 0 30px 0;
    /* Padding en bas pour laisser respirer l'ombre au survol */
    scrollbar-width: none;
    /* Cache la barre sur Firefox */
}

.ps-slider-track::-webkit-scrollbar {
    display: none;
    /* Cache la barre sur Chrome/Safari */
}

/* 3. CARTES DU CARROUSEL (Référence image_8d436b.png) */
.ps-slider-card {
    flex: 0 0 calc(33.333% - 16px);
    /* 3 cartes visibles sur grand écran */
    scroll-snap-align: start;
    background-color: #f8f4e9;
    color: #212121;
    border-radius: 24px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(229, 231, 235, 0.5);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Effet d'élévation premium au survol */
.ps-slider-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
    border-color: rgba(255, 179, 0, 0.3);
}

/* Badge Icône sombre */
.ps-icon-badge {
    width: 56px;
    height: 56px;
    background-color: #212121;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    color: #f8f4e9;
    font-size: 20px;
    transition: all 0.3s ease;
}

.ps-header-controls .fa-solid {
    color: #212121;
}

.ps-slider-card:hover .ps-icon-badge {
    background-color: var(--ps-accent);
    color: var(--ps-primary);
}

.ps-slider-card h3.ps-card-title,
.ps-contact-reassurance__item h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 14px;
    line-height: 1.3;
}

.ps-slider-card p.ps-card-text {
    font-size: 14px;
    line-height: 1.5;
    flex-grow: 1;
}

/* Lien discret en bas de carte */
.ps-card-link {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    transition: color 0.2s ease;
}

.ps-card-link i {
    font-size: 11px;
    transition: transform 0.25s ease;
}

.ps-slider-card:hover .ps-card-link {
    color: var(--ps-accent-hover);
}

.ps-slider-card:hover .ps-card-link i {
    transform: translateX(5px);
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .ps-slider-card {
        flex: 0 0 calc(50% - 12px);
        /* 2 cartes visibles sur tablette */
    }

    .ps-slider-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }


}

@media (max-width: 640px) {
    .ps-slider-card {
        flex: 0 0 100%;
        /* 1 seule carte sur mobile */
        padding: 30px 24px;
        min-height: 350px;
    }

    .ps-slider-section h2.ps-main-title {
        font-size: 28px;
    }

    .ps-header-controls {
        flex-wrap: wrap;
        gap: 16px;
    }

    .ps-cta-pill {
        width: 100%;
        justify-content: center;
        order: 2;
        background: #00f;
        border-radius: 50px;
        /* Place le bouton sous les flèches sur petit mobile */
    }
}


.ps-seo-faq-section {
    background-color: #FFFFFF;
    width: 90%;
    padding: 60px 24px;
    border-radius: 24px;
    margin: 40px auto;
    max-width: 900px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    border: 1px solid #F3F4F6;
}

.ps-faq-title {
    font-size: 28px;
    color: #111827;
    text-align: center;
    margin-bottom: 35px;
    font-weight: 700;
}

.ps-faq-item {
    border-bottom: 1px solid #E5E7EB;
    padding: 18px 0;
}

.ps-faq-item:last-child {
    border-bottom: none;
}

.ps-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    padding: 0;
    transition: color 0.2s ease;
}

.ps-faq-question:hover {
    color: #00f;
}

.ps-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    color: #4B5563;
    font-size: 14.5px;
    line-height: 1.6;
}

.ps-faq-answer p {
    padding-top: 12px;
    margin: 0;
}

.ps-faq-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
    color: #9CA3AF;
}

.ps-faq-item.active .ps-faq-icon {
    transform: rotate(180deg);

}

.ps-faq-item.active .ps-faq-answer {
    max-height: 200px;
    /* Ajuster selon le volume de texte */
}

/*Local*/
.page-locale {
    animation: appearDiv 1s ease-in-out;
}

.page-locale h1 {
    margin-top: 20px !important;
}

.page-locale h2 {
    margin-bottom: 20px !important;
}

.container-region-img h2,
.ps-section-cogerante h2 {
    margin-bottom: 30px;
}

.page-locale button,
.btn-blue button {
    color: #fff;
    background-color: #00f;
    border-radius: 50px;
    padding: 10px 30px;
    letter-spacing: 1px;
    font-weight: 600;
    border: none;
}

.ps-locale-section .ps-locale-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
    margin-top: 30px;
}

.ps-locale-section .ps-locale-list li {
    min-width: 300px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
}


.ps-locale-section .fa-solid {
    content: "\f276";
    background: #f8f4e9;
    width: 56px;
    height: 56px;
    /* background-color: #212121; */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    color: #212121;
    font-size: 20px;
    transition: all .3s ease;
}

.ps-section-2 {
    padding: 60px 0px;
}

#region .illustration img {
    width: 350px;
    height: auto;
}

#region>div {
    justify-content: space-between;
}

#region>div>div:first-child {
    max-width: 700px;
}

#region>div>div:last-child {
    max-width: 250px;
}

@media screen and (max-width: 1000px) {
    #region>div>div:last-child {
        display: none;
    }

    #region>div>div:first-child {
        margin: auto;
    }
}

.region-content h2,
.region-black h2,
.ps-section-2 h2 {
    margin-top: 20px;

}

/* Conteneur des deux cartes alignées */
.cards-container {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 30px 0;
}

/* Structure de base de la carte */
.flip-card {
    background-color: transparent;
    width: 32%;
    min-width: 300px;
    height: 380px;
    perspective: 1000px;
    /* Effet 3D */
    cursor: pointer;
}

/* Le conteneur interne qui tourne */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* Déclenchement du retournement (Survol PC et Clic Mobile) */
.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* Propriétés communes aux deux faces */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Sécurité Safari */
    backface-visibility: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

/* Style de la FACE AVANT (Image de fond) */
.flip-card-front {
    background-size: cover;
    background-position: center;
    color: white;
}

.card-front-content h4 {
    font-size: 24px;
    margin-bottom: 8px;
    color: #ffffff !important;
}

/* Style de la FACE ARRIÈRE (Contenu texte) */
.flip-card-back {
    background-color: #f8f4e9;
    /* Mets la couleur de fond de ton choix (ex: un bleu ou blanc Pineapple) */
    color: #333;
    transform: rotateY(180deg);
    border: 1px solid #e2e8f0;
}

.card-back-content h5 {
    font-size: 18px;
    margin-bottom: 12px;
    color: #1a202c;
}

.card-back-content p {
    font-size: 14px;
    line-height: 1.5;
    color: #4a5568;
    margin-bottom: 20px;
}

/* Style du bouton/lien interne */
.card-link {
    display: inline-block;
    /* Ton orange/jaune Pineapple */
    color: #f8f4e9 !important;
    transition: background 0.3s;
    background: #00f;
    border-radius: 50px;
    padding: 10px 15px;
}



/* Responsive mobile */
@media (max-width: 768px) {
    .flip-card {
        width: 90%;
        max-width: 350px;
    }
}


.ps-section-2 .home-avis h3 {
    color: #212121;
}

.ps-section-cogerante {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

@media screen and (max-width: 1000px) {
    .ps-section-cogerante {
        display: block;
    }

    .ps-eeat-team {
        margin-top: 0px !important;
    }
}

.ps-eeat-team {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    margin-top: -70px;
}

.ps-eeat-team img {
    width: 200px;
}


/* Contact */

.ps-contact-reassurance {
    width: 100%;
    background-color: #212121;
    padding: 30px;
    color: #f8f4e9
}

.ps-contact-reassurance .container-reassurance {
    max-width: 1200px;
    margin:  auto;
}

.ps-contact-reassurance h2 {
    text-align: center;
    margin-bottom: 48px;
}

.ps-contact-reassurance__grid {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.ps-contact-reassurance__item {
    background-color: #f8f4e9;
    color: #212121;
    border-radius: 24px;
    padding: 36px 15px;
    flex:  1;
}


.ps-contact-process {
    display: flex;
    align-items: center;
    width: 80%;
    margin: auto;
    flex-direction: row;
    padding: 3.5em 0em;
}

.ps-contact-process img {
    width: 130px;
    margin: auto;
    text-align: center;
    margin-top: 20px;
}


.ps-contact-social-proof {
    padding: 2em 0em 5em 0;
}


@media screen and (max-width:  950px) {
    .ps-contact-reassurance__grid {
        flex-wrap:  wrap;
    }
    .ps-contact-reassurance__item {
        flex:  auto;
        width: 45%;
    }
    .ps-contact-process {
        display:  block;
    }
    .ps-contact-process > div h2 {
        order: 2;
        margin:  30px auto;
    }
    .ps-contact-process > div img {
        order: 1;
    }
}
@media screen and (max-width:  600px) {
    .ps-contact-reassurance__item {
        width: 100%;
    }
}