/* Emphasize local navmenu's selected item */
.app-navmenu li.nav-item:nth-child(1)::after {
    content: "\25b4";
    color: var(--app-color-orange);
    text-align: center;
    bottom: -8px;
    left: calc(100% / 2.25);
    position: absolute;
  }
.app-navmenu li:nth-child(1) {
    border-bottom-color: var(--app-color-orange);
}

/* Page general rules */
.carousel-control span[class^="icon-arrow-"]{
    /* prev/next control icon (Icomoon) for last two carousels */
    background-color: var(--app-color-gray);
    color: var(--app-color-white);
    padding: 1em;
    margin-right: 0.5em;
}
.rule-130px {
    height: 6px!important;
    margin-left:auto;
    margin-right: auto;
    margin-top: 0;
    width: 130px!important;
}



/*  -----------------------------------
    ---- First Bootstrap carousel -----
    --------- (photos slides) ---------
    ----------------------------------- */
.page-top  .carousel-control-prev span {
  height: 100px;
  display: flex;
  align-items: center;
  border-radius: 0 5px 5px 0;
  left: 0;
} 
.page-top  .carousel-control-next span {
  height: 100px;
  display: flex;
  align-items: center;
  border-radius: 5px 0 0 5px;
  right: 0;
}
.page-top .carousel-control-prev, .page-top .carousel-control-next {
  opacity: unset; 
}
.page-top .carousel-control-prev span, .page-top .carousel-control-next span {
  position: absolute;
  overflow: hidden;
}
.page-top .carousel-control-prev span::after, .page-top .carousel-control-next span::after {
  content: "";
  background-color: rgba(51, 51, 51, .3);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  filter: contrast(155%) brightness(50%);
  position: absolute;
  z-index: -1;
}
.page-top .carousel-control-prev span:hover::after, .page-top .carousel-control-next span:hover::after {
  background-color: rgba(51, 51, 51, .6);
}
.page-top .carousel-indicators li {
  background-color: var(--app-color-darkgray);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  opacity: 0.9;
}
.page-top .carousel-indicators .active {
  background-color: var(--app-color-white);
}
.page-top .carousel-inner img {
  width: 100%;
}
.page-top  .carousel-inner .carousel-item {
    height: 85vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.page-top .overlapping-insert {
  font-size: 2em;
  line-height: 1.2em;
  position: absolute;
  top: 0;
  width: 100vw;
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
}
.page-top .overlapping-insert > div {
  padding: 2.5rem;
  position: relative;
  z-index: 1;
  right: 10%;
}
.page-top .overlapping-insert > div::after {
  content: "";
  background-color: rgba(51, 51, 51, .45);
  /*padding: 2rem;*/
  width: 100%;
  /*max-width: 24rem;*/
  height: 100%;
  top: 0;
  left: 0;
  filter: contrast(155%) brightness(50%);
  position: absolute;
  z-index: -1;
}

.page-top .overlapping-insert h1.sous-site {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0;
}


/*  -------------------------------------
    ------------- welcome  --------------
    ------------------------------------- */
video {
    max-height: 300px!important;
}
.welcome {
    padding-top: 40px;
    padding-bottom: 40px;
}
.welcome h1 {
    font-size: 1.5em;
}
.welcome .logo-tig {
    width: 80%;
}
.welcome .row {
    align-items: center; /* vertical align inside cells */
}




/*  ------------------------------------------------
    ---- tig cards : discover, create, partner -----
    ------------------------------------------------ */
.tig-cards {
    padding-top: 2em;
}
.tig-cards h2 {
    margin-top: 0.75em;
}
.tig-cards .card-body {
    height: 227px;
}
.tig-cards .card .card-title  {
    font-size: 1.8em;
    padding-left: 1rem;
}
.tig-cards .card-header {
    max-height: 14vw;
    height: 14vw;
    overflow: hidden;
}

.tig-cards .card-header img {
    min-height: 100%
}
.tig-cards .link-btn {
    border: 2px solid var(--app-color-white);
    color: var(--app-color-white);
    margin-bottom: 1.5em;
    margin-top: 20px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    width: 100%;
    height: 48px;
}
@media (max-width: 1045px) {
    .tig-cards .card .card-title  {
        font-size: 1.6em;
        padding-left: 1rem;
    }    
}
@media (max-width: 950px) {
    .tig-cards .card-body {
        /*! height: 230px; */
    }
}
@media (max-width: 930px) {
    .tig-cards .card-body * {
        padding: 0 0 0 5px!important;
    }    
    .tig-cards .card .card-title  {
        font-size: calc(1.6em - .6vw);
    }
    .tig-cards .card-body {
        /*! height: calc(14em + 3vw); */
    }
}
@media (min-width: 768px) and (max-width: 845px) {
    .tig-cards .row .col-sm-12 .link-btn a {
        font-size: 14px;
    }
}
@media (max-width: 768px) {
    .tig-cards .card-header {
        max-height: 250px;
        height: unset;
    }
}
.tig-cards .strip-thin {
    height: 1.25em;
    width: 100%;
}



/*  ---------------------------------
    ------- TIG: making sense -------
    --------------------------------- */
.tig-making-sense .row.first-row {
    margin-bottom: 2em;
}
.tig-making-sense .logo-title {
    align-items: flex-end;
    margin-bottom: 0.5em;
}
.tig-making-sense .logo-title img {
    margin-right: 16px;
    width:50px;
    height: 50px;
}




/*  ---------------------------------
    --------- TIG: missions ---------
    --------------------------------- */
.tig .carousel-inner {
    min-height: 720px;
    background-color: var(--app-color-pastel-gray);
}
.tig .carousel-item {
    background-color: var(--app-color-pastel-gray);
}
.tig .custom-col {
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
}
.card-img-container {
    height: 12vw;
    max-height: 192px;
    overflow: hidden;
}
/* carousel prev/next icon widgets */
.icon {
    background-color:var(--app-color-gray);
    width: 50px;
    height: 45px;
    top: calc(100% - 25px);
}
.icon-left {
    left: calc(50% - 86px);
}
.icon-right {
    left: calc(50% + 50px);
}
@media only screen and (max-width: 1205px) {
    .tig .carousel-inner {
        min-height: 740px;
    }
}
@media only screen and (max-width: 1110px) {
    .tig .carousel-inner {
        min-height: 840px;
    }
}
@media only screen and (min-width: 971px) and (max-width: 1226px) {
    .tig .custom-col h3 {
        font-size: 21px!important;
    }
    .tig .custom-col h4 {
        font-size: 18px!important;
    }
}
@media only screen and (min-width: 876px) and (max-width: 975px) {
    .tig .custom-col h3 {
        font-size: 18px!important;
    }
    .tig .custom-col h4 {
        font-size: 16px!important;
    }
}
@media only screen and (max-width: 900px) {
    .tig .carousel-inner {
        min-height: 750px;
    }
}
@media only screen and (max-width: 875px) {
    .tig .carousel-inner {
        min-height: 630px;
    }
    .card-img-container {
        height: unset;
    }
    .carousel img.h-100 {
        height: auto!important;
    }
    .d-flex-md {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .flex-column-md {
        align-items: center;
        flex-direction: column;
    }
    .flex-column-md .card:not(:last-child) {
        margin-bottom: 4em;
    }
    .margin-top-md-5 {
        margin-top: 5em; 
    }
    .tig .custom-col {
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%;     
    }
}
@media only screen and (max-width: 675px) {
    .tig .carousel-inner {
        min-height: 700px!important;
    }
}
@media only screen and (max-width: 460px) {
    .tig .carousel-inner {
        min-height: 730px!important;
    }
}
@media only screen and (max-width: 420px) {
    .tig .custom-col {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;    
    }   
}
@media only screen and (max-width: 320px) {
    .tig .carousel-inner {
        min-height: calc(760px + 1vw) !important;
    }
}
@media only screen and (min-width: 421px) and (max-width: 620px) {
    .tig .custom-col {
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%; 
    }   
}






.mission {
    /* EMPTY SEMANTIC CLASS */
}
.mission h3 {
    color: var(--app-color-white);
    text-align: center;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-weight: bold;
    font-size: 150% !important;
}
.mission-details {
    background-color: var(--app-color-pastel-gray);
    color: var(--app-color-gray);
    height: inherit;
    padding: 1em 2em 2em 2em;
}
.mission-details h4 {
    background-color: unset;
    color: inherit;
    font-family: var(--app-font-bold);
    padding-bottom: 0.5em;
    text-align: center;
}
.mission-details span:nth-child(odd) {
    /* Only first word of each information line is bold. */
    font-family: 'Marianne Bold';
}
#missions-individual .mission-details h4 { /* missions carousel 1/3 */
    color: var(--app-color-orange);
}
#missions-collective .mission-details h4 { /* missions carousel 2/3 */
    color: var(--app-color-violet);
}
#missions-educative .mission-details h4 { /* missions carousel 3/3 */
    color: var(--app-color-green);
}
.tig .carousel-control {
    position: relative;
    top : -0.5em;
    z-index: 2; /* Display control widgets (icons) shifted over cards */
}
.tig .mission {
    color: var(--app-color-white);
    margin-bottom: 5em;
    margin-top: 2em;
}




