/* CSS Document */


/* Cédric Rey, 2012 - 2024*/


/*@import url('annim.css');*/

body {
    margin: 0;
    padding: 0;
    font: 12px "Lucida Grande", Lucida, Verdana, sans-serif;
    color: #030708;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

A {
    -moz-transition: 0.6s all ease;
    -webkit-transition: 0.6s all ease;
    -o-transition: 0.6s all ease;
    transition: 0.6s all ease;
    text-decoration: underline;
    color: #46678f;
}

A:hover {
    color: #030708;
    /*color:#C10221;*/
}

A img {
    border: none;
}

LI {
    list-style-type: none;
}

.cb {
    clear: both;
    line-height: 0;
    height: 0;
    font-size: 0;
}

.listContener {
    background: #FFF none;
    border: 0 solid;
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    z-index: 100;
}

.noScreen {
    display: none;
}

#lang {
    background: transparent url(../images/flags.png) no-repeat top left;
    display: inline-block;
    width: 19px;
    height: 19px;
    position: absolute;
    right: 0;
}

html[lang="en-UK"] #lang {
    background-position: left -22px;
}

#lang:hover,
#lang:focus {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

#main {
    position: relative;
    margin: 0 auto;
    padding: 10px 0;
    width: 980px;
    height: 623px;
    border-radius: 5px;
}

#head {
    min-height: 200px;
    left: 308px;
    overflow: visible;
    position: relative;
    top: 23px;
    width: 660px;
}

#head H1 {
    margin: 0;
    padding: 0;
    width: 210px;
    font: 41px Helvetica;
    text-shadow: 0 -2px 2px rgba(200, 240, 240, 0.7), 0 1px 2px rgba(0, 0, 0, 0.7);
}

#head H2 {
    margin: -6px 0 0 134px;
    padding: 0;
    width: 315px;
    font: bold 20px Arial;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

#infosup {
    font-size: 60%;
    text-align: center;
    color: #DEDEDE;
}

#infosup A:hover {
    color: #D30018;
}

#contact {
    width: 140px;
    position: relative;
    left: 374px;
    top: 50px;
}

#contact A[href^="mailto"]:before {
    display: block;
    position: absolute;
    font-size: 30px;
    line-height: 25px;
    left: -26px;
    top: -2px;
    width: 20px;
    height: 20px;
    font-weight: bold;
    text-decoration: none;
    color: #46678F;
    text-shadow: 0 0 1px #46678F;
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAQCAYAAAD9L+QYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAqRJREFUeNq0lE1ME1EQx/+7bbdLWxooClxU1APWGIkhxgTjwY8aikZbhUQPxMgB06hXPVAvqCcTA0FNrB8X/DhIIl4oGD0QVEIqEkEwoNUDkdAoH6Xsdndbur59lVqhxYM4ySY77838Zt68mceoqgohKucJUWWrKCl2rIKYeO6jOYcb0WuKMPHh4dlrPVVzWCUx23C9wX2TwkV5gVdSOwyqa/ejoigf5hwjUZmVQcmTYzw4jOanI0hoazEJUUnZqM9gjbYnfbCfd2J9noUGYNnMARKJJFgMjeL2IjhN2D80zoi6igJAiuByix/vJ6epswbJBh4f7UeDLwARHA66y2HUs+AzwvUGbKvYB6+zOBVgMDQDUZKXwZV4HJPBAXgp2IAT9S5UbrbAwLJZMtfugpSh7IALFxyFNEBjSyc+R6KQlXjKRvufnQui6VYfBJJx9enDOF5qI74cmKxloffJUKNyhwuePWuAaBgXfT0Iz4tQYvEkOBJEo5cEJRkfOelAjX0t9QGzUs2XSHj6R/Ln2xfU3gtgOizg+8wnXGnwI0g3YpgIJ7L6s8s7S8W8KKPrgQ+PhsmCMReeqg1AcAin7nbjRnMXxtLs33b40fQmRH3UJfeuX9KFiAgSxl4/x/1BovO58J6rRKnNiu0Fr+BpHcUAjKipOwRniRWz48Pw3gmgt/0ZMT6KY5sUqFnhCzG8636Jx/0zFHyJ9HpZsQ0mUk/Tjr1ote+m2ZHxpp/VXI6r9aCt2NveAa5yC2ILCTC6TGVR5GVgrXt0pL0sJh6F5ARFBVbkmnnodCzdW1eqBdgJE6l/d+cQZAKXMma+OP41u5BPUpyanccUucS/jb9qLcEZt/B7/NPhJqNOIo30KyIZ/9YXaPuXh8vAI4fnvjL/88n9KcAAqJQhSMEBOrAAAAAASUVORK5CYII=);
    -moz-transition: all 0.6s ease 0s;
    -webkit-transition: all 0.6s ease 0s;
    -o-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
}

