/*****************************************************************************
 * Règles génériques                                                         *
 *****************************************************************************/

*                                            { box-sizing: border-box; }
div.clear                                    { clear: both; }

/*****************************************************************************
 * BODY                                                                      *
 *****************************************************************************/

body                                         { margin: 0; padding: 0; color: #5B6873; background: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 1.0rem; }
img                                          { max-width: 96%; }

/*****************************************************************************
 * En-tête                                                                   *
 *****************************************************************************/

div.header                                   { z-index: 1; position: fixed; left: 0; top: 0; width: 100%; height: 80px; font-family: 'placard_condensedregular'; color: #FFFFFF; background: linear-gradient(#0C2C3E, #1E6995); padding: 8px; }
div.header img.diaporama                     { float: left; margin: 5px 20px 0 0; cursor: default; }
div.header h1.title                          { margin: 0; padding: 0; font-weight: normal; }
div.header a.goback                          { cursor: url('cursors/goback.png'), pointer; }

@media screen and (max-width: 400px)
    {
    div.header h1.title                      { margin: 0; padding: 0; font-weight: normal; font-size: 1.5rem; }
    }

/*****************************************************************************
 * Contenu de la page d'accueil                                              *
 *****************************************************************************/

div.content_root                             { z-index: -5; position: absolute; left: 10px; top: 90px; max-width: 1000px; background: #FFF; font-family: 'placard_condensedregular'; font-size: 1.3rem; }

div.content_root h1                          { color: #DF9244; }
div.content_root h3                          { font-weight: normal; font-size: 1.9rem; margin: 20px 0 8px 0; color: #DF9244; }
div.content_root h4                          { font-weight: normal; font-size: 1.3rem; margin: 0 0 8px 0; }
div.content_root h6                          { font-weight: normal; font-size: 1.0rem; margin: 0 0 8px 0; font-family: roboto; }

div.content_root p                           { margin: 0 10px 10px 0; font-family: roboto; text-align: justify; text-indent: 20px; }
div.content_root p.info                      { font-family: arial; font-size: 1.0rem; text-align: justify; text-indent: 0px; }
div.content_root p.first                     { text-indent: 0px; }
div.content_root p.first::first-letter       { font-size: 3.9rem; float: left; margin-top: 4px; margin-right: 3px; font-weight: bold; color: #1F66A0; }

div.content_root ol                          { font-family: roboto; }

div.content_root a                           { display: block; text-decoration: none; color: #708FBE; }
div.content_root a.fancybox                  { cursor: url('cursors/recherche.png'), pointer; }
div.content_root a.index                     { display: inline-block; width: 250px; height: 160px; max-height: 160px; padding: 8px; border: 1px solid transparent; border-radius: 8px; text-align: center; }
div.content_root a.index:hover               { color: #FFF; background-color : #426293; border-color: maroon; }
div.content_root a.summary                   { line-height: 30px; }
div.content_root a.std:hover,
div.content_root a.summary:hover             { color: maroon; }
div.content_root a.vignette img              { max-height: 80px; }

div.content_root img.small                   { max-height: 300px; }
div.content_root img.logo                    { float: left; margin-right: 20px; height: 45px; }
div.content_root img.miniature               { height: 64px; float: left; margin: 8px 15px 8px 0; }
div.content_root img.index                   { height: 64px; margin: 8px 0; }
div.content_root img.left                    { float: left; margin: 0 15px 10px 0; }
div.content_root img.right                   { float: right; margin: 0 0 10px 15px; }

div.content_root p.gallery                   { margin-top: 15px; }

div.content_root table td h2                 { margin: 5px 0 0 0; padding: 1px 10px; color: #3D70A3; border-top: 1px solid #3D70A3; border-bottom: 1px solid #3D70A3; font-size: 1.2rem; font-weight: normal; }
div.content_root table.fiche,
div.content_root table.nop                   { border-collapse: collapse; }
div.content_root table.fiche td              { border: 1px solid gray; padding: 1px 10px; vertical-align: top; }
div.content_root table.fiche td:nth-child(1) { font-size: 1.1rem; }
div.content_root table.fiche td:nth-child(2) { font-family: roboto; font-size: 1.1rem; }
div.content_root table.nop td                { padding: 0; border: none; }
div.content_root table.nop td:nth-child(1)   { padding-right: 15px; }
div.content_root table.nop td:nth-child(2)   { padding-right: 20px; }
div.content_root table.center td             { text-align: center; }

div.photos                                   { display: flex; justify-content: center; flex-wrap: wrap; }
div.photos.bordered img                      { border: 1px solid black; }
div.story                                    { display: flex; justify-content: left; flex-wrap: wrap; }
div.full                                     { width: 100%; text-align: center; }

iframe.youtube                               { width: 816px; height: 459px; }
@media screen and (max-width: 400px)
    {
    iframe.youtube                           { width: 370px; height: 208px; }
    }


/*****************************************************************************
 * Lien vidéo YouTube                                                        *
 *****************************************************************************/

#mvVideo                                     { display: inline-block; position: relative; margin: 0; width: 380px; height: 225px; padding: 182px 0 0 0; }
#mvVideo a                                   { color: #AAAAAA; }
#mvVideo a:hover                             { color: #FFF; }
#mvVideo img                                 { position: absolute; left: 0; top: 0; width: 380px; }
#mvVideo img.youtube                         { position: absolute; display: none; left: 165px; top: 78px; width: 35px; height: 24px; }
#mvVideo a:hover > img.youtube               { display: block; }
#mvVideo #mvDuration                         { position: absolute; right: 25px; top: 10px; padding: 0 5px; background: #000; font-size: 1.0rem; }
#mvVideo #mvTitle                            { position: absolute; left: 10px; bottom: 25px; }

/*****************************************************************************
 * Animation sur traitement long                                             *
 *****************************************************************************/

#idWait                                      { z-index: 25; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7);
                                               text-align: center; display: table-cell; vertical-align: middle; display: none;
                                             }
#idWait table                                { width: 100%; height: 100%; border-collapse: collapse; text-align: center; }
#idWait table td                             { height: 100%; padding: 0; vertical-align: middle; }