/*  --------------
    ---- news ----
    -------------- */
.news {
    margin-top: 5em;
}
.news .card {
    /*! max-height: 550px; */
    overflow: hidden;
}
.news .card-deck {
    justify-content: space-between;
}
.news h3 {
    color: var(--app-color-black);
    font-size: 1.25em!important;
    font-family: var(--app-font-bold);
    margin-bottom: 1em;
}
.news-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 150px;

}
.news-text {
    /*! max-height: 200px; */
}



/*  ------------------
    ---- partners ----
    ------------------ */
.partners .carousel-inner {
    z-index: 1;
}
.partners .is-aside [data-slide="prev"], .partners .is-aside [data-slide="next"] {
    z-index: 2;
}
.partners .image-box {
    padding: 2em 0;
    width: 100px!important;
    /*! align-self: center; */
}
.partners .is-aside [data-slide="prev"] {
    position: absolute;
    top: 50%;
    left: -5.5rem;
}
.partners .is-aside [data-slide="next"] { 
    position: absolute;
    top: 50%;
    right: -5.5rem;
}
.partners .logos-container { /* clone of container-avis */
  position: relative;
    transition: .5s linear;
    left: 0;
    height: 100%;
}
.partners .logos-container .logos-tooltip { /* clone of .container-avis .frise-tooltip */
    width: 400px;
    height: 100%;
    top: 0;
    position: absolute;
    background-color: var(--app-color-white);
    left: var(--i);
}
.partners-logos { /* clone of frise-avis */
    position: relative;
}
.partners-logos-row { /* clone of frise-container */
   overflow: hidden;
    width: 100%;
    height: 450px;
    position: relative;
}
@media only screen and (max-width: 900px) {
    .partners .is-aside [data-slide="prev"] {
        left: -4.5rem;
    }
    .partners .is-aside [data-slide="next"] { 
        right: -4.5rem;
    }
}
@media only screen and (max-width: 767px) {
    .partners .is-aside [data-slide="prev"] {
        opacity: 0.5;
        left: -4rem
    }
    .partners .is-aside [data-slide="next"] { 
        opacity: 0.5;
        right: -4rem
    }
}
@media only screen and (max-width: 650px) {
    .partners .is-aside [data-slide="prev"] {
        left: calc(-2em - 4vw);
    }
    .partners .is-aside [data-slide="next"] { 
        right: calc(-2.0em - 4vw);
    }    
}
@media only screen and (max-width: 500px) {
    .partners .is-aside [data-slide="prev"] {
        left: calc(-2.1em - 2vw);
    }
    .partners .is-aside [data-slide="next"] { 
        right: calc(-2.1em - 2vw);
    }
}
@media only screen and (max-width: 400px) {
    .partners .is-aside [data-slide="prev"] {
        left: calc(-1.4em - 2vw);
    }
    .partners .is-aside [data-slide="next"] { 
        right: calc(-1.4em - 2vw);
    }
}


