html {
        font-family:Arial, Helvetica, sans-serif;
        font-size: 16px;
    }
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto;
        margin: 0; 
    	background-color: #fff;
    } 
     #wrapper {
        width: 100%;            
        max-width: 1920px;      
        margin:auto;    
        position: relative;
    } 
    #wrapper:before,
    #wrapper:after {
        content: " ";
        display: table;
    }
    #wrapper:after {
        clear: both;
    }   
    h1 {        
        color:#c0c;
		text-align:center;
        font-family:OpenSans, Verdana, Arial, sans-serif;
        font-weight: normal;
    }   
    h2 {
        font-family:OpenSans, Verdana, Arial, sans-serif;       
        font-weight: normal;
        color:#63f;
    }
    h3 {
        font-family:OpenSans, Verdana, Arial, sans-serif;       
        font-weight: normal;
        color:#090;
    }
    h4 {        
        font-weight: normal;
        color: #909;
    }
    h5 {
        font-family:OpenSans, Verdana, Arial, sans-serif;        
        font-weight: normal;
        color: #930;
    }    
    h6 {
        font-family: OpenSans, Verdana, Arial, sans-serif;
        font-style: italic;
        font-weight: normal;
        font-size: 0.9rem;
    }
    p {
        color: #202; 
    }	
    header, nav, section, article, aside, footer, .left, .right, .paragraph {        
        float:left;
        width: 100%;               
    } 
    section, aside, footer {        
        padding:0 6px;               
    } 
    footer {
    	clear: both;
    } 
    header {        
    }
    header:before {
        content: "";
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;           
        bottom:0;
        background-color: #606;            
        background-image:url(images/gonzesse_crop_gauche_c2.svg), url(images/arabesques_rose.svg);
        background-repeat: no-repeat, repeat;
        background-position: 0% 6rem, left top;
        background-size: 0%, 200%;
        z-index: -1;           
        }
    header img {
    	width:100%;
		float:right;
    }
    toplinks {
        float: right;
    }
    toplinks li{
        display:inline; 
    }    
    toplinks li a img{
        max-width: 48px;
        margin-right: 1rem;
    }
    nav{
		float:left;		
		width:100%;	
        /*background-color: rgba(255, 255, 255, 0.5);*/
    }
    nav ul {
    	list-style: none;
    	padding:0 1rem;
		margin:0;
    }
    nav ul li {
    	text-align:center; /* centrage horizontal */
        list-style-type: none;        		    
    }
    nav ul li a {          
        color:#fff;        
        background-clip:padding-box;
        background-color: #90c;
        border: solid 3px #606;
        border-radius: 1rem;
        font-size: 1.2rem;
        font-weight: normal;            
        padding: 0 6px;
        height:4rem;
        width:100%;         
        float:left;
        line-height: 4rem;         
        text-decoration: none;
        margin-bottom: 0.3rem;							
    }
    nav ul li a span {
        vertical-align:middle;
        display:inline-block;
        line-height:normal; /* on rétablit le line-height */
        width:auto;
    }
    nav ul li:hover a {
	   background-color: rgba(137, 0, 255, 1);
    }
    section {
    	background-color: #fff;
        border-top: solid 3px #606;
        border-bottom: solid 3px #606;
    }   
    article ul {        
        padding: 0;
    }
    article ul li{  
        list-style-type: none;        
        background-image: url(images/main2.svg);
        background-repeat: no-repeat;
        background-position: 0 0;
        padding-left: 4rem;
        margin-bottom: 0.5rem;
        }    
    .image_oeil_etroit {
        width: 198px;
        height: 99px;
        background-image: url(images/yeux_etroits.svg);
        background-size: 200% 100%;
        background-position: left;          
    }
    .image_oeil_etroit:hover {
        background-position: right;
    }
    .image_oeil_agrandir {
        width: 198px;
        height: 99px;
        background-image: url(images/oeil_agrandir.svg);
        background-size: 200% 100%;
        background-position: left;         
    }
    .image_oeil_agrandir:hover {
        background-position: right;
    }
    .image_oeil_amande {
        width: 198px;
        height: 99px;
        background-image: url(images/oeil_amande.svg);
        background-size: 200% 100%;
        background-position: left;         
    }
    .image_oeil_amande:hover {
       background-position: right;
    }
    .image_oeil_embellir {
        width: 198px;
        height: 99px;
        background-image: url(images/oeil_embellir.svg);
        background-size: 200% 100%;
        background-position: left;          
    }
    .image_oeil_embellir:hover {
        background-position: right;
    }
    .image_oeil_tombant {
        width: 198px;
        height: 99px;
        background-image: url(images/oeil_tombant.svg);
        background-size: 200% 100%;
        background-position: left;          
    }
    .image_oeil_tombant:hover {
        background-position: right;
    }
    .image_depigment {
    width: 198px;
    height: 100px;
    background-image: url(images/bouche_depigmentee.svg);
    background-size: 200% 100%;
    background-position: right;
    }
    .image_depigment:hover {
    background-position: left;
    }
    .image_trop_fine {
    width: 198px;
    height: 100px;
    background-image: url(images/bouche_trop_fine.svg);
    background-size: 200% 100%;
    background-position: right;    
    }
    .image_trop_fine:hover {
    background-position: left;
    }
    .image_levre_sup {
    width: 198px;
    height: 100px;
    background-image: url(images/levre_superieure.svg);
    background-size: 200% 100%;
    background-position: right;     
    }
    .image_levre_sup:hover {
    background-position: left;
    }
    .image_levre_inf {
    width: 198px;
    height: 100px;
    background-image: url(images/levre_inferieure.svg);
    background-size: 200% 100%;
    background-position: right;     
    }
    .image_levre_inf:hover {
    background-position: left;
    }
    .image_belle {
    width: 198px;
    height: 100px;
    background-image: url(images/belle_bouche.svg);
    background-size: 200% 100%;
    background-position: right;     
    }
    .image_belle:hover {
    background-position: left;
    }
    .manchette{        
        background-color: #000;
        border: solid 3px #f00;
        border-radius: 1rem;
        padding: 0.2rem 1rem ;
    }
    .manchette h2{
        color: #f00;
        font-size: 1.7rem;
        font-style: italic;            
    }
    .manchette h3{
        color: #f6f;
    }
    .manchette p{
        color: #fff;
    }
    .manchette a{
        color: #69f;
    }
    aside h2 {        	
        color: #606;
        background-color: #9cf;
        border: solid 3px #606;
        border-radius: 1rem;
        padding: 0.2rem 1rem ;
        }      
    aside h6, aside p {
    	color:#fff; 
        background-color: #c0c;
        border: solid 3px #606;
        border-radius: 1rem;
        padding:1rem;   	
    }
    aside img{
        border: solid 3px #606;
        border-radius: 1rem;
    }
    footer {
        clear: both;
        background-color: #9cf;        
        border-top: solid 3px #606;
        border-bottom: solid 3px #606;
    }  
    footer h5 {
        margin:0;
        background-color: transparent;
        color: #c0c;
    }
    
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
    
    /* conserver le ratio des images */

    img {
        height: auto;
    }
    
    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
    
    /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
    /* masquer les éléments superflus */

    .hide_mobile {
        display: none !important;
    }
    
    /* Un message personnalisé */

    body:before {
        content: "Version mobile du site";
        display: block;
        text-align: center;
        font-style: italic;
        color: #fff;
        background-color: #606;
    }
    /*================================================================	
        media queries
    ================================================================*/
    /*
    @media only screen and (-webkit-min-pixel-ratio: 1.5),
        only screen and (-o-min-device-pixel-ratio: 3/2),
        only screen and (min--moz-device-pixel-ratio: 1.5),
        only screen and (min-resolution: 144dpi)
    */
    /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
        only screen and (-o-min-device-pixel-ratio: 13/10),
        only screen and (min-resolution: 120dpi)
    {
    body{
    font-size:1.3rem;
    }
    }
    /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (-o-min-device-pixel-ratio: 3/2),
        only screen and (min-resolution: 144dpi)
    {
    body{
    font-size:1.5rem;
    }    
    }
    /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    @media only screen and (min-width:481px)
    {
		body {
			background-size: 50%;
            background-position: 0% 1rem;
		}
        section, aside, footer {        
        padding:0 16px;               
        }  
        header img {
            width: 75%;            
        }
        header:before {  
            background-position: 0% 1rem;
            background-size: 40%, 100%;                   
        } 
        nav{
            float:right;
            width:70%;			
        }        
    }
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    @media only screen and (min-width:769px)
    {
        body {
			background-size: 25%;
		}
		header img {
            width: 85%;      
        }
        header:before {  
            background-position: 0% 1rem;
            background-size: 20%, 100%;                  
        }
        nav{
            float:right;
            width:80%;
			margin-top: 0;
        }
		section, aside, footer {        
            padding:0 32px;               
        }        
        nav ul li a {
            width: 49%;
            height:5rem;  
            line-height: 5rem; 
            margin-right: 1%;                    
        }        
        .left {
            width: 60%;
            padding-right: 16px;
        }
        .right {
            width: 40%;				
        }
		.paragraph {
		width: 50%;
		}
		.paragraph:nth-child(1) {
		padding-right: 8px;
		}
		.paragraph:nth-child(2) {
		padding-left: 8px;
		}
        body:before {
        content: "Version tablette du site";
        }
	}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    @media only screen and (min-width:1024px) and (orientation:landscape)
    {
		section, footer {        
            padding:0 60px;               
        } 
        h1 {
            font-size: 2rem;
        }
        header {
            width:35%;                                    
        }  
        header:before {
            width: 35%; 
            background-position: 0% 6rem;
            background-size: 40%,200%;         
        }     
        header img {
            width: 100%;                 
        }
        nav {
            width: 70%;
        }        
        nav ul li a {        
            width: 100%;
            height:3rem;  
            line-height: 3rem;
        }
        section {
            float:right;            
            width:65%;
            padding:0 60px;              
            background-image:url(images/gonzesse_crop_droite.svg);
            background-repeat: no-repeat;
            background-position: 100% 0%;
            background-size: 10%;
            border-top: 0;
            border-bottom: 0;  
            border-left: solid 3px #606;                               
        }               
        .left {
            width: 60%;
            padding-right: 60px;
        }
        .right {
            width: 40%;             
        }
        aside {
            width :35%;
            padding: 0 1rem;                                
        }                      
		.paragraph {
          width: 25%;
        }
        body:before {
        display: none;
        }
	}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/