/* Styles du programme v-Jemaf 7 */

/* Police utilisées : Roboto */
@font-face {font-family: "Roboto"; src: url('../img/fonts/Roboto-Thin.woff2');}
@font-face {font-family: "Roboto"; font-style: italic; src: url('../img/fonts/Roboto-ThinItalic.woff2');}
@font-face {font-family: "Roboto"; font-weight: bold; src: url('../img/fonts/Roboto-Regular.woff2');}
@font-face {font-family: "Roboto"; font-style: italic; font-weight: bold; src: url('../img/fonts/Roboto-Italic.woff2');}

/* Icone svg */
.svg-menu-icone {display: inline-block; position: relative; width: 24px; height: 16px; margin-right: .5rem;}
.svg-menu-icone svg {position: absolute; bottom: -6px;}

body, textarea, select, input {font: 16px 'Roboto', 'Verdana', sans-serif; color: white; letter-spacing: .25px; background-color: transparent;}
body {background-color: black; margin: 0;}
/*body.simple-ecran {overflow: hidden;}*/

/* Standard */
a {color: white; text-decoration: none;}
.icone:hover, a:hover, #telec aside a:hover, .hover:hover, input:hover, #telec #code:hover, textarea:hover, select:hover, .bouton:hover {color:#fcc; border-color: #fcc; cursor: pointer;}
.bouton:hover {background-color: #666;}
input[type="text"]:hover, input[type="number"]:hover, textarea:hover, #telec #code:hover {cursor: text;}
a.vu {color: #a8f;}
a.actif {color: #f88; font-weight: bold;}
h1 {margin: 0 0 .75em; text-align: center; font-weight: bold; font-size: 2em;}
h2 {margin: 0 0 .25em; font-size: 1.25em; font-weight: bold; color: #080;}
sub {vertical-align: 0px; color: #888; font-weight: bold;}
p.message {color: #f88; font-style: italic; margin: .5em 0	; font-size: .95em;}
.p-grey {margin: .5em 0 0 1em;}
.p-grey span {color: #aaa !important; font-size: .9em; background-color: rgba(0, 0, 0, .5) !important;}
.d-none {display: none !important;}
.mt-0 {margin-top: 0 !important;}
.ml-2 {margin-left: .5em !important;}
.ml-3 {margin-left: 1em !important;}
.strong {font-weight: bold;}
.italic {font-style: italic;}
.small {font-size: .85em;}
.width-auto {width: auto !important;}
.pointer {cursor: pointer;}
.p-relative {position: relative;}

.print_r {white-space: pre; border: 1px dotted; padding: .5em; display: inline-block; margin: 0 .5em .5em 0; color: #fb3d3d; vertical-align: top; max-height: 300px; overflow-y: auto;}

#contenu {width: 1024px; background-color: #111; height: 768px; margin: 0 auto; box-sizing: border-box; padding: 32px; overflow-y: hidden; position: relative;}
#contenu > div {height: 100%;}
#back-simple {position: fixed; z-index: 1; width: 135px; height: 35px; bottom: 2px; left: 2px; opacity: 0; color: white; background-color: black; border: 1px dotted; border-radius: 6px; cursor: pointer;}
@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
#back-simple:hover {animation: fadeIn .5s ease-in forwards;}

/* Barre de navigation */
nav {position: fixed; bottom: 0; background-color: #444; width: 100%; box-sizing: border-box; padding: 0 2px; height: 33px; display: flex; transition:all 2s;}
#nav-gauche {position: relative; display: flex; width: 230px; grid-gap: 4px; padding-top: 3px;}
.icone {display: inline-block; height: 25px; width:25px; border: 1px solid #888; border-radius: 2px; cursor: pointer; box-sizing: content-box; margin-right: 1px;}
#form_code {display: flex; grid-gap: 5px;}
#form_code #code {background-color: #333; color: #fcc; padding: 1px 4px; font-size: 18px; width: 120px; border: none; font-weight: bold; height: 22px; margin-top: 1px;}
#numero, #t-numero {text-align: center; color: #fcc; letter-spacing: .5px; font-weight: bold; text-transform: uppercase; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: normal;}
#numero {width: 250px; font-size: 25px;}
#nav-droite {flex: 1; text-align: left; overflow: hidden; padding-right: 6px; line-height: 30px; overflow-x:hidden; position: relative;}
#nav-droite {overflow: visible;}
#nav-droite > div {max-height: 1em;}
#nav-droite.open > div {position: absolute; width: 100%; right: 6px; left: 0; bottom: -1px; height: auto; background: #444; border: 1px solid; border-radius: 4px; max-height: 50vh;
    overflow-y: auto; padding: 0 2px;}
#nav-droite a {padding: 0 2.5px;}
#resize-right {margin: 3px 0px 2px 0;}

/* Menu de navigation */
aside {display:none; position: absolute; background-color: #666; padding: 4px 0; top: -1px; transform: translateY(-100%); left: 1px; z-index: 1; border-radius: 4px; border: 1px solid;}
aside a {display: block; padding: 6px; border-bottom: 1px solid #fff;}
aside a:last-child {border-bottom: none;}

/* Aide */
.aide {font-size: 1.5em; padding-bottom: 20em;}
.aide svg {margin-right: 8px; vertical-align: -3px;}
.aide .cols {height: 660px; column-count: 2; column-fill: auto;}
.aide .cols p {margin: 0;}
.aide .copy {color: #f88; cursor: pointer;}
.previsu .aide {margin-bottom: -2em; min-height: auto;}
.previsu .aide .cols {height: calc(100vh - 72px);}

/* Affichage d'un chant */
#contenu .chant {margin: -32px; padding: 32px; font-size: 44px; height: auto;}
.chant {background:no-repeat fixed top center; display:none;}
.chant h1 {font-size: 1.1em; text-transform: uppercase; margin: 5em auto 0;}
.chant sub {display: block; font-size: .7em; font-style: italic;}
.chant h2 {text-align: right; color: #888; margin-top: .75em; margin-bottom: 15em; font-size:.7em;}
.chant h4 {position: absolute; top: 1em; left: 2em; white-space: pre; font-weight: bold; color: #888; line-height: 24px; font-size: 0.4em;}
.chant h4 .res-index span {margin-right: .5rem;}
.chant a {font-size: 10px;}
.chant .strophe, .chant .refrain {font-size: 1em; font-weight: bold; white-space: pre; padding-bottom:20em;}
.chant .refrain {margin-left: 1em; font-style: italic;}
.chant .center {text-align: center; white-space: pre-line;}
.fond span {background-color: rgba(0,0,0,.5); color:white;}
#fin {display:none; width: 80px; position: fixed; top: 690px; left: 50%; margin-left: 434px;}

/* Fond blanc */
.fond_blanc {background-color: white !important; color: #4c4a48;}
.fond_blanc.fond span {background-color: rgba(255,255,255,.5); color: #4c4a48;}
.fond_blanc a {color: #4c4a48;}
.fond_blanc .aide svg {fill: #4c4a48;}
.fond_blanc label, .res-index {font-weight: 600 !important;}
.fond_blanc .flex option, .fond_blanc .flex textarea, .fond_blanc .label, .fond_blanc .flex input[type="number"] {color: #4c4a48; font-weight: 600 !important;}
.fond_blanc select option:checked {color: white;}
.fond_blanc .res-index span {color: #f88 !important;}
.fond_blanc .res-index:hover, .verset:hover, .fond_blanc .form, .fond_blanc .flex option {background-color: #eee; border-color: #f88;}
.fond_blanc input[type="radio"]:not(:checked) + label::before {background: white; border: 1px solid;}
.fond_blanc input[type="radio"] + label::before {background: #4c4a48;}

/* Style personnalisé */
.fond_image .chant {background: url(../img/fond.jpg) no-repeat fixed top center !important;}
/*.fond_image .strophe, .fond_image .refrain {}     Modifier ici les styles */

/* Sans sauts de page */
.chant.sauts_sans h1 {margin-top: 3em;}
.chant.sauts_sans h2 {margin-bottom: 2em;}
.chant.sauts_sans .strophe, .chant.sauts_sans .refrain {padding-bottom: 1em;}
.chant.sauts_sans > div:nth-last-of-type(1) {margin-bottom: 15em;}


/* Index */
.recueil {font-size: 2em; display: list-item; margin-left: 3em; padding: 0 0 .5em; font-weight: bold;}
.index {font-size: 20px}
.index h2 {border-bottom: 1px solid;}
.index h2.resume {cursor:pointer;}
.index h2.resume span {position: relative; left: -4px;}
.index .details {display:none;}
.index p {margin: 0; border: 1px solid transparent; padding: 1px 4px 3px;}
.res-index span.code {font-size: .9em; color: #fcc; min-width: 5em; display: inline-block; margin-right: .25em;}
.res-index span.codeM {font-size: .9em; color: #38eef2; width: 1.5em; display: inline-block; margin: 0 .25em 0 -.25em; text-align: center;}
.res-index span.codeM:hover {background-color: #c0f9fb; border-radius: 6px;}
.res-index:hover, .verset:hover {border: 1px dotted #fcc; border-radius: 4px; cursor:pointer; background-color: #222;}
.index sub {font-size: 14px; padding-left: 4px;}
.index a {font-size: 1em;}
.nb_recueil, .nb_total {color: #888; font-weight: bold; margin: .5em 0 1em; font-size: .85em;}
.nb_total {font-size: 1.25em; text-align: center; padding-bottom: 25em;}
    
/* Formulaires */
.form {background-color: #444; padding: 1em; border-radius: 6px; font-size: 18px;}
.flex {display: flex; grid-gap: 1em; flex-wrap: wrap;}
.gap-0 {grid-gap: 0 !important;}
.flex > div > div {display: block;}
.flex-1 {flex: 1; display: block  !important;}
.flex label {padding: 0 0 2px; display: block;}
.flex-column {display: flex; flex-direction: column; height: 100%;}
label {cursor: pointer; font-weight: bold;}
textarea, input, select {vertical-align: top; padding: 2px 4px; border-radius: 2px; font-size: 18px; border: 1px solid #aaa;}
.bouton {background-color: #ccc; color: #222; font-weight: bold; border-radius: 4px; margin-top: 1.5em; padding: 2px .5em; border: 1px solid white;}
.flex textarea {width: 100%; height: 67px;}
.hint {margin: 0; font-size: .9em;}
.flex select {cursor: pointer; overflow-y: auto; max-height: 573px;}
.flex option {background-color: #666; color: white;}
.flex input[type="number"] {width: 60px;}
input[type="number"] {vertical-align: 0;}
#check_fin + label {font-weight: normal;}
select option:checked {background-color: #1967D2 !important;}
input[type="radio"] {opacity: 0; position: absolute;}
input[type="checkbox"] + label {padding-left: 5px;}
input[type="radio"] + label {position: relative; padding-left: 25px; cursor: pointer;}
input[type="radio"] + label::before { content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: white;}
input[type="radio"]:not(:checked) + label::before {background: #4c4a48;}


/* Texte biblique */
#contenu .div-Bible {font-size: 28px; margin: -32px; padding: 32px 32px 25em; min-height: 768px;}
.Bible {text-align: justify; box-sizing: border-box;}
.Bible .Ref h1 {margin: 2em 0 .5em; font-size: 1.5em;}
.Bible .Ref h2 {margin:0 0 2em; color: #ff8}
.Bible .Ref h4 {font-size: 16px; color: #bbf; position: absolute; top: 1em;}/*Annotations du livre*/
.Bible small {vertical-align: text-top; font-size: 14px; color: #ff6; font-weight: bold; padding: 0px 2px; margin-right: 4px; background-color: #767652; box-shadow: 0 0 5px #ffa; border-radius: 6px;} /*N° verset*/
.Bible p, .Bible q {font-size: 1em; padding-top: .5em; margin: .25em 0;}/*Paragraphes*/
.Bible p {padding-top:0; text-indent: 0.5em;}
.Bible p.retrait {margin-left:1.5em;}
.Bible h1 {text-transform: uppercase; font-size: 1.15em; margin-top: .5em;}
.Bible h2.chapitre {border-bottom: 1px solid; padding-bottom: 3px; color: #666;}/*Chapitre de livre*/
.Bible h2, .Bible t {color: #afa; text-align: left; font-size: .9em; padding-top: 1em;}/*Chapitre à gauche*/
.Bible h2 + h2, .Bible h1 + h2 {padding-top: .5em;}
.Bible h3 {margin-left: 1.9em; font-size: .8em; font-style: italic; color: #ffb;}/*Sous-titre*/
.Bible t {display: block; padding-top: .5em;}/*Sous-titre*/
.Bible q {display:block; padding-left : 0.5em; color: #fcc; text-align: left; text-indent: 0;}/*Citation*/
q:before, .Bible q:after {content:none;}/*Citation*/
.verset {border: 1px solid transparent; text-indent: 0; padding: 6px; font-size: 20px;}	/*Verset trouvé*/
.verset p, .verset q {text-indent: 0; margin-left: 0 !important; padding-left: 0; padding-top: 0; font-size: 1em;} 

/* Bible Fond Blanc */
.fond_blanc {font-weight: bold;}
.fond_blanc .Ref h2, .fond_blanc h3, .fond_blanc small {color: #fa4;}
.fond_blanc small {background-color: #ffa8;}
.fond_blanc h2, .fond_blanc t {color: #0f0}
.fond_blanc q {color: #f22}
.fond_blanc .verset:hover {background-color: #eee;}

/* Recherche biblique dans les 2 versions */
#version-bible {font-size: 1.25em; font-weight: bold; margin-bottom: 1em;}
#version-bible input {margin: 0 .5em; vertical-align: baseline;}
#version-bible label {margin-right: 1em; cursor: pointer;}
.version-Bible {font-size: 1.25em; font-style: italic;}
#div-livre {display:none; margin-top: 15px;}
#rech-dans-livre {width: 90px; background-color:#444;}
#div-res-bible {position: relative; margin-bottom: 4em;}
#res-semeur {position: absolute; width: 100%;}
#res-semeur + #res-segond {display:none;}

/* Couleur mots-cles */
span.mot-cle {border-radius:4px; padding:0 .1em; color:#000; font-weight: bold; margin: 0 .5px;}
span.Coul_0 {background-color:#da6;}
span.Coul_1 {background-color:#6dd;}
span.Coul_2 {background-color:#d6d;}
span.Coul_3 {background-color:#9d6;}
span.Coul_4 {background-color:#8ae;}

/* Accueil */
#accueil {background: url(../img/accueil.png) no-repeat fixed center top #1e1d20;}
.previsu #accueil {background-size: contain;}
#accueil h1 {margin-top: 2em;}
#accueil h2, #accueil p {margin:1.5em 0 1em;}
#accueil ul {white-space: normal; line-height: 45px; padding-bottom: 0; font-size: .75em;}
#accueil li span {padding: 0 .5rem}

/* Paramètres */
.param {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1em; padding-bottom: 2em;}
.param > div {padding: 0em .5em 1em; border-radius: 12px; box-shadow: 0px 0px 4px #ccc;}
.param h2 {margin: .5em 0 .5em; border-bottom: 1px solid;}
.param p {margin: .5em 0 0 .5em; font-size: 1.05em;}
p.comment, .comment a {color: #aaa;}
.param label {font-weight: normal;}
.param input[type='text'] {margin: 0 .25em; max-width: 4em; border: 1px solid #444; padding: 0 4px;}
.param #titre_nv {max-width: 12em;}
#param_submit {margin: 0;}

/* Accueil m-jemaf */
#m-accueil {background: url(../img/m-accueil.png) no-repeat fixed center top; background-color: #1a191f; background-size: contain !important;}
#m-accueil h1 {text-transform: lowercase; margin-top: 0em; font-size: 20px;}
#m-accueil h2 {margin: 3em 0 0;}
#m-accueil p {margin: .5em 0 1em; font-size: 20px;}
#m-accueil ul {white-space: normal; line-height: 40px; padding-bottom: 0; font-size: 16px; margin-left: 0;}
#m-accueil li span {padding: 0 .5rem}


/* ******************************************************************************************************************************************************** */

/* TELECOMMANDE */
#div_telec {display: flex; height: 100vh;}
fieldset {color: #888; background-color: #0e0e0e; font-weight: bold; border-color: #888; border-radius: 6px; margin: 4px; padding: 12px 12px; text-align: center;}
fieldset legend {color: #888;}
legend svg {margin-left: .5em; vertical-align: -6px;}
#field_compo {min-width: 325px; flex: 2; box-sizing: border-box;}
#div_telec svg {fill: #888;}
legend:hover svg, .icone:hover svg {fill: #fcc !important;}
#t-centre {min-width: 230px; position: relative;}
#t-centre aside {left: auto; right: 12px; bottom: auto;}
#t-centre #code {width: 125px;}
#arrows-bottom {display: flex; justify-content: center; grid-gap: 4px; margin-top: 8px;}
#arrows-bottom > .icone {flex: 1;}
#field_previsu {min-width: 530px; flex: 1; padding: 12px 4px;}
#div-back {position: fixed; z-index: 1; width: 35px; height: 35px; top: 2px; left: 2px;}
#back {opacity: 0; border-style: dotted; width: 32px; height: 32px;}
#div-back:hover #back {animation: fadeIn .5s ease-in forwards;}

.reduire {position: fixed; z-index: 1; width: 35px; height: 35px; top: 2px;}
.reduire img {padding: 4px; background-color: #222; opacity: 0; border-style: dotted; border-radius: 4px;}
.reduire:hover img {animation: fadeIn .5s ease-in forwards;}
#reduire_compo {left: 2px;}
#reduire_previsu {right: 2px;}

/* Composition */
#liste-compo, #liens {margin: 0; padding: 0; overflow-y: auto; position: relative;}
#liste-compo {min-height: 232px;}
#liste-compo li, #liens li {display: block; border: 1px solid; font-size: 17px; padding: 4px; border-bottom: none; cursor: pointer;}
#liste-compo li {text-align: left; display: flex; flex-wrap: wrap; min-height: 29px; box-sizing: border-box;}
#liste-compo li:hover, #liens li:hover, #t-droite:hover {background-color: #222;}
#liste-compo > li:nth-last-of-type(1), #liens > li:nth-last-of-type(1) {border-bottom: 1px solid;}
#liste-compo span {color: #fcc; margin-right: .5em; font-weight: normal; min-width: 4em; text-transform: uppercase;}
#liste-compo p {margin: 0; white-space: normal; flex: 1;}
#liste-compo q {font-style: italic; color: #ccc; font-weight: normal; font-size: .9em; background-color: #3b0909; text-align: center; width: 100%;}
#div_telec li.vu {background-color: #555;}
#div_telec li.actif {background-color: #822; color: #ccc; border-color: #aaa;}
.dropZone {border: 1px dashed #ccc; padding: 10px; text-align: center; margin: 0 0 10px; cursor: pointer; transition: all 0.3s; border-radius: 4px;}
.dropZone.dragover {border-color: #666; background-color: #3b0909;}
.message-editor {position: relative; top: -8px; color: #822; background-color: #fcc; border-radius: 2px; font-weight: bold; padding: 2px 4px;}

/* Centre */
#div_telec #code {border: 1px solid #888; width: 120px; padding: 1px 4px 0px; margin-right: 4px; font-size: 20px; vertical-align:top;}
.icone-row {display: flex; grid-gap: 4px;}
#div_telec aside {top: 44px; right: 12px; border-radius: 4px; text-align: left; background-color: #222; transform: none;}
#div_telec aside a {color: #ccc; border-color: #888; font-weight: normal;}
#t-droite {display: block; width: 100%; margin: 8px 0 0; box-sizing: border-box; height: 35px; position: relative;}
#t-droite svg {height: 32px; width: 34px;}
#t-droite span {position: absolute; right: 0;}
#t-numero {margin:10px 0 6px; font-size: 1.75em; height: 34px;}
#t-titre {height: 40px; margin: 0 0 6px; color: #fcc; font-weight: normal; white-space: normal;}
#liens {height: 400px; min-height: 71px;}
#liens li {font-size: 18px; padding: 6px 4px;}
#previsualisation {width: 512px; height: 576px; min-height: 226px; border: 1px solid #888;}

.previsu > div {font-size: 18px; padding: 12px 12px 36px; min-height: 575px; position: relative; box-sizing: border-box;}
.previsu .chant {font-size: 22px; background-size: cover;}
#prev_numero {background-color: rgba(68,68,68,.9); color: #fcc; position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 16px; padding: 0 0 2px; height: 20px; font-weight: bold;}
#prev_numero .prev_numero {text-transform: uppercase;}
#prev_liens, #compo-preliste {display: none;}
.previsu h1, .previsu .recueil {font-size: 1.25em;}
.previsu .chant .refrain {font-size: 1em;}
.previsu .chant h3 {margin: 0; color: #080; border-bottom: 1px solid; font-size: .8em; font-style: italic; margin-bottom: 4px;}	/* Repères */
.previsu h4, .previsu .Bible .Ref h4 {font-size: 14px; line-height: 17px; top: 0;}
.previsu .form {padding: .5em; flex-wrap: wrap; justify-content: center;}
.previsu .form > div {padding: .5em; vertical-align: top;}
.previsu .bouton {margin: 0 0 .5em;}
.previsu .chant.sauts_sans > div:nth-last-of-type(1) {padding-bottom: 0;}
.previsu .recherche > p, .previsu .recherche > h3, .previsu .nb_recueilp, .previsu .nb_total, .previsu .message {font-size: .9em;}
.previsu .recherche .flex-1 {flex: 0 0 100%; box-sizing: border-box;}

/* Fenêtre de Composition */
#composition .form {margin-top: 0; height: calc(100vh - 92px);}
#composition .dropZone {padding: 4px; font-size: 15px;}
#composition textarea {display: block; height: 333px; min-height: 72px; background-color: #0e0e0e; width: 100%; box-sizing: border-box; overflow:auto;}
#composition .bouton {margin-top: 1em;}
#composition .icone, #edition .icones-right {position: absolute; right: 0; bottom: 0;}

/* Fenêtre d'Edition */
#choix-edition fieldset {height: auto;}
#edition .form {margin-top: 0; text-align: left;}
#edition .form.grid {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0 1em;}
#edition .form.grid > div {display: flex;}
#edition .form.grid > div input[type="text"] {flex: 1;}
#edition .form.grid > div input[type="button"] {margin: 0 0 .5em; height: 1.75em;}
#edition input[type="text"] {margin-bottom: .5em;}
.choix {padding: .5em 10px;}
.choix div {display: inline-block; font-size: 1.2em; margin: .5em 5px;}
#choix_code {padding: 0 0 1em 0;}
#choix_code input[type="button"] {margin: 0 0 0 28px;}
#edit_info label {display: inline-block; width: 120px; font-size: .9em;}
#edit_info label:nth-of-type(even) {padding-left: 2em;}
#edition #edit_paroles {display:none;}
#edition .bottom {padding: 4px 6px;}
#edit_paroles .header, #edit_images .header {font-size: .9em;}
#edit_paroles .header {margin-left: 36px;}
#ecran_lines > div {padding: 4px 0;}
#edit_paroles span {display: inline-block; width: 20px; vertical-align: top;}
#edit_paroles textarea {height: 10em; width: 22.8em; box-sizing: border-box; overflow:auto; white-space: pre;}
#edit_paroles textarea.refrain {padding: .5em 0 0 2em; font-style: italic;}
#edit_paroles .col {display: inline-block; width: 12em; line-height: 2em; flex: 1;}
#edit_paroles .col > div {display: flex; }
#edit_paroles .col > div > div {flex: 1;}
#edit_paroles .col label {width: 5em; display: inline-block;}
#edit_paroles select, #edit_paroles input {width: 100%; box-sizing: border-box;}
#edit_paroles option {background-color: #444; color: white;}
#edit_paroles .icones {grid-gap: 6px;}
#edit_paroles .icones .icone {padding: 1px;}
.placeholder {border: 2px dotted #a0d0ff; height: 20px; margin: 5px 0; display: none; border-radius: 4px;}
.dragging {opacity: .8; background-color: #888; border-radius: 4px;}
#edit_images .header {margin: 0 0 2px;}
#edit_images ul {padding-left: 0; display: flex; flex-wrap: wrap; grid-gap: 6px; max-height: 330px; overflow-y: auto; position: relative;}
#edit_images li {background: url(../img/jem@fonds/jem@fonds.jpg) no-repeat center; width: 132px; height: 99px; display: inline-block; border: 1px solid;}
#edit_images li:hover {border-color: #fcc; cursor: pointer;}
#edit_images li.disabled {opacity: .3;}
#images-autres li {background-size: contain;}
#edit_nv_image {margin: 0 0 0 2em;}
#div-nv-image {margin-bottom: 1em;}
#nv-image {border: none; font-size: .9em;}
#edit_enregistrer {margin: 1em 0 0 1em;}
#div_decouper {display: flex;}
#image_decouper {width: 620px; height: 465px; border: 1px solid; display: inline-block;}
#image_decouper.horizontal {overflow-x: auto; overflow-y: clip;}
#image_decouper.horizontal img {height: 100%; cursor: e-resize;}
#image_decouper.vertical {overflow-y: auto; overflow-x: clip;}
#image_decouper.vertical img {width: 100%; cursor: n-resize;}
#edit_dec_image {margin: 0 0 0 1em; height: 2em;}
#editeur-numero {display: none;}

/* m-jemaf */
@media screen and (max-width: 800px)
{
    body {font-size: 14px;}
    nav {flex-wrap: wrap; height: auto;}
    #contenu {overflow-y: auto; width: 100%; height: auto; padding: 10px;}
    #numero {font-size: 18px; width: auto; margin-top: 3px;}
    #nav-droite {flex: 1 1 calc(100% - 34px);}
    #edition .form {grid-template-columns: repeat(1, 1fr); grid-gap: 0 1em;}
    .param {grid-template-columns: repeat(1, 1fr); font-size: 16px;}
    #contenu .chant {margin: -10px; padding: 10px 10px 8em; background-size: cover; box-sizing: border-box; overflow-y: auto; position: relative; font-size: 14px;}
    #contenu .flex-column, form.param {margin-bottom: 6em;}
    #contenu .flex select {max-height: 10em;}
    #contenu .flex-1 {flex: 1 1 100%;}
    #contenu .chant h1 {font-size: 2em;}
    #contenu .chant h2 {margin: .5em 0em 0em; font-size: 1.5em;}
    #contenu .chant h4 {line-height: 19px; font-weight: normal; font-size: 1em;}
    #contenu .chant .strophe, .chant .refrain {margin-bottom: 0em; font-size: 2em; white-space: pre-line;}
    #contenu h1 sub {font-weight: 100;}
    #contenu > .Bible {font-size: 18px; margin: 0; padding: 0 10px 25em;}
    #contenu .Bible h2, .Bible t {font-size: 28px;}
    #contenu .Bible p, .Bible q {font-size: 20px;}
    #contenu .Bible .Ref h1 {margin: 3em 0 .5em;}
    #contenu .Bible small {font-size: 12px;}
    #contenu .index .nb_total {margin-bottom: 4em;}
}