/*  ---------------------
    ---- testimonies ----
    --------------------- */
    /* Règles prévues lorsque classes section avaient été modifiées en prévision d'un
    autre slider horizontal des encarts (codé en JS mais inachevé fpour l'heure) */
.container-bloc-avis {
    padding-bottom: 5em;
}
.container-bloc-avis .title-container {
    padding-top: 20px;
    margin-bottom: 30px
}

.tig-testimonies {
    
}
.tig-testimony-details {
    line-height: 1.2;
}
.tig-testimony-details p.author {
    margin-bottom: 0;
}
.tig-testimony-details .testimony-header {
    display: flex;
}
.tig-testimony-details .double-quote-right {
    color: var(--app-color-orange);
    font-size: 400%;
    margin-right: 50px;
}
.tig-testimony-details {
    background-color: var(--app-color-white);
    padding: 1em;
    height: 100%;
}

.quote-atigip {
    max-width: 90px;
    max-height: 90px;
}
.quote-atigip svg {
    width: 80%;
    height: auto;
}

/*|==============================================|
  |                                              |
  |             RESPONSIVE BREAKPOINTS           |
  |                                              |
  |                                              |
  | USING BOOTSTRAP VALUES : 576, 768, 992, 1200 |
  |                                              |
  |==============================================| */