#contact .listContener {
    color: #FFF;
    right: 0;
    top: 14px;
    border-radius: 3px;
    margin-left: -10px;
    opacity: 1;
    z-index: 99;
}

#contact .listContener UL {
    width: 360px;
    padding: 0;
    margin: 0;
    text-align: right;
}

#contact:hover .listContener,
#contact a.staticLink:focus+.listContener {
    padding: 10px;
    width: 360px;
    height: 120px;
    background-color: #46678F;
}

#contact .listContener UL A {
    color: #FFF;
    font-weight: bold;
}

#contact #localizationMap {
    float: left;
    width: 189px;
    height: 123px;
    padding: 0;
    z-index: 100;
    border-radius: 3px;
    overflow: visible;
}

#tools {
    position: relative;
    display: inline-block;
    top: 33px;
    left: 134px;
    padding: 3px 6px;
    border-radius: 3px 3px;
    text-align: center;
    color: #FFF;
    background-color: #46678F;
}

#tools A {
    color: #FFF;
}

#tools .listContener {
    top: auto;
    color: #FFF;
    left: 0;
    border-radius: 3px;
    opacity: 1;
}

#tools .listContener P {
    padding: 0;
    margin: 0;
    text-align: left;
}

#tools .listContener A {
    color: #FFF;
}

#tools:hover .listContener,
#tools:focus .listContener,
#tools a.staticLink:focus+.listContener {
    padding: 10px;
    width: 220px;
    height: 16px;
    background-color: #46678F;
}

#toolCVLink {
    display: none;
}

#explication {
    width: 160px;
    position: relative;
    left: 845px;
    top: 415px;
    cursor: default;
}

#explication A.staticLink {
    text-shadow: 0 0 1px #DDD;
    text-decoration: underline;
    font: bold 15px Arial;
    color: #46678F;
    margin: 0;
    padding: 0;
}

#explication .listContener {
    bottom: 0;
    color: #030708;
    text-decoration: none;
    right: 100%;
    font: bold 12px Arial;
    border-radius: 3px;
    text-shadow: none;
    opacity: 1;
}

#explication .listContener P {
    width: 650px;
}

#explication:hover .listContener,
#explication A.staticLink:active+.listContener,
#explication A.staticLink:focus+.listContener,
#explication:target .listContener {
    padding: 10px;
    width: 650px;
    height: 523px;
    background-color: rgb(245, 245, 245);
    background-color: rgba(238, 238, 238, 0.92);
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgba(238, 238, 238, 0.92));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(238, 238, 238, 0.92));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgba(238, 238, 238, 0.92));
    background-image: linear-gradient(top, rgba(255, 255, 255, 1), rgba(238, 238, 238, 0.92));
}

#photo {
    /*background: url("../images/photo.jpg") no-repeat scroll -61px -20px transparent;*/
    background: url("../images/photo_2025.jpg") no-repeat scroll 0 0 transparent;
    background-size: cover;
    right: 0;
    top: 100px;
    position: absolute;
    height: 180px;
    width: 130px;
    border-radius: 5px;
    border: 3px solid rgb(208, 208, 208);
    border: 3px solid rgba(255, 255, 255, 0.8);
    border-color: #5CB9E5 #E55C5C #79E55C #F4F11B;
    border-color: rgba(92, 185, 229, 0.8) rgba(229, 92, 92, 0.8) rgba(121, 229, 92, 0.8) rgba(244, 241, 27, 0.8);
    z-index: 100;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#photo:hover {
    width: 292px;
    height: 200px;
    background-position: 0 -20px;
}

