.lien-bouton-accueil{
    color: white;
    text-decoration: none;
}

.lien-bouton-accueil:hover{
    color:white;
    text-decoration: none;
}

.lien-bouton-accueil:visited{
    color:white;
    text-decoration: none;
}

.lien-site{
    color: white;
    text-decoration: none;
}

.lien-site:hover{
    color:white;
    text-decoration: underline;
}

.lien-site:visited{
    color:white;
    text-decoration: underline;
}

.lien-site-noir{
    color: black;
    text-decoration: none;
}

.lien-site-noir:hover{
    color:black;
    text-decoration: underline;
}

.lien-site-noir:visited{
    color:black;
    text-decoration: underline;
}

.lien-site-vert{
    color: #50c50a;
    text-decoration: none;
}

.lien-site-vert:hover{
    color:#50c50a;
    text-decoration: underline;
}

.lien-site-vert:visited{
    color:#50c50a;
    text-decoration: underline;
}

.lien-accueil{
    color: #50c50a;
    text-decoration: none;
}

.lien-accueil:hover{
    color:#50c50a;
    text-decoration: underline;
}

label {
  display: inline-block;
  width: 34%;
  text-align: left;
}

input, select, textarea{
    font-family:arial;
    font-size:16px;
    width:60%;
    line-height:22px;
}


