@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body {
    width: 100%;
    height: 100%;
    font-family: "Nunito", sans-serif;
}
.container-global {
    position: relative;
}

a, input, button {
    cursor: pointer;
}
.headerA, .nav, .ul-navigation, .lien-contact, .section1-A-Right, .section1-B {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.headerA {
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 10vh;
    border-bottom: 1px solid #98989833;
    background-color: rgba(250, 250, 250, .2);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    -moz-backdrop-filter: blur(2px);
}
.nav {
    width: 100%;
    height: 100%;
    padding: 1em;
}
.container-logo {
    width: 15%;
}
.img-logo {
    width: calc(3vh + 1.2vw);
    height: calc(3vh + 1.2vw);
    margin: 0 1%;
    border-radius: 50%;
}
.ul-navigation {
    font-size: calc(.4em + .8vw);
    width: 45%;
}
.li-navigation {
    padding: 0 2%;
    list-style: none;
}
.a-navigation {
    position: relative;
    text-decoration: none;
    color: #000;
}
.a-survole::after {    
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 50%;
    position: absolute;
    background: #000;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}
.a-survole:hover::after { 
    width: 100%; 
    left: 0; 
}

.input-search, .lien-contact, .section1-A-Btn, .section3-Btn {
    border: 1px solid #98989847;
    border-radius: 14px;
}
.input-search {
    width: 20%;
    height: 60%;
    padding: 1.5%;
    font-size: calc(.4em + .6vw);
    background-color: transparent;
    cursor: auto;
    outline: none;
}
.input-search:focus {
    border: .03rem solid black;
}
.lien-contact {
    width: 15%;
    text-align: center;
    text-decoration: none;
    padding: .5em 1em;
    color: #000;
    font-size: calc(.3em + .8vw);
    overflow: visible;
}

.btnSurvole {
    position: relative;
    transition: all 0.3s ease;
    overflow: visible;
}
.btnSurvole:hover {
    background: #000;
    color: #fff;
}
.scaleSurvole {
    cursor: pointer;
    transition: all 0.3s ease;
}
.scaleSurvole:hover {
    transform: scale(1.02);
}

section {
    min-height: 100vh;
    display: flex;
    align-items: center;
}


.section1 {
    min-height: 200vh;
    display: grid;
    grid:
        "section1-A" 1fr
        "section1-B" 1fr
        "section1-C" 1fr
        / 1fr;
}
.section1-A {
    width: 100%;
    height: 100%;
    grid-area: section1-A;
    display: grid;
    grid:
        "section1-A-Left section1-A-Right" 85%
        "section1-A-Bottom section1-A-Right" 15%
        / 1fr 1fr;
}
    .section1-A-Left {
        width: 100%;
        height: 100%;
        grid-area: section1-A-Left;
        display: grid;
        grid:
            "section1-A-Titre" 40%
            "section1-A-Slogan" 20%
            "section1-A-Paragraphe" 40%
            / 1fr;
        padding-left: 4vw;
    }
        .section1-A-Titre {
            grid-area: section1-A-Titre;
            display: flex;
            justify-content: start;
            align-items: flex-end;
            font-size: calc(1em + 1.5vw);
        }
        .section1-A-Slogan {
            grid-area: section1-A-Slogan;
            display: flex;
            justify-content: start;
            align-items: center;
            font-size: calc(.6em + .8vw);
        }
        .section1-A-Paragraphe {
            grid-area: section1-A-Paragraphe;
            font-size: calc(.6em + .8vw);
        }
    .section1-A-Right {
        width: 100%;
        height: 100%;
        grid-area: section1-A-Right;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 4em 2em 0 2em;
    }
        .section1-A-img {
            width: 70vh;
            border-radius: 14px;
        }
    .section1-A-Bottom {
        width: 100%;
        height: 100%;
        grid-area: section1-A-Bottom;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
    }
        .section1-A-Btn, .section3-Btn {
            padding: 1.5%;
            font-size: calc(.6em + .6vw);
            box-shadow: 1px 3px 6px #4d4d4d22;
            background-color: rgba(250, 250, 250, .2);
        }

.section1-B {
    width: 100%;
    height: 100%;
    grid-area: section1-B;
    padding: 1vw 3vw;
}
    .section1-B-Service {
        width: 100%;
        height: 100%;
        display: grid;
        grid:
            "rdv questions suivis" 1fr
            / 1fr 1fr 1fr;
        gap: 2.5vw;
        border: 1px solid #98989833;
        border-radius: 14px;
        background-color: rgba(250, 250, 250, .2);
        box-shadow: 1px 3px 6px #4d4d4d22;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        padding: 2em;
    }
    .rdv { grid-area: rdv; }
    .questions { grid-area: questions; }
    .suivis { grid-area: suivis; }

        .section1-card {
            display: grid;
            grid:
                "icon" 40%
                "card-titre" 20%
                "card-info" 40%
                / 1fr;
            text-align: center;
            border: 1px solid #98989833;
            border-radius: 14px;
            box-shadow: 1px 3px 6px #4d4d4d22;
            background-color: rgba(250, 250, 250, .2);
            padding: 1vw;
            
        }
        .icon-container {
            grid-area: icon;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center; 
        }
        .icon {
            width: calc(4vh + 1vw);
            height: calc(4vh + 1vw);
        }
        .card-titre {
            overflow: hidden;
            grid-area: card-titre;
            font-size: calc(.6em + .6vw);
        }
        .card-info {
            overflow: hidden;
            grid-area: card-info;
            font-size: calc(.5em + .6vw);
        }

.section1-C {
    width: 100%;
    height: 100%;
    grid-area: section1-C;
    display: grid;
    grid:
        "section1-C-Top" 30%
        "section1-C-Bottom" 70%
        / 1fr;
}
    .section1-C-Top {
        width: 100%;
        height: 100%;
        grid-area: section1-C-Top;
        display: flex;
        justify-content: space-around;
        align-items: end;
    }
        .partners-titre {
            padding: 1em;
            font-size: calc(.6em + .8vw);
        }

    .section1-C-Bottom {
        grid-area: section1-C-Bottom;
        display: grid;
        grid:
            "partner1 partner2 partner3" 1fr
            "partner4 partner5 partner6" 1fr
            / 1fr 1fr 1fr;
        gap: 3vw;
        justify-items: center;
        align-items: center;
        text-align: center;
        padding: 4vw;
    }
        .partner {
            border: 1px solid #98989833;
            border-radius: 14px;
            box-shadow: 1px 3px 6px #4d4d4d22;
            background-color: rgba(250, 250, 250, .2);
            padding: 1vw;
            font-size: calc(.6em + .8vw);
        }
        .partner1 { grid-area: partner1; }
        .partner2 { grid-area: partner2; }
        .partner3 { grid-area: partner3; }
        .partner4 { grid-area: partner4; }
        .partner5 { grid-area: partner5; }
        .partner6 { grid-area: partner6; }

/* Contenu de la 2e section */
.section2 {
    width: 100%;
    height: 100%;
    display: grid;
    grid:
        "section2-Left section2-Right" 1fr
        / 45% 55%;
    
}
    .section2-Left { 
        grid-area: section2-Left;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: end;
    }
        .section2-img {
            width: 60vh;
            border-radius: 14px;
        }
    .section2-Right {
        width: 100%;
        height: 100%;
        grid-area: section2-Right;
        align-items: center;
        display: grid;
        grid:
            "section2-Titre" 10%
            "section2-Slogan" 8%
            "section2-Paragraphe" 22%
            "section2-grid" 60%
            / 1fr;
        padding: 1em 2vw 1em 0;
    }
        .section2-Titre {
            display: flex;
            justify-content: left;
            align-items: end;
            text-align: left;
            grid-area: section2-Titre;
            font-size: calc(.7em + 1.1vw);
        }
        .section2-Slogan {
            display: flex;
            justify-content: space-around;
            align-items: start;
            grid-area: section2-Slogan;
            text-align: left;
            font-size: calc(.6em + .7vw);
        }
        .section2-Paragraphe {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            grid-area: section2-Paragraphe;
            font-size: calc(.5em + .7vw);
            padding: 2vw;
        }

    .section2-grid {
        width: 100%;
        height: 100%;
        grid-area: section2-grid;
        display: grid;
        grid:
            "container-avantage1 container-avantage2" 1fr
            "container-avantage3 container-avantage4" 1fr
            / 1fr 1fr;
        gap: 2vw;
        overflow: hidden;
    }
    .container-avantage {
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        border: 1px solid #98989833;
        border-radius: 14px;
        box-shadow: 1px 3px 6px #4d4d4d22;
        background-color: rgba(250, 250, 250, .2);
        padding: 1vw;
        overflow: hidden;
    }
    .container-avantage1 { grid-area: container-avantage1; }
    .container-avantage2 { grid-area: container-avantage2; }
    .container-avantage3 { grid-area: container-avantage3; }
    .container-avantage4 { grid-area: container-avantage4; }
        .avantage {
            font-size: calc(.5em + .6vw);
        }

.section3 {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid:
        "section3-Left section3-Right" 1fr
        / 40% 60%;
}
    .container-trait-section3 {
        position: absolute;
        display: flex;
        justify-content: space-around;
        align-items: end;
        top: 0;
        left: 0;
        width: 100%;
        height: 10vh;
    }
    .trait-section3 {
        content: "";
        width: 70%;
        height: 2px;
        background-color: #237fbd;
    }
.section3-Left { 
    grid-area: section3-Left;
    width: 100%;
    height: 100%;    
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2em;
}
    .section3-img {
        width: 80vh;
        border-radius: 14px;
    }
.section3-Right { 
    grid-area: section3-Right;
    width: 100%;
    height: 100%;
    display: grid;
    grid:
        "section3-Titre" 25%
        "section3-Paragraphe" 50%
        "section3-container-Btn" 25%
        / 1fr;
    padding: 5vw;
}
    .section3-Titre, .section3-Paragraphe, .section3-container-Btn {
        display: flex;
    }
    .section3-Titre { 
        grid-area: section3-Titre;
        justify-content: center;
        align-items: end;
        font-size: calc(.7em + 1.5vw);
    }
    .section3-Paragraphe {
        height: 100%;
        justify-content: left;
        align-items: center; 
        text-align: center;
        grid-area: section3-Paragraphe;
        overflow: hidden;
        padding: 5vw;
    }
    .section3-container-Btn { 
        grid-area: section3-container-Btn;
        justify-content: center;
        align-items: start;
    }

.section4 {
    width: 100%;
    height: 100%;
    display: grid;
    grid:
      "section4-Top" 20%
      "section4-Bottom" 80%
      / 1fr;
}
.section4-Top {
    grid-area: section4-Top;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2vw;
}
    .section4-Titre {
        text-align: center;
        font-size: calc(1vh + 1.5vw);
    }  
.section4-Bottom {
   grid-area: section4-Bottom;
   display: grid;
   grid:
     "section4-Left section4-Right" 1fr
     / 50% 50%;
} 
    .section4-Left { 
        grid-area: section4-Left;
        display: grid;
        grid:
          "section4-Titre2" 20%
          "section4-Slogan" 10%
          "section4-Paragraphe" 70%
          / 1fr;
        padding: 2vw;
    }
    .section4-Titre2, .section4-Slogan, .section4-Paragraphe {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
        .section4-Titre2 {
            grid-area: section4-Titre2;
            font-size: calc(.8vh + 1.2vw);
        }
        .section4-Slogan {
            grid-area: section4-Slogan;
            font-size: calc(.6vh + 1vw);
        }
        .section4-Paragraphe {
            grid-area: section4-Paragraphe;
            font-size: calc(.5vh + 1vw);
            padding-top: .5rem;
            text-align: right;
            overflow: visible;
        }
    .section4-Right { 
        grid-area: section4-Right;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 2vw;
    }
        .section4-img {
            width: 80%;
            border-radius: 14px;
        }

.section5 {
    width: 100%;
    height: 100%;
    display: grid;
    grid:
      "section5-Top" 10%
      "container-trait-section5" 5%
      "section5-Bottom" 85%
      / 1fr;
    padding: 3vw;
}
.section5-Top {
    width: 100%;
    height: 100%;
    grid-area: section5-Top;
    display: flex;
    justify-content: left;
    align-items: end;
}
    .section5-Titre {
        text-align: center;
        font-size: calc(1vh + 2vw);
    }
.container-trait-section5 {
    width: 100%;
    height: 100%;
    grid-area: container-trait-section5;
    display: flex;
    justify-content: left;
    align-items: start;
}
    .trait-section5 {
        content: "";
        width: 60%;
        height: 2px;
        background-color: #237fbd;
    }
.section5-Bottom {
    width: 100%;
    height: 100%;
    grid-area: section5-Bottom;
    display: grid;
    grid:
      "map gratuit medecin demande communaute" 1fr
      / 1fr 1fr 1fr 1fr 1fr;
    gap: 2vw;
    padding: 4vw 2vw;
}
    .map { grid-area: map; }
    .gratuit { grid-area: gratuit; }
    .medecin { grid-area: medecin; }
    .demande { grid-area: demande; }
    .communaute { grid-area: communaute; }

    .card {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        border: 1px solid #98989833;
        border-radius: 14px;
        box-shadow: 1px 3px 6px #4d4d4d22;
        background-color: rgba(250, 250, 250, .2);
    }
        .caroussel-Titre {
            overflow: hidden;
            font-size: calc(.4vh + 1.2vw);
            height: 20%;
        }
        .icon5 {
            width: calc(4vh + 1.5vw);
            height: calc(4vh + 1.5vw);
        }
        .icon-gratuit {
            width: calc(5vh + 2.5vw);
            height: calc(5vh + 2.5vw);
        }
        .liens-caroussel {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
            .icon-arrow {
                width: calc(4vh + 1vw);
                height: calc(4vh + 1vw);
            }

.footerA {
    width: 100%;
    height: 90vh;
    display: grid;
    grid:
      "footer-Top" 90%
      "footer-Bottom" 10%
      / 1fr;
    padding: 2vw;
}
    .footer-Top {
        width: 100%;
        height: 100%;
        grid-area: footer-Top;
        display: grid;
        grid:
          "footer-Top-Left footer-Top-Right" 1fr
          / 40% 60%;
    }
        .footer-Top-Left {
            width: 100%;
            height: 100%;
            grid-area: footer-Top-Left;
            display: grid;
            grid:
              "footer-newsletter" 1fr
              "footer-social" 1fr
              / 1fr;
            padding: 4vw;
        }
            .footer-newsletter {
                grid-area: footer-newsletter;
                width: 100%;
                height: 100%;
                display: grid;
                grid:
                  "newsletter-Titre" 1fr
                  "newsletter-btn-container" 1fr
                  / 1fr;
            }
                .newsletter-Titre {
                    display: flex;
                    justify-content: left;
                    align-items: center;
                    font-size: calc(.8vh + 2vw);
                    grid-area: newsletter-Titre;
                    padding-bottom: 2vw;
                }
                .newsletter-btn-container {
                    grid-area: newsletter-btn-container;
                    display: flex;
                    justify-content: flex-start;
                    align-items: baseline;
                }
                    .newsletter-Input {
                        width: 70%;
                        height: 30%;
                        border: 1px solid #98989847;
                        border-radius: 14px;
                        padding: 1.5%;
                        font-size: calc(.4em + .6vw);
                        background-color: transparent;
                    }
                    .newsletter-Btn {
                        border: 1px solid #98989847;
                        border-radius: 14px;
                        padding: 1.2% 1.5%;
                        font-size: calc(.4em + .6vw);
                        background-color: transparent;
                        margin-left: 1vw;
                    }
            .footer-social {
                grid-area: footer-social;
                display: grid;
                grid:
                    "social-Titre" 1fr
                    "social-icons" 1fr
                    / 1fr;
            }
                .social-Titre {
                    font-size: calc(.8vh + 2vw);
                }
                .social-icons {
                    display: flex;
                    justify-content: left;
                    align-items: start;
                }
                    .social-liens {
                        padding-right: 3vw;
                    }
                        .social-img {
                            width: calc(3vh + 2vw);
                            height: calc(3vh + 2vw);
                        }

        .footer-Top-Right {
            grid-area: footer-Top-Right;
            display: grid;
            grid:
              "about services" 50%
              "ressources ressources" 50%
              / 1fr 1fr;
            gap: 1vw;
            overflow: hidden;
        }
            .footer-info {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                text-align: center;
            }
            .about {
                grid-area: about;
                display: grid;
                grid:
                  "about-Titre" 30%
                  "ul-footerA" 70%
                  / 1fr;
            }
                .about-Titre {
                    grid-area: about-Titre;
                }
                .ul-footerA {
                    grid-area: ul-footerA;
                }
            .services {
                grid-area: services;
                display: grid;
                grid:
                    "services-Titre" 30%
                    "ul-footerB" 70%
                    / 1fr;
            }
                .services-Titre {
                    grid-area: services-Titre;
                }
                .ul-footerB {
                    grid-area: ul-footerB;
                }
            .ressources {
                grid-area: ressources;
                display: grid;
                grid:
                    "ressources-Titre" 30%
                    "ul-footerC" 70%
                    / 1fr;
                align-items: start;
            }
                .ressources-Titre {
                    grid-area: ressources-Titre;  
                }

                .footer-h2 {
                    font-size: calc(.6vh + 2vw);
                }

                .ul-footerC {
                    grid-area: ul-footerC;
                    display: grid;
                    grid:
                      "li-footerA li-footerB" 1fr
                      "li-footerC li-footerD" 1fr
                      / 1fr 1fr;
                    padding: 0 8vw;
                }
                .scalePlus {
                    transition: all .15s linear;
                }
                .scalePlus:hover {
                    transform: scale(1.01);
                }
                
                    .li-footerA { grid-area: li-footerA; }
                    .li-footerB { grid-area: li-footerB; }
                    .li-footerC { grid-area: li-footerC; }
                    .li-footerD { grid-area: li-footerD; }

                    .li-footer {
                        padding-top: 1vw;
                    }
                        .a-footerInfo {
                            font-weight: 600;
                        }
    .footer-Bottom {
        position: relative;
        grid-area: footer-Bottom;
        display: flex;
        justify-content: space-around;
        align-items: end;
    }
    .container-trait-footer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: start;
    }
        .trait-footer {
            content: "";
            width: 60%;
            height: 2px;
            background-color: #237fbd;
        }
            .footer-liens, .a-footerInfo {
                text-decoration: none;
                color:#000;
            }
            .footer-liens {
                position: relative;  
            }
            

/* .btnTop {
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 4.2vw;
    height: 4.2vw; 
    left: 4vw;
    bottom: 4vw;
    border: 1px solid #98989833;
    border-radius: 50%;
    box-shadow: 1px 3px 6px #4d4d4d22;
    background-color: rgba(250, 250, 250, .2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(2px);
    -moz-backdrop-filter: blur(2px);
    z-index: 99999;
}
    .imgBtnTop {
        fill: #000;
        width: 4vw;
        height: 4vw;      
    } */

@media only screen and (min-width: 768px) and (max-width: 979px) and (orientation: landscape) {

    .ul-navigation {
        font-size: calc(.6em + .8vw);
    }
    .input-search {
        width: 15%;
        font-size: calc(.6em + .6vw);
    }
    .lien-contact {
        width: 20%;
        font-size: calc(.5em + .8vw);
    }

    .section1-A {
        grid:
            "section1-A-Left section1-A-Left" 60%
            "section1-A-Right section1-A-Bottom" 40%
            / 2fr 1fr;
        padding: 0 4vw;
    }
        .section1-A-Left {
            grid:
                "section1-A-Titre" 50%
                "section1-A-Slogan" 15%
                "section1-A-Paragraphe" 35%
                / 1fr;
        }
            .section1-A-Titre {
                font-size: calc(2em + 1.5vw);
            }
            .section1-A-Slogan {
                font-size: calc(1.5em + .8vw);
            }
            .section1-A-Paragraphe {
                font-size: calc(1.2em + .8vw);
            }
        .section1-A-Right {
            padding: 0;
        }
            .section1-A-img {
                width: 90%;
                height: 95%;
            }
        .section1-A-Bottom {
            align-items: center;
        }
            .section1-A-Btn, .section3-Btn {
                font-weight: 500;
                padding: 2.5%;
                font-size: calc(1.1em + 1.1vw);
            }
        
    .section1-B-Service {
        display: grid;
        grid:
            "rdv" 1fr
            "questions" 1fr
            "suivis" 1fr
            / 1fr;
        padding: 2em;
    }
        .section1-card {
            grid:
                "icon card-titre" 60%
                "card-info card-info" 40%
                / 1fr 1fr;
            padding: 2vw;
            
        }
        .icon-container {
            padding-left: 2vw;
        }
        .card-titre {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            font-size: calc(1em + .6vw);
            padding-left: 2vw;
        }
        .card-info {
            font-size: calc(1em + .6vw);
        }
.section1-C {
    grid:
        "section1-C-Top" 20%
        "section1-C-Bottom" 80%
        / 1fr;
}
    .partners-titre {
        font-size: calc(1.2em + 1.2vw);
    }

    .section1-C-Bottom {
        grid:
            "partner1 partner2" 1fr
            "partner3 partner4" 1fr
            "partner5 partner6" 1fr
            / 1fr 1fr;
        gap: 1vw;
    }
        .partner {
            font-size: calc(.8em + 1vw);
        }

/* Contenu de la 2e section */
.section2 {
    grid:
        "section2-Left" 40%
        "section2-Right" 60%
        / 1fr;
    
}
    .section2-Left { 
        align-items: center;
    }
        .section2-img {
            height: 100%;
            width: auto;
        }
    .section2-Right {
        padding: 4vw;
    }
        .section2-Titre {
            justify-content: space-around;
            align-items: center;
            text-align: center;
            grid-area: section2-Titre;
            font-size: calc(1.1em + 1.1vw);
        }
        .section2-Slogan {
            font-size: calc(.9em + .8vw);
        }
        .section2-Paragraphe {
            font-size: calc(.8em + .8vw);
            padding: 2vw 5vw;
        }
    .container-avantage {
        padding: 2vw;
    }
        .avantage {
            font-size: calc(.8em + 1vw);
        }

.section3 {
    grid:
        "section3-Left" 50%
        "section3-Right" 50%
        / 1fr;
}
    .container-trait-section3 {
        align-items: flex-start;
        height: 5vh;
    }
    .section3-img {
        width: auto;
        height: 100%;
    }
.section3-Right { 
    grid:
        "section3-Titre" 10%
        "section3-Paragraphe" 70%
        "section3-container-Btn" 20%
        / 1fr;
}
    .section3-Titre { 
        font-size: calc(1.4em + 1.5vw);
    }
    .section3-Paragraphe {
        font-size: calc(.8em + 1vw);
    }

.section4-Top {
    padding: 4vw;
}
    .section4-Titre {
        text-align: justify;
    }  
.section4-Bottom {
    height: 100%;
    display: grid;
    grid:
        "section4-Right" 50%
        "section4-Left" 50%
        / 1fr;
} 
        .section4-Titre2 {
            font-size: calc(1.2vh + 1.5vw);
        }
        .section4-Slogan {
            font-size: calc(1vh + 1.2vw);
        }
        .section4-Paragraphe {
            font-size: calc(.9vh + 1vw);
            padding: 2vw 4vw;
        }
        .section4-img {
            width: auto;
            height: 100%;
        }

.section5 {
    padding: 4vw;
}
.section5-Top {
    align-items: center;
}
    .section5-Titre {
        font-size: calc(1.5vh + 2vw);
    }
.section5-Bottom {
    grid:
      "map" 1fr
      "gratuit" 1fr
      "medecin" 1fr
      "demande" 1fr
      "communaute" 1fr
      / 1fr;
}
    .card {
        display: grid; 
        grid:
            "caroussel-Titre caroussel-Titre" 40%
            "icon5 liens-caroussel" 60%
            / 1fr 1fr;
        gap: 0 5vw;
    }
        .caroussel-Titre {
            grid-area: caroussel-Titre;
            align-content: center;
            height: 100%;
            font-size: calc(.8vh + 1.2vw);
        }
        
        .icon5 {
            grid-area: icon5;
            justify-self: right;
        }
        .icon-gratuit {
            width: calc(5vh + 2.8vw);
            height: calc(5vh + 2.8vw);
        }
        .liens-caroussel {
            grid-area: liens-caroussel;
            justify-content: left;
        }

.footer-Top {
    grid:
        "footer-Top-Right" 60%
        "footer-Top-Left" 40%
        /  1fr;
}
    .newsletter-Input {
        font-size: calc(.8em + .8vw);
    }
    .newsletter-Btn {
        font-size: calc(.8em + .6vw);
    }

    .footer-Top-Right {
        grid:
          "about services" 55%
          "ressources ressources" 45%
          / 1fr 1fr;
        gap: 5vw 2vw;
    }
        .footer-info {
            overflow: hidden;
        }
            .footer-h2 {
                font-size: calc(1vh + 2vw);
            }
            .ressources {
                align-items: center;
            }
                .ul-footerC {
                    height: 100%;
                }
                    .li-footer {
                        height: 100%;
                    }
                        .a-footerInfo {
                            font-size: calc(.7vh + 2vw);
                        }

}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .container-logo {
        width: 10%;
    }
        .img-logo {
            width: calc(3vh + 1.6vw);
            height: calc(3vh + 1.6vw);
        }
    .ul-navigation {
        font-size: calc(.5em + .6vw);
    }
    .input-search {
        width: 17%;
        font-size: calc(.4em + .4vw);
        padding: 1.5% 0% 1.5% 1.5%;
    }
    .lien-contact {
        width: auto;
        height: auto;
        font-size: calc(.4em + .5vw);
        padding: .5em 1em;
    }

    .section1-A {
        grid:
            "section1-A-Left" 60%
            "section1-A-Right" 30%
            "section1-A-Bottom" 10%
            / 1fr;
        padding: 0 4vw;
    }
        .section1-A-Left {
            grid:
                "section1-A-Titre" 40%
                "section1-A-Slogan" 10%
                "section1-A-Paragraphe" 50%
                / 1fr;
        }
            .section1-A-Titre {
                font-size: calc(1.4em + 1.5vw);
            }
            .section1-A-Slogan {
                font-size: calc(.9em + .8vw);
            }
            .section1-A-Paragraphe {
                display: flex;
                font-size: calc(.8em + .6vw);
                align-items: center;
                justify-content: space-around;
            }
        .section1-A-Right {
            padding: 0;
        }
            .section1-A-img {
                height: 100%;
                width: auto;
            }
        .section1-A-Bottom {
            align-items: center;
        }
            .section1-A-Btn, .section3-Btn {
                font-size: calc(.8em + .8vw);
            }
        
    .section1-B-Service {
        display: grid;
        grid:
            "rdv" 1fr
            "questions" 1fr
            "suivis" 1fr
            / 1fr;
        padding: 4vw;
    }
        .section1-card {
            grid:
                "icon card-titre" 60%
                "card-info card-info" 40%
                / 1fr 1fr;
            padding: 2vw;
            
        }
        .icon-container {
            padding-left: 2vw;
        }
        .card-titre {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            font-size: calc(.8em + .6vw);
            padding-left: 0;
        }
        .card-info {
            font-size: calc(.6em + .6vw);
        }
.section1-C {
    grid:
        "section1-C-Top" 20%
        "section1-C-Bottom" 80%
        / 1fr;
}
    .partners-titre {
        font-size: calc(1.2em + 1.2vw);
    }

    .section1-C-Bottom {
        grid:
            "partner1 partner2" 1fr
            "partner3 partner4" 1fr
            "partner5 partner6" 1fr
            / 1fr 1fr;
        gap: 1vw;
    }
        .partner {
            font-size: calc(.8em + 1vw);
        }

/* Contenu de la 2e section */
.section2 {
    grid:
        "section2-Left" 35%
        "section2-Right" 65%
        / 1fr;
    
}
    .section2-Left { 
        align-items: center;
    }
        .section2-img {
            height: 100%;
            width: auto;
        }
    .section2-Right {
        grid:
            "section2-Titre" 15%
            "section2-Slogan" 10%
            "section2-Paragraphe" 25%
            "section2-grid" 50% 
            / 1fr;
        padding: 1vw 4vw;
    }
        .section2-Titre {
            justify-content: space-around;
            align-items: center;
            text-align: center;
            grid-area: section2-Titre;
            font-size: calc(1em + 1vw);
        }
        .section2-Slogan {
            font-size: calc(.6em + .8vw);
            align-items: center;
            text-align: center;
        }
        .section2-Paragraphe {
            font-size: calc(.6em + 0.6vw);
            padding: 2vw 5vw;
        }
    .container-avantage {
        padding: 2vw;
    }
        .avantage {
            font-size: calc(.6em + .6vw);
            padding: 0 2vw;
        }

.section3 {
    grid:
        "section3-Left" 40%
        "section3-Right" 60%
        / 1fr;
}
.section3-Left {
    padding: 4vw 0 0 0;
    overflow: hidden;
}
    .container-trait-section3 {
        align-items: flex-end;
        height: 2vh;
        opacity: 0;
    }
    .section3-img {
        width: 80%;
    }
.section3-Right { 
    grid:
        "section3-Titre" 10%
        "section3-Paragraphe" 70%
        "section3-container-Btn" 20%
        / 1fr;
    padding: 1vw 4vw;
}
    .section3-Titre { 
        font-size: calc(2vh + 1.5vw);
    }
    .section3-Paragraphe {
        font-size: calc(.6em + .7vw);
        text-align: justify;
    }
.section3-container-Btn {
    align-items: center;
}
.section4-Top {
    padding: 1vw 8vw;
}
    .section4-Titre {
        text-align: justify;
    }  
.section4-Bottom {
    height: 100%;
    display: grid;
    grid:
        "section4-Right" 50%
        "section4-Left" 50%
        / 1fr;
} 
        .section4-Titre2 {
            font-size: calc(1.2vh + 1.5vw);
        }
        .section4-Slogan {
            font-size: calc(1.1vh + 1.2vw);
        }
        .section4-Paragraphe {
            font-size: calc(.9vh + 1vw);
            padding: 2vw 5vw;
        }
        .section4-img {
            width: 85%;
        }

.section5 {
    padding: 4vw;
}
.section5-Top {
    align-items: center;
}
    .section5-Titre {
        font-size: calc(1.5vh + 2vw);
    }
.section5-Bottom {
    grid:
      "map" 1fr
      "gratuit" 1fr
      "medecin" 1fr
      "demande" 1fr
      "communaute" 1fr
      / 1fr;
}
    .card {
        display: grid; 
        grid:
            "caroussel-Titre caroussel-Titre" 40%
            "icon5 liens-caroussel" 60%
            / 1fr 1fr;
        gap: 0 5vw;
    }
        .caroussel-Titre {
            grid-area: caroussel-Titre;
            align-content: center;
            height: 100%;
            font-size: calc(.8vh + 1.2vw);
        }
        
        .icon5 {
            grid-area: icon5;
            justify-self: right;
        }
        .icon-gratuit {
            width: calc(5vh + 2.8vw);
            height: calc(5vh + 2.8vw);
        }
        .liens-caroussel {
            grid-area: liens-caroussel;
            justify-content: left;
        }

.footer-Top {
    grid:
        "footer-Top-Right" 60%
        "footer-Top-Left" 40%
        /  1fr;
}
    .newsletter-Input {
        height: auto;
        font-size: calc(.6em + .8vw);
    }
    .newsletter-Btn {
        font-size: calc(.8em + .6vw);
    }

    .footer-Top-Right {
        grid:
            "about services" 60%
            "ressources ressources" 40%
            / 1fr 1fr;
        gap: 5vw 2vw;
    }
        .footer-info {
            overflow: hidden;
        }
            .footer-h2 {
                font-size: calc(1vh + 2vw);
            }
            .ressources {
                align-items: center;
            }
            .ul-footerC {
                grid:
                    "li-footerA li-footerB" 40%
                    "li-footerC li-footerD" 60%
                    / 1fr 1fr;
                height: 100%;
                }
                    .li-footer {
                        height: 100%;
                    }
                    .li-footerA, .li-footerB, .li-footerC, .li-footerD {
                        padding: 0;
                    }
                        .a-footerInfo {
                            font-size: calc(.7vh + 2vw);
                        }
    .footer-Bottom {
        font-size: calc(.7vh + 1vw);
    }
}

@media screen and (max-width: 320px) {
    /* Styles pour les écrans très compacts */
}