@font-face
        		{
    				font-family: 'sofia_pro_light_condensedRg';
    				src: url('fonts/SofiaProLiCond-webfont.eot');
    				src: url('fonts/SofiaProLiCond-webfont.eot?#iefix') format('embedded-opentype'),
         			url('fonts/SofiaProLiCond-webfont.woff') format('woff'),
         			url('fonts/SofiaProLiCond-webfont.ttf') format('truetype'),
         			url('fonts/SofiaProLiCond-webfont.svg#sofia_pro_light_condensedRg') format('svg');
    				font-weight: normal;
    				font-style: normal;
    			}
       /* 	body    
                {   /*vh = hauteur fenêtre La hauteur min va occuper toute la fenêtre*/ 
                    /*min-height: 100vh;*/
                    /*min-width: 100vw;*/
                    /*width: 100vw;*/
                    /*body devient conteneur*/
               /*     display: flex;*/
                    /*body devient flex container horizontal. Ces enfants sont : section left et section milieu
                    Ils vont se positionner l'un à côté de l'autre*/
                    /*background-image: url("PCSF_Noel_2014-comp2.jpg");
                }*/
       /*     section.left
            	 {	
            		    width: 0%;
                    /*on s"assure que left se positionne avant les autres enfants cad avant section milieu*//*
                    order: -1;
                    /*section left devient conteneur vertical*/
                 /*   display :flex;
                   	flex-direction :column;
                    /*couleur de fond bleu avec caractères blancs*/
                /*    background-color: rgb(0,185,223);
                    /*background-color: rgb(119,136,153);*/
                   	/*background-color: rgba(0,0,0,.7);*/
              	    /*color: rgb(0,0,255);*/
                	  /*Aligne horizontalement les enfants cfr icône home*/
              	 /*   align-items:center;
                	/*aligne verticalement les enfants si ce ne sont pas des header/footer*/
                	/*   justify-content:center;
                }*/
              /*  header.home
                { /*truc : on fait de ce header un conteneur qui va contenir div qui pourra être centré
                  display: flex;
                  flex-direction :column;
                  align-items:center;
                  justify-content:center;
                  /*on définit la hauteur des entêtes
                  height: 2em;
                  color : rgb(0,0,139);
                  /*color : #33c3f0;/*rgb(255,255,255);
                }*/

                header.home
                {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  min-height: 80px;
               }
                /*nav ul
                {	
            	    /*nav est conteneur vertical*//*
                  display :flex;*//*
                  flex-direction :column;*//*
                  /*on insère les vides entre les éléments*/
                  /*justify-content: space-between;*/
                    /*ne comprend pas l'effet*/
                    /*align-items: stretch;*/
                    /*on lui donne toute l'amplitude : écart max entre les éléments*/
                 /* flex:1;
                }*/
                nav 
                {
                  display: flex;
                  flex-direction :column;
                  /*permet l'alignement vertical de div.foot sans avoir à utiliser margin:auto dans ce dernier;*/
                  align-items:center;
                  justify-content:center; 
                  flex:1;
                }
                 #navigation
                { 
                  /*nav est conteneur vertical*/
                  display :flex;
                  flex-direction :column;
                  /*on insère les vides entre les éléments*/
                  justify-content: center;
                    /*ne comprend pas l'effet*/
                    /*align-items: stretch;*/
                    /*on lui donne toute l'amplitude : écart max entre les éléments*/
                  flex:1;
                  
                }
                 #navigation li /*on doit réinitialiser les li car définis de façon trop générique*/
                    {
                      list-style: none;
                      display:inline;
                      background: 0;
                      border-color: inherit;
                      border-style: none;
                      border-width: medium;
                      -moz-border-radius: 0;
                      -webkit-border-radius:0;
                      border-radius: 0;
                      line-height: normal;
                      padding:50px;
                      margin:20px;

                      width: auto;
                  /*    font-size: 20px;*/
                    }
                
                ul.sous , li span/*on cache le sous menu*/
                {
                  display:none;
                }
                
                #navigation li :hover /*en rouge quand survol d'un titre*/
                {
                  color:red;
                }
                
                #navigation li:hover ul, #navigation li:hover span /*attention pas de classe ni de a */
                  {
                    display:block;/*Réapparaître sous-menu*/
                    
                    display: flex;
                    flex-direction :column;
                    justify-content: space-between;/*si non les titres se suivent en file !*/

                    
                  }
                
                footer
                { /*truc : pour que le footer s'aligne verticalement, on crée le footer conteneur et margin auto dans div.foot*/;
                  display: flex;
                  flex-direction :column;
                  /*permet l'alignement vertical de div.foot sans avoir à utiliser margin:auto dans ce dernier;*/
                  align-items:center;
                  justify-content:center; 
                  height: 4em;
                }
               
          section.main
              {
                 background-color: rgb(0,185,223);
                 min-height: 100vh;
                 /*max-height: 100vh;*/
                 display: flex;
                 flex-direction :column;
                  
                  width: 100%;
                  /*background-color: rgb(0,185,223);*/
                  color:white;
              }
               
             
            	section.content
            	{	/*donne toute l'ampleur mais trop et pousse- pourquoi - vers le haut ???*/
                  background-image: url("college.jpg");
                  background-repeat: no-repeat;
                  background-position: center center;
                  webkit-background-size: cover;
                  moz-background-size:cover;
                  o-background-size:cover;
                  background-size: cover;
                  background-attachment: fixed;
               		flex:1 1 auto;
               		font-family: 'sofia_pro_light_condensedRg';
               		/*background-color: rgb(119,136,153);*/
                  /*background-image: url("PCSF_Noel_2014-comp2.jpg");*/
               		display: flex;
                  flex-direction :row;
                  /*flex-direction :column;*/
                  flex-wrap:wrap;
                  /*permet l'alignement vertical de div.foot sans avoir à utiliser margin:auto dans ce dernier;*/
                  /*align-items:center;*/
                  justify-content:space-between;
                  align-items: flex-start;
            	}
             
           
           
              
              
             
           

          
                  li
                    {
                      display:table-cell;
                      background: rgba(255,255,255,.3);
                      border-color: rgba(255,255,255,.6);
                      border-style: solid;
                      border-width: 2px;
                      -moz-border-radius: 5px;
                      -webkit-border-radius:5px;
                      border-radius: 5px;
                      line-height: 30px;
                      list-style: none;
                      padding:15px;
                      width: 500px;
                    }
                  li label
                    {
                      width: 150px;
                      font:bold 16px Arial,sans-serif;
                    }
              
              
              
                /*background: #fc8d32;
                border-radius: 10px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                padding: 20px;*/
                /*width: 1200px;*/
                /*max-width: 2200px;*/
                /*margin: 50px;*/
              
           
              
              td.right {text-align : right;}
              .center {text-align : center;}
              .small {font-size: 5px;}
              .mid{font-size: 10px;}
              .large {font-size: 15px;}
              td.red{color: rgb(255,100,0);} 
              
              .titre{ font-size: 18px ;font-weight:bold;color:rgb(223, 242, 255);font-family: 'sofia_pro_light_condensedRg';}

           /*   .titre{ font-size: 20px ;font-weight:bold;color:white;font-family: 'sofia_pro_light_condensedRg';}*/
              @media only screen and (min-device-width: 375px) 
              and (max-device-width: 812px) 
              and (-webkit-min-device-pixel-ratio: 3) 

         
            /*  @media only screen and (max-width: 480px)*/
                {
                  .sidebar
                   {
                      float: none;
                      width: 100%;
                   }
                   a.titre
                  {
                    font-size: 0.9em ;font-weight:bold;color:#ffffff;font-family: 'sofia_pro_light_condensedRg';
                  }
                }

