// Base typographique


  /*** Titraille / Intertitres */
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: normal;
    margin: 0.5em 0 0.5em;
    line-height: 1.3;
    color: $blue;
    font-family: $font-family-sans-serif;
  }

  h1, .h1 {
		font-size: $font-size-h1-em;
    font-family: $font-family-sans-serif-bold;
    line-height: 1.05;
    text-transform: uppercase;
  }

  h2, .h2 {
    font-size: $font-size-h2-em;
    line-height: 1.2;
  }
  h3, .h3 {
    font-size: $font-size-h3-em;
    font-family: $font-family-sans-serif-bold;

  }
  h4, .h4 {
    font-size: $font-size-h4-em;
    font-style: italic;
  }
  h5, .h5 {
    font-size: $font-size-h5-em;
  }
  h6, .h6 {
    font-size: $font-size-h5-em;
  }

  /*** Enrichissements typographiques */
  // strong, b { font-weight: 700; }
  // em, i {  font-style: italic; }
  // em strong, strong em { font-style: italic; }
  small, .small { font-size: .8em; }
  big, .big { font-size: 1.5em; }
  abbr[title],
  acronym[title] { border-bottom: .1em dotted; cursor: help; }

  dfn, .dfn { font-weight: bold; font-style: italic; }
  del, .del { text-decoration: line-through; }
  ins, .ins { text-decoration: none; background-color: #FFC; }
  sup, sub { font-size: .846em; font-variant: normal; line-height: 0; top:auto;}
  sup { vertical-align: super;}
  .ie sup { vertical-align: text-top; }
  sub { vertical-align: sub; bottom:auto;}
  .ie sub { vertical-align: text-bottom; }
  .caps { font-variant: small-caps; }
  .quiet { color: #666; }
  .loud { color: #000; }

  /*** Listes */
    ul ul, ol ol, ul ol, ol ul { margin-top: 0; margin-bottom: 0; }

  #main-content ul { padding: 0; list-style-type: none;
       li {
        padding-left: 1em;
        background: url('img/chevron.png') no-repeat 0 .4em;

        //sous liste
        li {
          padding-left: 1.5em;
          background: url(img/bullet.png) no-repeat .5em 0.4em;
        }
      }

    }

    dl dt { color: $blue; }
    dl dd { margin-bottom: 1em; }

    ol { padding-left: 20px;}


  /*** Images */
  figure { margin: 0;
    &.img { color: $gray-dark;
      p { margin-bottom: 0; font-size: em(12, $font-size-base); }
    }
    &.img-gauche { float: left; margin: 0 1.5em 0.5em 0; }
    &.img-droite { float: right; margin: 0 0 0.5em 1.5em; }

    figcaption { margin-bottom: 1em; }
  }


  /*** Tableaux */
  table { width: 100% !important; margin-bottom: 30px; border:none; border-bottom:1px solid $gray-lighter; table-layout: inherit;
    caption { padding: 0.7em 0; color:$blue; font-weight: 700; text-align: left; }
    th, tr, td { padding: 0.7em; color: $gray-dark; border:none; vertical-align: top}
    tr {background-color: #EEE; //border:1px solid $gray-lighter;
      &:nth-child(odd) {background-color: #FFF;}
    }
    td { //border-right:1px solid $gray-lighter;
      &:last-child {border-right: none;}
     }

    thead {
      th { background-color: $blue; color: #FFF; //border-right:1px solid $gray-lighter;

        &:last-child {border: none;}
      }
    }
    tbody { border:none;
      th {  background-color: $gray-lighter; color: $blue; /*border-bottom:1px solid $gray-lighter;*/ }
    }

    tfoot { font-style: italic; }

    tr:hover td { background-color: $gray-lighter !important; }

  }

  /*** Citations, code et poesie */
  q { font-style: italic; }
  blockquote { position: relative; padding-left: 110px; margin: 30px 0; font-size: 1.5em; font-style: italic; font-weight: bold;
    &:before { position: absolute; top:35px; left: 0; font-size: 3em; color: $blue; }
    p { margin:0; line-height: 1.2;}
  }

  q { quotes: '"' '"' "'" "'"; }
  :lang(fr) q { quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019"; }
  :lang(en) q { quotes: "\201C" "\201D" "\2018" "\2019"; }
  :lang(es) q { quotes: "\00AB" "\00BB" "\201C" "\201D"; }
  :lang(it) q { quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D"; }
  :lang(de) q { quotes: "\00BB" "\00AB" ">" "<"; }
  :lang(no) q { quotes: "\00AB\A0" "\A0\00BB" "<" ">"; }
  q:before { content: open-quote; }
  q:after { content: close-quote; }

  address { font-style: italic;}

  pre { margin: 1em 0;
      /* Cf.: http://perishablepress.com/press/2010/06/01/wrapping-content/ /
      white-space: pre;           /* CSS 2.0 */
      white-space: pre-wrap;      /* CSS 2.1 */
      white-space: pre-line;      /* CSS 3.0 */
      white-space: -pre-wrap;     /* Opera 4-6 */
      white-space: -o-pre-wrap;   /* Opera 7 */
      white-space: -moz-pre-wrap; /* Mozilla */
      white-space: -hp-pre-wrap;  /* HP Printers */
      word-wrap: break-word;      /* IE 5+ */
  }
  kbd { background-color: #616161; color:  #fff; }
  samp { font-weight: bold; }
  var { font-weight: 700; }

  /*** Paragraphes */
  p { font-size: 1em; line-height: 1.5em; margin: 0 0 1.3em 0; }

  .highlight { padding: .5em 1em; margin-bottom: 1em; border: 1px solid $gray-lighter; }
  
  .italic {font-style: italic;}
  
  .underline { text-decoration: underline; } /* custom MI */
  
  .bold { font-weight: bold; } /* custom MI */
  
  /**
  * Print styles from HTML5 Boilerplate
  * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
  */
  @media print {
      pre, blockquote { page-break-inside: avoid; }
      thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
      tr, img { page-break-inside: avoid; }
      @page { margin: 0.5cm; }
      p, h2, h3 { orphans: 3; widows: 3; }
      h2, h3 { page-break-after: avoid; }
  }

  /** Description: Style des liens */

  a,
  a:link  { color: $blue; } /* Meme couleur que le texte */
  a { color: $blue; text-decoration: underline;
      &:hover, &:focus { color: $texte; text-decoration: underline;}
    }

  @media print {
    a,
    a:visited { color: #666; text-decoration: underline; }
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
  }

  // === LINKS
  .icon { display: inline-block; background-repeat: no-repeat; background-position: left 0;}

  /* Liens externes */
   .icon-external-link { width: 10px; height: 12px; padding-left: 3px; background-image: url('img/ico-link-external.png'); background-position: 3px .2em; }

  /* Liens courriel */
   .icon-mail { width: 13px; height: 9px; background-image: url('img/ico-mailto.png'); }

  /* Documents a telecharger */
  .icon-download { width: 10px; height: 9px; background-image: url('img/ico-download.png'); }





