/*! version personnalisée par JCE / NF - juillet 2012 
tiré de http://www.alsacreations.com/astuce/lire/1177 */

@media (max-width: 1500px) {

 /* passer tous les éléments de largeur fixe en largeur automatique */
 body {
   width: auto;
   margin: 0;
   padding: 0;
 }

 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
   max-width: 98%;
 }
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
 img {
   height: auto; width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word; /* passage à la ligne forcé */
   -webkit-hyphens: auto; /* césure propre */
   -moz-hyphens: auto;
   hyphens: auto;
 }
 code, pre, samp {
   white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }
}



@media (max-width:640px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:2) {
  body {
   -webkit-text-size-adjust: 70%;
  }
}

/* **********************
 * Surcharge du framework 
 * **********************/

/* réduire la largeur des boutons collapsible */

.ui-collapsible-heading .ui-btn-text {
    font-family: "Arial Narrow", sans-serif; /* On prend une Arial condensée */
    font-weight: normal; /* On annule le gras */
    font-size: .9em; /* On change la taille - en em mais les % ou les px sont possibles*/
} 

/* sur les écrans raisonnablement grands, on fait plus grand */

@media (min-width:1024px) {
    .ui-collapsible-heading .ui-btn-text {
        font-family: "Arial", sans-serif; /* On prend une Arial normale */
        font-weight: bold; /* On passe en gras */
        font-size: 1em; /* On change la taille - en em mais les % ou les px sont possibles*/
   } 
}

/* On centre les logos de pages et les vidéos dans leurs colonnes, et le texte, vu le style utilisé 
 * On ajoute un peu d'espace en bas (= entre le texte de la légende et la vidéo suivante) */

.ui-block-a, .ui-block-b {
    text-align: center;
}

/* Si la hauteur de l'écran est "petite" (taille à gérer, viser les iPhone/iPod),
 * on place la barre du bas en bas de page web plutôt que fixe en bas d'écran */

/* @media (max-device-height:640px) {
    .ui-footer-fixed {
        position: absolute;
    }
} */

/* Si écran très étroit, on passe de 2 colonnes à une seule
 * Passer à une seule colonne (à appliquer aux éléments multi-colonnes) 
 * Désactivé pour le moment, gap à choisir...

@media (max-width:800px) {
    .ui-block-a, .ui-block-b {
       float: none;
       width: auto;
     }
    .ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b {
    width: 100%;
    }    
} 
*/

/* On centre aussi les vidéo fallback flowplayer */

a.flowplayer {
    margin: auto;
}