@media all and (min-width: 800px)
{
    /* Règles CSS pour les pages Web */

    h1{
    font-family:arial;
    font-size: 45px;
    color: white;
    font-weight: 50;
    }

    h2.ml{
    font-family:arial;
    color: #50c50a;
    }

    h2.desc{
    font-family:arial;
    color: #50c50a;
    }

    #section0 {
    text-align: center;
    width: 100%;
    margin-top: 80px;
    }

    #section0-1 {
    text-align: justify;
    font-family:arial;
    max-width: 1080px;
    width: 95%;
    display: inline-block;
    }

    /* Part 1 */
    #section1 {
    text-align: center;
    width: 100%;
    margin-top: 80px;
    }

    #section1-1{
        max-width: 1080px;
        width: 95%;
        background-color: #50c50a;
        height: 500px;
        display: inline-flex;

    }

    #previous{
        /*background-color: red;*/
        width:50px;
    }

    #previous img{
        height: 30px;
        position:relative;
        top:45%;
        opacity:0.5;
    }


    #frame1{
        width: 100%;
        position: relative;
        padding-top:200px;
        opacity: 0;
    }

    #frame2{
        width: 100%;
        position: relative;
        padding-top:200px;
        opacity: 0;
        display: none;
    }

    #frame3{
        width: 100%;
        position: relative;
        padding-top:200px;
        opacity: 0;
        display: none;
    }

    #frame4{
        width: 100%;
        position: relative;
        padding-top:200px;
        opacity: 0;
        display: none;
    }

     #frame5{
        width: 100%;
        position: relative;
        padding-top:200px;
        opacity: 0;
        display: none;
    }

     #frame6{
        width: 100%;
        position: relative;
        padding-top:200px;
        opacity: 0;
        display: none;
    }

    #textFrame{
        line-height:30px;
        font-family:arial;
        font-size:18px;
        color:white;
    }

    #indicateur{
     position:absolute;
     bottom:0px;
     /*background-color: red;*/
     height:50px;
     width:100%;
     /*display: none;*/
    }

    #indicateur img{
        padding-left: 4px;
        padding-right: 4px;
    }

    #next{
        /*background-color: blue;*/
        width: 50px;
    }

    #next img{
        height: 30px;
        position:relative;
        top:45%;
        opacity:0.5;
    }
    /* Fin Part 1 */

    /* Part 2 */
    #section2 {
    text-align: center;
    background-color: #eee;
    width: 100%;
    margin-top: 80px;
    }

    #section2W {
    text-align: center;
    background-color: #fff;
    width: 100%;
    margin-top: 0px;
    }

    #section2-1{
        max-width: 1080px;
        width: 95%;
        text-align: center;
        height: 200px;
        font-family: arial;
        font-size: 29px;
        font-weight: 300;
        color: black;
        padding-top: 80px;
        display: inline-block;
    }

    #section2W-1{
        max-width: 1080px;
        width: 95%;
        text-align: center;
        height: 50px;
        font-family: arial;
        font-size: 16px;
        /*font-weight: 300;*/
        color: black;
        padding-top: 0px;
        display: inline-block;

    }

    /* Fin Part 2*/

    /* Part 3 */
    #section3 {
    text-align: center;
    /*background-color: #ddd;*/
    width: 100%;
    /*height: 200px;*/
    margin-top: 80px;
    }

    #section3-1{
        max-width: 1080px;
        width: 95%;
        /*background-color: red;*/
        /*height: 200px;*/
        display: -webkit-flex;
        display: inline-flex;

    }

    .classic2{
        -webkit-flex: 1;
        min-width: 250px;
        height: 200px;
        font-family: arial;
        font-size: 16px;

    }

    .classic3{
        -webkit-flex: 1;
        min-width: 250px;
        height: 200px;
        font-family: arial;
        font-size: 16px;

    }

    .classic4{
        -webkit-flex: 1;
        min-width: 150px;
        height: 200px;
        font-family: arial;
        font-size: 16px;

    }

    .classic5{
        -webkit-flex: 1;
        min-width: 120px;
        height: 200px;
        font-family: arial;
        font-size: 16px;

    }

    .classic6{
        -webkit-flex: 1;
        min-width: 120px;
        height: 200px;
        font-family: arial;
        font-size: 16px;

    }
    /* Fin Part 3*/

    /* Part 4 */
    #section4 {
    text-align: center;
    width: 100%;
    margin-top: 80px;
    }

    #section4-1{
        max-width: 1080px;
        width: 95%;
        background-color: #50c50a;
        display: inline-block;
        font-family:arial;
        font-size:16px;
        color: white;
        text-align: center;
        padding-bottom: 40px;
        padding-top: 40px;


    }
    #section4-2{
        max-width: 1080px;
        width: 95%;
        display: inline-block;
        font-family:arial;
        font-size:16px;
        color: black;
        text-align: center;
        padding-bottom: 20px;
        padding-top: 20px;

    }
    #section4-3{
        max-width: 1080px;
        width: 95%;
        background-color: #eee;
        display: inline-block;
        font-family:arial;
        font-size:24px;
        color: black;
        text-align: center;
        padding-bottom: 20px;
        padding-top: 20px;

    }
    /* Fin Part 4 */

    /* Part 5*/
    #section5 {
    text-align: center;
    background-color: #fff;
    width: 100%;
    margin-top: 50px;
    }

    #section5-1{
        max-width: 1080px;
        width: 95%;
        text-align: justify;
        height: 50px;
        font-family: arial;
        font-size: 12px;
        /*font-weight: 300;*/
        color: black;
        padding-top: 0px;
        display: inline-block;

    }
    /* Fin Part 5*/

    /* Tableau tarifs */
    table.tarifs {
        max-width: 1080px;
        width: 95%;
        border-collapse: collapse;
        font-family: arial;
        font-size: 15px;
        margin: 0 auto;
    }
    table.tarifs th {
        background-color: #50c50a;
        color: white;
        padding: 14px 10px;
        text-align: center;
        font-weight: bold;
        border: 1px solid #50c50a;
    }
    table.tarifs td {
        padding: 12px 10px;
        text-align: center;
        border: 1px solid #ddd;
    }
    table.tarifs td.left {
        text-align: left;
    }
    table.tarifs tr:nth-child(even) td {
        background-color: #f8f8f8;
    }

    /* Formulaire devis */
    .form-devis {
        max-width: 700px;
        width: 95%;
        margin: 0 auto;
        font-family: arial;
        text-align: left;
    }
    .form-devis label {
        display: block;
        width: 100%;
        margin-top: 14px;
        margin-bottom: 4px;
        font-size: 14px;
        color: #333;
    }
    .form-devis input,
    .form-devis select,
    .form-devis textarea {
        width: 100%;
        padding: 9px 10px;
        font-family: arial;
        font-size: 15px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }
    .form-devis textarea {
        min-height: 110px;
        resize: vertical;
    }
    .form-devis button {
        margin-top: 22px;
        background-color: #50c50a;
        color: white;
        border: none;
        padding: 12px 32px;
        font-family: arial;
        font-size: 16px;
        cursor: pointer;
        border-radius: 3px;
    }
    .form-devis button:hover {
        background-color: #3fa008;
    }
    .form-devis .ligne-2col {
        display: flex;
        gap: 16px;
    }
    .form-devis .ligne-2col > div { flex: 1; }
}