H3 {
    margin-top: 30px;
    background-color: #E9F4F4;
    margin-top: 30px;
    padding: 8px 3px;
    cursor: default;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3), 1px 0 rgba(0, 0, 0, 0.3);
}

.experience {
    padding: 10px 0 10px;
    margin: 0;
    clear: both;
    border-bottom: 1px solid #C1C6C9;
    border-color: rgba(0, 0, 0, 0.1);
    cursor: default;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.experience:hover {
    background-color: #FFF;
}

.experience LI {
    margin-left: 200px;
    line-height: 1.6em;
}

.experience .date {
    float: left;
    font-style: italic;
    width: 200px;
    margin-left: 0;
    color: #777;
}

.date IMG {
    margin: 5px 2px;
    opacity: 0.1;
    cursor: pointer;
    display: block;
    max-width: 152px;
    max-height: 62px;
    -moz-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

.experience:hover .date IMG {
    opacity: 1;
}

.experience A {
    color: #4667CF;
}

.experience A:hover {
    color: #C10221;
}

.experience .poste {
    font-weight: bold;
}

.experience .poste .title {
    font-variant: small-caps;
    font-size: 1.4em;
}

.descSociete {
    font-style: italic;
    color: #777;
}

.descExperience {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    visibility: hidden;
    color: #444;
}

.descExperience strong {
    color: #000;
    font-size: 1.2em;
}

.descExperience B {
    color: #000;
}

.descExperience,
.descExperience A {
    -moz-transition: height 0.6s ease, color 0.6s ease, opacity 0.3s ease 0.4s;
    -webkit-transition: all 0.6s ease, opacity 0.3s ease;
    -o-transition: all 0.6s ease, opacity 0.3s ease;
    transition: all 0.6s ease, opacity 0.3s ease;
}

.experience:hover .descExperience {
    opacity: 1;
    height: 8em;
    padding: 0 0 4em;
    visibility: visible;
    -moz-transition: height 0.6s ease, color 0.6s ease, opacity 0.3s ease 0.4s;
    -webkit-transition: all 0.6s ease, opacity 0.3s ease 0.4s;
    -o-transition: all 0.6s ease, opacity 0.3s ease 0.4s;
    transition: all 0.6s ease, opacity 0.3s ease 0.4s;
}

#expNF:hover .descExperience {
    height: 16em;
    padding: 0;
}

UL.also {
    border-bottom: none;
}

#experience {
    position: absolute;
    top: 160px;
}

#experience H3,
#experience .staticLink {
    float: left;
    width: 175px;
    height: 100px;
    padding: 75px 0 0;
    margin: 0;
    text-align: center;
    background-color: #E72710;
    color: #FFF;
}

#experience .listContener {
    margin-left: 175px;
    z-index: 104;
    top: 0;
    border-radius: 5px;
}

#experience UL {
    width: 779px;
    min-height: 80px;
    clear: none;
}

#experience UL:hover {
    color: #000;
    background-color: #FFF;
}

#experience UL.also {
    min-height: 30px;
}

#experience:hover .listContener,
#experience:focus .listContener {
    padding: 5px 15px;
    width: 769px;
    height: 527px;
    border: 3px solid #e03a3a;
    opacity: 1;
    top: -60px;
}

#competences {
    position: absolute;
    top: 468px;
}

#competences H3 {
    float: left;
    width: 175px;
    height: 100px;
    padding: 75px 0 0;
    margin: 0;
    text-align: center;
    /*background-color: #3eb2e8;*/
    background-color: #0072EA;
    color: #FFF;
}

#competences .listContener {
    margin-left: 175px;
    bottom: 0;
    border-radius: 5px 5px 5px 0;
    z-index: 104;
}

#competences UL {
    width: 699px;
    min-height: 130px;
    clear: none;
    background-color: #FFF;
}

#competences UL:hover {
    color: #000;
}