/* Nota: iPhone6 : 375 x 667 */



/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
----------------- OVER 576 pixels -----------------
--------------------------------------------------- */
@media only screen and (min-width: 576px) {
}


/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT -------------- 
----------------- OVER 768 pixels -----------------
--------------------------------------------------- */
@media only screen and (min-width: 768px) {
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
----------------- OVER 992 pixels -----------------
--------------------------------------------------- */
@media only screen and (min-width: 992px) {
}


/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
---------------- OVER 1280 pixels -----------------
--------------------------------------------------- */
@media only screen and (min-width: 1280px) {
}



/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
---------------- UNDER 992 pixels -----------------
--------------------------------------------------- */
@media only screen and (max-width: 991px) {
    .tig-making-sense .row.first-row {
        margin-bottom: 0;
    }   
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
---------------- UNDER 845 pixels -----------------
--------------------------------------------------- */
@media only screen and (max-width: 845px) {
    .welcome h1 {
        font-size: 1.3em;
    }   
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
---------------- UNDER 768 pixels -----------------
--------------------------------------------------- */
@media only screen and (max-width: 767px) {
/*    .page-top .overlapping-insert {
        font-size: 1.2em;
        top: 0em;
        max-width: 12em;
    }*/
    .page-top .carousel-inner .carousel-item {
        height: 30vh;
    }
    .page-top .overlapping-insert > div {
        padding: 1rem;
    }
    .page-top .overlapping-insert h1.sous-site {
        font-size: 1rem;
    }
    .partners .image-box {
        padding: 1em 0;
        width: 80px!important;
    }
    .related-sites .image-box:nth-child(2) {
        position: static;
    }
    .related-sites .row {
        flex-direction: column;
    }
    .tig-cards {
        padding-top: 0;
    }
    .tig-cards .card {
        margin-top: 3em;
    }
    .tig-cards .card-body {
        height: unset;
        min-height: 150px;
    }
    .welcome h1 {
        font-size: 2.0em;
    }
    .welcome .col-12:first-child .image-box {
        margin-bottom: 2em;
    }
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------------ UNDER 576 px -------------------
--------------------------------------------------- */
@media only screen and (max-width: 575px) {
    .news {
        /*margin-top: 10em;*/
    }
    .page-top .overlapping-insert {
        font-size: 1em;
    }
    .partners .image-box {
        padding: 0.6em 0;
        width: 60px!important;
    }
    .welcome h1 {
        font-size: 1.85em;
    }
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------------ UNDER 499 px -------------------
--------------------------------------------------- */
@media only screen and (max-width: 499px) {
    .welcome h1 {        
        font-size: 1.6em;
    }
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------------ UNDER 450 px -------------------
--------------------------------------------------- */
@media only screen and (max-width: 450px) {
    .news h2.title {
        margin-right: 0.5em!important;
    }
    .news hr {
        width: 44vw!important;
    }
    .page-top .overlapping-insert {
        font-size: small;
    }
    .partners .image-box {
        padding: 0.7em 0;
        width: 50px!important;
    }
    .tig .mission {
        margin-top: 8em;
    }
      .welcome h1 {
        font-size: 1.4em;
    }
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT -------------- 
---------------- UNDER 394 pixels -----------------
--------------------------------------------------- */
@media only screen and (max-width: 393px) {
    .page-top .overlapping-insert {
        font-size: x-small;
    }
}


/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT -------------- 
---------------- UNDER 330 pixels -----------------
--------------------------------------------------- */
@media only screen and (max-width: 393px) {

}









/* ------------------------------------------------
-------------- RESPONSIVE BREAKPOINT -------------- 
------------ BETWEEN 394 px AND 626 px  -----------
--------------------------------------------------- */
@media only screen and (min-width: 394px) and (max-width: 626px) {
}


/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------- BETWEEN 450 px AND 576 px -----------
--------------------------------------------------- */
@media only screen and (min-width: 450px) and (max-width: 576px) {

}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------- BETWEEN 576 px AND 768 px -----------
--------------------------------------------------- */
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tig-making-sense .tig-illustration {
        /*flex-direction: row;*/
    }
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
--------------  BETWEEN 768 px AND 992 px ---------
--------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
}


/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------ BETWEEN 992 px AND 1200 px -----------
--------------------------------------------------- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
}