@font-face {
        font-family: CurseCasual;
        src: url("./fonts/CurseCasual.ttf");
}

@font-face {
        font-family: LinuxBiolinum;
        src: url("./fonts/LinBiolinum_R.ttf");
}

@font-face {
        font-family: LinuxBiolinumBold;
        src: url("./fonts/LinBiolinum_RB.ttf");
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: LinuxBiolinum;
    font-size: 1.2em;
    color: #28170b;
}

h1 {
    font-family: CurseCasual;
    text-transform : uppercase;
    letter-spacing: 0.1rem;
    font-size: 2.5em;
    color: #d4aa00;
}

h2 {
    font-family: LinuxBiolinumBold;
    margin-top: 1.5em;
    margin-bottom: 0.2em;
}

#conteneur {
    display: flex;
    width: 100%;
    margin: 0;
    padding:0;
}

#imgmoi {
    display: block;
    margin: auto;
}

#formulaire fieldset {
    border: 2px solid #e84c3d;
    border-radius: 10px;
}

#formulaire legend {
    font-size : 1em;
    color: #88aa00;
}
#formulaire fieldset .remarque { display:none; }
.pagetitle {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.phone span::before {
    content: "cont";
    }
.phone span::after {
    content: "t.fr";
}

.phone img {
    width: 100px;
    height: auto;
    vertical-align: middle;
    margin-right: 1em;
}

#infos {
    width: 100%;
}

#infos h1 {
    display: block;
    background:#ede9e9;
    text-align: center;
    font-size: 0.8em;
    padding: 0.5em;
    margin-top: 1em;
}
#infos p {
    display :block;
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }

.lienacc {
  text-decoration: none;
  padding: 1px 1px 0;
  color: #7E0000;
}

.lienacc:focus, .lienacc:hover, .lienacc:active{
  border-bottom: 1px solid;
  background: ;
}


.liencadre {
    display: block ;
    max-width: 400px;
    margin-top: 4em;
    margin-left: auto;
    margin-right:10%;
    margin-bottom: 2em;
    background: #fff ;
    color: #28170b ;
    line-height: 0.5em ;
    text-decoration: none ;
    text-align:center;
    padding: 4px;
    border: 2px solid #aad400;
    border-radius: 10px;
}
.liencadre:hover, .liencadre:focus, .liencadre:active {
    background: #aad400 ;
}

.beaulien {
    background: #ffcc00 ;
    color: #28170b ;
    text-decoration: none ;
    padding: 1px;
    padding-left: 2px;
    padding-right: 2px;
    margin:1px;
}

.beaulien:hover, .beaulien:focus,  .beaulien:active{
    background: #88aa00 ;
    color: #28170b ;
}

.infobulle {
  position: relative;  /* les .infobulle deviennent référents */
  cursor: help;
}

button {
    display: block ;
    max-width: 400px;
    margin-top: 4em;
    margin-left: auto;
    margin-right:10%;
    margin-bottom: 2em;
    background: #fff ;
    color: #28170b ;
    line-height: 0.5em ;
    text-decoration: none ;
    text-align:center;
    padding: 4px;
    border: 2px solid #aad400;
    border-radius: 10px;
}
button:hover, button:focus, button:active {
    background: #aad400 ;
}

/* on génère un élément :after lors du survol et du focus :*/

.infobulle:hover::after,
.infobulle:focus::after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -2.4em;
  left: 50%;
  transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne */
  background: #fff;
}

.misenavant {
    font-weight: bold;
}

td {
        padding: 2px;
        padding-right:6px;
        border-left: 2px solid #88aa00;
        text-align: left;
      }

#sidebar h2 {
        margin-top: 0;
    }

@media (max-width: 799px) {
    /* votre code ici, pour les écrans de taille < 799 px */
    #menuaccueil{
        display: none;
    }
    #conteneur {
        width: 100%;
        margin:0;
        display: block;
        padding: 1em;
        position: inline;
    }

    #blocdroit {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #header {
        width:100%;
        text-align: center;
