/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }

  /* Custom 
    ========================================================================== */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;}
.blanc{
    color: #ffffff;
}
.bleu{
    color: #002c50;
}
body{
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    line-height: 1.4em;
    font-weight: 400;
    color: #212324; 
    -webkit-font-smoothing: antialiased;}
a {
    color: #76b82a;
    transition: color 0.25s; }
    a:hover {
        color: #24380d; }
.titre{
    /*color: #002c50;*/
    font-size: 2.2rem;
    line-height: 1em;}
    @media screen and (min-width: 50em) {
        .titre{
            font-size: 3.5rem;
            line-height: 1.2em;} }

    .emplois .liste .emploi .titre {
        font-size: 1.25rem;
        line-height: 1.1em; 
    }
.sous-titre{
  font-size: 1.2rem;
  line-height: 1em;
  font-weight: 500;}
  @media screen and (min-width: 50em) {
      .sous-titre{
          font-size: 2rem;
          line-height: 1em;} }
.emphase{
  font-size: 1rem;
  line-height: 1em;
  font-weight: 500;}
  @media screen and (min-width: 50em) {
      .emphase{
          font-size: 1.5rem;
          line-height: 1em;} }
  .emphase-small{
    font-size: 1rem;
    line-height: 1em;
    font-weight: 500;}
    @media screen and (min-width: 50em) {
        .emphase-small{
            font-size: 1.1rem;
            line-height: 1em;} }
.texte {
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    line-height: 1.4em;
    font-weight: 400;
    color: #212324; }

.mgb{
  margin-bottom: 1rem;
}

nav ul {
    list-style-type: none;
    margin: 1em auto;
    padding: 0; }
nav li {
line-height: 1; }

.contenant {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 70rem;
    margin: 0 auto;
    padding: 0.25rem; }
    @media screen and (min-width: 50em) {
        .contenant{
            padding: 1.25rem;} }
    .contenant.small {
      /*max-width: 45rem;*/
      max-width: 85ch; }
    .contenant.medium {
      max-width: 55rem; }
.image{
    margin-bottom: -1.25rem;
}

.carte{
  width: 100%;
  max-width:80em;
}
.center{
    position: relative;
    margin: 0 auto;}

.entete-video {
    background-color: #002c50;
    overflow: hidden;
    position: relative; }
    .entete-video .video {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%); }
    .entete-video .texte {
      background-color: rgba(0, 44, 80, 0.8);
      color: #f2f4f6;
      position: relative;
      z-index: 2; }
    .entete-video .contenant{
        min-height: 80vh;
    }
    .entete-video .titre {
      font-weight: bold;
      margin: 1em auto 0.25em; }
    .entete-video .sous-titre {
      color: inherit;
      margin-bottom: 2em;
      width: 100%; }

.portes-ouvertes, .avantages {
    text-align: center;
    padding: 3.75rem 1.25rem 0; }
    .portes-ouvertes .titre, .avantages .titre {
        /*color: #002c50;
        font-weight: bold;
        margin: 0.25em auto 1em;*/ }
    .portes-ouvertes .sous-titre, .avantages .sous-titre {
        /*max-width: 55rem;
        margin-left: auto;
        margin-right: auto;*/ }
    .portes-ouvertes .contenu, .avantages .contenu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /*align-items: flex-end;*/
        justify-content: space-between;
        list-style-type: none;
        margin: 1.25rem auto 0;
        padding: 0; }
    .portes-ouvertes .responsive{
        max-width: 100%;
        height: auto;
    }
    .portes-ouvertes .image, .avantages .image {
        margin-top: 2.5rem;
        order: 2;
        width: 80%;
        height: auto;
        transition: ease-in-out .3s; }
        .portes-ouvertes .image svg, .avantages .image svg {
        display: block; }
        /*.image.center{
            margin: 0 auto;;
        }*/
          .portes-ouvertes .liste, .portes-ouvertes .liste-large, .portes-ouvertes .liste-large, .avantages .liste{
          order: 1;
          width: 100%; }
          .portes-ouvertes .liste ul, .portes-ouvertes .liste-large ul, .portes-ouvertes .liste-large ul, .avantages .liste ul {
            text-align: left;
            list-style-type: none;
            margin: 1.25rem auto;
            padding: 0; }
          .portes-ouvertes .liste li, .portes-ouvertes .liste-large li, .avantages .liste li {
            margin: 1em auto; }
          .portes-ouvertes .liste .actions, .avantages .liste .actions {
            margin: 2.5rem auto 1.25rem; }
        @media screen and (min-width: 50em) {
          .avantages .image {
            order: 0;
            width: 40%; }
          .portes-ouvertes .liste-large {
            align-self: center;
            margin: 1.25rem auto;
            order: 0;
            width: 50%; }
          .portes-ouvertes .liste, .avantages .liste {
            align-self: left;
            margin: 1.25rem 0;
            order: 0;
            width: 48%; }
            .portes-ouvertes .liste ul, .portes-ouvertes .liste-large ul, .avantages .liste ul {
              text-align: left; }
            .portes-ouvertes .liste li, .portes-ouvertes .liste-large li, .avantages .liste li {
              padding-left: 1em;
              position: relative; }
              .portes-ouvertes .liste li:before, .portes-ouvertes .liste-large li:before, .avantages .liste li:before {
                content: "•";
                color: #76b82a;
                margin-right: 1em;
                position: absolute;
                top: 0;
                left: 0; }
              .portes-ouvertes .actions, .avantages .actions {
                /*text-align: left;*/ }
          .portes-ouvertes .actions .btn:first-child, .avantages .actions .btn:first-child {
              margin-left: 0; } }
        @media screen and (min-width: 62em) {
          .avantages .image {
            width: 33%; }
          .portes-ouvertes .liste, .avantages .liste  {
            width: 42%; } }

