/* ================================
   IDENTITÉ VISUELLE
   Amélie ALLEAUME
   Diététicienne Nutritionniste
================================ */


/* ---------- VARIABLES ---------- */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');


:root {

    --fond: #FAF7F2;
    --blanc: #FFFFFF;
    --titre: #6D4C41;
    --texte: #555555;
    --terracotta: #D89B7B;
    --terracotta-hover: #C98564;
    --icone: #A86F55;

}


/* ---------- RESET ---------- */

* {

    box-sizing: border-box;
}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;
    padding: 0;

    background-color: var(--fond);

    color: var(--texte);

    font-family: 'Poppins', sans-serif;

    line-height: 1.8;

}



/* ---------- TITRES ---------- */


h1,
h2,
h3 {

    font-family: 'Cormorant Garamond', serif;

    color: var(--titre);

}


h1 {

    font-size: 4rem;

    font-weight: 600;

}


h2 {

    font-size: 2.8rem;

    text-align: center;

    margin-bottom: 40px;

}


h3 {

    font-size: 2rem;

}


p {

    font-size: 1.05rem;

}



/* ---------- NAVIGATION ---------- */


nav {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(250,247,242,0.95);

    backdrop-filter: blur(10px);

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 35px;

    padding: 18px 20px;

    border-bottom: 1px solid rgba(109,76,65,0.08);

}


nav a {

    color: var(--titre);

    text-decoration: none;

    font-weight: 500;

    font-size: 1rem;

    transition: 0.3s;

}


nav a:hover {

    color: var(--terracotta);

}



/* ---------- ACCUEIL / HERO ---------- */


.accueil {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 50px;

    max-width: 1200px;

    margin: auto;

    padding: 60px 40px;

}


.photo-accueil {

    flex: 0 0 45%;

    display: flex;

    justify-content: center;

}


.photo-accueil img {

    width: 100%;

    max-width: 460px;

    height: 600px;

    object-fit: cover;

    border-radius: 230px 230px 25px 25px;

}



.texte-accueil {

    flex: 0 0 45%;

    max-width: 550px;

}


.texte-accueil h1 {

    font-size: 4.5rem;

    margin-bottom: 10px;

    letter-spacing: 1px;

}


.texte-accueil h2 {

    font-size: 2.2rem;

    font-weight: 400;

    letter-spacing: 2px;

    color: var(--icone);

}


.texte-accueil p {

    font-size: 1.15rem;

    margin: 30px 0;

}



/* ---------- BOUTONS ---------- */


button,
.bouton-contact {

    display: inline-block;

    background-color: var(--terracotta);

    color: white;

    border: none;

    padding: 12px 35px;

    border-radius: 40px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    text-decoration: none;

    transition: 0.3s ease;

}


button:hover,
.bouton-contact:hover {

    background-color: var(--terracotta-hover);

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0,0,0,0.12);

}



/* ---------- SECTIONS ---------- */


section {

    background-color: var(--blanc);

    width: 90%;

    max-width: 1200px;

    margin: 70px auto;

    padding: 70px 50px;

    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.04);

}



/* ---------- CARTES ---------- */


.cartes {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 30px;

}



.carte {

    background: #ffffff;

    width: 280px;

    padding: 30px;

    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.06);

    transition: transform 0.35s ease, box-shadow 0.35s ease;

    overflow: hidden;

}



.carte:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 35px rgba(0,0,0,0.10);

}



.carte h3 {

    color: var(--titre);

}



.carte p {

    font-style: italic;

}



/* ---------- IMAGES ---------- */


.hero {

    width: 90%;

    max-width: 1200px;

    margin: 70px auto;

}



.hero img {

    width: 100%;

    display: block;

    object-fit: cover;

    border-radius: 20px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.10);

}



.carte img {

    width: 100%;

    height: 180px;

    object-fit: cover;

    border-radius: 20px;

    margin-bottom: 20px;

}



/* ---------- A PROPOS ---------- */


.apropos {

    display: flex;

    align-items: center;

    gap: 50px;

    flex-wrap: wrap;

}



.apropos img {

    width: 100%;

    max-width: 450px;

    height: auto;

    object-fit: cover;

    border-radius: 30px;

    box-shadow: 0 15px 35px rgba(0,0,0,0.12);

}



.apropos div {

    flex: 1;

}



/* ---------- ICONES ---------- */


.icone {

    font-size: 35px;

    color: var(--icone);

    margin-bottom: 15px;

}



/* ---------- IMC ---------- */


