@font-face { font-family: 'corps'; src: local('Roboto-Regular.ttf'), url('Roboto-Regular.ttf');}
  @font-face { font-family: 'titre'; src: local('Roboto-Black.ttf'), url('Roboto-Black.ttf'); }



  * {
    padding: 0;
    margin: 0;
    border: 0;
    z-index: 0;

  }

html {background-color: #234;
    background-image: url('images/layer.png'),url('images/bg.jpg');
    background-size:100%;
    background-attachment: scroll;
    background-position: top center;}

  body {
    color: #fff;
    font-size: 1em;
    font-family: 'corps', sans-serif;
    max-width: 960px;
    margin:0 auto 4em auto;


  }

/* */

body:not(#diaporama) {counter-reset:h2;}


body:not(#diaporama) h2:before {
  content: counter(h2) '. ';
  counter-increment: h2;
}

body:not(#diaporama) h3:before {
  content: counter(h2) '.' counter(h3) '. ';
  counter-increment: h3;
  margin-left: 2em;
}

body:not(#diaporama) h2 {
  counter-reset: h3;
}


.entrainements {counter-reset:numerosdeseance;}

.entrainements p {text-indent: 0;overflow: hidden;position: relative;
border:1px solid rgba(255,255,255,.4); background-color: rgba(0,0,0,.4);
color: #fff;border-radius: .4em;margin:.6em 0;column-count: 3;padding:.4em;}

.entrainements p strong::before {
  content: counter(numerosdeseance) '.';


}

.entrainements p strong {
position:absolute;
counter-increment: numerosdeseance;
  font-size: 12em;
  color: rgba(255, 255, 255,.1);
  font-weight: bold;
overflow: hidden;
	bottom:-.25em;}


.entrainements p span {
display: inline-block;
border:1px solid rgba(255,255,255,.4);
border-radius: .4em;padding:.4em;
}




.quiz, .reponses {counter-reset:p}

.quiz > p:before,.reponses > p:before {
  content: counter(p) '. ';
  counter-increment: p;
}



ul li {
    list-style: none;
    margin-left: 3em;
  }

ol li {
    list-style-type: decimal;
    margin:.2em 0 .2em 4em;
  }

ul li:before {
    content: '- ';
  }

  a,
  a:visited
 {
    color: #234;
  }

    a:active,
  a:hover {
 color: #e43;
  }


  h1 {
    text-align: center;
  }

  h1 {

    font-size: 1.8em;
    text-transform: uppercase;
   margin-top: 1em;
  }



h1,h2,h3,h4,h5,h6 {font-family: titre;letter-spacing: .05em;
text-transform: uppercase;overflow: hidden;color: #fff;}
.memo {color:orangered;font-weight: bold;letter-spacing: .2em;}

h2,h3,h4,h5,h6 {margin:.4em .2em;}
h5 {margin-left: 6em}





  h2 {
    text-align: left;
    font-size: 1.8em;
  }

h3 {font-size: 1.4em;}

h4 {margin-left:4em;}
h4::before {content:"> ";}
h5::before {content:">> ";}


hr {border-top: 2px solid rgba(0,0,0,.2);width: 20%;margin:0 auto;}

.range {
  position: relative;
  margin: 0 auto;
  font-variant: small-caps;
  margin:.8em .8em 1.6em .8em;
}
.range  input[type='range']{
  width: 100%;
  padding:0;
}






  table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    margin:.4em auto;
  }

  th,
  td {
    border: 2px solid #fff;
    text-align: center;
    padding:.2em;

  }

  thead tr, tfoot tr{background-color: rgba(0,0,0,.4); color:#fff;}
  
  thead td, tfoot td{padding: .6em;}

  p {
    text-align: left;
    text-indent: 1em;
    margin:.4em;
  }

  blockquote {border-left:16px solid rgba(0,0,0,.2);padding-left:1em;margin-left:4%;}

  blockquote > p:not(.source),blockquote li { 
  font-style:italic; text-indent: 0;}
/**.source {font-family: 'Roboto';font-style:normal;}**/
blockquote li {padding-left:4em}

blockquote table {width: 100%;}

  .source,.diapo .source {
    text-align: right;
    font-size: smaller;
  }

/**input[type='button']:first-of-type {margin-left: 1em!important;}**/

input[type='button'], a {display: inline-block;
vertical-align: middle;
    background: #fff;
    border: 1px solid #234;
    color: #234;
    border-radius: .2em;
    text-align: center;
    text-decoration: none;
    padding:.1em .6em .2em .6em;
    font-variant: small-caps;
        font-size: 1em;
    cursor: pointer;
    margin:.2em .1em;text-indent: 0;
    min-width: 1.4em}
    
 
.emoji::first-letter {color: red;}
  
  

input[type='button']:hover,a:hover {
  	border: 1px solid #234;
    background: #e43;
    color:#fff;
  }

.programmes > div, .item ,.cadre
{border:1px solid rgba(255,255,255, .4);border-radius:.2em;background-color: rgba(0,0,0,.4);
margin:.2em 0;padding:.4em;}

.item {display: none;clear: left;min-height: 1.7em;}


.menu a {display: block;float: left;margin:.1em!important;
background-color: rgb(255, 255, 255)}

h2 {clear: left;}


label, input[type='range'] {}

  #breadcrumbs a {text-decoration: none;}

  .progression td {padding: 0;height: 2.4em;vertical-align: middle;}
.progression a {border:0!important;background: none!important;
width: 90%;height: 100%;margin: 0;padding:0;border-radius:0}


output {background:rgba(255,255,255,.1);margin:-3.4em 1em 0 1em;padding:.2em;text-align: center;
    border: 1px solid rgba(255,255,255,.4);width: 4em;border-radius: .2em;float: right;}


  img {max-width: 100%;}




.focus,.quiz, .reponses {border:1px dashed #fff;padding:.4em .2em;margin-bottom: .8em;}


ul li {text-align: left;}
td {vertical-align: top;}
h2 {break-before:always;}

.progression {width: 100%;padding:.6em 0}

.progression table {border-collapse: separate;
	table-layout: fixed;
	border-spacing: 2px;
	
	}
	
	.progression thead {position: sticky;top:0;}
	
hr {width: 100%;border:0;border-bottom:1px solid rgba(255,255,255,.5); }

.progression th, .progression td {
	border: 1px solid rgba(255,255,255,.5);
    border-radius: .2em;
    text-align: center;
    padding:.4em;
    font-variant: small-caps;
    overflow: hidden;
    height: 3em;
        }
        
        .progression th {padding:.4em 0;}

        
        .progression p {text-indent: 0;margin:0;text-align: center;}
        
.progression td p {cursor: default;}

        .souplesse,.musculation,.aerobie,.hypercapnie,.hypoxie,.securite,
        .ventilation,.technique,.relaxation,.mixte {
        	border: 1px solid #234;
    color: #234;border-radius: .2em;
    padding:.4em;}

        /*Physique*/
        .souplesse {background: #ff9}
        .musculation {background: #fc6}
        .ventilation {background: #f99}

        /*Apnée*/


        .aerobie {background: #ae9}
        .hypercapnie  {background: #faa}
                .mixte {background: #faf}
        .hypoxie {background: #acf}


        /*Technique*/
.technique {background: #fea}
.securite {background: #aac}
.relaxation {background: #99f}



@media screen {

	thead tr {position: sticky;}
img { object-fit: cover;object-position: 0 0;}
#diaporama {overflow: hidden;margin:6vh 6vw; width: 88vw;height: 88vh;z-index: 0;}
.conteneur {column-count: 3;column-rule: 1px dashed #fff;vertical-align: top;}
  .diapo {position: fixed;width: 88vw;height: 76vh;z-index: 1;}
  .diapo h2 {width: 100%;float: none;text-align: left;font-size: 3.6em;
  margin-bottom: .4em;position: relative;display: block;}
  .diapo h3:first-of-type {text-align: center;font-size: 6em}
  #diaporama a {color: #fff;border:0;background: none;text-decoration: underline;}
  #diaporama a[not:.compteur]:hover {color: #fff;border:0;background: #f30;text-decoration: underline;border-radius: .4em}
  .diapo ul li {list-style-type: decimal;margin-left:2.4em;}
   .diapo p, .diapo li, .diapo th  {font-size: 1.8em;margin:.4em .2em;}
 
  .diapo td,.diapo tbody td p, .diapo th {text-indent: 0;font-weight: normal;}
  .diapo .cadre {max-height:80%;width: 40%;float: left;margin-right: 1em;overflow: hidden;}
  .diapo img {max-height: 85%;object-fit: cover;object-position: center;width: 100%;}


  header { display: none;}
footer { position:fixed; bottom:4vh;right:4vw;z-index: 2;}
#compteur {display: table;table-layout: fixed; }
#compteur a { cursor:pointer; text-decoration:none;font-weight: bold;
display: table-cell;width:2em;height: 2em;margin:auto;text-align: center;
vertical-align: middle;padding:0;border-radius: 3em;background:none;border:0;color: #fff}



#compteur a[id='currentslide'], #compteur a:hover {
background:#f30;color:#fff;border:0}

  #compteur,#compteur a {text-indent: 0;text-align: center;}
  .ie {font-style: italic;}
}

  @media print {
body {background: none;color: #222;}
.reponses {break-before:always}
#breadcrumbs {display: none;}
tr, th, td {border:1pt solid #000;}
.focus {border:1pt dashed #000;}
#diaporama header {position: relative;}
#diaporama h1 {font-size: 3.6em;text-align: center;}
.diapo h2 {font-size: 2.4em;}
.diapo p {font-size: 1.2em;}
#compteur {display: none;}
.cadre {border:1pt solid #000;}


  }

    @media screen and (max-width: 960px) {
 h2 { font-size: 2.4em!important;}
 p,td,th {font-size: 1em!important;}
.conteneur  {column-count: 2}

}
@media screen and (max-width: 480px) {
	header h1 {font-size: 8vh}
 h2 { font-size: 1.8em!important;}
 h3 { font-size: 1.4em!important;}
img {height: 100%;object-fit: cover;object-position: center;float: none;}
.diapo p {font-size: 1.2em!important;}

.diapo p[class="source"] {font-size: .8em!important;}
.diapo {overflow-y: scroll;overflow-x: hidden;}
.diapo ul li {display: block!important;}
}

.range-container {
  position: relative;
  width: 98%;padding:1%;
  margin-bottom: 1em;
}


.ticks {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding:0 1%;
}

.tick {
  width: 1px;
  height: 4px;
  background: #fff;
  position: relative;
  filter: opacity(20%);
}

.tick[data-value] {
  height: 8px;
  background: #fff;
  filter: opacity(20%);
}

.tick[data-value]::after {
  content: attr(data-value);
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .6em;
  color: #fff;
  filter: opacity(80%);
}

/* Bulle de valeur */
.range-tooltip {
  position: absolute;
  background: #fff;
  color: #234;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 1;
}

.range-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #fff;
}