/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html { color: #404040; font-size: 16px; line-height: 1.4; }
body { font-size: 66%; font-family: 'Arial', sans-serif; min-width:1060px } /*environ 10px*/
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection {    background: #b3d4fc;    text-shadow: none; }
::-webkit-input-placeholder{ color: #484949 }
::-moz-placeholder{ color: #484949 }
:-ms-input-placeholder { color: #484949 }

hr {    display: block;    height: 1px;    border: 0;    border-top: 1px solid #666;    margin: 1em 0;    padding: 0; }

audio,canvas,iframe,img,svg,video { vertical-align: middle; }
fieldset {    border: 0;    margin: 0;    padding: 0;}
textarea {    resize: vertical;}
a {color: #fff; text-decoration: none }
a:hover { text-decoration: underline;}

h1, h2, h3, h4 { font-family:'Century Gothic', Verdana, sans-serif; }
h1 { font-size:3.5em; line-height: 1.3em; color: #fff}
h2, .pink { color: #f5245f }
h3 { font-size:1.5em; }

p {font-size:1.4em; line-height: 1.2em;}
ul { margin: 0; padding: 0; list-style: none; }
li {     padding-left: 1em;     text-indent: -.8em;}
main li:before {    content: "• "; font-size:2.5em; vertical-align: middle; line-height: .8em; color: #f5245f; /* or whatever color you prefer */}
main .module li:before { font-size:1.6em; }

.tac {text-align: center;}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.content { width:1060px; margin: auto } .jus { text-align: justify }
input[type=submit], .btn { font-weight: normal;border:0; background-color: #f5245f; color: #fff; transition: background-color 0.6s; text-align: center; display: inline-block}
input[type=submit]:hover, .btn:hover { background-color: #d5043f; text-decoration: none }
header { background: url(../img/entete-formation.jpg) no-repeat center center; background-size: cover; padding: 20px 0; font-size:1.7em; font-weight: bold;}
    .pg-login header { background-image: url(../img/entete-login.jpg); }
    .pg-login header section { text-align: center }
    .pg-login header form { display: inline-block; padding: 50px 40px 40px 40px; margin:auto; background-color: #fff; text-align: left; margin-bottom: 500px;}
    .pg-login header form input[type=text],.pg-login header form input[type=password] { border:1px solid #bababa; font-weight: normal; margin-bottom: 5px; color: #484949; width: 300px; font-size: .85em; padding: 3px 5px; }
    .pg-login header form input[type=submit] { background-color:#eb6e7d; padding: 5px 10px; margin-top: 10px; }
    .pg-login header form span { font-size: .9em; margin-left: 20px; font-weight: normal;}

header ul { list-style: none; margin-top: 30px; }
header li { display: inline-block; margin-right: 30px; text-indent: 0; padding-left: 0; }
header ul li:last-child { margin-left: 30px; padding-left: 25px; border-left:1px solid #fff; }

header div.content:last-child { padding: 90px 0}
header video { height: 357px}

main.content {    margin:85px auto 65px auto;}

main section { margin-bottom: 80px}
main article.col4 {width:23%; margin: 0 1%; background-color: #f5245f; text-align: center; color: #fff; padding: 18px; margin-bottom: 65px}
main article.col4 p { font-size:1.25em; height:70px;}

.services ul { font-size:1.6em; margin-bottom: 70px; }
.services a { display: inline-block; padding: 8px 20px; min-width: 240px; margin-top: 30px; }
.services a h3 { margin: 0; }
.services a span { height:50px; line-height: 65px; margin-left: 20px; transition:line-height 0.3s; }
.services a:hover span { line-height: 70px}
.services .beta { padding-right: 0}

.liste-mission { width: 100%; font-size:1.8em; font-weight: bold; }
.liste-mission td { width: 25%; vertical-align: top }
.liste-mission span { color: #c7c7c7; }
.liste-mission h3 { font-size:1em; width: 243px; margin: 0 0 20px 0;}
.liste-mission div { position: relative; height: 184px; margin-bottom: 20px; }
.liste-mission div div { position: absolute; height: 100%; width: 243px; background: rgba(200,200,200,.8); line-height: 184px; text-align: center}
.liste-mission div img { position:absolute}
.liste-mission div a.btn { display: block; color:#fff; text-align:center; padding: 5px 0; position: absolute; width: 243px; bottom:0; background: rgba(245,36,95,.7); }
.liste-mission .stepNotYet { opacity: .5}
footer { background-color:#16171d; color: #fff; padding: 65px 0; font-size: 1.6em }
footer form { float:left; width: 50%; padding-right: 5% }
footer input, footer textarea { width: 100%; margin-bottom: 6px; border: none; padding: 5px 10px; box-sizing:border-box; background-color: #dde1e4; color: #484849 }
footer #html_element {
    margin-bottom: 6px;}

footer .mentions { padding: 20px 0 }
footer .mentions strong { display:block; margin: 5px 0}
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
}

/*detail step */
.pg-step { background: #2e3641}
.wrapBtn { text-align: right}
input[type=button] {
    text-transform: uppercase; padding: 6px 13px; font-size:1.2em; font-weight: bold; margin:10px 10px 0 0;
}
.btnVert { background: #28b79b}

#zone-step { width: 100%; background: #fff; font-size:1.2em; height: 587px}

#zone-step .ligne-footer { background: #f64577; padding: 5px 25px; font-weight: bold; text-transform: uppercase; color: #fff; font-size:1.3em; clear:both }
#zone-step .ligne-footer img { vertical-align: middle; height: 30px}

#zone-step #activite { float: right; width: 738px; height: 487px; margin-right:30px}
#zone-step #activite.whole-size { width: 100%; float: none; height:547px; position: relative; margin:0 }

#zone-step #activite #onglets-detail { height:445px; border:1px solid #9c9c9c; border-top:1px solid #fff }
#zone-step #activite.no-onglet #onglets-detail { height:100%; }

#zone-step #activite #onglets { background: #2e3641; color: #fff; padding: 1px 1px 0 1px}
#zone-step #activite .onglet { float: left; border-right:1px solid #5d6670; padding: 5px; height: 30px; line-height: 30px; cursor: pointer}
#zone-step #activite .onglet.onglet2lignes { line-height: 15px}
#zone-step #activite #onglet-1 { width:30%; font-size: 2em; padding-left: 20px}
#zone-step #activite .onglet-current { background: #fff; color: #2e3641}
#zone-step .left-box { width:250px; height:229px; box-sizing: border-box; margin: 30px 20px}
#zone-step .left-box h2 { background: #2e3641; padding: 10px 20px; color: #fff; font-size:1.9em; margin: 0;}
#zone-step .left-box h2 i { float:right; margin-top:5px}
#zone-step .left-box p {margin: 20px; color: #fff; font-size:1.45em; font-weight: bold;}
#zone-step #mission { background : #f64577; }
#zone-step #aide { background : #28b79b; }

#zone-step .detail { position: relative; }
#zone-step p { margin:0 0 10px 0 }
#zone-step #onglets-detail>div { width: 100%; height: 100%; }

#submit-step { text-decoration: underline; margin-top: 3px; }
/* element commun formation */
.tooltip {  position: absolute; z-index: 999; padding: 10px; background: #fff;
  -moz-border-radius: 4px;  border-radius: 4px;
  -moz-box-shadow: 5px 5px 5px rgba(0,0,0,.4);  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.4);  box-shadow:  5px 5px 5px rgba(0,0,0,.4);
}
.tooltipHelp { background: #f97e76; color: #fff; }
.tooltip:before,.tooltip:after{ content: "";  position: absolute;  z-index: 1000;  bottom: -14px;  left: 50%;  margin-left: -15px;  border-top: 15px solid #fff;  border-left: 15px solid transparent;  border-right: 15px solid transparent;  border-bottom: 0; text-shadow: 5px 5px 5px rgba(255,255,255,.4);}
.tooltip.tooltipNoQueue:before, .tooltip.tooltipNoQueue:after { display: none!important }
.tooltipHelp:before, .tooltipHelp:after { border-color: #f97e76;}

.zone-txt { position: absolute; }
.message { margin: 10px 0; padding: 5px 0; display: none}
.error { color: #f00; border-top:1px solid #f00; border-bottom:1px solid #f00 }

.ligne-radio { font-size:1.2em; text-align: left; margin-bottom: 3px;}

.rapport { text-align:right; margin: 10px 0 0 0; font-size:1.1em; color: #fff}
.rapport input[type=text], .rapport textarea { color:#5a5a5a; width: 250px} .rapport textarea { height: 150px; }
.rapport input[type=submit] { padding: 5px 10px; font-size:1.1em}
.resultat-identite { border-top:1px solid #5a5a5a; border-bottom:1px solid #5a5a5a; color:#5a5a5a; padding: 10px 0; font-size:1.5em; margin-bottom: 20px; text-transform: uppercase }
.resultat-identite a, .detail-identite a { padding: 5px 10px }
.domaine { width: 50%; margin: 10px 0 50px 0; padding-right: 20px; box-sizing: border-box }
.domaine>img {margin-right: 15px}
.domaine .step-domaine {font-size:1.1em; color: #adadad; font-weight: bold; }
.domaine .nom-domaine { font-weight: bold; font-size: 1.25em; height: 94px; }
.domaine .btn, .resultat .btn { padding: 7px 20px}

.lignes-domaines { font-size: 1.1em; color: #f5245f }
.lignes-domaines .nomItem { min-width:250px;max-width: 350px}
.lignes-domaines th { font-size:.7em; }
.lignes-domaines .colCommentaire { min-width: 140px }
.lignes-domaines td { padding: 10px; border:1px solid #28b79b}
.lignes-domaines .croix { width:90px}

.lignes-domaines .check { background: url(../img/croix.gif) no-repeat center center; }

/* fiche identite */
.detail-identite { font-size: 1.3em }
.detail-identite>table { width: 100%; margin-bottom: 20px;}
.detail-identite>table th { text-align: left; background: #f64577; color: #fff; padding: 7px }
.detail-identite>table td { padding: 10px; border:1px solid #28b79b; text-align: center; }
.detail-identite>table.tab-identite { width: 70% }
.detail-identite .tab-identite td { padding: 5px; border:none; border-bottom:1px solid #28b79b; text-align: left; }
.tab-identite tr td:first-child { width:45% }
.tab-identite tr td:last-child { font-weight: bold; }

.detail-identite>table td.textAlignLeft, table.textAlignLeft td { text-align: left }

.detail-identite .noBorderTop { border-top:0 !important; border-bottom:0 !important }
.detail-identite .noBorderSide { border-right:0 !important; border-left:0 !important }
.tab-profil table, .tab-apprenti table { width: 100%; }
.tab-profil table td, .tab-apprenti table td { border:0; }
.tab-profil table td:first-child, .tab-apprenti table td:first-child { border-right:1px solid #28b79b }
.tab-profil table td:last-child, .tab-apprenti table td:last-child { border-left:1px solid #28b79b }

.detail-identite .tab-numerique td { width:50%; }
.btnPrint { font-size:1.5em; font-weight: bold; width:200px; display: block; margin: auto; padding: 15px }

#tabRecap td { width:16.66%; background: #FFa500 }
#tabRecap td.noBg { background: none }
#tabRecap td strong { font-size:.9em }
#tabRecap td.check { background-color: #008B00; color:#fff}
/* ==========================================================================
   Helper classes
   ========================================================================== */
.rose { color: #E7285A } .vert { color: #28b79b }
.alignright { float: right; }
.alignleft { float: left; }

.col2 {width: 50%; padding: 0 2%; float: left; box-sizing:border-box; }
.col3 {width: 33%; padding: 0 2%; float: left; box-sizing:border-box; }
.col4 {width: 25%; padding: 0 2%; float: left; box-sizing:border-box; }
.alpha { padding-left: 0} .omega { padding-right: 0}
.hidden {
    display: none;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {    visibility: hidden;}

.clearfix:before,.clearfix:after {    content: " ";    display: table;}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    body>header { display: none }
    .nomModule, .nomItem, .commentaire { font-size:16px} 
    .lignes-domaines .check div { content: url("../img/croix.gif"); margin: auto}
    .detail-identite>table th { border:1px solid #28b79b; color: #f64577; padding: 7px;background:#fff }
    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
    
    body>footer { display: none}
}