#competences UL.also {
    min-height: 30px;
}

#competences LI {
    list-style-type: circle;
    padding: 16px 0 0 0;
}

#competences:hover .listContener,
#competences:focus .listContener {
    padding: 10px;
    height: 517px;
    width: 779px;
    border: 3px solid #0072EA;
    opacity: 1;
}

#formation {
    position: absolute;
    top: 335px;
    left: 175px;
    -moz-transition: left 0.6s ease;
    -webkit-transition: left 0.6s ease;
    -ms-transition: left 0.6s ease;
    -o-transition: left 0.6s ease;
    transition: left 0.6s ease;
}

#formation H3 {
    float: left;
    width: 133px;
    height: 133px;
    line-height: 133px;
    padding: 0;
    margin: 0;
    text-align: center;
    background-color: #5be836;
    color: #FFF;
}

#formation .listContener {
    top: 0;
    margin-left: 133px;
    z-index: 103;
}

#formation UL {
    width: 646px;
    min-height: 130px;
    clear: none;
}

#formation UL:hover {
    color: #000;
    background-color: #FFF;
}

#formation UL.also {
    min-height: 30px;
}

#formation:hover,
#formation:focus {
    left: 0;
    width: 350px;
}

#formation:hover .listContener,
#formation:focus .listContener {
    top: -235px;
    padding: 10px;
    border: 0 solid;
    width: 646px;
    height: 517px;
    border: 3px solid #5be836;
    border-radius: 5px;
    opacity: 1;
}

#formation .experience:hover .descExperience {
    height: 5em;
    padding: 0;
}

#apropos {
    position: absolute;
    top: 468px;
    left: 308px;
    -moz-transition: left 0.6s ease;
    -webkit-transition: left 0.6s ease;
    -ms-transition: left 0.6s ease;
    -o-transition: left 0.6s ease;
    transition: left 0.6s ease;
}

#apropos H3 {
    float: left;
    width: 133px;
    height: 133px;
    line-height: 133px;
    padding: 0;
    margin: 0;
    text-align: center;
    background-color: #FFBB2C;
    color: #FFF;
}

#apropos .listContener {
    top: 0;
    margin-left: 133px;
    z-index: 102;
}

#apropos P {
    background-color: #FFF;
    width: 513px;
}

#apropos:hover,
#apropos:focus {
    left: 175px;
    width: 350px;
}

#apropos:hover .listContener,
#apropos:focus .listContener {
    top: -368px;
    padding: 10px;
    width: 513px;
    height: 517px;
    border: 3px solid #fdef0e;
    border-radius: 5px;
    opacity: 1;
}


/*DEGRADES TITRES*/

#experience H3 {
    background: -moz-radial-gradient(90% 20%, ellipse cover, rgba(239, 57, 16, 1) 0%, rgba(221, 17, 17, 1) 100%);
    background: -webkit-gradient(radial, 90% 20%, 0px, center center, 100%, color-stop(0%, rgba(239, 57, 16, 1)), color-stop(100%, rgba(221, 17, 17, 1)));
    background: -webkit-radial-gradient(90% 20%, ellipse cover, rgba(239, 57, 16, 1) 0%, rgba(221, 17, 17, 1) 100%);
    background: -o-radial-gradient(90% 20%, ellipse cover, rgba(239, 57, 16, 1) 0%, rgba(221, 17, 17, 1) 100%);
    background: -ms-radial-gradient(90% 20%, ellipse cover, rgba(239, 57, 16, 1) 0%, rgba(221, 17, 17, 1) 100%);
    background: radial-gradient(90% 20%, ellipse cover, rgba(239, 57, 16, 1) 0%, rgba(221, 17, 17, 1) 100%);
}

