/* Mise à zéro : */
*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@media (max-width: 480px) {
    

    body {
        background: #333;
        font-family: Arial, Helvetica, sans-serif;
        height: 100vh;
        background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('fond2.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: relative;
        overflow-x: hidden;
        background-position: left;
    }
    
    .TITRE {
        position: absolute;
        top: 20%;
        text-align: center;
    }
    
    h1 {
        text-transform: uppercase; /* MAJUSCULE*/
        font-size: 70px;
        color: #f1f1f1;
        font-family: Abril fatface, sans-serif;
    }

    h2 {
        text-transform: uppercase; /* MAJUSCULE*/
        font-size: 30px;
        color: #f1f1f1;
        font-family: Abril fatface, sans-serif;
    }

    
    h1 span {
        position: relative; /*Animation*/
    }
    .container-btns {
        position: relative;
        top: 50px;
    }
    
    .btn-first { /* Bouttons*/ 
        border: 2px solid #f1f1f1;
        outline: none;
        background: transparent; 
        font-size: 24px;
        padding: 11px;
        width: 300px;
        color: #f1f1f1;
        cursor: pointer;
        margin: 10px;
        margin-right: auto;
    
    }
    
    /*.btn-first:nth-child(1){ //1er boutton//
        margin-right: auto; 
    }*/

    
    .link
    {
      color:#f1f1f1  ;
      text-decoration: none ;
    }
    .link:hover
    {
        color :#333 ;
    }
    
    .btn-first:hover { /*Quand on survole les boutons*/
        transition: all 0.3s ease-in-out;
        background: #f1f1f1;
        color: #333;
    }
    
    /* Effet de style : 2 lignes (l1 et l2) au début du site web*/ 
    .lignes {
        position: absolute;
        top: 11%;
        left: 5%;
    }
    .l1 {
        width: 250px;
        height: 3px;
        background: #f1f1f1;
        border-radius: 5px;
    }
    .l2 {
        width: 140px;
        height: 3px;
        background: #f1f1f1;
        border-radius: 5px;
        position: relative;
        top: 20px;
    }
    
    .logo {
        position: absolute; /* On déplace le logo là on le désire*/
        right: 2.9%;
        bottom: 4%;
        width: 150px;
        height: auto;
        cursor: pointer;
    }
    
    ul {
        list-style:none;
        float:right;
        display: flex;
        margin-top: 20px;
    }
    
    ul li a {
        text-decoration :none;
        color :#f1f1f1;
        padding : 10px 20px;
        text-transform: uppercase;
        border:1px solid transparent;
        margin :10px ;
        font-weight :500;
        transition:0.6s ease;
    }
    
    .ul li a :hover {
        background:#f1f1f1;
        color : #333;
    }
    
    ul li.active a{
        background: #f1f1f1;
        color:#333;
    }
    
    .principale{
        max-width:114rem;
        margin:0 auto ;
    }
}

@media (min-width: 481px) and  (max-width: 700px) {
    body {
        background: #333;
        font-family: Arial, Helvetica, sans-serif;
        height: 100vh;
        background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('fond2.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: relative;
        overflow-x: hidden;
        background-position: left;
    }
    
    .TITRE {
        position: absolute;
        top: 20%;
        text-align: center;
    }
    
    h1 {
        text-transform: uppercase; /* MAJUSCULE*/
        font-size: 70px;
        color: #f1f1f1;
        font-family: Abril fatface, sans-serif;
    }

    h2 {
        text-transform: uppercase; /* MAJUSCULE*/
        font-size: 30px;
        color: #f1f1f1;
        font-family: Abril fatface, sans-serif;
    }

    
    h1 span {
        position: relative; /*Animation*/
    }
    .container-btns {
        position: relative;
        top: 50px;
    }
    
    .btn-first { /* Bouttons*/ 
        border: 2px solid #f1f1f1;
        outline: none;
        background: transparent; 
        font-size: 24px;
        padding: 11px;
        width: 300px;
        color: #f1f1f1;
        cursor: pointer;
        margin: 10px;
        margin-right: auto;
    
    }
    
    /*.btn-first:nth-child(1){ //1er boutton//
        margin-right: auto; 
    }*/

    
    .link
    {
      color:#f1f1f1  ;
      text-decoration: none ;
    }
    .link:hover
    {
        color :#333 ;
    }
    
    .btn-first:hover { /*Quand on survole les boutons*/
        transition: all 0.3s ease-in-out;
        background: #f1f1f1;
        color: #333;
    }
    
    /* Effet de style : 2 lignes (l1 et l2) au début du site web*/ 
    .lignes {
        position: absolute;
        top: 11%;
        left: 5%;
    }
    .l1 {
        width: 250px;
        height: 3px;
        background: #f1f1f1;
        border-radius: 5px;
    }
    .l2 {
        width: 140px;
        height: 3px;
        background: #f1f1f1;
        border-radius: 5px;
        position: relative;
        top: 20px;
    }
    
    .logo {
        position: absolute; /* On déplace le logo là on le désire*/
        right: 2.9%;
        bottom: 4%;
        width: 150px;
        height: auto;
        cursor: pointer;
    }
    
    ul {
        list-style:none;
        float:right;
        display: flex;
        margin-top: 20px;
    }
    
    ul li a {
        text-decoration :none;
        color :#f1f1f1;
        padding : 10px 20px;
        text-transform: uppercase;
        border:1px solid transparent;
        margin :10px ;
        font-weight :500;
        transition:0.6s ease;
    }
    
    .ul li a :hover {
        background:#f1f1f1;
        color : #333;
    }
    
    ul li.active a{
        background: #f1f1f1;
        color:#333;
    }
    
    .principale{
        max-width:114rem;
        margin:0 auto ;
    }
}


@media (min-width: 701px) and (max-width: 1200px) {
    body {
        background: #333;
        font-family: Arial, Helvetica, sans-serif;
        height: 100vh;
        background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('fond2.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        overflow-x: hidden;
    }
    
    .TITRE {
        position: absolute;
        top: 30%;
        left: 5%;
    }
    
    h1 {
        text-transform: uppercase; /* MAJUSCULE*/
        font-size: 70px;
        color: #f1f1f1;
        font-family: Abril fatface, sans-serif;
    }

    h2 {
        text-transform: uppercase; /* MAJUSCULE*/
        font-size: 50px;
        color: #f1f1f1;
        font-family: Abril fatface, sans-serif;
    }

    h1 span {
        position: relative; /*Animation*/
    }
    .container-btns {
        position: relative;
        top: 50px;
    }
    
    .btn-first { /* Bouttons*/ 
        border: 2px solid #f1f1f1;
        outline: none;
        background: transparent; 
        font-size: 24px;
        padding: 11px;
        width: 300px;
        color: #f1f1f1;
        cursor: pointer;
    
    }
    
    .btn-first:nth-child(1){ /*1er boutton*/
        margin-right: 30px; /* Décaler les deux boutons - marge de 30pixels à droite*/
    }
    
    .link
    {
      color:#f1f1f1  ;
      text-decoration: none ;
    }
    .link:hover
    {
        color :#333 ;
    }
    
    .btn-first:hover { /*Quand on survole les boutons*/
        transition: all 0.3s ease-in-out;
        background: #f1f1f1;
        color: #333;
    }
    
    /* Effet de style : 2 lignes (l1 et l2) au début du site web*/ 
    .lignes {
        position: absolute;
        top: 6%;
        left: 5%;
    }
    .l1 {
        width: 250px;
        height: 3px;
        background: #f1f1f1;
        border-radius: 5px;
    }
    .l2 {
        width: 140px;
        height: 3px;
        background: #f1f1f1;
        border-radius: 5px;
        position: relative;
        top: 20px;
    }
    
    .logo {
        position: absolute; /* On déplace le logo là on le désire*/
        right: 2.9%;
        bottom: 4%;
        width: 100px;
        height: 100px;
        cursor: pointer;
    }
    
    ul {
        list-style:none;
        float:right;
        display: flex;
        margin-top: 20px;
    }
    
    ul li a {
        text-decoration :none;
        color :#f1f1f1;
        padding : 10px 20px;
        text-transform: uppercase;
        border:1px solid transparent;
        margin :10px ;
        font-weight :500;
        transition:0.6s ease;
    }
    
    .ul li a :hover {
        background:#f1f1f1;
        color : #333;
    }
    
    ul li.active a{
        background: #f1f1f1;
        color:#333;
    }
    
    .principale{
        max-width:114rem;
        margin:0 auto ;
    }
}

@media (min-width: 1201px) {
    body {
        background: #333;
        font-family: Arial, Helvetica, sans-serif;
        height: 100vh;
        background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('fond2.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        overflow-x: hidden;
    }
    
    .TITRE {
        position: absolute;
        top: 30%;
        left: 5%;
    }
    
    h1 {
        text-transform: uppercase; /* MAJUSCULE*/
        font-size: 80px;
        color: #f1f1f1;
        font-family: Abril fatface, sans-serif;
    }

    h2 {
        text-transform: uppercase; /* MAJUSCULE*/
        font-size: 60px;
        color: #f1f1f1;
        font-family: Abril fatface, sans-serif;
    }

    h1 span {
        position: relative; /*Animation*/
    }
    .container-btns {
        position: relative;
        top: 50px;
    }
    
    .btn-first { /* Bouttons*/ 
        border: 2px solid #f1f1f1;
        outline: none;
        background: transparent; 
        font-size: 24px;
        padding: 11px;
        width: 300px;
        color: #f1f1f1;
        cursor: pointer;
    
    }
    
    .btn-first:nth-child(1){ /*1er boutton*/
        margin-right: 30px; /* Décaler les deux boutons - marge de 30pixels à droite*/
    }
    
    .link
    {
      color:#f1f1f1  ;
      text-decoration: none ;
    }
    .link:hover
    {
        color :#333 ;
    }
    
    .btn-first:hover { /*Quand on survole les boutons*/
        transition: all 0.3s ease-in-out;
        background: #f1f1f1;
        color: #333;
    }
    
    /* Effet de style : 2 lignes (l1 et l2) au début du site web*/ 
    .lignes {
        position: absolute;
        top: 6%;
        left: 5%;
    }
    .l1 {
        width: 250px;
        height: 3px;
        background: #f1f1f1;
        border-radius: 5px;
    }
    .l2 {
        width: 140px;
        height: 3px;
        background: #f1f1f1;
        border-radius: 5px;
        position: relative;
        top: 20px;
    }
    
    .logo {
        position: absolute; /* On déplace le logo là on le désire*/
        right: 2.9%;
        bottom: 4%;
        width: 150px;
        height: auto;
        cursor: pointer;
    }
    
    ul {
        list-style:none;
        float:right;
        display: flex;
        margin-top: 20px;
    }
    
    ul li a {
        text-decoration :none;
        color :#f1f1f1;
        padding : 10px 20px;
        text-transform: uppercase;
        border:1px solid transparent;
        margin :10px ;
        font-weight :500;
        transition:0.6s ease;
    }
    
    .ul li a :hover {
        background:#f1f1f1;
        color : #333;
    }
    
    ul li.active a{
        background: #f1f1f1;
        color:#333;
    }
    
    .principale{
        max-width:114rem;
        margin:0 auto ;
    }
}