/* =========================================================
   Base reset minimal
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; } /* 1rem = 10px */
body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  /* background: #141d29; */
}

/* =========================================================
   Bouton
   ========================================================= */
.c-btn {
  font: inherit;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.23;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
  padding: 2rem 4rem;
  cursor: pointer;
  transition: all 300ms ease-in-out;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: .28rem;
  text-transform: uppercase;
  color: #fff;
  border: none;
  background: #84899f;
}
.c-btn--primary {
  z-index: 1;
  background: none;
}
.c-btn--primary::after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  content: '';
  transition: all 300ms ease-in-out;
  transform: translateX(-50%);
  background: linear-gradient(45deg, #7c0707 0%, #ad1717 60%, #8e2525 100%);
}
.c-btn--primary:hover { color: #fff; }
.c-btn--primary:hover::after { transform: translateX(0); }
.c-btn--primary:focus { color: #fff; }

/* =========================================================
   Icône SVG masquée
   ========================================================= */
.icon-svg {
  display: block;
  width: 5.6rem;
  height: 5.6rem;
  margin: 0 auto;
  background-color: #fff;
}

/* =========================================================
   Wrapper principal
   ========================================================= */
.l-background {
        background-color: #ffffff;
}

/* =========================================================
   VERSION DESKTOP — c-structured-expertise-extended
   (affiché ≥ 64em, masqué en dessous)
   ========================================================= */
.c-structured-expertise-extended {
  position: relative;
}
.c-structured-expertise-extended__title {
  padding-top: 8rem;
}
.c-structured-expertise-extended__title.left {
  padding-right: 8rem;
  padding-left: 8rem;
}
.c-structured-expertise-extended__title.left h2 {
  text-align: left;
}
.c-structured-expertise-extended__title > h2 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2.5rem;
  margin-bottom: 0;
  letter-spacing: .6rem;
  text-transform: uppercase;
  color: #a4acbc;
}

/* Grille des items */
.c-structured-expertise-extended__items {
  display: flex;
  justify-content: center;
}

/* Item inactif quand un autre est actif */
.c-structured-expertise-extended__items.panel-is-activated
  .c-structured-expertise-extended__item:not(.active) {
  min-width: 8.5rem !important;
}
@media (min-width: 80em) {
  .c-structured-expertise-extended__items.panel-is-activated
    .c-structured-expertise-extended__item:not(.active) {
    min-width: 10.5rem !important;
  }
}
@media (min-width: 87.5em) {
  .c-structured-expertise-extended__items.panel-is-activated
    .c-structured-expertise-extended__item:not(.active) {
    min-width: 12.5rem !important;
  }
}

.c-structured-expertise-extended__items.panel-is-activated
  .c-structured-expertise-extended__item:not(.active)
  .c-expertise-extended-item__content {
  transition: transform .1s ease-in-out .4s;
  transform: translate(-50%, 5rem);
}
.c-structured-expertise-extended__items.panel-is-activated
  .c-structured-expertise-extended__item:not(.active)
  .c-expertise-extended-item .icon-svg {
  animation: imgOpacity 1s linear forwards;
}
.c-structured-expertise-extended__items.panel-is-activated
  .c-structured-expertise-extended__item:not(.active) h3 {
  transition: opacity .3s linear;
  animation: titleOpacity .2s linear;
  opacity: 0 !important;
}
.c-structured-expertise-extended__items.panel-is-activated
  .c-structured-expertise-extended__item:not(.active):hover {
  transition: all .6s cubic-bezier(.5, 1, .89, 1);
  flex-basis: auto;
  min-width: 10.5rem !important;
}
@media (min-width: 80em) {
  .c-structured-expertise-extended__items.panel-is-activated
    .c-structured-expertise-extended__item:not(.active):hover {
    min-width: 12.5rem !important;
  }
}
@media (min-width: 87.5em) {
  .c-structured-expertise-extended__items.panel-is-activated
    .c-structured-expertise-extended__item:not(.active):hover {
    min-width: 16.5rem !important;
  }
}

/* Item */
.c-structured-expertise-extended__item {
  display: flex;
  flex-direction: column;
  width: 20%;
  height: 100%;
  cursor: pointer;
  transition: all .4s ease-in-out;
  flex-basis: auto;
}
.c-structured-expertise-extended__item:hover {
  width: 25%;
  transition: all .4s cubic-bezier(.5, 1, .89, 1);
  flex-basis: auto;
}
.c-structured-expertise-extended__item.active {
  width: 100%;
  transition: all .7s cubic-bezier(.5, 1, .89, 1);
}
.c-structured-expertise-extended__item.active .c-expertise-extended-item__overlay {
  opacity: 1;
  background: linear-gradient(rgba(2, 20, 58, .7) 100%, rgba(7, 14, 29, 0) 100%);
}
.c-structured-expertise-extended__item.active .c-expertise-extended-item__content {
  top: 0;
  left: 5rem;
  max-width: calc(100% - 8.5rem);
  padding-top: 0rem;
  padding-right: 0;
  padding-left: 0;
  transition: transform 0s ease .3s;
  transform: translate(0, 0);
  text-align: left;
}
@media (min-width: 80em) {
  .c-structured-expertise-extended__item.active .c-expertise-extended-item__content {
    left: 8.3rem;
    max-width: 100%;
  }
}
@media (min-width: 87.5em) {
  .c-structured-expertise-extended__item.active .c-expertise-extended-item__content {
    left: 11.3rem;
  }
}
.c-structured-expertise-extended__item.active .c-expertise-extended-item__content .icon-svg {
  animation: imgOpacityOpen 1s linear;
  margin: 0;
}
.c-structured-expertise-extended__item.active .c-expertise-extended-item__content h3 {
  font-size: 3.6rem;
  line-height: 4.3rem;
  position: relative;
  padding-right: 0;
  padding-left: 0;
  animation: titleAnim 1s cubic-bezier(.5, 1, .89, 1) forwards;
  text-align: left;
}
.c-structured-expertise-extended__item.active .c-expertise-extended-item__content h3 br {
  display: none;
}
.c-structured-expertise-extended__item.active .c-expertise-extended-item__content h3::after {
  animation: titleBefore .5s cubic-bezier(.5, 1, .89, 1) forwards;
  animation-delay: .55s;
}
.c-structured-expertise-extended__item.active .c-expertise-extended-item__content p {
  font-size: 1.8rem;
  position: relative;
  display: block;
  animation: textOpacity .5s cubic-bezier(.5, 1, .89, 1) forwards;
  animation-delay: .75s;
}
.c-structured-expertise-extended__item.active .c-expertise-extended-item__content a {
  position: relative;
  display: block;
  animation: textOpacity .5s cubic-bezier(.5, 1, .89, 1) forwards;
  animation-delay: .85s;
}

/* Carte item */
.c-expertise-extended-item {
  position: relative;
  min-height: 50rem;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.c-expertise-extended-item__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 1.5s cubic-bezier(.25, 1, .5, 1);
  opacity: .5;
  background: linear-gradient(rgba(2, 20, 58, .7) 100%, rgba(7, 14, 29, 0) 100%);
}
.c-expertise-extended-item__content {
  position: absolute;
  top: 20rem;
  left: 50%;
  /* max-width: 15rem; */
  width: 60rem;
  height: 100%;
  transition: all .1s ease-in-out .5s;
  transform: translate(-50%, 0);
}
.c-expertise-extended-item__content .icon-svg {
  width: 5.6rem;
  height: 5.6rem;
  animation: imgOpacityClose 1.5s linear;
  background-color: #fff;
}
.c-expertise-extended-item__content h3 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 2.9rem;
  position: relative;
  margin: 0;
  margin-top: 3rem;
  padding-right: 1rem;
  padding-left: 1rem;
  animation: titleClose 1.5s linear;
  text-align: center;
  color: #ffffff;
}