/*
        background: url('images/fondHeadmini.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover ;
*/
    }
    #imgh, #imghAc {
        margin-left:1.5em;
        margin-right:-1.5em;
    }
    .retraitAccueil {
        margin-left: -3.5em;
    }
    .floatright {
        float:right;
        max-width: 130px;
        margin-left: 10px;
    }

    .floatleft {
        max-width: 100%;
        margin-right: 10px;
    }

    #titreh, #titrehbaisse {
        text-align: center;
        width: 100%;
        margin-top: -1em;
        margin-left: auto;
        margin-right: auto;
    }

    #titreh h1, #titrehbaisse h1 {
     color: #28170b;
     margin-bottom: 0;
     font-size: 2em;
    }
    #menuaccueilpetit {
        margin-left: 0;
        padding:0;
    }
    #navigation {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #navigation li {
        margin-bottom: 1em;
    }

    #navigation li a h2 {
        font-size: 1em;
    }

    #apropos {
        display: block ;
        background: #fff ;
        color: #28170b ;
        line-height: 1em ;
        text-decoration: none ;
        padding: 4px;
        border: 2px solid #aad400;
        border-radius: 10px;
    }
    #apropos:hover, #apropos:focus, #apropos:active {
        background: #aad400 ;
    }
    #deonto {
        display: block ;
        background: #fff ;
        color:    #28170b;
        line-height: 1em ;
        text-decoration: none ;
        padding: 4px;
        border: 2px solid #aad400;
        border-radius: 10px;
    }
    #deonto:hover, #deonto:focus, #deonto:active {
        background: #aad400 ;}

    #arp {
        display: block ;
        background: #fff ;
        color:    #28170b;
        line-height: 1em ;
        text-decoration: none ;
        padding: 4px;
        border: 2px solid #e84c3d;
        border-radius: 10px;
    }
    #arp:hover, #arp:focus, #arp:active {
        background:#e84c3d ;
    }
    #weekend {
        display: block ;
        background: #fff ;
        color: #28170b ;
        line-height: 1em ;
        text-decoration: none ;
        padding: 4px;
        border: 2px solid #ffcc00;
        border-radius: 10px;
    }
    #weekend:hover, #weekend:focus, #weekend:active {
        background: #ffcc00 ;
    }
    #confs {
        display: block ;
        background: #fff ;
        color: #28170b ;
        line-height: 1em ;
        text-decoration: none ;
        padding: 4px;
        border: 2px solid #37abc8;
        border-radius: 10px;
    }
    #confs:hover, #confs:focus, #confs:active {
        background: #37abc8 ;
    }
    #contact {
        display: block ;
        background: #fff ;
        color: #28170b ;
        line-height: 1em ;
        text-decoration: none ;
        padding: 4px;
        border: 2px solid #aad400;
        border-radius: 10px;
    }
    #contact:hover, #contact:focus, #contact:active {
        background: #aad400 ;
    }
    #sidebar {
        background: #ede9e9 ;
        color: #28170b ;
        line-height: 1em ;
        text-decoration: none ;
        border-radius: 10px;
        padding: 1em;
    }
    .petitcadre {
        float: left;
        width: 30%;
        margin-top:2em;

    }
    #imgmoi {
        width: 100px;
        height: auto;
        margin-right: 1em;
        margin-top: -3em;
    }
    .job{
        text-align: center;}

    #sidebar h2 {
        font-family: KGAllOfMe;
        font-size: 1em;
        margin-top: 0;
    }
    .clicaffic {
        display: none;
    }
    .phone {
        text-decoration: none;
        font-size: 1.5em;
        color: #88aa00;
    }

    .phone img {
        width: 50px;
        height: auto;
        vertical-align: middle;
        margin-right: 0.7em;
    }

    .pagetitle {
        font-size: 1em;
        display: block;
        width: 100%;
        text-align:center ;
    }
    h2 {
        font-size: 1em;
    }
    #button {
        text-align: center;
    }
    #button input {
        font-family: LinuxBiolinum;
        font-size: 1.2em;
    }
    #menuaccueilpetit h1 {
        font-size: 1.2em;
    }
    .principe {
        max-width: 100%;
    }
    #imgCommunes {
        display:none;
    }
}

@media (min-width:800px) {
    #contbis {
        display: flex;
        justify-content: space-evenly;
        width:100%;
    }
    #content {
        flex: 0 0 30%;
    }
    #formulaire {
        flex: 0 0 30%;
    }
    .phone {
        text-decoration: none;
        font-size: 2em;
        color: #88aa00;
    }
    .arp {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
    .floatright {
        float:right;
        margin-left: 10px;
    }
    .floatleft {
        float:left;
        margin-right: 20px;
    }
    .principe {
        float:left;
        margin-right: 10px;
    }
}

