/*************/
/***GENERAL***/
/*************/


/*************/
/****MIXIN****/
/*************/
/**
 * ----------------------------
 * TABLE DES MATIERES - MIXINS
 * ----------------------------
 * Utilitaires de base
 ** Box sizing
 ** Clearfix
 * Accessibilité
 * Typographie
 * HyperLien
 */

/********** Utilitaires de base **********/

/** Box sizing **/
@mixin border-box-sizing {
    html {
        box-sizing: border-box;
    }
    *, *:before, *:after {
        box-sizing: inherit;
    }
}

/* Clearfix */
@mixin clearfix {
    &:after {
        content: " ";
        display: table;
        clear: both;
    }
}

/********* Accessibilité *********/

// Hide only visually, but have it available for screenreaders:
// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;

    // Extends the .visuallyhidden class to allow the element to be focusable
    // when navigated to via the keyboard: https://www.drupal.org/node/897638
    &.focusable:active,
    &.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }
}

.visuallyhidden,
.screen-reader-only {
    @include visuallyhidden;
}


/******** Typographie *********/

// Fonction pour convertir une valeur de font-size en pixels à son équivalent rem
@function calculateRem($size) {
    $remSize: $size / 10px;
    @return #{$remSize}rem;
}

// Mixin qui inclus la solution de repli en pixel suivi par la valeur calculée en rem
@mixin fontSize($size) {
    font-size: $size;
    font-size: calculateRem($size);
}
//Pour utiliser la fonction : @include fontSize(15px);




/**************/
/***VARIABLE***/
/**************/
.rougeRespo{
    background: #8F2D56;
}
.bleuDiversite{
    background: #00699E;
}
.bleuObstacle{
    background: #0C7E8B;
}
.orangeConseil{
    background: #BD5B00;
}
.bleuEncadre{
    background: #0D3854;
}
.roseMesure{
    background: #D71259;
}
.jauneAccessible{
    background: #FDDE5E;
}

.typoRougeRespo{
    color: #8F2D56;
}
.typoBleuDiversite{
    color: #00699E;
}
.typoBleuObstacle{
    color: #0C7E8B;
}
.typoOrangeConseil{
    color: #BD5B00;
}
.typoBleuEncadre{
    color: #0D3854;
}
.typoRoseMesure{
    color: #D71259;
}


.visuallyhidden,
.screen-reader-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus,
.screen-reader-only.focusable:active,
.screen-reader-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/********* hyperlien *********/
.hyperlienAriane{
    color: #FFFFFF;
    font-size: 18px;
    text-decoration: underline; 
}
.hyperlienAriane:hover{
    text-decoration: none;
}

.hyperlien{
    text-decoration: underline;
    color: #003BC1;
}
.hyperlien:hover{
    text-decoration: none;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    
}
 



/**************/
/****GRILLE****/
/**************/


.conteneur {
    /*background-color: lightBlue;*/
}

.col {
    display: block;
    /* pour espacer les blocs à la vertical.
       Ajuster selon le besoin */
    margin: 0 0 0.5em 0;
    /* ce qui suit n'est pas essentiel */
    /*background-color: linen;
    border: 1px solid black;*/
}

.col_1_de_12,
.col_2_de_12,
.col_3_de_12,
.col_4_de_12,
.col_5_de_12,
.col_6_de_12,
.col_7_de_12,
.col_8_de_12,
.col_9_de_12,
.col_10_de_12,
.col_11_de_12 {
    width: 100%;
}

.invisible {
    display: none;
}

/* pour décoller les blocs du viewport, à gauche et à droite.
Ajuster selon le besoin  */
.conteneur {
    padding: 0 0.5em;
}

/**** Requêtes media ****/
/* Pour écran large */
@media (min-width: 992px) {
    .conteneur {
        margin: 0 auto !important;
        max-width: 1000px !important;
        padding: 0 !important; 
        /* Grille 12 colonnes en arrière-plan - Mettre en commentaires après usage */
        /*background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 83.33333%, transparent 83.33333%);
        background-size: 8.4507%;
        background-origin: content-box;
        background-clip: content-box;
        background-position: left top;*/
    }

    .col {
        margin: 0 2% 2% 0;
        float: left;
    }

    .rangee > *:last-child {
        margin-right: 0;
    }

    .col_1_de_12 {
        width: 6.5%;
    }

    .col_2_de_12 {
        width: 15%;
    }

    .col_3_de_12 {
        width: 23.5%;
    }

    .col_4_de_12 {
        width: 32%;
    }

    .col_5_de_12 {
        width: 40.5%;
    }

    .col_6_de_12 {
        width: 49%;
    }

    .col_7_de_12 {
        width: 57.5%;
    }

    .col_8_de_12 {
        width: 66%;
    }

    .col_9_de_12 {
        width: 74.5%;
    }

    .col_10_de_12 {
        width: 83%;
    }

    .col_11_de_12 {
        width: 91.5%;
    }

    .col_12_de_12 {
        width: 100%;
    }

    footer.col {
        margin: 0;
    }

    .invisible {
        display: block;
        visibility: hidden;
    }
}