/*
   L.Robin ; Version du 3 mai 2018. 
   Pour le soulignement : http://developer.mozilla.org/fr/docs/Web/CSS/text-decoration-style.
*/

body { padding:1cm ; margin:0 ; width:21cm ; background-position:0 0 ; background-repeat:repeat ;
   background-image:url("Images/texture-toile-de-jute.jpg") ;
   transition:transform 1s ; -webkit-transition:-webkit-transform 1s }

body.vidéoprojeté * { transform-origin:0 0 ; -webkit-transform-origin:0 0 }

body > p, [id^="la présentation"] > p
   { padding:0.25em ; background-color:rgba(255,255,255,0.5) ; border-radius:7px }

body.vidéoprojeté > p, body.vidéoprojeté > h3 { display:none }
h3.console, body.vidéoprojeté > h3.console
   { display:block ; position:fixed ; right:0 ; border-radius:0 ;
     border-top-left-radius:1em ; border-bottom-left-radius:1em }


[id^="la présentation"] { margin:0 0 1em 13px ; padding:0 }
[id^="la présentation"]:not(.sortie), body > h3:first-of-type { margin-top:-1em }

[id^="la présentation"].sortie
   { margin-bottom:0 ; position:fixed ; bottom:30px ; right:0px ; margin-left:0 ; height:45% ; width:400px;
     overflow:auto ; padding:4px ; box-shadow:inset 2px 2px 4px black ; border-right:none;
     background-color:white ; border-bottom:solid 1px gray }

[id^="la présentation"].sortie:hover { z-index:1000 }

div.fond { display:block ; padding:0 ; margin:0 ; width:100% ; height:100% ; position:fixed ; z-index:-1;
   background-position:880px 0 ; background-repeat:repeat-y ;
   background-attachment:local }

div.fond.PPPP { background-position: 865px 10px ; opacity:1 ; background-image:url("Images/Logo PPPP.png") }


canvas { margin-top:20px ; margin-left:23px ; background-color:transparent ;
         box-shadow:0 0 0 20px maroon, 10px 10px 20px 20px black }
         
[id="le conteneur de la toile"] { margin-bottom :1cm }

body.vidéoprojeté  canvas { margin-top:0 ; margin-left:10px ;
   /* transform:scale(1.25) ; -webkit-transform:scale(1.25) */ }

/* ATTENTION : au 21/09/2016 la bordure n'est pas gérée par p5 pour la position du curseur !!! */

iframe.transmetteur { display:none ; width:100% ; height:400px }

.invisible { display:none !important }

tt { color:purple ; background-color:rgba(0,0,0,0.1) ; border-radius:0.25em ; padding:0.15em ;
     font-size:120% }

a:link    { text-decoration:underline ; /* text-decoration:underline wavy blue */ }
a:hover   { text-decoration:overline ; background-color:rgba(0,0,0,0.1) }
a:visited { color:gray ; text-decoration:underline solid gray }

menu a { text-decoration:none !important ; color:lightblue !important }

a.vocabulaire:hover { cursor:help }

q:before, q:after { color:black ; text-shadow:0 0 5px white }
q:before { content:'«' ; padding-right:3px }
q:after  { content:'»' ; padding-left:3px }

ii { color:red ; font-style:italic }

button { display:inline-block ; vertical-align:middle }
button:hover { box-shadow:0 0 5px blue }

button[id="l'exportateur"] { opacity:0.4 }
button[id="l'exportateur"]:not(.effectif):hover { opacity:0.7 }
button[id="l'exportateur"].effectif { opacity:1 }
button[id="l'exportateur"].effectif:before { content:"est " ; color:red }

button.commutateur.actif:before { content:'ne pas ' ; color:red }

[id^="la présentation"] > h3 { font-family:"Dancing Script" ; font-size:150% }
h3 > a:link { font-family:"Share Tech Mono" ; font-size:80% }
h3 > button { font-weight:bold }

body > h3, [id^="la présentation"] > h3
   { color:maroon ; text-align:center ; background-color:orange ; padding:0.5em ;
     border-top-left-radius:1.75em ; border-top-right-radius:1.75em }

body > h3, [id^="la présentation"]:not(.sortie) > h3 { margin-top:-1em }

p, li { text-align:justify }

[id="le brouillon"]:empty { display:none }


p.menu, menu { text-align:center }
p.menu { background-color:orange }
p.menu.bas { border-bottom-left-radius:1.75em ; border-bottom-right-radius:1.75em }

menu { overflow:hidden ; resize:horizontal ; display:block ; position:fixed ; z-index:200 ;
   right:20px ; top:15px ; margin:0 ; padding:5px ; width:300px ;
   border:inset 1px silver ; font-size:12px ; background-color:maroon ; color:yellow }

menu > h3:first-of-type { background-color:orange ; padding:5px ; margin-top:0px ; color:black }

menu  button, menu  input, menu  output { display:inline-block ; vertical-align:middle }

menu  tt { font-size:inherit ; color:white ; background-color:gray ;
           padding:0 0.25em 0 0.25em ; border:inset 1px gray }

menu input + tt { margin-left:0.75em } /* Pour les unités */

menu input[type="range"] { width:180px }

menu input[type="number"] { width:5.5em ; text-align:center }
menu input[type="number"]:valid { background-color:palegreen }
menu input[type="number"]:invalid { background-color:pink }

menu input[type="checkbox"] { margin-right:0 }
menu input[type="checkbox"] + tt { opacity:0.5 }
menu input[type="checkbox"]:checked + tt { opacity:1 }

menu  output { width:3em }
menu > p { margin:0 ; padding:0 ; line-height:40px ; text-align:center }

[id="le brouillon"] { border-top:solid 1px silver ; overflow:auto ; max-height:350px }
[id="le brouillon"]:before { content:"Le brouillon :" ; display:block }
[id="le brouillon"]:empty { display:none }

[id="le brouillon"][contenteditable] { min-height:1cm }


résultat { display:block ; text-align:center ; background-color:beige ; color:black ;
   padding:0.25em ; font-size:14px ; line-height:1.5em }
résultat + résultat { border-top:dotted 1px gray }

body.vidéoprojeté  [id="le brouillon"]  résultat { font-size:30px }

li > button[cible]  { color:blue }
li > button[cible]:after { content:' ' attr(cible) ' :' ; font-style:italic ; color:maroon }

ol { counter-reset:num_ol ; list-style-type:none }
ol > li { margin-top:1em ; background-color:beige ; padding:0.25em ; border-radius:0.5em }
ol > li:before
   { counter-increment:num_ol ; content:counters(num_ol,".") " " ; color:maroon ;
     margin-left:-3em ; margin-right:1em ; background-color:rgba(255,255,255,0.5) ; font-weight:bold;
     display:inline-block ; padding-top:3px ; vertical-align:middle ;
     width:2em ; text-align:center ; border-radius:0.5em }

auteur { position:fixed ; display:block ; right:0 ; bottom:0 ; padding:0.25em ; font-size:12px ;
   color:white ; background-color:black ; border:1px ridge silver ; border-right:none ; border-bottom:none }
auteur:before { content:"Conception du script graphique : "; color:silver }

auteur > * { padding:2px 3px 0 3px }
auteur > ads { color:black ; background-color:orange ; font-weight:bold ; margin-right:3px ;
   border-radius:3px }
auteur > tt { color:yellow ; font-size:90% ; background-color:maroon ; margin-left:3px }