@media (min-width: 800px) and (max-width: 1079px) {
    /* votre code ici, pour les écrans de taille comprise entre 700 et 999 px */
    #svg106 { display: none;}

    #blocdroit{
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        align-items: center;
    }
    #header {
        background: url('images/fondHead.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
    }
    #imgh, #imghAc {
        position: absolute;
        width:90px;
        height:190px;
        top: 4em;
        left: 2.5em;
    }

    .imgHead {
        position: relative;
        top: -0.8em;
        left: -1em;
    }

    #titreh {
        width: 100%;
        margin-top:-10em;
        margin-left: 15%;
        text-align:center;
    }

    #titrehbaisse {
        width: 100%;
        margin-top:2em;
        margin-left: 0%;
        text-align:center;
    }


    #titreh h1 {
        font-size: 1.4em;
        color: #28170b;
    }

    #titrehbaisse h1 {
        font-size: 1.3em;
        color: #28170b;
    }

    .pagetitle {
        font-size: 1.3em;
    }

    #titreh p, #titrehbaisse p {
        font-size: 1em;
    }

    #menuaccueil{
        margin-top: -30px;
        text-align:center;
    }
    #menuaccueil p {
        display: block;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        margin-top:2em;
        margin-bottom: 2em;
        color:#88aa00;
        font-size: 0.9em;
    }

    #sidebar {
        position: absolute;
        margin-top: 0;
        width: 140px;
        z-index: 3;
        margin-left: calc(100% - 140px);
        text-align: center;
        }
    .petitcadre {
        background-color: #ede9e9;
        padding-top: 25px;
        padding-bottom: 10px;
        margin-bottom: -20px;
    }

    #imgmoi {
        display: inline;
        width: 100px;
        height: auto;
    }

    .job{
        text-align: center;
    }

    #sidebar h2 {
        text-align: center;
        font-family: KGAllOfMe;
        font-size: 0.8em;
    }
    #sidebar p {
        font-size: 0.7em;
    }

    .clicaffic {
        width: 100%;
        text-align: center;
    }

    .clicaffic a, .clicaffic a:visited {
        outline: none;
        text-decoration: none;
        color: #88aa00;
        font-weight: bold;
    }
    .clicaffic a:hover {
        outline: none;
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        background: #88aa00;
    }
    #masque {
        display:none;
        background-color: #ede9e9;
        padding-left: 10px;
    }
    #sidebar:target #masque {
       display:block
    }
    .masquer {
       display:none;
    }
    #sidebar:target .masquer {
       display:inline;
    }
    #sidebar:target .afficher {
       display:none;
    }

    #menuaccueilpetit {
        width: 70%;
    }
    #menuaccueilpetit h1{
        font-size: 0.7em;
        color: #d4aa00;
        }
    #navigation {
        width: 100%;
        list-style: none;
        padding: 0;
    }

    #navigation li {
        margin-bottom: 0.2em;
        float:left;
        width: 50%;
    }

    #navigation li a {
        padding: 0.1em;
        padding-left: 1.2em;
        font-size: 0.8em;
        margin-right: 0.2em;
    }
    #navigation li a h2{
        font-size: 0.8em;
    }
    #navigation li a p{
        display: block;
        min-height: 4em;
        font-size: 0.8em;
    }
    #apropos {
        display: block ;
        background: #fff ;
        color: #28170b ;
        line-height: 0.4em ;
        text-decoration: none ;
        border: 2px solid #aad400;
        border-radius: 10px;
    }
    #apropos:hover, #apropos:focus, #apropos:active {
        background: #aad400 ;
    }
    #deonto {
        display: block ;
        background: #fff ;
        color:#28170b;
        line-height: 0.4em ;
        text-decoration: none ;
        border: 2px solid #aad400;
        border-radius: 10px;
        margin-top: -0.05em;
    }
    #deonto:hover, #deonto:focus, #deonto:active {
        background: #aad400 ;}

    #arp {
        display: block ;
        background: #fff ;
        color:#28170b;
        line-height: 1em ;
        text-decoration: none ;
        border: 2px solid #e84c3d;
        border-radius: 10px;
    }
    #arp:hover, #arp:focus, #arp:active {
        background:#e84c3d ;
    }
    #weekend {
        display: block ;
        background: #fff ;
        color: #28170b ;
        line-height: 1em ;
        text-decoration: none ;
        border: 2px solid #ffcc00;
        border-radius: 10px;
    }
    #weekend:hover, #weekend:focus, #weekend:active {
        background: #ffcc00 ;
    }
    #confs {
        display: block ;
        background: #fff ;
        color: #28170b ;
        line-height: 1em ;
        text-decoration: none ;
        border: 2px solid #37abc8;
        border-radius: 10px;
    }
    #confs:hover, #confs:focus, #confs:active {
        background: #37abc8 ;
    }
    #contact {
        display: block ;
        background: #fff ;
        color: #28170b ;
        line-height: 0.4em ;
        text-decoration: none ;
        border: 2px solid #aad400;
        border-radius: 10px;
        margin-top: -0.05em;
    }
    #contact:hover, #contact:focus, #contact:active {
        background: #aad400 ;
    }

    .arp {
        font-size: 1em;
    }

    .arp h2 {
        font-size: 1em;
    }
    .floatleft {
        max-width: 100%;
        margin-bottom: 1em;
    }
}

