/* ============================================================
   APC — Le Groupe (page-specific styles)
   ============================================================ */

/* Header band with photo background */
.groupe-header {
  position: relative;
  background: url(../images/md/historique.jpg) center / cover no-repeat;
  padding: 80px 30px 60px;
  text-align: center;
}

.groupe-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
}

.groupe-header h1 {
  position: relative;
  z-index: 1;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 2em;
  color: #fff;
  margin: 0 0 6px;
  text-align: center;
}

.groupe-header .sous-titre {
  position: relative;
  z-index: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: .85em;
  color: #c5a55a;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* Content */
.groupe-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 25px 60px;
  font-family: 'Open Sans', sans-serif;
  color: #333;
  line-height: 1.7;
  font-size: 14px;
}

.groupe-content p {
  margin: 0 0 1em;
  text-align: justify;
}

.groupe-content p:last-child {
  margin-bottom: 0;
}

.groupe-intro {
  font-size: 1.05em;
  color: #444;
  border-left: 3px solid #c5a55a;
  padding-left: 20px;
  margin-bottom: 2.5em;
}

/* Profil */
.profil {
  margin-bottom: 2.5em;
}

.profil h2 {
  font-weight: 300;
  font-size: 1.5em;
  color: #111;
  margin: 0 0 4px;
}

.profil .role {
  font-size: .8em;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 1.2em;
}

.profil-photo {
  width: 100%;
  max-width: 350px;
  margin: 1.5em 0;
  display: block;
}

.profil-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.profil-photo figcaption {
  font-size: .78em;
  color: #999;
  margin-top: 6px;
  font-style: italic;
}

.sep {
  border: 0;
  height: 1px;
  background: #ddd;
  margin: 2.5em 0;
}

.activites h3 {
  font-weight: 300;
  font-size: 1.25em;
  color: #111;
  margin: 0 0 .8em;
}

.activites strong { color: #111; }

.groupe-cta {
  text-align: center;
  padding: 2em 0 0;
}

.groupe-cta a {
  display: inline-block;
  text-transform: uppercase;
  font-size: .85em;
  font-weight: 700;
  letter-spacing: .1em;
  color: #c5a55a;
  text-decoration: none;
  border: 1px solid #c5a55a;
  padding: 12px 30px;
  transition: all .3s ease;
}

.groupe-cta a:hover {
  background: #c5a55a;
  color: #fff;
}

/* Responsive header images */
@media (min-width: 600px), (min-resolution: 192dpi) {
  .groupe-header { background-image: url(../images/md/historique.jpg); }
}
@media (min-width: 1224px) {
  .groupe-header { background-image: url(../images/lg/historique.jpg); }
}
@media (min-width: 1824px) {
  .groupe-header { background-image: url(../images/xl/historique.jpg); }
}

/* Responsive layout */
@media (min-width: 640px) {
  .groupe-header { padding: 80px 40px 50px; }
  .groupe-header h1 { font-size: 2.4em; }
  .groupe-content { padding: 50px 40px 80px; font-size: 15px; }
}

@media (min-width: 1024px) {
  .groupe-header { padding: 100px 60px 60px; }
  .groupe-header h1 { font-size: 2.8em; }
  .groupe-content { padding: 60px 40px 100px; }
}