.commis {
    background: url(../img/commis.svg) bottom center no-repeat;
    background-size: contain;
    height: 50vh;
    width: 100%;
    }

.emplois {
    background-color: #f7f7f7;
    text-align: center;
    padding: 5rem 1.25rem; }

    .emplois .liste {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-around;
        list-style-type: none;
        margin: 2.5rem auto;
        padding: 0;
        text-align: left; }
        .emplois .liste .emploi {
          background-color: white;
          margin: 1.25rem auto;
          max-width: 37.5rem;
          width: 100%; }
          .emplois .liste .emploi .entete {
            background-color: #002c50;
            color: white;
            padding: 0.9375rem 1.25rem;
            position: relative; }
          .emplois .liste .emploi .titre {
            /*color: inherit;
            font-weight: bold;
            margin: 0 auto;*/ }
          .emplois .liste .emploi .sous-titre {
            color: inherit;
            margin-top: 0.15em; }
          .emplois .liste .emploi .description {
            padding: 0.9375rem 1.25rem 0; }
            .emplois .liste .emploi .description ul,
            .emplois .liste .emploi .description ol {
              padding-left: 1.75em; }
            .emplois .liste .emploi .description .resume {
              border-bottom: 1px solid #e5e5e5;
              list-style-type: none;
              margin: 0.75em 0 1.5em;
              padding: 0 0 1.25rem; }
            .emplois .liste .emploi .description.plus {
              padding-top: 0;
              transition: max-height 1s; }
              .js .emplois .liste .emploi .description.plus {
                max-height: 0px;
                overflow: hidden; }
              .js .emplois .liste .emploi .description.plus.is-open {
                max-height: 99em; }

