@import url(global.css);

body {
    overflow-x: hidden;
}

@media (min-width: 1190px) {
    #bc_filariane {
        padding-left: 6px;
    }
}


/* ==========================================================================
   Conteneurs de mise en page — largeur et centrage du contenu
   --------------------------------------------------------------------------
   Classes utilitaires structurelles servant a contraindre la largeur
   maximale du contenu et a le centrer horizontalement dans la page.
   --------------------------------------------------------------------------
   Variantes disponibles :
   - .conteneur--standard : largeur editoriale par defaut (1160px)
   - .conteneur--large    : largeur etendue pour contenus plus amples
   --------------------------------------------------------------------------
   Le padding horizontal du conteneur standard est present sur mobile
   afin d’eviter les bords ecrases, puis retire sur grands ecrans lorsque
   la largeur maximale est atteinte.
   ==========================================================================
*/
.conteneur {
    margin: auto;
}

.conteneur--standard {
    max-width: 1160px;
    padding-left: 15px;
    padding-right: 15px;
}

.conteneur--large {
    max-width: 1400px;
}

@media (min-width: 1190px) {
    .conteneur--standard {
        padding-left: 0;
        padding-right: 0;
    }
}


/* ==========================================================================
   Hero — Bandeau principal de page
   --------------------------------------------------------------------------
   Zone d’en-tete visuelle servant de point d’ancrage au contenu.
   Elle contient generalement le titre principal, un soustitre 
   et parfois un hyperlien, un bouton ou une image.
   ==========================================================================
*/
.hero {
    margin-top: 0;
}
.hero__media {
    background-repeat: no-repeat;
    background-size: 90%;
    width: 100%;
    height: 0;
    padding-bottom: 66%;
    max-width: none;
    position: relative;
    z-index: -1;
    display: block;
    right: 0;
    bottom: 0;
    background-position: bottom left;
    margin-bottom: -15px;

}

@media (min-width: 767px) {
    .hero__media {
        background-size: 100%;
        background-position: bottom right;
        height: 100%;
        margin-bottom: 0;
        padding-bottom: 0;
        position: absolute;
    }
}


/* ==========================================================================
   Titres principaux (H1 a H6) — composant universel
   --------------------------------------------------------------------------
   Systeme de titres reutilisable pour tous les niveaux H*.
   Gere la typographie, les tailles responsives, les variations de couleur
   et certains comportements d’affichage (ligne, majuscules, pictogrammes).
   --------------------------------------------------------------------------
   Modificateurs disponibles :
   - .titre--lg        : taille grande
   - .titre--xl        : taille très grande
   - .titre--ligne     : force le retour a la ligne
   - .titre--gris      : couleur gris
   - .titre--bleu      : couleur bleu
   - .picto-*          : titre avec pictogramme via pseudo-element
   ==========================================================================
*/
.titre {
    font-family: 'proxima-nova', sans-serif;
    font-size: 1.5rem;
    line-height: 1.1;
    text-transform: none;
    margin-bottom: 1rem;
    letter-spacing: -.75px;
    margin-left: -2px;
}
@media (min-width: 767px) {
    .titre {
        font-size: 1.85rem;
    }
}

.titre--lg {
    font-size: 2rem;
    line-height: 1.25;
}

@media (min-width: 767px) {
    .titre--lg {
        font-size: 2.25rem;
        margin-bottom: 2rem;
    }
}

.titre--xl {
    font-size: 2.5rem;
    line-height: 1.25;
}

@media (min-width: 767px) {
    .titre--xl {
        font-size: 2.85rem;
        margin-bottom: 2.5rem;
    }
}

.titre > a {
    text-decoration: none;
}
.titre > a:focus,
.titre > a:hover {
    text-decoration: underline;
}


/* Forcer un changement de ligne d'une partie ou de tout le titre */
.titre--ligne {
    display: block;
}

/* Mise en majuscule d'une partie ou de tout le titre  */
.titre--majuscule {
    text-transform: uppercase;
}

/* Couleurs */
.titre--gris,
.titre--gris > a {
    color: #464646;
}

.titre--bleu,
.titre--bleu > a {
    color: #074b98;
}

/* Picto */
.titre[class*="picto-"] {
    padding-left: 45px;
}

.surtitre {
    font-family: 'proxima-nova';
    font-weight: 500;
    margin-bottom: 6px;
    font-size: 19px;
    color: #444;
}


/* ==========================================================================
   Texte (paragraphes)
   ==========================================================================
*/
.texte--lg {
    font-size: 1.15rem;
}
@media (min-width: 767px) {
    .texte--lg {
        font-size: 1.2rem;
    }
}

.texte--xl {
    font-size: 1.37rem;
}
@media (min-width: 767px) {
    .texte--xl {
        font-size: 1.45rem;
    }
}

.texte--gris,
.texte--gris>a {
    color: #464646;
}

.texte--bleu,
.texte--bleu>a {
    color: #074b98;
}



/* ==========================================================================
   Liste de liens vedette
   ==========================================================================
*/
.liste-vedette {
    list-style: none;
    margin-left: 0;
}

.liste-vedette li {
    border-bottom: 1px solid #DDDDDD;
    padding-top: 6px;
}

.liste-vedette li:last-child {
    border-bottom: none;
}

.lien-vedette--gris {
    color: #464646;
}

a.lien-vedette--xl {
    font-size: 1.35rem;
    font-weight: 100;
    text-decoration: none;
    letter-spacing: -.5px;
}

@media (min-width: 767px) {
    .liste-vedette {
        margin-top: 2em;
    }

    a.lien-vedette--xl {
        font-size: 1.75rem;
    }
}

.centrer {
    text-align: center;
}