@media (min-width: 1080px) and (max-width: 1304px) {
  /* votre code ici, pour les écrans de taille comprise entre 1000 et 1299 px */
    #menuaccueilpetit { display: none; }
    #blocdroit{
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        align-items: center;
    }
    #header {
        width: 100%;
        background: url('images/fondHead.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
    }
    #imgh, #imghAc {
        position: absolute;
        width:90px;
        height:190px;
        top: 7em;
        left: 4em;
    }
    #imgh .imgHead {
        margin-left:-5em;
    }

    #blocdroit h1 {
        font-size: 1.5em;
    }

    #blocdroit h2 {
        font-size: 1.2em;
    }

    #titreh {
        text-align: center;
        width: 100%;
        margin-top:-9em;
        margin-left:14%;
    }

    #titrehbaisse {
        text-align: center;
        width: 100%;
        margin-top:0em;
        margin-left:-3em;
    }

    #imghAc .imgHead {
        margin-top:-2em;
    }

    #titreh h1, #titrehbaisse h1{
        font-size: 2em;
        color: #28170b;
    }

    #titreh p, #titrehbaisse p {
        font-size: 1.5em;
    }

    #menuaccueil{
        margin-top: 4em;
        margin-left: -10vw;
        text-align:center;
    }
    #menuaccueil p {
        display: block;
        width: 600px;
        margin-left: auto;
        margin-right: auto;
        color:#88aa00;
    }
    #svg106 {
        margin-top:2em;
        margin-left:6em;
    }
    #sidebar {
        position: absolute;
        margin-top: 0;
        width: 219px;
        z-index: 3;
        margin-left: calc(100% - 219px);
    }
    .petitcadre {
        background-color: #ede9e9;
        padding-top: 25px;
        padding-left: 22px;
        padding-bottom: 10px;
        margin-bottom: -20px;
    }

    #imgmoi {
        display: inline;
    }

    .job{
        text-align: center;
    }

    #sidebar h2 {
        text-align: center;
        font-family: KGAllOfMe;
        font-size: 0.8em;
    }
    #sidebar p {
        font-size: 0.7em;
    }

    .clicaffic {
        width: 100%;
        text-align: center;
    }
    .clicaffic a, .clicaffic a:visited {
        outline: none;
        text-decoration: none;
        color: #88aa00;
        font-weight: bold;
    }
    .clicaffic a:hover {
        outline: none;
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        background: #88aa00;
    }
    #masque {
        display:none;
        background-color: #ede9e9;
        padding: 10px;
    }
    #sidebar:target #masque {
       display:block
    }
    .masquer {
       display:none;
    }
    #sidebar:target .masquer {
       display:inline;
    }
    #sidebar:target .afficher {
       display:none;
    }
    .floatleft {
        float:left;
        max-width:50%;
        margin-right: 20px;
    }
    .conf {
        margin-top: -0.5em;
    }
}

@media (min-width: 1305px) {
    /* votre code ici, pour les écrans de taille supérieure à 1300 px */
    #conteneur {min-height: 100%}
    #menuaccueilpetit {
        display: none;
    }
    #blocdroit{
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        align-items: center;
        }
    #header {
        width: 100%;
        background: url('images/fondHead.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
    }
    #imgh, #imghAc {
        position: absolute;
        width:90px;
        height:190px;
        top: 7em;
        left: calc(50% - 650px);
    }

    #titreh, #titrehbaisse {
        text-align: center;
        width: 100%;
        margin-top: 3em;
    }


    #titreh h1, #titrehbaisse h1{
        font-size: 3em;
        color: #28170b;
    }

    #titreh p, #titrehbaisse p {
        font-size: 1.5em;
    }

    #menuaccueil{
        margin-top: 2em;
        text-align:center;
    }
    #menuaccueil p {
        margin-bottom: 4em;
        color:#88aa00;
    }
    #svg106 {
        border: 1px dashed #d4aa00;
    }
    #sidebar {
        background-color: #ede9e9;
        padding: 5px;
        padding-top:15px;
        width: 219px;
    }
    #masque {
        padding: 1em;
    }
    .job{
        text-align: center;
    }

    #sidebar h2 {
        text-align: center;
        font-family: KGAllOfMe;
        font-size: 0.8em;
    }
    #sidebar p {
        font-size: 0.8em;
    }
    #sidebar .clicaffic {
        display: none;
    }
    .imgHead {
        margin-top:1em;
    }
    .arp {
        max-width: 1100px;
    }
    #contbis {
        max-width: 67%;
    }
}