/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BACKGROUND */
body {
    background-color: #FFFFFF;
}

/* H1 SEO */
h1 {
    display: none;
}

/* FONTS */
@font-face {
    font-family: 'Kompaq';
    src: url('../fonts/kompaq/KOMPAQ.ttf') format('truetype');
}

@font-face {
    font-family: 'Coco';
    src: url('../fonts/coco/FNCocoSans-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/helvetica/Helvetica\ Neue\ LT\ Pro\ 35\ Thin.otf') format('opentype');
}

/* SECTIONS */
section {
    padding-top: 60px;
    padding-bottom: 60px;
    margin-bottom: 20px;
}

/* ANIMATIONS JS */
/* État initial */
.animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

/* Quand visible */
.animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* HEADER */
/* BARRE DU HAUT */
.top-bar {
    background-color: #8E8E74;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    color: #FFFFFF;
}

.top-bar a {
    color: #FFFFFF;
    margin-left: 50px;
    margin-right: 50px;
    font-family: 'Coco', sans-serif;
    font-size: 1.5rem;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.top-bar a:hover {
    color: #D79C73;
    transform: scale(1.05);
}

/* HEADER PRINCIPAL */
.main-header {
    background-color: #FFFFFF;
    text-align: center;
    margin-top: 90px;
    margin-bottom: 50px;
}

.main-header img {
    width: 40%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* LOGO CENTRÉ ET CHEVAUCHANT */
.logo {
    position: absolute;
    top: 40px; /* moitié de la top-bar (80px / 2) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.logo img {
    width: 120px;
    display: block;
}

/* CONTENU */

/* CABINET */
.banner {
    position: relative;
    width: 100%;
    height: 600px; /* tu peux ajuster */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    overflow: hidden;
    background-image: url('../images/peinture.jpeg'); /* ton image */
    background-size: cover;
    background-position: center;
}

/* overlay pour réduire l'opacité de l'image */
.banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4); /* noir avec opacité 0.4 */
    z-index: 1;
}

/* contenu texte au-dessus */
.banner-content {
    position: relative;
    z-index: 2;
}

.banner-content h2 {
    font-family: 'Coco', sans-serif;
    font-size: 4rem;
    margin-bottom: 10px;
}

.banner-content p {
    font-family: 'Helvetica', sans-serif;
    font-size: 20px;
    margin-left: 40px;
    margin-right: 40px;
}

/* SECTION NOS SOINS */
.nos-soins {
    display: flex;
    gap: 40px;
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* pour mobile */
}

/* COLONNE GAUCHE  */
.soins-left {
    display: flex;
    flex-direction: column; /* empile h2 + accordéons + bouton verticalement */
    justify-content: flex-start;
    flex: 1;
    min-width: 300px;
}

.soins-left h2 {
    font-family: 'Coco', sans-serif;
    font-size: 4rem;
    margin-top: 40px;
    margin-bottom: 40px;
    color: #A17665;
    text-align: left;
}

/* ACCORDÉON */
.accordion-item {
    margin-bottom: 10px;
}

.accordion-header {
    width: 100%;
    text-align: left;
    padding: 12px 20px;
    background-color: transparent;
    border-top: 1px solid #D79C73;
    border-bottom: 1px solid #D79C73;
    border-left: none;
    border-right: none;
    cursor: pointer;
    font-family: 'Coco', sans-serif;
    color: #A17665;
    font-size: 1.7rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between; /* texte à gauche, icône à droite */
    align-items: center;
    transition: color 0.3s ease;
}

.accordion-header:hover {
    background-color: #F0E2D5;
}

/* ICÔNE FLÈCHE */
.accordion-icon img {
    width: 16px; /* taille de l’icône */
    height: 16px;
    transition: transform 0.3s ease;
}

/* La flèche tourne quand l’item est actif */
.accordion-item.active .accordion-icon img {
    transform: rotate(90deg); /* ou 180deg selon le style */
}

/* CONTENU ACCORDÉON */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 20px;
}
/* CONTENU ACCORDÉON OUVERT */
.accordion-item.active .accordion-content {
    max-height: 500px; /* max-height assez grand pour le contenu */
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #F0E2D5;
    transition: max-height 0.3s ease;
}

/* Optionnel : ajoute un léger padding vertical quand ouvert */
.accordion-item.active .accordion-content p {
    padding: 10px 0;
    color: #A17665;
    font-family: 'Helvetica', serif;
    font-size: 1.5rem;
}

.accordion-item.active .accordion-header {
    background-color: #F0E2D5; /* même couleur que hover */
}

