/* #PRODUIRE{fond=css/style-tutocommerce.css}
   md5:1f0cea30ea883320e0517f6ea8350763 */

/* blocs principaux */
*, *:before, *:after { box-sizing: border-box; }
body               { color:#444; /*background-color: white;*/ }
.zone-demo         {
                     padding: 2rem 3rem; position: relative;
                     background-color: #eee;
                     font-size: 1.2rem; font-family: 'sourcesans', Sans-Serif;
                   }
.zone-explications {
                     padding: 3rem 4rem;
                     font-size: 1rem; line-height: 1.4; font-family: 'poly',Serif;
                     border-top: 1px dotted rgba(0,0,0,.3);
                   }
.zone-demo:after, .zone-demo:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.zone-demo:after   { border-color: rgba(238, 238, 238, 0); border-top-color: #eee; border-width: 22px; margin-left: -22px; }
.zone-demo:before  { border-color: rgba(187, 6, 6, 0); border-top-color: rgba(0,0,0,.2); border-width: 23px; margin-left: -23px; }

/* typo et cie */
h1,.h1             { font-size: 1.4rem; margin-bottom: 1.4rem; }
.h1 img {margin-right:1em;}
h2,.h2             { font-size: 1.3rem; margin-bottom: 1.3rem; }
h3,.h3             { font-size: 1.2rem; margin-bottom: 1.2rem; }
h4,.h4             { font-size: 1.1rem; margin-bottom: 1.1rem; }
p                  { margin-bottom: 1rem;font-size: 1.05rem; }
* > p:last-child   { margin-bottom: 0; }
.titre             { font-weight: bold; }
@font-face {
    font-family: 'sourcesans';
    src: url('https://novelamap.org/plugins/auto/tutocommerce/v1.0.11/demo/fonts/sourcesanspro-regular.eot');
    src: url('https://novelamap.org/plugins/auto/tutocommerce/v1.0.11/demo/fonts/sourcesanspro-regular.eot?#iefix') format('embedded-opentype'),
         url('https://novelamap.org/plugins/auto/tutocommerce/v1.0.11/demo/fonts/sourcesanspro-regular.woff') format('woff'),
         url('https://novelamap.org/plugins/auto/tutocommerce/v1.0.11/demo/fonts/sourcesanspro-regular.ttf') format('truetype'),
         url('https://novelamap.org/plugins/auto/tutocommerce/v1.0.11/demo/fonts/sourcesanspro-regular.svg#sourcesans') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'poly';
    src: url('https://novelamap.org/plugins/auto/tutocommerce/v1.0.11/demo/fonts/poly-regular.eot');
    src: url('https://novelamap.org/plugins/auto/tutocommerce/v1.0.11/demo/fonts/poly-regular.eot?#iefix') format('embedded-opentype'),
         url('https://novelamap.org/plugins/auto/tutocommerce/v1.0.11/demo/fonts/poly-regular.woff') format('woff'),
         url('https://novelamap.org/plugins/auto/tutocommerce/v1.0.11/demo/fonts/poly-regular.ttf') format('truetype'),
         url('https://novelamap.org/plugins/auto/tutocommerce/v1.0.11/demo/fonts/poly-regular.svg#poly') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* code */
.coloration_code   { font-family: monospace; font-size: .8rem; margin: 1rem 0; padding: .5rem; background-color: rgba(0,0,0,.05); }
.code, code        { white-space: pre-wrap; font-size: 85%; font-family: monospace; color: green; }
code.balise        { color: #CA5200; }
code.filtre        { color: #E1861A; }
code.parametre     { color: #74B900; }
code.variable      { color: #00F; }
code.boucle        {  }
code.table         { color: #527EE0; }
code.fichier       { color: #777; }

/* divers */
img                { vertical-align: middle; }
ul li              { list-style: none; padding: 0; }
.notice            { padding: 1rem 1rem 1rem 3rem; margin: 2rem 0; background-position: 1rem center; background-repeat: no-repeat; background-color: #FEEB20; background-image: url(''); }
.notice.ok         { background-color: #91E472; background-image: url(''); }
.notice.erreur     { background-color: #F65151; background-image: url(''); }
.bouton_action_post{ display: inline-block; }
.img.left          { float: left; margin-right: 1rem; }
.img.right         { float: right; margin-left: 1rem; }

/* annotations */
#menu-annotations  { position: absolute; top: 0; left: 4rem; padding: 0 .66rem; background-color: green;  font-size: .9rem; color: #D0E7D0; text-decoration: none; }
#menu-annotations:hover { color: white; }
.outline:not(.off) { border: 1px dashed #73C273; border-radius: 2px; }
.outline.large:not(.off) { padding: .5rem; }
.note              { color: green; font-size: .9rem; }
.etiquette         { position: relative; display: inline-block; padding: 0 .4rem; background: green; font-size: .7rem; font-family: Monospace; color: white; border-radius: 2px; }
.etiquette:after   { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 128, 0, 0); border-width: 5px; }
.etiquette.top:after { top: 100%; left: 25%;  border-top-color: #008000; margin-left: -5px; }
.etiquette.top     { margin-bottom: 10px; }
.etiquette.right:after   { right: 100%; top: 50%; border-right-color: #008000; margin-top: -5px; }
.etiquette.right   { margin-left: 5px; }

/* menu */
ul.menu            { margin-bottom: 2rem; }
ul.menu li         { display: ruby-text; text-transform: uppercase; } /*rictus :inline-block;*/
ul.menu li:not(:first-child) { padding-left: 1rem; }
ul.menu li strong  { border-bottom: 2px solid grey; }
ul.menu a, ul.menu a:visited { color: #888; text-decoration: none; }
ul.menu a:hover    { color: inherit; }

/* préambule */
.plugins           { padding: 1rem; margin: 1rem 0; border: 2px solid #ccc; }
.liste-plugins     { margin-bottom: 1rem; }
.liste-plugins:last-child { margin-bottom: 0; }
.liste-plugins  dt { margin-bottom: .25rem; }
.liste-plugins  dd { margin-bottom: .25rem; }

/* 1. produits */
.liste-produits    { margin-bottom: 2rem; }
.liste-produits li { display:inline-table; width: 24%; }
.liste-produits li > div:not(:last-child) { margin-bottom: .5rem; }
.produits .bouton_action_post{ display: block; }

/* 2. panier */
.panier .bouton    { margin-top: 2rem; }
.valider-panier .note { margin-top: .5rem; }
.formulaire_panier { font-size: .9rem; }

/* 3. paiement */
.recap-commande    { font-size: .9rem; }
table.commande     { margin: 0; }
.paiement .titre-commande { margin-bottom: 1rem; }
.paiement .payer   { margin-top: 1rem; }
.acte              {  }
.payer_acte        { padding: .5rem; background-color: #eee; }
.acte .payer_acte  { margin-bottom: 1rem; }
.payer_acte .titre { margin-bottom: .5rem; }
.payer_acte .boutons form { display: inline-block; }
.paiement .bouton.annuler  { margin-top: 1rem; }
h3.selectionnez {margin-top:1em;color:grey;}/*rictus*/