#imc {

    text-align: center;

}



#imc input {

    padding: 12px;

    margin: 8px;

    border-radius: 10px;

    border: 1px solid #ddd;

    font-family: 'Poppins', sans-serif;

}



#resultat {

    margin-top: 25px;

    font-size: 1.1rem;

}



/* ---------- SECTION BIENVENUE ---------- */


.bienvenue {

    text-align: center;

}



.bienvenue p {

    max-width: 800px;

    margin: 20px auto;

}



/* ---------- APPEL RENDEZ-VOUS ---------- */


.appel {

    text-align: center;

    background-color: #F5E8DF;

    padding: 50px 20px;

    border-radius: 20px;

}


.appel h2 {

    margin-bottom: 15px;

}



/* ---------- FENETRE CONSEIL ---------- */


.fenetre {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.4);

    z-index:2000;

}



.contenuConseil {

    background:white;

    max-width:500px;

    margin:100px auto;

    padding:40px;

    border-radius:20px;

    text-align:center;

}



.fermer {

    float:right;

    cursor:pointer;

}



/* ---------- FOOTER ---------- */


footer {

    background-color: var(--titre);

    color:white;

    padding:50px 20px;

}


footer p,
footer a,
footer h3 {

    color:white;

}


.footer-contenu {

    display:flex;

    justify-content:space-around;

    flex-wrap:wrap;

    gap:30px;

}


.footer-colonne {

    max-width:320px;

}


.footer-bas {

    text-align:center;

    margin-top:30px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,0.3);

}



/* ---------- ANIMATIONS ---------- */


header,
section {

    animation: apparition 0.8s ease;

}



@keyframes apparition {

    from {

        opacity:0;

        transform:translateY(20px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}



/* ---------- MOBILE ---------- */


@media (max-width:768px){

    .accueil {

        flex-direction: column;

        padding: 60px 20px;

        text-align: center;

        gap: 40px;

    }


    .photo-accueil img {

        width: 280px;

        height: 380px;

    }


    .texte-accueil h1 {

        font-size: 3rem;

    }

}


    section {

        margin:30px 15px;

        padding:40px 20px;

    }

@media (max-width: 768px) {

    nav {

        width: 100%;

        box-sizing: border-box;

        padding: 15px 10px;

        gap: 15px;

        flex-wrap: wrap;

        justify-content: center;

    }


    nav a {

        font-size: 14px;

    }

}
@media (max-width:768px){

    .bouton-flottant{

        bottom:15px;

        right:15px;

        padding:10px 16px;

        font-size:13px;

    }

}
@media (max-width: 768px){

    .motif-nutrition{

        display:none;

    }

}

/* ===== TYPOGRAPHIE IDENTITÉ CABINET ===== */


/* Nom Amélie ALLEAUME */

header h1,
.texte-accueil h1 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 4.5rem;

    font-weight: 600;

    letter-spacing: 1px;

    color: #6D4C41;

}



/* Sous-titre Diététicienne Nutritionniste */

header h2,
.texte-accueil h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 2.4rem;

    font-weight: 400;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #A86F55;

}



/* Phrase d'accroche */

header p,
.texte-accueil p {

    font-family: 'Poppins', sans-serif;

    font-size: 1.15rem;

    font-weight: 300;

    line-height: 1.9;

    color: #555555;

}



/* Tous les textes du site */

body {

    font-family: 'Poppins', sans-serif;

}



/* Titres des sections */

section h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 2.8rem;

    font-weight: 600;

}



/* Titres des cartes */

.carte h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 2rem;

}

.intro-section {

    max-width: 700px;

    margin: -20px auto 40px;

    text-align: center;

    font-size: 1.1rem;

}
.bienvenue {

    text-align: center;

}


.bienvenue p {

    max-width: 800px;

    margin: 20px auto;

}
.appel {

    text-align: center;

    background-color: #F5E8DF;

    padding: 70px 30px;

    border-radius: 25px;

}


.appel h2 {

    font-size: 2.8rem;

    margin-bottom: 20px;

}


.appel p {

    max-width: 750px;

    margin: 0 auto 35px;

    font-size: 1.15rem;

}
footer {

    background-color: #6D4C41;

    color: white;

    padding: 60px 30px 20px;

}



footer h3 {

    color: white;

    font-size: 1.8rem;

}



footer p {

    color: rgba(255,255,255,0.9);

}



footer a {

    color: white;

    text-decoration: none;

    transition: 0.3s;

}



footer a:hover {

    color: #D89B7B;

}