/* BOUTON VOIR PLUS */
.btn-more {
    margin-top: 150px;
    padding: 12px 0;
    width: 100%;
    background-color: #D79C73;
    color: #FFFFFF;
    font-family: 'Coco', sans-serif;
    font-size: 2rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-more:hover {
    background-color: #A17665;
    transform: scale(1.05);
}

/* COLONNE DROITE */
.soins-right {
    flex: 1;
    min-width: 200px;
}

.soins-right img {
    width: 100%;
    height: 90%;
    border-radius: 15px;
    object-fit: cover; /* prend toute la hauteur disponible */
    display: block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* SECTION À PROPOS */
.a-propos {
    display: flex;
    background-color: #F0E2D5;
    gap: 40px;
    padding: 60px 20px;
    width: 100%;
    margin: 0 auto;
    align-items: center; /* aligne verticalement */
    flex-wrap: wrap; /* pour mobile */
}

/* PHOTO RONDE */
.apropos-left {
    flex: 1;
    display: flex;
    margin-right: 80px;
    justify-content: center;
}

.apropos-photo {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* TEXTE A DROITE */
.apropos-right {
    flex: 2;
    min-width: 300px;
    margin-right: 80px;
    text-align: right;
    display: flex;
    flex-direction: column;
}

/* TITRE */
.apropos-right h2 {
    font-family: 'Coco', sans-serif;
    font-size: 4rem;
    color: #A17665;
    margin-bottom: 20px;
}

/* INTRO */
.apropos-right .intro {
    font-family: 'Coco', sans-serif;
    font-size: 1.8rem;
    color: #8E8E74;
    margin-bottom: 20px;
}

/* PARAGRAPHE */
.apropos-right p {
    font-family: 'Helvetica', serif;
    font-size: 1.5rem;
    color: #A17665;
    margin-bottom: 30px;
}

/* BOUTON DÉCOUVRIR */
.btn-discover {
    padding: 12px 0;
    width: 50%; /* ou 100% si tu veux le bouton full width sur mobile */
    background-color: #D79C73;
    color: #FFFFFF;
    font-family: 'Coco', sans-serif;
    font-size: 2rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-end; /* colle le bouton à droite */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-discover:hover {
    background-color: #A17665;
    transform: scale(1.05);
}

/* PRENDRE RDV */
.prendre-rdv {
    width: 100%;
    background-color: #A17665; /* couleur de ton choix */
    padding: 60px 20px; /* top/bottom = 60px */
    margin-top: 60px; /* supprimer l'ancien 100px */ /* espace vertical */
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* CONTENU CENTRÉ */
.rdv-content h2 {
    font-family: 'Coco', sans-serif;
    font-size: 4rem;
    color: #FFFFFF;
}

.rdv-link {
    font-family: 'Coco', sans-serif;
    font-size: 1.5rem;
    color: #FFFFFF;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.3s ease, transform 0.3s ease;
}

.rdv-link:hover {
    color: #D79C73;
    transform: scale(1.05);
}

/* FOOTER */
.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* top pour left, center, right */
    background-color: #F0E2D5;
    padding: 60px 40px 30px 40px; /* bottom plus grand pour les crédits */
    flex-wrap: wrap;
    position: relative;
}

/* GAUCHE */
.footer-left {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: 'Coco', sans-serif;
    font-size: 1.5rem;
    color: #A17665;
}

.footer-left a {
    color: #A17665;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-left a:hover {
    color: #D79C73;
}

/* DROITE */
.footer-right {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: 'Coco', sans-serif;
    font-size: 1.5rem;
    text-align: right;
}

.footer-right a {
    color: #D79C73;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-right a:hover {
    color: #A17665;
}

/* CENTRE */
.footer-center {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-center .footer-logo {
    width: 120px;
    margin-bottom: 20px;
}

/* CRÉDITS tout en bas */
.footer-credits {
    width: 100%;
    text-align: center;
    font-family: 'Helvetica', sans-serif;
    font-style: italic;
    font-size: 1rem;
    color: #D79C73;
    position: absolute;
    margin-top: 20px;
    position: static;
    bottom: auto; /* ajustable */
    left: auto;
}
.footer-credits a {
    color: #D79C73;
    text-decoration: none;
}
.footer-credits a:hover {
    color: #A17665;
    transform: scale(1.05);
}

/* MEDIA QUERY */
@media (max-width: 1024px) {

    .header-wrapper {
        position: relative; /* déjà peut-être présent, sinon ajoute-le */
    }

    /* La top-bar devient un conteneur relatif */
    .top-bar {
        height: auto;
        min-height: 80px;
        padding: 15px 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* liens à droite */
        justify-content: center;
        gap: 8px;
    }

    /* Le logo vient se superposer à gauche de la top-bar */
    .logo {
        position: absolute;
        top: 16%;
        left: 20px;
        transform: translateY(-50%);
        z-index: 10;
    }

    .logo img {
        width: 55px;
    }

    /* Liens en colonne à droite */
    .top-bar a {
        font-size: 1rem;
        margin: 0;
    }

    /* Main header s'adapte */
    .main-header {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .main-header img {
        width: 60%;
    }

    /* BANNIÈRE */
    .banner-content h2 {
        font-size: 3rem;
    }

    .banner-content p {
        font-size: 1.6rem;
        margin-left: 20px;
        margin-right: 20px;
    }

    /* NOS SOINS */
    .nos-soins {
        flex-direction: column;
        gap: 30px;
        padding: 40px 10px;
    }

    .soins-left h2 {
        font-size: 3rem;
        margin-top: 20px;
        margin-bottom: 30px;
        margin-left: 20px;
    }

    .accordion-header {
        font-size: 1.5rem;
        padding: 10px 15px;
        margin-right: 40px;
    }

    .accordion-content p {
        font-size: 1.3rem;
    }

    .accordion-item.active .accordion-content p {
        font-size: 1rem;
    }

    .btn-more {
        margin-top: 30px;
    }

    .soins-right img {
        display: none;
    }

    /* A PROPOS */
    .a-propos {
        flex-direction: column;
        gap: 20px;
        padding: 40px 10px;
        text-align: center;
    }

    .apropos-left {
        margin-right: 0;
        justify-content: center;
    }

    .apropos-photo {
        width: 250px;
        height: 250px;
    }

    .apropos-right {
        flex: 1;
        margin-right: 0;
        text-align: center;
    }

    .apropos-right h2 {
        font-size: 3rem;
    }

    .apropos-right .intro {
        font-size: 1.6rem;
    }

    .apropos-right p {
        font-size: 1.3rem;
    }

    .btn-discover {
        width: 70%;
        font-size: 1.8rem;
        align-self: center;
    }

    /* PRENDRE RDV */
    .rdv-content h2 {
        font-size: 3rem;
    }

    .rdv-link {
        font-size: 1.3rem;
    }

    /* FOOTER */
    .site-footer {
        display: flex;
        flex-direction: column; /* empile tous les blocs */
        align-items: center;
        text-align: center;
        gap: 20px;
        padding: 40px 20px;
    }

    /* Réordonne les éléments */
    .footer-center { order: 1; }   /* logo */
    .footer-left { order: 2; }     /* bloc gauche */
    .footer-right { order: 3; }    /* bloc droite */
    .footer-credits { order: 4; margin-top: 50px;}  /* crédits */

    /* Centrer le contenu */
    .footer-left,
    .footer-right,
    .footer-center,
    .footer-credits {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    .footer-center {
        position: relative; /* plus besoin d'absolute */
        left: auto;
        transform: none;
        margin-bottom: 20px;
    }

    .footer-credits {
        margin-top: 20px;
    }
}

/* MOBILE - max 768px */
@media (max-width: 768px) {

    .logo {
        position: absolute;
        top: 16%;
        left: 20px;
        transform: translateY(-50%);
        z-index: 10;
    }

    .logo img {
        width: 55px;
    }

    .banner-content h2 {
        font-size: 2.5rem;
    }

    .banner-content p {
        font-size: 1.4rem;
    }

    .soins-left h2 {
        font-size: 2.5rem;
    }

    .accordion-header {
        font-size: 1.3rem;
    }

    .accordion-content p {
        font-size: 1.2rem;
    }

    .btn-more {
        margin-top: 20px;
    }

    .apropos-photo {
        width: 200px;
        height: 200px;
    }

    .apropos-right h2 {
        font-size: 2.5rem;
    }

    .apropos-right .intro {
        font-size: 1.4rem;
    }

    .apropos-right p {
        font-size: 1.2rem;
    }

    .btn-discover {
        width: 80%;
        font-size: 1.5rem;
    }

    .rdv-content h2 {
        font-size: 2.5rem;
    }

    .rdv-link {
        font-size: 1.2rem;
    }
}

/* PETIT MOBILE - max 480px */
@media (max-width: 480px) {

    .logo {
        position: absolute;
        top: 22%;
        left: 20px;
        transform: translateY(-50%);
        z-index: 10;
    }

    .logo img {
        width: 55px;
    }

    .banner-content h2 {
        font-size: 2rem;
    }

    .banner-content p {
        font-size: 1.2rem;
    }

    .soins-left h2 {
        font-size: 2rem;
    }

    .accordion-header {
        font-size: 1.1rem;
        padding: 8px 10px;
    }

    .accordion-content p {
        font-size: 1rem;
    }

    .btn-more {
        font-size: 1.2rem;
        padding: 8px 0;
    }

    .apropos-photo {
        width: 150px;
        height: 150px;
    }

    .apropos-right h2 {
        font-size: 2rem;
    }

    .apropos-right .intro {
        font-size: 1.2rem;
    }

    .apropos-right p {
        font-size: 1rem;
    }

    .btn-discover {
        width: 90%;
        font-size: 1.2rem;
    }

    .rdv-content h2 {
        font-size: 2rem;
    }

    .rdv-link {
        font-size: 1rem;
    }

}