.c-expertise-extended-item__content h3::after {
  position: absolute;
  bottom: -2rem;
  left: 0;
  width: 0;
  height: 1px;
  content: '';
  background-color: #8e2525;
}
.c-expertise-extended-item__content p {
  font-family: 'Montserrat', Arial, sans-serif;
  line-height: 3rem;
  position: absolute;
  display: none;
  /* max-width: 500px; */
  margin: 5rem 0 0 0;
  transition: opacity .3s ease;
  opacity: 0;
  color: #fff;
}
.c-expertise-extended-item__content a {
  position: absolute !important;
  width: 100%;
  display: none;
  visibility: hidden;
  bottom: 15px;
  opacity: 0;
}

/* @media (max-width: 87.5em) {
  .c-structured-expertise-extended__title { padding-top: 4rem; }
  .c-structured-expertise-extended__items { padding: 8rem 4rem 4rem 4rem; }
  .c-expertise-extended-item__content { padding-right: 0; padding-left: 0; }
} */



/* =========================================================
   VERSION RESPONSIVE — c-structured-expertise-extended-responsive
   (affiché < 64em, masqué au-dessus)
   ========================================================= */
.c-structured-expertise-extended-responsive {
  position: relative;
  display: flex;
  flex-direction: row;
  padding-bottom: 4rem;
  justify-content: center;
}
.c-structured-expertise-extended-responsive__items {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}
.c-structured-expertise-extended-responsive__item {
  position: relative;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.c-structured-expertise-extended-responsive__item--active
  .c-structured-expertise-extended-responsive__container
  .icon-panel {
  transform: rotate(270deg);
}
.c-structured-expertise-extended-responsive__item--active
  .c-structured-expertise-extended-responsive__container--panel {
  visibility: visible;
  opacity: 1;
}
.c-structured-expertise-extended-responsive__item--overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all .4s ease;
  background: linear-gradient(180deg, rgba(2, 20, 58, .7) 100%, rgba(7, 14, 29, 0) 100%);
}
.c-structured-expertise-extended-responsive__container {
  position: relative;
}
.c-structured-expertise-extended-responsive__container--title {
  position: relative;
  padding: 3.5rem 4rem;
  text-align: left;
  cursor: pointer;
}
.c-structured-expertise-extended-responsive__container--title .icon-svg:not(.icon-panel) {
  display: inline-block;
  width: 2.9rem;
  height: 2.9rem;
  margin-right: 1rem;
  vertical-align: middle;
  background-color: #fff;
}
/* Flèche accordéon */
.c-structured-expertise-extended-responsive__container--title .icon-panel {
  font-size: 2rem;
  position: absolute;
  top: 4.1rem;
  right: 4rem;
  width: 22px;
  transition: all .4s ease;
  transform: rotate(90deg);
  color: #fff;
  /* Flèche via border trick (pas de font icon disponible) */
  display: inline-block;
}
.c-structured-expertise-extended-responsive__container--title .icon-panel.icon-next::before {
  content: '›';
  font-size: 2.4rem;
  line-height: 1;
}
.c-structured-expertise-extended-responsive__container--title h3 {
  font-size: 1.8rem;
  line-height: 1.8rem;
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  color: #fff;
}
.c-structured-expertise-extended-responsive__container--panel {
  visibility: hidden;
  overflow: hidden;
  height: 0;
  transition: all .3s ease-in-out;
  opacity: 0;
}
.c-structured-expertise-extended-responsive__container--panel__content {
  padding: 0 4rem 3.5rem 4rem;
  text-align: left;
}
.c-structured-expertise-extended-responsive__container--panel__content p {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 2.2rem;
  margin: 0;
  margin-top: 3rem;
  text-align: left;
  color: #fff;
}
.c-structured-expertise-extended-responsive__container--panel__content .btn {
  margin-top: 2.5rem;
  text-align: left;
}