#formation H3 {
    background: -moz-radial-gradient(90% 80%, ellipse cover, rgba(85, 209, 104, 1) 0%, rgba(38, 164, 58, 1) 100%);
    background: -webkit-gradient(radial, 90% 80%, 0px, center center, 100%, color-stop(0%, rgba(85, 209, 104, 1)), color-stop(100%, rgba(38, 164, 58, 1)));
    background: -webkit-radial-gradient(90% 80%, ellipse cover, rgba(85, 209, 104, 1) 0%, rgba(38, 164, 58, 1) 100%);
    background: -o-radial-gradient(90% 80%, ellipse cover, rgba(85, 209, 104, 1) 0%, rgba(38, 164, 58, 1) 100%);
    background: -ms-radial-gradient(90% 80%, ellipse cover, rgba(85, 209, 104, 1) 0%, rgba(38, 164, 58, 1) 100%);
    background: radial-gradient(90% 80%, ellipse cover, rgba(85, 209, 104, 1) 0%, rgba(38, 164, 58, 1) 100%);
    background: -moz-radial-gradient(90% 80%, ellipse cover, rgba(123, 244, 90, 1) 0%, rgba(67, 211, 27, 1) 100%);
    background: -webkit-gradient(radial, 90% 80%, 0px, center center, 100%, color-stop(0%, rgba(123, 244, 90, 1)), color-stop(100%, rgba(67, 211, 27, 1)));
    background: -webkit-radial-gradient(90% 80%, ellipse cover, rgba(123, 244, 90, 1) 0%, rgba(67, 211, 27, 1) 100%);
    background: -o-radial-gradient(90% 80%, ellipse cover, rgba(123, 244, 90, 1) 0%, rgba(67, 211, 27, 1) 100%);
    background: -ms-radial-gradient(90% 80%, ellipse cover, rgba(123, 244, 90, 1) 0%, rgba(67, 211, 27, 1) 100%);
    background: radial-gradient(90% 80%, ellipse cover, rgba(123, 244, 90, 1) 0%, rgba(67, 211, 27, 1) 100%);
}

#competences H3 {
    background: -moz-radial-gradient(10% 80%, ellipse cover, rgba(96, 196, 242, 1) 0%, rgb(0, 114, 234) 100%);
    background: -webkit-gradient(radial, 10% 80%, 0px, center center, 100%, color-stop(0%, rgba(96, 196, 242, 1)), color-stop(100%, rgb(0, 114, 234)));
    background: -webkit-radial-gradient(10% 80%, ellipse cover, rgba(96, 196, 242, 1) 0%, rgb(0, 114, 234) 100%);
    background: -o-radial-gradient(10% 80%, ellipse cover, rgba(96, 196, 242, 1) 0%, rgb(0, 114, 234) 100%);
    background: -ms-radial-gradient(10% 80%, ellipse cover, rgba(96, 196, 242, 1) 0%, rgb(0, 114, 234) 100%);
    background: radial-gradient(10% 80%, ellipse cover, rgba(96, 196, 242, 1) 0%, rgb(0, 114, 234) 100%);
}

#apropos H3 {
    background: -moz-radial-gradient(10% 20%, ellipse cover, rgba(255, 192, 68, 1) 0%, rgba(244, 159, 0, 1) 100%);
    background: -webkit-gradient(radial, 10% 20%, 0px, center center, 100%, color-stop(0%, rgba(255, 192, 68, 1)), color-stop(100%, rgba(244, 159, 0, 1)));
    background: -webkit-radial-gradient(10% 20%, ellipse cover, rgba(255, 192, 68, 1) 0%, rgba(244, 159, 0, 1) 100%);
    background: -o-radial-gradient(10% 20%, ellipse cover, rgba(255, 192, 68, 1) 0%, rgba(244, 159, 0, 1) 100%);
    background: -ms-radial-gradient(10% 20%, ellipse cover, rgba(255, 192, 68, 1) 0%, rgba(244, 159, 0, 1) 100%);
    background: radial-gradient(10% 20%, ellipse cover, rgba(255, 192, 68, 1) 0%, rgba(244, 159, 0, 1) 100%);
}


/*COMPORTEMENT NAVIGATEUR OUTLINE*/

#experience:focus,
#competences:focus,
#formation:focus,
#apropos:focus {
    outline: none;
}


/**TRANSITION**/