.footer-bas {

    text-align: center;

    margin-top: 40px;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,0.25);

}
nav {

    position: sticky;

    top: 0;

    z-index: 1000;

    background-color: rgba(250, 247, 242, 0.95);

    backdrop-filter: blur(10px);

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 35px;

    padding: 18px 20px;

    border-bottom: 1px solid rgba(109, 76, 65, 0.08);

}

nav a {

    color: #6D4C41;

    text-decoration: none;

    font-weight: 500;

    font-size: 1rem;

    transition: color 0.3s ease;

}

nav a:hover {

    color: #D89B7B;

}
@media (max-width: 768px) {

    nav {

        flex-wrap: wrap;

        gap: 15px;

        padding: 15px;

    }

    nav a {

        font-size: 0.95rem;

    }

}

.texte-accueil a,
.rendezvous a,
.appel a {

    display: flex;

    justify-content: center;

}
.menu-toggle {

    display: none;

    background: none;

    color: #6D4C41;

    font-size: 28px;

    padding: 5px;

}


.menu-liens {

    display: flex;

    justify-content: center;

    gap: 35px;

}


.logo-mobile {

    display: none;

}



@media (max-width: 768px) {


    nav {

        display: flex;

        justify-content: space-between;

        align-items: center;

        width: 100%;

        box-sizing: border-box;

    }


    .logo-mobile {

        display: block;

        font-family: 'Cormorant Garamond', serif;

        color: #6D4C41;

        font-size: 1.4rem;

    }


    .menu-toggle {

        display: block;

        border: none;

        cursor: pointer;

    }


    .menu-liens {

        display: none;

        position: absolute;

        top: 70px;

        left: 0;

        width: 100%;

        background-color: #FAF7F2;

        flex-direction: column;

        align-items: center;

        gap: 20px;

        padding: 25px 0;

        box-shadow: 0 10px 25px rgba(0,0,0,0.08);

    }


    .menu-liens.active {

        display: flex;

    }

}
/* Animation douce des sections */

section {

    transform: translateY(20px);

    transition: transform 0.8s ease;

}


section.visible {

    transform: translateY(0);

}


/* Animation des cartes */

.carte {

    transition: transform 0.4s ease, box-shadow 0.4s ease;

}


.carte:hover {

    transform: translateY(-8px);

}


@media (min-width: 769px) {

    section {

    opacity: 1;

    transform: translateY(0);

}

        transition: opacity 0.8s ease, transform 0.8s ease;

    }


    section.visible {

        opacity: 1;

        transform: translateY(0);

    }

}


section.visible {

    opacity: 1;

    transform: translateY(0);

}


/* Animation douce des cartes */

.carte {

    transition: transform 0.4s ease, box-shadow 0.4s ease;

}


.carte:hover {

    transform: translateY(-8px);

}
* {

    box-sizing: border-box;

}
@media (min-width: 769px) {

    section {

        max-width: 1200px;

        margin-left: auto;

        margin-right: auto;

    }


}
@media (min-width: 769px) {

    section {

        width: 90%;

        max-width: 1200px;

        margin-left: auto;

        margin-right: auto;

    }

}
.contact-cartes {

    display: flex;

    justify-content: center;

    gap: 25px;

    flex-wrap: wrap;

}


@media (max-width: 768px) {

    .contact-cartes {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 15px;

    }


    .contact-cartes .carte {

        width: 100%;

        padding: 15px;

    }

}
.carte-map {

    margin-top: 30px;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

}
.bouton-flottant{

    position: fixed;

    bottom: 20px;

    right: 20px;

    background: #D89B7B;

    color: white;

    padding: 12px 18px;

    border-radius: 30px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    box-shadow: 0 8px 20px rgba(0,0,0,0.15);

    transition: all .3s ease;

    z-index: 999;

}

.bouton-flottant:hover{

    background:#C98564;

    transform: translateY(-3px);

}
.seo-local{

    text-align:center;

    font-size:0.85rem;

    color:#777;

    margin:40px auto 20px;

    max-width:900px;

    line-height:1.7;

}
.accueil{

    position:relative;

    overflow:visible;

}
.hero{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    background:none;
    border-radius:0;
    box-shadow:none;
}



/* Apparition progressive des sections */

section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}


section.visible {
    opacity: 1;
    transform: translateY(0);
}
.image-cabinet {

    max-width:1200px;

    width:90%;

    margin:70px auto;

}


.image-cabinet img {

    width:100%;

    height:auto;

    display:block;

    border-radius:20px;

}