.emplois .actions {
    padding: 0.9375rem 1.25rem; }
    .emplois .actions .btn {
        margin-left: 0;
        margin-right: 0; }
    .emplois .partage {
    border-top: 1px solid #e5e5e5;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin: 1em auto 0;
    padding: 1em 0 0;
    list-style-type: none; }
    .emplois .partage li {
        margin-right: 1em; }
        .emplois .partage li:last-child {
        margin-right: 0; }
    .emplois .partage a {
        display: inline-block;
        padding: 0.25em 0.5em; }
        .emplois .partage a:hover {
        color: #76b82a; }
    @media screen and (min-width: 55em) {
    .emplois .liste .emploi {
        margin: 1.25rem auto;
        max-width: none;
        width: 48%; } }

.postuler {
    text-align: center;
    padding: 2.5rem 1.25rem; }
    .postuler .titre {
        color: #002c50;
        font-weight: bold;
        margin-bottom: 0.5em; }
    /*.postuler iframe {
        border: 0;
        width: 100%;
        height: 700px;
        margin-top: 1rem; }*/

        footer {
            background-color: #002c50;
            border-top: 4px solid #002c50;
            padding: 1.25rem;
            text-align: center; }
            footer a {
              color: white;
              display: inline-block;
              text-decoration: none; }
              footer a:hover {
                color: #76b82a; }
            footer .contenant {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              align-items: center;
              justify-content: space-between; }
            footer .nav-corpo {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              align-items: center;
              justify-content: center;
              margin: 0 auto; }
              footer .nav-corpo img {
                display: block; }
              footer .nav-corpo .logo {
                margin: 0.5em auto;
                width: 100%; }
              footer .nav-corpo .icone {
                margin: 0.5em 1em; }
                footer .nav-corpo .icone a {
                  font-size: 1rem;
                  padding: 0.25em 0.5em 0.5em;
                  transition: opacity 0.25s; }
                  footer .nav-corpo .icone a:hover {
                    color: white;
                    opacity: 0.8; }
                footer .nav-corpo .icone .libelle {
                  display: none; }
            footer .nav-emplois {
              display: none;
              flex-direction: row;
              flex-wrap: wrap;
              align-items: center;
              justify-content: space-between;
              margin: 1em 0;
              width: auto; }
              footer .nav-emplois li {
                margin: 0 0 0 1em; }
              footer .nav-emplois a {
                color: white;
                transition: opacity 0.25s; }
                footer .nav-emplois a:hover {
                  opacity: 0.8;
                  position: relative; }
            @media screen and (min-width: 60em) {
              footer .nav-corpo,
              footer .nav-emplois {
                margin: 0;
                width: auto; }
              footer .nav-corpo .logo {
                margin: 0 0.9375rem 0 0;
                width: auto; }
              footer .nav-corpo .icone {
                margin: 0 0.5em; }
                footer .nav-corpo .icone:last-child {
                  margin-right: 0; }
              footer .nav-emplois {
                display: flex; } }       

.btn {
    background-color: #76b82a;
    border: 2px solid #76b82a;
    border-radius: 0.5em;
    color: white;
    display: inline-block;
    line-height: 1.2;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
    padding: 0.7em 1em 0.6em;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.25s, border-color 0.25s, color 0.25s; }
    .btn .fa {
        margin-right: 0.5em;
        line-height: 0.8; }
    .btn:hover {
        background-color: #669e24;
        border-color: #669e24;
        color: white; }
    .btn.bleu {
        background-color: #002c50;
        border-color: #002c50; }
        .btn.bleu:hover {
        background-color: #669e24;
        border-color: #669e24; }
        .btn.bleu.invert {
        background-color: transparent;
        border-color: #002c50;
        color: #002c50; }
        .btn.bleu.invert:hover {
            background-color: #002c50;
            color: white; }
    .btn.secondaire {
        background-color: transparent;
        border-color: #76b82a;
        color: #76b82a; }
        .btn.secondaire:hover {
        background-color: #669e24;
        border-color: #669e24;
        color: white; }
        .btn.secondaire.invert {
        border-color: white;
        color: white; }
        .btn.secondaire.invert:hover {
            background-color: white;
            color: #76b82a; }
      
.actions .btn {
    margin-left: 0.5em;
    margin-right: 0.5em; }

.actions {
    margin-top: 1rem; }