#explication .listContener,
#contact .listContener,
#tools .listContener,
#contact #localizationMap,
#competences .listContener,
#experience .listContener,
#formation .listContener,
#apropos .listContener {
    -moz-transition: width 0.6s ease, height 0.6s ease, top 0.6s ease, padding 0.6s ease, opacity 0.3s ease 0.3s, background-color 0.6s ease, border 0s ease 0.6s;
    -webkit-transition: width 0.6s ease, height 0.6s ease, top 0.6s ease, padding 0.6s ease, opacity 0.3s ease 0.3s, background-color 0.6s ease, border 0s ease 0.6s;
    -o-transition: width 0.6s ease, height 0.6s ease, top 0.6s ease, padding 0.6s ease, opacity 0.3s ease 0.3s, background-color 0.6s ease, border 0s ease 0.6s;
    transition: width 0.6s ease, width 0.6s ease, height 0.6s ease, top 0.6s ease, padding 0.6s ease, opacity 0.3s ease 0.3s, background-color 0.6s ease, border 0s ease 0.6s;
}

#experience:hover .listContener,
#experience:focus .listContener,
#competences:hover .listContener,
#competences:focus .listContener,
#contact:hover #localizationMap,
#formation:hover .listContener,
#formation:focus .listContener,
#apropos:hover .listContener,
#apropos:focus .listContener {
    -moz-transition: width 0.6s ease, height 0.6s ease, padding 0.6s ease, top 0.6s ease, opacity 0.3s ease;
    -webkit-transition: width 0.6s ease, height 0.6s ease, padding 0.6s ease, top 0.6s ease, opacity 0.3s ease;
    -o-transition: width 0.6s ease, height 0.6s ease, padding 0.6s ease, top 0.6s ease, opacity 0.3s ease;
    transition: width 0.6s ease, height 0.6s ease, padding 0.6s ease, top 0.6s ease, opacity 0.3s ease;
}


/*SPECIAL TOUCHSCREEN*/

H3 A {
    color: #FFF;
    text-decoration: none;
}

@media screen and (max-width: 500px) {
    #main {
        width: 100%;
    }
    #photo {
        border: none;
        opacity: 0.6;
        top: 20px;
        width: 140px;
    }
    #head {
        min-height: 200px;
        left: 0;
        overflow: visible;
        position: relative;
        top: 23px;
        width: 100%;
    }
    #head H2 {
        margin: 0;
        padding: 0;
        width: calc(100% - 140px);
        font: bold 20px Arial;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    }
    #tools {
        position: relative;
        display: inline-block;
        top: 0;
        left: 0;
        padding: 3px 6px;
        border-radius: 3px 3px;
        text-align: center;
        color: #FFF;
        background-color: #46678F;
    }
    #contact {
        width: 140px;
        position: relative;
        left: 0;
        top: 0;
    }
    #experience,
    #formation,
    #competences,
    #apropos {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
    }
    #formation:hover,
    #formation:focus,
    #apropos:hover,
    #apropos:focus {
        width: 100%;
        left: 0;
    }
    #experience H3,
    #formation H3,
    #competences H3,
    #apropos H3 {
        width: 100%
    }
    .experience .date {
        width: 100px;
    }
    .date IMG {
        max-width: 100px;
    }
    .experience LI {
        margin-left: 110px;
    }
    #experience .listContener,
    #formation .listContener,
    #competences .listContener,
    #apropos .listContener {
        position: relative;
        width: 100%;
        margin-left: 0;
        padding: 0;
        border: none;
    }
    #experience:hover .listContener,
    #experience:focus .listContener,
    #formation:hover .listContener,
    #formation:focus .listContener,
    #competences:hover .listContener,
    #competences:focus .listContener,
    #apropos:hover .listContener,
    #apropos:focus .listContener {
        top: 0;
        width: 100%;
        height: auto;
        margin-left: 0;
        border: none;
        padding: 0;
    }
    #experience UL,
    #formation UL,
    #competences UL {
        width: auto;
    }
    .experience:hover .descExperience,
    #expNF:hover .descExperience {
        height: auto;
    }
    #explication {
        display: none;
    }
    #photo:hover {
        width: 230px;
        height: 180px;
        background-position: 0 -20px;
    }
}