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

*                                            { box-sizing: border-box; }
div.clear                                    { clear: both; }
img                                          { max-width: 100%; height: auto; }
div.local                                    { z-index: 10; display: inline-block; position: fixed; right: 15px; top: 25px; width: 110px; padding: 2px 20px;
                                               text-align: center; font-family: 'Roboto', sans-serif; font-size: 14px; color: white;
                                               background: #B90000; font-weight: bold; border: 1px solid white; box-shadow: 5px 5px 5px #000;
                                             }
a                                            { text-decoration: none; color: inherit; cursor: pointer; }
a.text                                       { font-weight: bold; color: #568992; }
a.text:hover                                 { color: #A31414; }
a.image                                      { cursor: url(cursors/recherche.png), pointer; }
a.download                                   { cursor: url(cursors/telecharger.png), pointer; }
button.image                                 { font-size: 11pt; min-width: 120px; cursor: pointer; border: 1px solid #003C74; padding: 2px 14px; border-radius: 3px; background: linear-gradient(#FEFEFE, #D8D2C4 50%);
                                               line-height: 24px;
                                             }
button:hover                                 { border: 2px solid #DE7307; padding: 1px 13px; }
button.image img                             { display: inline-block; float: left; margin: 4px 10px 0 -4px; }
div.center                                   { text-align: center; }
div.bordered                                 { padding: 10px 20px; background: #FFF; border: 1px solid black; text-align: justify; }
span.underline                               { border-bottom: 1px dotted black; font-weight: bold; }
div.id_number                                { position: absolute; left: 1100px; top: 110px; font-family: 'digital_sfregular'; font-size: 2.5rem; color: maroon; }
img.light:hover                              { filter: brightness(1.75); }
span.encadre                                 { display: inline-block; margin: 5px 20px; border: 1px solid gray; padding: 2px 10px; color: #FFFFFF; background: #4E8CC0 }

/*****************************************************************************
 * Règles CSS                                                                *
 *****************************************************************************/

body                                         { font-family: Roboto, Arial; font-size: 12pt; margin: 0; padding: 0; color: #000000;
                                               background: #FFFFFF url(images/background_opaque.jpg) fixed center; background-size: cover; overflow-wrap : break-word; word-wrap: break-word;
                                             }

/*****************************************************************************
 * Cadre pour le site en travaux                                             *
 *****************************************************************************/

/***** MOBILES, TABLETTES, DESKTOP *******************************************/

#idWorking                                   { position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
.imgWorking                                  { position: absolute; left: 50%; margin-left: -141px; top: 50%; margin-top: -200px; width: 283px; }
#idWorkingText                               { z-index: 1; position: absolute; left: 50%; top: 50%; width: 600px; max-width: 90%; margin-top: -120px; padding: 5px 20px; background: rgba(255, 164, 164, 0.8);
                                               transform: translateX(-50%) translateY(120px);
                                             }
#idWorkingText h2                            { margin: 5px 0 0 0; padding: 0; text-align: center; font-size: 1.6rem; }
#idWorkingText h3                            { margin: 5px 0; padding: 0; text-align: center; font-size: 1.0rem; }

/***** TABLETTES *************************************************************/

@media only screen and (min-width: 750px)
    {
    #idWorkingText h1                        { margin: auto; margin-top: 190px; width: 700px; font-size: 18pt; color: #EEE6E3; background: #6A4B44; }
    }

/*****************************************************************************
 * Formulaire de connexion                                                   *
 *****************************************************************************/

div.info_connexion                           { margin: 40px auto 0 auto; }
form.connect                                 { position: relative; border: 3px solid #6B91AB; padding: 40px 0 20px 80px; width: 500px; max-width: 100%;
                                               background: linear-gradient(#FFFFFF, #D9D6D5);
                                             }
form.connect img                             { position: absolute; left: 40px; top: -40px; height: 60px; border: 1px solid black; }
form.connect div.entry                       { margin: 0 0 10px 0; }
form.connect input[type='text'],
form.connect input[type='password']          { width: 300px; }
form.connect input[type='submit']            { width: 200px; border: none; outline: none; padding: 0 15px; border-radius: 30px; font-size: 12pt;
                                               box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25), inset 2px 2px 5px rgba(255, 255, 255, 0.25), inset -3px -3px 5px rgba(0, 0, 0, 0.5);
                                               cursor: pointer; font-family: 'Roboto', sans-serif; font-size: 12pt; line-height: 30px; padding: 0 20px; color: #FFF; background: #C40000; text-transform: uppercase;
                                             }
form.connect input[type='submit']:hover      { font-weight: bold; }

@media only screen and (max-width: 400px)
    {
    form.connect                             { padding: 40px 0 20px 30px; }
    form.connect input[type='text'],
    form.connect input[type='password']      { width: 220px; }
    }

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

header                                       { z-index: 1; position: fixed; left: 0; top: 0; width: 100%; height: 80px; padding: 0 0 0 130px; font-family: 'BenchNine'; font-weight: normal; background: #FFF; }
header p.title                               { margin: 6px 0 0 0; font-size: 2.0rem; color: #4F4F4F; }
header p.date                                { margin: 4px 0 0 0; font-size: 1.1rem; color: #4F4F4F; }
header img.logo                              { position: absolute; left: 5px; top: 5px; margin: 10px 15px 0 10px; height: 80px; border: 1px solid black; }
header img.logo:hover                        { height: 90px; padding: 5px; border: 1px solid black; background: #FFF; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6);  }

@media only screen and (max-width: 400px)
    {
    header p.title                           { margin: 13px 0 0 -20px; font-size: 1.4rem; }
    header p.date                            { margin: 10px 0 0 -20px; font-size: 1.1rem; }
    }

/*****************************************************************************
 * Barre de navigation                                                       *
 *****************************************************************************/

nav                                          { z-index: 2; position: fixed; left: 350px; top: 41px; }
nav                                          { color: #005782; font-family: arial; }
nav a                                        { color: inherit; text-decoration: none; }
nav ul                                       { list-style-type: none; }
nav ul li                                    { cursor: pointer; }

nav ul                                       { display: inline-block; position: relative; margin: 0; font-size: 1.2rem; }
nav ul ul                                    { display: none; position: absolute; left: 0; top: 37px; width: 220px; transition: 1s; max-height: 0.3s;
                                               border: 1px dotted gray; box-shadow: 10px 10px 7px rgba(0, 0, 0,0.2);
                                             }
nav ul ul ul                                 { display: none; position: absolute; margin-top: -40px; margin-left: 218px; width: 310px; }

nav ul.level1 li                             { display: inline-block; position: relative; margin: 0; padding: 8px 20px; cursor: pointer; }
nav ul.level1 li:hover                       { color: #FFF; background: #00293E; }
nav ul.level1 li:first-child                 { margin-left: -40px; }
nav ul.level1 li:hover ul.level2             { display: block; transition: 1s; }
nav ul.level1 li.nop                         { padding-right: 20px; }
nav ul.level1 li.active,
nav ul.level1 li.active:hover                { color: #88A8C8; border-bottom: 8px solid #88A8C8; }
nav ul.level1 li.separator                   { cursor: default; height: 1px; background-color: #9F9F9F; padding: 0; }

nav ul.level2                                { z-index: 3; background: #FFFFFF; }
nav ul.level2 li                             { display: block; margin: 0 0 0 -40px; padding: 10px 40px 10px 20px; color: #0076AE; border-top: 1px dotted gray; }
nav ul.level2 li:hover ul.level3             { display: block; transition: 1s; }
nav ul.level2 li.next:after                  { position: absolute; right: 5px; top: 15px; content: ' '; width: 0px; border: 8px solid transparent;
                                               border-left: 8px solid #0076AE;
                                             }
nav ul.level2 li.active,
nav ul.level2 li.active:hover                { color: #800000; background-color: #FFE8E8; border-bottom: none; }

nav ul.level3                                { background: #FFFFFF; }
nav ul.level3 li                             { display: block; margin: 0 0 0 -40px; padding: 12px 40px 13px 20px; }
nav ul.level3 li:hover                       { color: #800000; background: #F8F8A5; }        
nav ul.level3 li.active,
nav ul.level3 li.active:hover                { color: #FFF; background-color: #800000; border-bottom: none; }

@media only screen and (max-width: 1240px)
    {
    nav                                      { display: none; }
    }

/*****************************************************************************
 * Contenu                                                                   *
 *****************************************************************************/

section                                      { z-index: 0; position: relative; min-height: calc(100% - 60px); }

section .article-container                   { display: flex; justify-content: center; }
.article                                     { margin: 0; padding: 20px 90px; width: 100%; min-height: 280px; font-family: Roboto, Arial; font-size: 1.3rem; }
.article.standard                            { background: url(images/background_top.png) no-repeat; }
.article a                                   { color: #6DA0BE; text-decoration: underline; }
.article a:hover                             { color: maroon; }
.article a.private                           { color: #D91F60; font-style: italic; }
.article a.private:hover                     { color: maroon; font-style: normal; }
.article a.valide                            { color: #47C831; text-decoration: none; }
.article a.valide:hover                      { color: maroon; font-style: normal; }
.article a.valide::before                    { content: '--- '; }
.article a.valide::after                     { content: ' ---'; }
.article h2                                  { position: relative; margin: 10px 0 40px 0; text-transform: uppercase; font-size: 3.0rem; font-weight: bold; letter-spacing: .2rem; }
.article h2::after                           { content: ''; display: inline-block; position: absolute; left: 0; bottom: -15px; width: 50px; height: 8px; background-color: #D91F60; }
.article h3                                  { margin: 10px 0; font-size: 1.6rem; letter-spacing: .1rem; font-weight: bold; color: #D91F60; }
.article h4                                  { margin: 10px 0 0 0; font-family: 'BenchNine'; color: #6E6E6E; font-size: 1.7rem; font-weight: normal; }
.article h5                                  { margin: 10px 0 0 0; font-family: 'BenchNine'; color: #7098A7; font-size: 1.2rem; font-weight: normal; }
.article h8                                  { display: block; margin: 10px 0 5px 0; padding: 2px 10px; font-family: 'BenchNine'; color: #425264; background: #BCC7D3; border: 1px solid black; font-size: 1.4rem;
                                               font-weight: normal; border-radius: 10px; width: 400px;
                                             }
.article p                                   { font-size: 1.3rem; }
.article p.bureau                            { border-bottom: 1px solid gray; background: #D3D1C9; margin-top: 0px; }
.article a.article                           { padding: 0; }
.article img.logo                            { float: left; margin: 0 15px 0 0; max-width: 90px; }
.article img.labeled                         { margin: 10px; }
.article img.delete_rubrique                 { float: right; margin-top: 5px; }
.article .legende                            { display: block; margin-left: 0px; margin-right: 0px; }
.article button.return                       { font-size: 11pt; min-width: 120px; cursor: pointer; border: 1px solid #003C74; padding: 2px 14px; border-radius: 3px; background: linear-gradient(#FEFEFE, #D8D2C4 50%); }
.article button.return:hover                 { border: 2px solid #DE7307; padding: 1px 13px; }
.article div.galerie                         { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.article div.galerie h4                      { width: 100%; margin-top: 25px; }
.article div.galerie img.labeled             { max-width: 334px; max-height: 150px; }

div.bureau                                   { margin: auto; max-width: 1000px; background: #EEEDEA; border: 1px solid gray; box-shadow: 10px 10px 20px rgb(0, 0, 0, .3); }
div.bureau_cadre                             { display: inline-block; margin: 20px; font-size: 1.0rem; width: 200px; max-width: 200px; }
div.bureau_cadre img                         { border: 1px solid black; padding: 5px; max-width: 120px; max-height: 130px; background: #FFF; }
div.bureau_title                             { font-size: 1.2rem; font-weight: bold; text-align: center; }

div.toplegende                               { margin: 0 0 2px 0; border: 1px solid black; }
div.bottomlegende                            { margin: -5px 0 0 0; font-size: 1.0rem; font-style: italic; color: gray; }

audio                                        { width: 100%; max-width: 900px; }

table.define td                              { vertical-align: top; padding-bottom: 8px; border-bottom: 1px dotted black; }
table.define td:nth-child(1)                 { width: 200px; font-weight: bold; color: #626262; }
table.gestion                                { font-size: 1rem; }
table.gestion td                             { padding: 1px 10px; }
table.gestion td:nth-child(1)                { padding: 1px 10px 1px 0; }
table.syntaxe td                             { vertical-align: top; padding: 0 10px; border: 1px dotted gray; font-size: 1.2rem; color: gray; }

img.labeled                                  { border: 1px solid silver; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); }

div.document                                 { display: inline-block; width: 100px; height: 140px; cursor: pointer; border-radius: 10px; border: 1px solid transparent; margin: 0 10px 10px 0; padding: 2 10px 10px 10px;
                                               overflow: hidden; font-size: 0.8rem; text-align: center; 
                                             }
div.document:hover                           { background: rgba(255, 255, 255, 0.5); border: 1px solid gray; }
div.document img                             { margin: 0; }

div.signature                                { float: right; display: inline-block; margin-right: 100px; text-align: center; }

div.important                                { margin: 10px 0; padding: 5px 0; font-weight: bold; color: #FFFFFF; background: #FF0606; text-align: center; }

div.shortcuts                                { margin-top: -50px; }
div.shortcut                                 { float: left; display: inline-block; margin: 0 50px 20px 0; padding: 5px 10px; line-height: 92px; font-size: 1.4rem; border-radius: 15px; }
div.shortcut:hover                           { background: rgba(255, 255, 255, 0.8); }
div.shortcut a                               { text-decoration: none; }

@media only screen and (max-width: 400px)
    {
    .article                                 { padding: 20px 30px; }
    .article h2                              { font-size: 1.0rem; }
    .article h3                              { margin: 10px 0 30px 0; font-size: 1.5rem; }
    .article h3::after                       { bottom: -12px; width: 45px; height: 6px; }
    .article h4                              { font-size: 1.5rem; }
    .article p                               { font-size: 1rem; }
    div.shortcuts                            { margin-right: -20px; margin-top: -35px; }
    div.shortcut                             { margin: 0 10px 10px 0; line-height: 50px; font-size: 1.2rem; }
    div.shortcut img                         { max-height: 50px; }
    }

/*****************************************************************************
 * Welcome                                                                   *
 *****************************************************************************/

section .welcome                             { margin: 80px 0 0 0; padding: 165px 80px 0 80px; width: 100%; height: 370px; text-align: center; color: #FFF; background: url(images/welcome.jpg); }
section .welcome h1                          { margin: 0 0 10px 0; font-family: roboto; font-size: 35pt; text-shadow: 2px 0 5px #000; cursor: default; opacity: 0.8; transition: opacity 0.5s; }
section .welcome h2                          { margin: 10px 0 0 0; font-family: roboto; font-weight: normal; text-shadow: 2px 0 5px #000; cursor: default; opacity: 0.8; transition: opacity 0.5s; }
section .welcome:hover h1,
section .welcome:hover h2                    { opacity: 0.2; transition: opacity 0.5s; }

@media only screen and (max-width: 400px)
    {
    section .welcome                         { padding: 20px 40px 0 40px; height: 250px; }
    }

/*****************************************************************************
 * Trace des rubriques                                                       *
 *****************************************************************************/

h3.small                                     { font-size: 1.2rem; }
h3.small a                                   { text-decoration: none; }

div.tab_menu                                 { width: 250px; border: 1px solid black; border-radius: 10px; background: transparent; overflow: hidden; }
div.tab_menu a                               { display: block; line-height: 25px; padding: 5px 10px; text-decoration: none; border-top: 1px solid gray; }
div.tab_menu a:first-child                   { border-top: none; }
div.tab_menu a.selected                      { background: #FFF; border-right: 5px solid #D91F60; }

@media only screen and (min-width: 400px)
    {
    div.tab_menu_container                   { display: flex; justify-content: start; align-items: start; }
    }

/*****************************************************************************
 * Bloc de page d'accueil                                                    *
 *****************************************************************************/

div.cards                                    { display: flex; justify-content: center; flex-wrap: wrap; }
div.card                                     { display: block; margin: 10px; padding: 0; text-align: center; width: 300px; height: 300px; border: 1px solid gray; border-radius: 10px; background: #FAF9ED; }
div.card:hover                               { background: #FFF; box-shadow: 2px 2px 10px #222; }
div.card_container                           { position: relative; width: 100%; height: 100%; padding: 10px; }
div.card a                                   { text-decoration: none; }
div.card img.logo                            { position: absolute; bottom: 20px; left: calc(50% - 55px); max-width: 110px; max-height: 150px; }

div.actions                                  { display: flex; justify-content: left; flex-wrap: wrap; }
div.action                                   { display: block; margin: 10px 10px 0 0; padding: 0; text-align: left; width: 700px; max-width: 100%; border: 1px solid gray; border-radius: 10px; background: #FAF9ED; cursor: pointer; }
div.action:hover                             { background: #FFF; box-shadow: 2px 2px 10px #222; }
div.action_nop                               { color: gray; background: #D6D6D6; cursor: default; }
div.action_nop:hover                         { background: #D6D6D6; box-shadow: none; }
div.action img                               { margin: 10px; float: left; width: 64px; max-height: 64px; }
div.action span.date                         { display: inline-block; padding: 1px 10px; border: 1px solid gray; border-radius: 8px; font-size: 0.8rem; }
div.action p                                 { font-size: 1.0rem; padding: 0 10px 0 90px; }

/*****************************************************************************
 * Contact                                                                   *
 *****************************************************************************/

div.contact                                  { position: relative; width: 800px; max-width: 100%; min-height: 190px; margin: 0 0 20px 0; padding: 10px; border: 1px solid gray; border-radius: 15px;
                                               background: rgba(255, 255, 255, 0.3); box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
                                             }
div.contact p                                { margin: 1px 0; }
div.contact h3                               { margin: 0; font-family: 'BenchNine'; color: #5A9E96; font-size: 1.9rem; font-weight: normal; text-shadow: 1px 1px 1px #000; }
div.contact table td:first-child             { width: 110px; }
div.contact img                              { position: absolute; top: 10px; right: 10px; max-height: 150px; max-width: 120px; }

/*****************************************************************************
 * Contenu                                                                   *
 *****************************************************************************/

div.tab_content                              { width: calc(100% - 270px); margin: 0 0 0 20px; padding: 0 0 0 15px; border-left: 1px solid #A4A4A4; }

/*****************************************************************************
 * Enveloppe                                                                 *
 *****************************************************************************/

div.enveloppe                                { border: 1px solid black; width: 430px; max-width: 100%; height: 220px; background: #FFFFF4; color: black; font-size: 1.1rem;
                                               font-family: "Courier New", Courier, mono; text-align: left; padding: 10px 10px 10px 170px;
                                             }

@media only screen and (max-width: 400px)
    {
    div.enveloppe                            { padding: 10px 10px 10px 130px; height: 180px; font-size: 0.8rem; }
    }

/*****************************************************************************
 * Pellicule                                                                 *
 *****************************************************************************/

div.pellicule img.pellicule                  { max-width: 100%; min-height: 400px; max-height: 400px; }
div.pellicule img.bille                      { filter: grayscale(1); opacity: 0.33; cursor: pointer; }
div.pellicule img.selected                   { filter: grayscale(0); opacity: 1.0; }

/*****************************************************************************
 * Table pour la liste des documents associés à l'article                    *
 *****************************************************************************/

table.documents                              { border-collapse: collapse; }
table.documents tr                           { height: 61px; }
table.documents td                           { padding: 0 10px; border: 1px solid gray; font-size: 1.0rem; vertical-align: middle; text-align: center; }
table.documents td:nth-child(5)              { text-align: left; }
table.documents td.pellicule                 { width: 76px; min-height: 61px; background: url(images/pellicule.png); cursor: pointer; }
table.documents td.nop                       { border: 1px solid transparent; margin: 0 0 0 15px; }
table.documents td img                       { max-width: 52px; max-height: 52px; }
table.documents td.nop img                   { padding: 4px; max-width: 32px; max-height: 32px; cursor: pointer; }
table.documents td.nop img:hover             { background: rgba(0, 0, 0, 0.2); }

/*****************************************************************************
 * Table pour les sauvegardes / restaurations                                *
 *****************************************************************************/

table.save                                   { border: 2px solid #9DA8A8; border-collapse: collapse; font-size: 1.0rem; }
table.save tr                                { background: #FFF; border-top: 1px solid #B6BEBE; }
table.save tr:hover                          { background: #EBF0F1; }
table.save th                                { font-weight: normal; padding: 2px 15px; background: #D1DCDE; }
table.save td                                { padding: 2px 15px; }
table.save label                             { cursor: pointer; user-select: none; }
table.save .sel                              { cursor: pointer; }

/*****************************************************************************
 * Table pour les listes                                                     *
 *****************************************************************************/

table.liste                                  { border-collapse: collapse; }
table.liste th                               { padding: 2px 10px; border: 1px solid gray; background: #BECBD1; }
table.liste td                               { padding: 2px 10px; border: 1px solid gray; }
table.liste tr.sel                           { cursor: pointer; }
table.liste tr.sel:hover                     { color: white; background: #519FA8; }
td.orange                                    { color: #D24400; font-weight: bold; }

/*****************************************************************************
 * Table des adhérents                                                       *
 *****************************************************************************/

table.adherents,
table.chambres,
table.inscrits                               { border-collapse: collapse; }
table.chambres                               { width: 1300px; max-width: 100%; }
table.adherents tr,
table.chambres,
table.inscrits tr                            { cursor: default; }
table.adherents tr.selected,
table.inscrits tr.selected,
table.adherents tr.selected:nth-child(odd),
table.inscrits tr.selected:nth-child(odd)    { color: white; background: #526B70; }
table.adherents tr:nth-child(odd),
table.chambres tr:nth-child(odd),
table.inscrits tr:nth-child(odd)             { background: #B6C6C9; }
table.adherents tr:hover,
table.inscrits tr:hover                      { color: white; background: #0E86A9; }
table.adherents td,
table.inscrits td                            { vertical-align: top; }
table.adherents td:nth-child(1)              { padding: 0 0 0 5px; width: 30px; vertical-align: top; cursor: pointer; }
table.adherents td:nth-child(2)              { padding: 0 0 0 5px; width: 30px; vertical-align: top; cursor: pointer; }
table.adherents td:nth-child(3)              { width: 500px; }
table.adherents td:nth-child(4)              { width: 400px; }
table.inscrits td:nth-child(1)               { padding: 0 0 0 5px; width: 30px; vertical-align: top; cursor: pointer; }
table.inscrits td:nth-child(3)               { width: 500px; }
table.inscrits td:nth-child(4)               { width: 400px; }
table.encadre                                { border: 1px solid black; padding: 10px; border-radius: 10px; background: #EAE8E1; }
table.adherents tr.nop:hover,
table.inscrits tr.nop:hover                  { color: #000; background: #B6C6C9; }

#infoTable                                   { position: absolute; left: 1050px; top: 0; width: calc(100% - 1050px); padding: 20px 20px 0 0; }

/*****************************************************************************
 * Planning voyage                                                           *
 *****************************************************************************/

img.voyage                                   { position: absolute; left: 305px; top: 50px; }
img.connect                                  { display: none; }
button.CmdSend                               { position: fixed; left: 900px; top: 200px; }
table.planning                               { border-collapse: separate; max-width: 100%; }
table.planning td                            { vertical-align: top; font-size: 1.0rem; padding: 0 10px; }
table.planning-inside                        { border-collapse: collapse; }
table.planning-inside td                     { vertical-align: top; font-size: 1.0rem; padding: 0 10px 0 0; }
table.planning-form                          { border-collapse: collapse; }
table.planning-form td                       { vertical-align: top; }

div.planning                                 { display: flex; flex-wrap: wrap; max-width: 1600px; }
div.planning-block                           { border: 1px solid; gray; margin: 0 10px 10px 0; border-radius: 10px; padding: 5px; max-width: 470px; }
div.planning-block h3                        { font-size: 1.2rem; margin: 0 0 8px 0; padding: 0; }
div.title                                    { background: #ABA08B; color: white; padding: 5px 15px; }

div.groupe                                   { display: none; margin: 0 0 8px 0; padding: 5px 5px 0 5px; border: 1px solid #C7C4B1; background: rgba(255, 255, 255, 0.4); }
div.groupe p                                 { font-size: 1.0rem; margin: 0 0 5px 0; }

@media only screen and (max-width: 400px)
    {
    div.planning-block                       { width: 280px; }
    img.connect                              { display: block; position: absolute; left: 295px; top: 35px; }
    button.CmdSend                           { left: 200px; top: 100px; }
    }

/*****************************************************************************
 * Affiche                                                                   *
 *****************************************************************************/

div.affiche                                  { position: relative; margin: 15px auto; width: 1000px; background: #FFF; }
div.affiche img.logo                         { height: 100px; margin-right: 30px; }
div.affiche img.avatar                       { position: absolute; left: -75px; top: 20px; }
div.affiche h2                               { margin: 0 0 40px 0; text-transform: uppercase; font-size: 3.0rem; font-weight: bold; letter-spacing: .2rem; text-align: center; color: #7C95AF; }
div.affiche h3                               { margin: 10px 0; font-size: 1.6rem; letter-spacing: .1rem; font-weight: bold; color: #D91F60; }
div.affiche h11                              { color: #858585; font-family: Arial, Helvetica, sans-serif; font-size: 30pt; font-weight: bold; }
div.affiche h12                              { display: block; text-align: center; color: #3C4EA4; font-family: Arial, Helvetica, sans-serif; font-size: 30pt; font-weight: bold; }
div.affiche h13                              { display: block; text-align: center; color: #3C4EA4; font-family: Arial, Helvetica, sans-serif; font-size: 15pt; }
div.affiche h14                              { display: block; text-align: center; color: #3C4EA4; font-family: Arial, Helvetica, sans-serif; font-size: 18pt; }
div.affiche h15                              { display: block; text-align: center; color: #3C4EA4; font-family: Arial, Helvetica, sans-serif; font-size: 22pt; font-weight: bold; }
div.affiche h16                              { display: block; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 1.1rem; font-weight: normal; }
div.affiche h17                              { display: block; margin: 10px 0; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 1.5rem; font-weight: normal; }
div.affiche div.photo                        { text-align: center; margin-top: 15px; }
div.affiche div.photo img                    { max-width: 95%; }
div.affiche p                                { margin: 0 25px 10px 25px; text-indent: 20px; text-align: justify; }
div.affiche p.bulle                          { position: relative; margin: 0 25px 2px 70px; text-indent: 0; }
div.affiche p.bulle::before                  { content: ""; position: absolute; left: -20px; top: 8px; border: 5px solid #676767; width: 0; height: 0; }
div.affiche p.bulle.red                      { color: red; font-weight: bold; }
div.affiche p.bulle.red::before              { content: ""; position: absolute; left: -20px; top: 8px; border: 5px solid #FF0000; width: 0; height: 0; }
div.affiche p.title                          { color: #3C4EA4; background: #C0CFE9; text-indent: 0; padding: 5px 15px; }
div.affiche div.date                         { text-align: center; color: #A6A6A6; font-family: Arial, Helvetica, sans-serif; font-size: 25pt; font-weight: bold; }
div.affiche div.lieu19                       { text-align: center; font-size: 19pt; }
div.affiche div.lieu13                       { text-align: center; font-size: 13pt; }
div.affiche div.pot                          { margin-top: 10px; text-align: center; font-size: 17pt; }
div.affiche div.tarif                        { margin-top: 10px; text-align: center; font-size: 19pt; font-weight: bold; }
div.affiche div.libre                        { text-align: center; font-size: 15pt; }
div.affiche button                           { font-size: 11pt; min-width: 120px; cursor: pointer; border: 1px solid #003C74; padding: 2px 14px; border-radius: 3px; background: linear-gradient(#FEFEFE, #D8D2C4 50%); }
div.affiche button:hover                     { border: 2px solid #DE7307; padding: 1px 13px; }
div.affiche div.planning                     { color: #3C4EA4; background: #C0CFE9; margin: 0 25px; padding: 5px 15px; }
div.affiche table.bulle                      { border-collapse: collapse; }
div.affiche table.bulle td                   { vertical-align: top; }
div.affiche p.modalites                      { margin: 20px 25px 10px 25px; text-indent: 0; border: solid 1px gray; text-align: center; }
div.puce                                     { margin: 0 0 5px 80px; }
div.puce img                                 { float: left; margin: 7px 15px 0 0; }

div.menu                                     { padding: 220px 0 0 0; text-align: center; min-height: 620px; background: url(images/menu.jpg) no-repeat; background-position: center top 40px; }
div.menu_inside                              { margin: auto; width: 380px; font-family: "Times New Roman", Times, serif; font-size: 1.4rem; }
div.menu_inside p                            { margin: 0 0 20px 0; }

@media only screen and (max-width: 400px)
    {
    div.affiche                              { margin: 15px -30px; width: calc(100% + 60px); }
    div.affiche img.logo                     { height: 50px; margin-right: 15px; }
    div.affiche img.avatar                   { position: absolute; left: inherit; right: 20px; top: -26px; width: 50px;}
    div.affiche h11                          { font-size: 19pt;  }
    div.affiche h12                          { font-size: 15pt; }
    div.affiche h13                          { font-size: 12pt; }
    div.affiche h14                          { margin: 0 auto; font-size: 13pt; max-width: 90%; }
    div.affiche h15                          { font-size: 15pt; }
    div.affiche p.bulle                      { margin-left: 65px; }
    div.affiche p.bulle::before              { left: -15px; top: 6px; border: 4px solid #676767; }
    div.affiche div.date                     { font-size: 15pt; }
    div.affiche div.lieu19                   { font-size: 13pt; }
    div.affiche div.lieu13                   { font-size: 10pt; }
    div.affiche div.pot                      { font-size: 12pt; }
    div.affiche div.tarif                    { font-size: 13pt; }
    div.affiche div.libre                    { font-size: 10pt; }
    div.affiche div.planning                 { font-size: 1.0rem; }
    div.menu_inside                          { width: 100%; }
    }

/*****************************************************************************
 * Sorties                                                                   *
 *****************************************************************************/

div.sortie                                   { max-width: 982px; background: #FFFFFF; }
div.sortie p                                 { text-align: justify; }
div.sortie h3                                { font-size: 1.4rem; }
div.vignettes                                { float: left; padding-right: 20px; }
div.texte                                    { padding: 0 20px 0 20px; }

@media only screen and (max-width: 400px)
    {
    div.sortie h3                            { font-size: 1.1rem; }
    div.vignettes                            { display: none; }
    }

/*****************************************************************************
 * Formatage "VOYAGE"                                                        *
 *****************************************************************************/

div.voyage h3                                { font-family: 'BenchNine'; color: #6D91B4; text-align: center; font-size: 3.6rem; }
div.voyage h4                                { text-align: center; font-size: 2.3rem; }
div.voyage p.logo_agence                     { margin: 15px 0; text-align: center; }
div.voyage span.important                    { color: white; background: #D50000; font-weight: bold; padding: 0 10px; border-radius: 15px; }
div.voyage_jour                              { margin: 0 15px 10px 15px; padding: 10px; border: 1px solid gray; border-radius: 10px 10px 0 0; overflow: hidden; }
div.voyage_jour p                            { margin: 0 0 5px 0; padding: 0; text-align: justify; }
div.voyage_jour h4                           { margin: -10px -10px 10px -10px; padding: 2px 10px; text-align: left; color: white; background: #6D91B4; font-size: 1.3rem; }
div.voyage_info                              { margin: 20px 15px 10px 15px; padding: 10px; border: 2px solid gray; }
div.voyage_info h3                           { margin: -10px -10px 10px -10px; padding: 2px 10px; text-align: left; color: white; background: #6D91B4; font-size: 1.3rem; }
div.voyage_info h4                           { margin: 0; padding: 0; text-align: left; color: gray; font-size: 1.6rem; }
div.voyage_info span.cout_voyage             { display: inline-block; width: 500px; }
div.voyage_jour img.vignette_right           { float: right; margin: 0 0 0 15px; max-height: 130px; }
div.voyage_jour img.vignette_left            { float: left; margin: 0 15px 0 0; max-height: 130px; }

@media only screen and (max-width: 400px)
    {
    div.voyage h3                            { font-size: 2.0rem; }
    div.voyage h4                            { font-size: 1.5rem; }
    div.voyage_info span.cout_voyage         { display: inline; width: auto; }
    div.voyage p.logo_agence img             { max-height: 90px; }
    div.voyage_jour h4                       { font-size: 1.0rem; }
    div.voyage_jour img.vignette_right       { float: none; margin: 5px 0; width: 100%; max-height: inherit; }
    div.voyage_jour img.vignette_left        { float: none; margin: 5px 0; width: 100%; max-height: inherit; }
    }

/*****************************************************************************
 * Graphiques                                                                *
 *****************************************************************************/

table.graph                                  { font-size: 0.8rem; }
table.graph td                               { text-align: center; vertical-align: bottom; }

/*****************************************************************************
 * Compte rendus                                                             *
 *****************************************************************************/

table.cr                                     { margin: -5px 0 10px 60px; }
table.cr_presents                            { margin: 0 0 15px 45px; border: 1px solid gray; }
table.cr_activites                           { margin: 0 20px 0 45px }
fieldset.cr                                  { margin-left: 25px; width: 95%; }
fieldset.cr table.vote td:nth-child(2),
fieldset.cr table.vote td:nth-child(4)       { width: 100px; }
h4.cr                                        { margin-left: 25px; border-top: 1px solid gray; border-bottom: 1px solid gray; margin-bottom: 10px; padding-left: 10px; width: 95%; background: #F1F3E4; }
h5.cr                                        { margin-left: 25px; font-size: 1.5rem; color: #D91F60; }
span.nom_jour                                { display: inline-block; font-size: 0.8rem; color: gray; }
span.jour                                    { display: inline-block; margin-top: 1px; padding: 2px 8px; font-size: 1.5rem; color: white; background: red; }

/*****************************************************************************
 * Bilan financier                                                           *
 *****************************************************************************/

table.bilan                                  { margin-left: 25px; border-collapse: collapse; width: 900px; }
table.bilan tr:nth-child(even)               { background: #EDEDEB; }
table.bilan tr:nth-child(odd)                { background: #D9D7CE; }
table.bilan tr:nth-child(1)                  { background: transparent; }
table.bilan td,
table.bilan th                               { padding: 4px 0; }
table.bilan td:nth-child(1)                  { padding: 4px 20px 4px 5px; }
table.bilan th:nth-child(2),
table.bilan th:nth-child(3),
table.bilan th:nth-child(4)                  { border: 1px solid gray; text-align: center; font-weight: normal; }
table.bilan td:nth-child(2),
table.bilan td:nth-child(3),
table.bilan td:nth-child(4)                  { border-left: 1px solid gray; border-right : 1px solid gray; text-align: right; width: 160px; padding: 4px 10px; }

table.bilan tr.total                         { background: transparent; }
table.bilan tr.total td                      { font-weight: bold; }
table.bilan tr.total td:nth-child(2),
table.bilan tr.total td:nth-child(3),
table.bilan tr.total td:nth-child(4)         { border: 1px solid gray; }

@media only screen and (max-width: 400px)
    {
    table.bilan                              { display: none; }
    }

/*****************************************************************************
 * Pied de page                                                              *
 *****************************************************************************/

footer                                       { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 40px 0 0 0; padding: 40px 60px; color: #FFF; background: #950000; }
footer h4                                    { margin: 0; font-family: 'BenchNine'; font-size: 1.9rem; font-weight: normal; }
footer a:hover                               { color: yellow; }
footer hr                                    { margin: 8px 0 -10px 0; color: #FFF; }

footer div.elem                              { margin: 0 15px 20px 15px; }

@media only screen and (min-width: 3000px)
    {
    footer                                   { position: fixed; width: 100%; bottom: 0; }
    }

/*****************************************************************************
 * Formulaires                                                               *
 *****************************************************************************/

#form_editbar                                { position: relative; margin: 0 0 -12px 150px; width: 800px; height: 32px; }
#form_editbar img                            { margin: 0 2px 0 0; border: 1px solid transparent; border-radius: 3px; cursor: pointer; }
#form_editbar img:hover                      { border: 1px solid #99D1FF; background: #CCE8FF; }
#form_field                                  { position: relative; margin: 15px 0; vertical-align: top; font-size: 1rem; }
#form_field label.header                     { display: inline-block; float: left; margin-top: 2px; margin: right: 10px; width: 150px; }
#form_field label.change_pass                { display: inline-block; float: left; margin-top: 2px; margin: right: 10px; width: 200px; }
#form_field input[type='checkbox']           { visibility: hidden; }
#form_field input[type='radio'],
#form_field label                            { cursor: pointer; }
#form_field .slideThree                      { display: inline-block; width: 80px; height: 26px; background: #333; margin: 0 auto;
                                               border-radius: 50px;
                                               position: relative;
                                               box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
                                             }
#form_field .slideThree:after                { content: 'NON'; font: 12px/26px Arial, sans-serif; color: #FF9595; position: absolute; right: 10px; z-index: 0; font-weight: bold;
                                               text-shadow: 1px 1px 0px rgba(255,255,255,.15);
                                             }
#form_field .slideThree:before               { content: 'OUI'; font: 12px/26px Arial, sans-serif; color: #0DFF0D; position: absolute; left: 10px; z-index: 0; font-weight: bold; }
#form_field .slideThree label                { display: block; width: 34px; height: 20px; margin-top: 0;
                                               border-radius: 50px;
                                               transition: all .4s ease;
                                               cursor: pointer;
                                               position: absolute; top: 3px; left: 3px; z-index: 1;
                                               box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
                                               background: #FCFFF4;
                                               background: linear-gradient(to bottom, #FCFFF4 0%, #DFE5D7 40%, #B3BEAD 100%);
                                             }
#form_field .slideThree input[type='checkbox']:checked + label
                                             { left: 43px; }

#form_field .custom_dropdown                 { display: inline-block; font-family: 'Roboto', sans-serif; cursor: pointer; }
#form_field .custom_dropdown select          { padding: 1px 5px; font-size: 11pt; line-height: 1; border: 1px solid silver; height: 24px; cursor: pointer;
                                               background-image: linear-gradient(to bottom, #EDEDED 12%, #FFFFFF 53%);
                                             }
input.button                                 { cursor: pointer; margin: 15px 0 0 0; padding: 1px 15px; }

/*****************************************************************************
 * Paramètres                                                                *
 *****************************************************************************/

div.editParams                               { width: 800px; margin: 100px auto 0 auto; padding: 10px; border: 1px solid #000000; background: #EFEFEF;
                                               display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
                                             }
div.editProgress                             { width: 1060px; margin: 300px auto 0 auto; padding: 30px; background: #EFEFEF; border: 1px solid black; border-radius: 10px; }

#EditList                                    { z-index: 5; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
#EditMedia                                   { z-index: 5; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
#EditLink                                    { z-index: 5; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
#EditProgress                                { z-index: 5; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }

progress                                     { display: inline-block; width: 1000px; height: 24px; padding: 3px 3px 2px 3px;
                                               background: #A2AE79;
                                               background: linear-gradient(#495131, #A2AE79);                                                           /* IE */
                                               background: -moz-linear-gradient(top, #495131, #A2AE79);                                                 /* Mozilla */
                                               background: -webkit-gradient(linear, left top, left bottom, from(#495131), to(#A2AE79));                 /* Safari et chrome */
                                               border: 1px solid rgba(0, 0, 0, .5);
                                               -moz-border-radius: 15px;
                                               -webkit-border-radius: 15px;
                                               border-radius: 15px;
                                               -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .2);   
                                               -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .2);   
                                               box-shadow: 0 1px 0 rgba(255, 255, 255, .2);   
                                             }
progress::-moz-progress-bar                  {
                                               border-radius: 10px;
                                               background: #09c;
                                               background: 
                                                 -moz-repeating-linear-gradient(
                                                 45deg, 
                                                 rgba(255,255,255,.2) 0,
                                                 rgba(255,255,255,.2) 10px, 
                                                 rgba(255,255,255,0) 10px,
                                                 rgba(255,255,255,0) 20px
                                                 ),
                                                 -moz-linear-gradient(
                                                 rgba(255,255,255,.1) 50%,
                                                 rgba(255,255,255,0) 60%
                                                 ),
                                                 #09c;
                                               background: 
                                                 repeating-linear-gradient(
                                                 45deg, 
                                                 rgba(255,255,255,.2) 0,
                                                 rgba(255,255,255,.2) 10px, 
                                                 rgba(255,255,255,0) 10px,
                                                 rgba(255,255,255,0) 20px
                                                 ),
                                                 linear-gradient(
                                                 rgba(255,255,255,.1) 50%,
                                                 rgba(255,255,255,0) 60%
                                                 ),
                                                 #CF940A;
                                               background-size: 500px 20px, auto, auto;
                                               background-position: -500px 0, top, top;
                                               background-position: top right, top, top;
                                               box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 
                                                 0 -1px 0 rgba(0,0,0,.8) inset,
                                                 0 0 2px black;
  
                                             }

progress::-webkit-progress-value             {
                                               /* Code identique mais avec les bons préfixes! */

                                             }
progress::-webkit-progress-bar               { background: transparent; }

/*****************************************************************************
 * Formulaire pour les inscriptions                                          *
 *****************************************************************************/

div.form                                     { margin: 30px 20px 20px 20px; }
div.form h2                                  { position: relative; margin: 10px 0 40px 0; text-transform: uppercase; font-size: 3.0rem; font-weight: bold; letter-spacing: .2rem; }
div.form h2::after                           { content: ''; display: inline-block; position: absolute; left: 0; bottom: -15px; width: 50px; height: 8px; background-color: #D91F60; }
div.form h3                                  { margin: 10px 0; font-size: 1.6rem; letter-spacing: .1rem; font-weight: bold; color: #D91F60; }
#form_field label.large                      { display: inline-block; float: left; margin-top: 2px; margin: right: 10px; width: 300px; }

/*****************************************************************************
 * Formulaires d'édition                                                     *
 *****************************************************************************/

form.edit                                    { position: relative; margin: 10px 0 0 0; }
form.edit fieldset                           { border: 2px solid #A5B7C0; margin: 0 0 15px 0; }
form.edit fieldset legend                    { font-size: 12pt; color: #546C78; padding: 0 10px; }
form.edit label.header                       { color: #4F6673; font-size: 12pt; }
form.edit input[type='text'],
form.edit input[type='password']             { padding-left: 5px; width: 300px; height: 26px; color: #616161; font-family: 'Roboto', sans-serif; font-size: 12pt; border: 1px solid gray; }
form.edit button                             { font-size: 11pt; min-width: 120px; cursor: pointer; border: 1px solid #003C74; padding: 2px 14px; border-radius: 3px; background: linear-gradient(#FEFEFE, #D8D2C4 50%); }
form.edit button:hover                       { border: 2px solid #DE7307; padding: 1px 13px; }
form.edit div.control                        { font-weight: bold; color: maroon; }
form.edit img.photo_presse                   { position: absolute; right: 20px; top: 20px; max-height: 80px; }
form.edit img.photo_membre                   { width: 160px; }
#gimp_container                              { position: absolute; left: 0; top: 0; width: 160px; height: 197px; background-color: #FFF; display: none; }
#gimp                                        { background-size: contain; background-repeat: no-repeat; }
form.edit textarea                           { resize: none; font-family: 'Roboto', sans-serif; font-size: 12pt; font-weight: normal; }

/*****************************************************************************
 * Relier des adhérents                                                      *
 *****************************************************************************/

#idRelier                                    { z-index: 20; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; }
#idRelier div.inside                         { display: flex; justify-content: center; align-items: center; }
form.relier                                  { width: 300px; height: 700px; margin-top: 130px; padding: 20px; background: white; border-radius: 10px; }

/*****************************************************************************
 * Alerte                                                                    *
 *****************************************************************************/

div.alert                                    { z-index: 50; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;
                                               background: rgba(0, 0, 0, 0.8); text-align: center; display: table-cell; vertical-align: middle;
                                             }
div.alert table                              { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px; max-width: 100%; height: 200px; max-height: 100%; border-collapse: collapse; text-align: center; }
div.alert table td                           { padding: 20px; background: #F2F3DA; font-size: 1.5rem; border: 5px solid #D35947; }

/*****************************************************************************
 * Lightbox                                                                  *
 *****************************************************************************/

div.lightbox                                 { z-index: 25; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;
                                               background: rgba(0, 0, 0, 0.5); text-align: center; display: table-cell; vertical-align: middle;
                                               display: none;
                                             }
div.lightbox table                           { width: 100%; height: 100%; border-collapse: collapse; text-align: center; }
div.lightbox table td                        { height: 100%; padding: 0; vertical-align: middle; }
div.lightbox img                             { border: 10px solid white; border-radius: 10px; box-shadow: 20px 20px 30px #000; }

/*****************************************************************************
 * Fenêtre "lighturl"                                                        *
 *****************************************************************************/

div.lighturl                                 { z-index: 25; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;
                                               background: rgba(0, 0, 0, 0.5); text-align: center; display: table-cell; vertical-align: middle;
                                               display: none;
                                             }
div.lighturl table                           { width: 100%; height: 100%; border-collapse: collapse; text-align: center; }
div.lighturl table td                        { height: 100%; padding: 0; vertical-align: middle; }
div.lighturl img                             { border: 10px solid white; border-radius: 10px; box-shadow: 20px 20px 30px #000; }

/*****************************************************************************
 * Visualisation des demandes de chambre                                     *
 *****************************************************************************/

div.chambres                                 { 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;
                                             }
div.chambres_inside                          { position: absolute; left: 50%; top: 50%; height: calc(100% - 200px); transform: translate(-50%, -50%); padding: 10px; background: #F2F2F2; overflow-y: auto; }
div.chambres_close                           { position: absolute; left: 50%; top: calc(100% - 50px); 50%; transform: translate(-50%, -50%); }

/*****************************************************************************
 * 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; }

/*****************************************************************************
 * Spécifications                                                            *
 *****************************************************************************/

a.nop,
a.nop:hover                                  { color: black; background: #D3D2CB; cursor: default; }