/**
 * @file
 * Generic CSS
 * (reusable styles only)
 */

/* ============================================================
    Helpers
============================================================ */

/* Visibly hidden */
.hidden,
.accessibility {
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
}

/* Bullet-less list */
.no-bullets li {
    list-style: none;
    margin-left: 0;
}

/* Aria helpers */
[aria-hidden="true"] {
    display: none;
}
ul[role="menubar"] > li {
    display: inline-block;
    margin-left: 0;
    list-style: none;
}


/* ============================================================
    Layout
============================================================ */

/* Floats */
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
.u-clear {
    clear: both;
}

/*      Inline-block-based Grid
        ex: nodes "Approfondir" > visuels à droite des lignes variables - node/8, node/92
*/
.ibgrid {
    margin: 0 -8px;
    margin: 0 -.5rem;
}
.ibgrid--centered {
    text-align: center;
    }
    .ibgrid__item {
        display: inline-block;
        vertical-align: top;
        margin: 0 8px 8px 8px;
        margin: 0 .5rem .5rem .5rem;
    }

/* Clearfix */
.cf {
    display: block;
}
.cf:before,
.cf:after {
    content: "";
    display: table;
}
.cf:after {
    clear: both;
}

/* Display */
.u-block {
    display: block !important;
}
.u-inline {
    display: inline !important;
}
.u-inline-block {
    display: inline-block !important;
}
.u-table {
    display: table !important;
}
.u-cell {
    display: table-cell !important;
}
.u-row {
    display: table-row !important;
}

/* Vertical-align */
.u-vtop {
    vertical-align: top !important;
}

/*      Positionning helpers
*/
.u-relative {
    position: relative;
}
.u-absolute {
    position: absolute;
}


/* ============================================================
    Spacing
============================================================ */

/*      Quand un visuel est horizontalement aligné avec du texte (taille corps),
        il faut décaler légèrement vers le bas pour aligner le haut de l'image
        avec le haut de la première lettre du texte.
        @example nodes appronfondir_sommaire_et_texte
        update 2014/10/23 12:48:59 - en fait ça complique l'alignement col gauche
        -> laissé tomber pour l'instant, mais gardé sous le coude quand même
*/
.u-pad-text-align-top {
    padding-top: 6px !important;
    padding-top: 0.375rem !important;
}
.u-pad-brl--l {
    padding: 0 20px 20px 20px;
    padding: 0 1.25rem 1.25rem 1.25rem;
}
.u-pad-r {
    padding-right: 10px;
    padding-right: .625rem;
}
.u-pad-tb {
    padding: 10px 0 !important;
    padding: .625rem 0 !important;
}
.u-pad-tbl--l {
    padding: 20px 0 20px 20px;
    padding: 1.25rem 0 1.25rem 1.25rem;
}
.u-pad-tb-lr--l {
    padding: 10px 20px !important;
    padding: .625rem 1.25rem !important;
}
.u-pad-rbl {
    padding: 0 10px 10px 10px;
    padding: 0 .625rem .625rem .625rem;
}
.u-pad-r--xxl-b--l-l--xl {
    padding: 0 52px 20px 30px;
    padding: 0 3.25rem 1.25rem 1.875rem;
	padding-bottom: 0px;
}

/*      @todo 2015/03/05 20:20:16 - Erreur de nommage (my bad) :
        aurait dû être .u-pad--l
*/
.u-pad-l {
    padding: 20px;
    padding: 1.25rem;
}

.u-pad-l--l {
    padding-left: 20px;
    padding-left: 0.5rem;
}

.u-margin-r--l {
    margin-right: 20px;
    margin-right: 1.25rem;
}
.u-margin-rb--l {
    margin-right: 20px;
    margin-right: 1.25rem;
    margin-bottom: 20px;
    margin-bottom: 1.25rem;
}
.u-margin-center {
    margin-left: auto;
    margin-right: auto;
}
.u-margin-right {
	margin-left: auto;
}
.u-margin-right img {
	height: 600px;
}
.no-margin {
    margin: 0 !important;
}


/*      Oeuvres secondaires :
        pane border bottom (flexslider col de droite)
*/
.u-border-b {
    /*border-bottom: 1px solid white;*/
    padding-bottom: 15px;
    padding-bottom: .9375rem;
	padding-top: 1em;
}

/*      Menu Footer - item "tous les auteurs | toutes les oeuvres"
*/
.no-border {
    border: 0 none !important;
}


/* ============================================================
    Measures
============================================================ */


/*      Display table-cell : equalize widths
        ex: Accueil thèmes
*/
.u-equaltcw {
    width: 1%;
}

/*      On-demand 100% width
        ex: nodes appronfondir_sommaire_et_texte
        -> Anthologie "Regards sur l'esclavage" (node/162)
*/
.u-w100 {
    width: 100%;
}

/*      Proportion largeur colonne page "tous les auteurs / toutes les oeuvres"
        @see http://classes.bnf.fr/essentiels/tous-les-auteurs-toutes-les-oeuvres.htm#
*/
.u-w20 {
    width: 20%;
}
.u-w25 {
    width: 25%;
}
.u-w33 {
    width: 33.33333%;
}
.u-w66 {
    width: 66.66666%;
}
.u-w75 {
    width: 75%;
}


/* ============================================================
    Text reusable style fragments
============================================================ */

.base-color {
    color: #444;
}
.color-black {
    color: black;
}
[class*="color"] a {
    color: inherit;
}
[class*="color"] a:hover {
    color: #93033d;
}

.no-border-cascade * {
    border: 0 none !important;
}



/*      SuitCSS componenent : FlexEmbed
        @see https://github.com/suitcss/components-flex-embed/blob/master/lib/flex-embed.css
*/


/**
 * Flexible media embeds
 *
 * For use with media embeds – such as videos, slideshows, or even images –
 * that need to retain a specific aspect ratio but adapt to the width of their
 * containing element.
 *
 * Based on: http://alistapart.com/article/creating-intrinsic-ratios-for-video
 */

.FlexEmbed {
  display: block;
  overflow: hidden;
  position: relative;
}

/**
 * The aspect-ratio hack is applied to an empty element because it allows
 * the component to respect `max-height`. Default aspect ratio is 1:1.
 */

.FlexEmbed-ratio {
  display: block;
  padding-bottom: 100%;
  width: 100%;
}

/**
 * Modifier: 3:1 aspect ratio
 */

.FlexEmbed-ratio--3by1 {
  padding-bottom: calc(100% / 3);
}

/**
 * Modifier: 2:1 aspect ratio
 */

.FlexEmbed-ratio--2by1 {
  padding-bottom: 50%;
}

/**
 * Modifier: 16:9 aspect ratio
 */

.FlexEmbed-ratio--16by9 {
  padding-bottom: 56.25%;
}

/**
 * Modifier: 4:3 aspect ratio
 */

.FlexEmbed-ratio--4by3 {
  padding-bottom: 75%;
}

/**
 * Fit the content to the aspect ratio
 */

.FlexEmbed-content {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}