@media (max-width: 48em) {
  .c-structured-expertise-extended-responsive__container--panel .btn {
    width: 100%;
    text-align: center;
  }
  .c-structured-expertise-extended-responsive__container--panel__content p {
    margin-top: 0;
  }
}
@media (max-width: 30em) {
  .c-structured-expertise-extended-responsive__container--title {
    padding: 3.5rem 2rem;
  }
  .c-structured-expertise-extended-responsive__container--title .icon-panel {
    right: 2rem;
  }
}

/* =========================================================
   Responsive : affichage conditionnel desktop / mobile
   ========================================================= */
@media (max-width: 63.99em) {
  .c-structured-expertise-extended {
    display: none !important;
    visibility: hidden !important;
  }
  .c-structured-expertise-extended-responsive {
    display: flex !important;
    visibility: visible !important;
  }
}
@media (min-width: 64em) {
  .c-structured-expertise-extended-responsive {
    display: none !important;
    visibility: hidden !important;
  }
  .c-structured-expertise-extended {
    display: block;
  }
}

/* =========================================================
   Keyframes
   ========================================================= */
@keyframes titleBefore {
  0%   { width: 0; }
  100% { width: 440px; }
}
@keyframes textOpacity {
  0%   { visibility: hidden; transform: translateX(-30px); opacity: 0; }
  100% { visibility: visible; transform: translateX(0%);  opacity: 1; }
}
@keyframes titleAnim {
  0%   { visibility: hidden; transform: translateX(-30px); opacity: 1; }
  50%  { visibility: hidden; transform: translateX(-30px); opacity: 0; }
  100% { visibility: visible; transform: translateX(0);    opacity: 1; }
}
@keyframes imgOpacity {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes imgOpacityOpen {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes imgOpacityClose {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes titleClose {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes titleOpacity {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}