a.titre {
    font-size: clamp(22px, 3vw, 36px);
    font-weight: bold;
    color: rgb(223, 242, 255);
    font-family: 'sofia_pro_light_condensedRg';
}

@media all and (max-width: 480px)
{
    a.titre {
        white-space: nowrap;
        display: block;
        width: 100%;
    }
}           
             ul.sous li a.titre { font-size: 0.7em ;font-weight:bold;color:white;font-family: 'sofia_pro_light_condensedRg';}
               a.titreblue{ font-size: 20px ;font-weight:bold; color : #33c3f0;font-family: 'sofia_pro_light_condensedRg';}
              .titretab{text-align:center; font:bold 15px Arial,sans-serif;}
              .footred{text-align:left; font:bold 20px Arial,sans-serif;color:red;}
              .titresecond{text-align:center; font:bold 12px Arial,sans-serif;}
              .bouton {display:inline;margin:50px;padding:10px;}
              .devise{border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;margin: 50px;}

          
             video
               {
                width: 200px;
                border: 10px;
                border-color:rgb(0,185,223);
                border-style:ridge;
                padding: 4px;
                margin-bottom: 20px;
                background-color: silver;
                font-size: 0.8em;
                position: relative;
                top: 15px;
                }

        audio   {
                width: 200px;
                border: 10px;
                border-color:rgb(0,185,223);
                border-style:ridge;
                padding: 4px;
                margin-bottom: 20px;
                height: 120px;
                background-color: silver;
                font-size: 0.8em;
                position: relative;
                top: 15px;
            }
        .pub
            {
                display: flex;
                flex-direction: row;
                flex-wrap:wrap;
                justify-content:flex-start;
            }
          .pub > figure
            {
                display: table;
                flex:1 1 auto;
                width:auto;
                /*height: auto;*/
                max-width: : 500px;
                max-height: 200px;
                margin:10px;
                object-fit:cover;
                /*width: 200px;
                border: 10px;
                border-color:rgb(0,185,223);
                border-style:ridge;
                padding: 4px;
                margin: 20px;
                background-color: silver;
                font-size: 0.8em;
                position: relative;
                top: 15px;*/
            }

            figure > a
            {
                width: auto;
             
               /* border: 10px;
                border-color:rgb(0,185,223);
                border-style:ridge;*/
                padding: 40px;
                margin: 20px;
                background-color: silver;
                font-size: 0.8em;
                position: relative;
               /* top: 15px;*/
            }

            header.home a.retour 
            {
            font-size: clamp(28px, 4vw, 60px);
            font-weight: bold;
            color: rgb(0,0,139);
            text-decoration: none;
            }
           /* figcaption 
            {
                display: table-caption;
                caption-side: bottom;
            }       */          
              /* article 
               {
                width: 900px;
                border: 10px;
                border-color:rgb(0,185,223);
                border-style:ridge;
                padding: 4px;
                margin: 20px;
                background-color: silver;
                font-size: 0.8em;
                position: relative;
                top : 50px;