/* ==========================================================================
   Pages de realisation (etudes de cas) - 3DM Concept
   --------------------------------------------------------------------------
   Ex. configurateur-3d/boaz-create.html. Ces pages reprennent les classes de
   l'accueil (en-tete #hero, titres en deux tons, bandeau .promote, pied de
   page) et chargent les memes feuilles : seul ce qui leur est propre est ici.
   ========================================================================== */

/* --- en-tete ---------------------------------------------------------------
   Sur l'accueil, js/main.js donne au hero sa hauteur minimale ; ici pas de
   script, la regle est donc posee en CSS, un peu plus basse : ici le hero
   precede la video et la fiche, le texte ne doit pas arriver trop loin. */
.page-realisation header {
  min-height: 280px;
}
.page-realisation .hero-caption {
  padding: 80px 15px 28px;
}
.page-realisation .hero-univers-titre {
  font-size: 16px;
}

/* La navigation tient la place du menu de l'accueil (.menu-trigger), avec
   les memes retraits selon la largeur d'ecran (voir responsive.css). */
.ec-nav {
  position: absolute;
  top: 48px;
  right: 115px;
  z-index: 10;
}
.ec-nav a {
  margin-left: 24px;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ec-nav a:hover,
.ec-nav a:focus {
  color: #3498db;
}

/* --- fil d'ariane --------------------------------------------------------- */
.ec-ariane {
  margin: 30px 0 25px;
  padding: 0;
  font-size: 13px;
  color: #8a8a8a;
}
.ec-ariane li {
  display: inline;
}
.ec-ariane li + li:before {
  content: "\203A";
  margin: 0 8px;
}
.ec-ariane a {
  color: #8a8a8a;
}
.ec-ariane a:hover {
  color: #3498db;
}

/* --- video et fiche resume ------------------------------------------------ */
.ec-article {
  padding-bottom: 70px;
}
.ec-video {
  display: block;
  width: 100%;
  height: auto;
  background: #000000;
  border-radius: 3px;
}
/* Meme cadre que les cartes "Trois expertises" de l'accueil */
.ec-fiche {
  display: flex;
  flex-wrap: wrap;
  margin: 30px 0 0;
  border: 1px solid #e4e4e4;
  border-radius: 3px;
}
.ec-fiche div {
  flex: 0 0 33.333%;
  padding: 16px 20px;
}
.ec-fiche dt {
  margin-bottom: 4px;
  color: #3498db;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ec-fiche dd {
  margin: 0;
  color: #484848;
  font-size: 15px;
}

/* --- corps du texte : titres et paragraphes de la section "A propos" -------
   Pleine largeur du conteneur, comme sur l'accueil. Trois temps : besoin,
   solution (avec ses sous-parties en h3), resultat. */
.ec-texte h2 {
  margin-top: 60px;
}
.ec-texte h3 {
  margin: 30px 0 12px;
  color: #272727;
  font-size: 17px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ec-resultat {
  margin-bottom: 20px;
  padding: 20px 24px 5px;
  border-left: 3px solid #3498db;
  background: #f5f8fb;
}
.ec-texte .line {
  margin-bottom: 25px;
}
.ec-texte p,
.ec-texte li {
  color: #484848;
  line-height: 24px;
}
.ec-texte p {
  margin-bottom: 15px;
}
.ec-texte ul {
  margin: 0 0 15px 20px;
}
.ec-texte li {
  list-style: disc;
  margin-bottom: 8px;
}
.ec-texte strong {
  color: #272727;
  font-weight: normal;
}
.ec-texte a {
  color: #3498db;
}

/* --- bandeau de contact : numero et adresse ne se coupent pas ------------ */
.page-realisation .promote p a {
  white-space: nowrap;
}

/* --- ecrans plus etroits : memes paliers que .menu-trigger ----------------- */
@media only screen and (max-width: 1200px) {
  .ec-nav { right: 80px; }
}
@media only screen and (max-width: 992px) {
  .ec-nav { right: 65px; }
}
@media only screen and (max-width: 767px) {
  .page-realisation header {
    min-height: 0;
  }
  /* L'accueil masque son accroche sur mobile ; ici c'est le chapeau du
     projet, il reste affiche. */
  .page-realisation .hero-accroche {
    display: block;
    margin-top: 6px;
  }
  /* Le logo occupe la largeur : comme sur l'accueil, ou seul le bouton de
     menu tient a cote, la navigation s'efface. Fil d'ariane et bandeau de
     contact y menent aussi. */
  .ec-nav {
    display: none;
  }
  .ec-texte h2 {
    margin-top: 45px;
  }
  .ec-fiche div {
    flex-basis: 50%;
    padding: 12px 14px;
  }
  .ec-resultat {
    padding: 16px 18px 3px;
  }
}