@media all and (max-width: 799px)
{
    /* Règles CSS pour les mobiles */

    h1{
    font-family:arial;
    font-size: 22px;
    color: white;
    padding-bottom: 20px;
    }

    h1.bdc{
    font-family:arial;
    color: black;
    }

    h2.ml{
    font-family:arial;
    color: #50c50a;
    }

    h2.desc{
    font-family:arial;
    color: #50c50a;
    }

    #section0 {
    text-align: center;
    width: 100%;
    margin-top: 50px;
    }

    #section0-1 {
    text-align: justify;
    font-family:arial;
    max-width: 1080px;
    width: 95%;
    display: inline-block;
    }

    /* Part 1 */
    #section1 {
    text-align: center;
    width: 100%;
    margin-top: 50px;
    }

    #section1-1{
        max-width: 1080px;
        width: 95%;
        background-color: #50c50a;
        height: 350px;
        display: inline-flex;

    }

    #previous{
        /*background-color: red;*/
        width:50px;
    }

    #previous img{
        height: 30px;
        position:relative;
        top:45%;
        opacity:0.5;
    }

    #frame1{
        width: 100%;
        position: relative;
        padding-top:85px;
        opacity: 0;
    }

    #frame2{
        width: 100%;
        position: relative;
        padding-top:85px;
        opacity: 0;
        display: none;
    }

    #frame3{
        width: 100%;
        position: relative;
        padding-top:85px;
        opacity: 0;
        display: none;
    }

    #frame4{
        width: 100%;
        position: relative;
        padding-top:85px;
        opacity: 0;
        display: none;
    }

    #frame5{
        width: 100%;
        position: relative;
        padding-top:85px;
        opacity: 0;
        display: none;
    }

    #frame6{
        width: 100%;
        position: relative;
        padding-top:85px;
        opacity: 0;
        display: none;
    }

    #textFrame{
        line-height:24px;
        font-family:arial;
        font-size:14px;
        color:white;
    }

    #indicateur{
     position:absolute;
     /*display: none;*/
     bottom:0px;
     /*background-color: yellow;*/
     height:50px;
     width:100%;
    }

    #indicateur img{
        padding-left: 4px;
        padding-right: 4px;
    }

    #next{
        /*background-color: blue;*/
        width: 50px;
    }

    #next img{
        height: 30px;
        position:relative;
        top:45%;
        opacity:0.5;
    }
    /* Fin Part 1 */

    /* Part 2 */
    #section2 {
    text-align: center;
    background-color: #eee;
    width: 100%;
    /*height: 200px;*/
    margin-top: 50px;
    }

    #section2W {
    text-align: center;
    background-color: #fff;
    width: 100%;
    /*height: 200px;*/
    margin-top: 0px;
    }

    #section2-1{
        max-width: 800px;
        width: 95%;
        /*background-color: red;*/
        height: 200px;
        display: inline-block;
        font-family: arial;
        font-size: 20px;
        font-weight: 500;
        color: black;
        padding-top: 80px;
    }

    #section2W-1{
        max-width: 800px;
        width: 95%;
        /*background-color: red;*/
        height: 50px;
        display: inline-block;
        font-family: arial;
        font-size: 16px;
        /*font-weight: 500;*/
        color: black;
        padding-top: 0px;

    }
    /* Fin Part 2*/

    /* Part 3 */
    #section3 {
    text-align: center;
    /*background-color: #ddd;*/
    width: 100%;
    /*height: 200px;*/
    margin-top: 80px;
    }

    #section3-1{
        max-width: 1080px;
        width: 95%;
        /*background-color: red;*/
        /*height: 200px;*/
        display: -webkit-flex;
        display: inline-block;

    }

    .classic2{
        -webkit-flex: 1;
        min-width: 250px;
        height: 240px;
        font-family: arial;
        font-size: 16px;
    }

    .classic3{
        -webkit-flex: 1;
        min-width: 250px;
        height: 240px;
        font-family: arial;
        font-size: 16px;
    }

    .classic4{
        -webkit-flex: 1;
        min-width: 180px;
        height: 240px;
        font-family: arial;
        font-size: 16px;
    }

    .classic5{
        -webkit-flex: 1;
        min-width: 150px;
        height: 240px;
        font-family: arial;
        font-size: 16px;
    }

    .classic6{
        -webkit-flex: 1;
        min-width: 150px;
        height: 240px;
        font-family: arial;
        font-size: 16px;
    }
    /* Fin Part 3*/

    /* Part 4 */
    #section4 {
    text-align: center;
    width: 100%;
    margin-top: 50px;
    }

    #section4-1{
        max-width: 1080px;
        width: 95%;
        background-color: #50c50a;
        display: inline-block;
        font-family:arial;
        font-size:16px;
        color: white;
        padding-top: 20px;
        padding-bottom: 30px;

    }

    #section4-2{
        max-width: 1080px;
        width: 95%;
        display: inline-block;
        font-family:arial;
        font-size:16px;
        color: black;
        padding-top: 20px;
        padding-bottom: 20px;

    }

    #section4-3{
        max-width: 1080px;
        width: 95%;
        background-color: #eee;
        display: inline-block;
        font-family:arial;
        font-size:24px;
        color: black;
        text-align: center;
        padding-bottom: 20px;
        padding-top: 20px;

    }
    /* Fin Part 4 */

    /* Tableau tarifs mobile */
    table.tarifs {
        max-width: 1080px;
        width: 95%;
        border-collapse: collapse;
        font-family: arial;
        font-size: 13px;
        margin: 0 auto;
    }
    table.tarifs th {
        background-color: #50c50a;
        color: white;
        padding: 10px 6px;
        text-align: center;
        font-weight: bold;
        border: 1px solid #50c50a;
    }
    table.tarifs td {
        padding: 8px 6px;
        text-align: center;
        border: 1px solid #ddd;
    }
    table.tarifs td.left { text-align: left; }
    table.tarifs tr:nth-child(even) td { background-color: #f8f8f8; }

    /* Formulaire devis mobile */
    .form-devis {
        max-width: 700px;
        width: 95%;
        margin: 0 auto;
        font-family: arial;
        text-align: left;
    }
    .form-devis label {
        display: block;
        width: 100%;
        margin-top: 14px;
        margin-bottom: 4px;
        font-size: 14px;
        color: #333;
    }
    .form-devis input,
    .form-devis select,
    .form-devis textarea {
        width: 100%;
        padding: 9px 10px;
        font-family: arial;
        font-size: 15px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }
    .form-devis textarea {
        min-height: 110px;
        resize: vertical;
    }
    .form-devis button {
        margin-top: 22px;
        background-color: #50c50a;
        color: white;
        border: none;
        padding: 12px 32px;
        font-family: arial;
        font-size: 16px;
        cursor: pointer;
        border-radius: 3px;
        width: 100%;
    }
    .form-devis button:hover { background-color: #3fa008; }
    .form-devis .ligne-2col { display: block; }
}