.elementor-259 .elementor-element.elementor-element-5984e824{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-259 .elementor-element.elementor-element-c2a62f6{background-color:transparent;background-image:linear-gradient(180deg, #000000 0%, var( --e-global-color-primary ) 100%);}.elementor-259 .elementor-element.elementor-element-ae10445{--display:flex;}.elementor-259 .elementor-element.elementor-element-ae7b79b{background-color:transparent;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;background-image:linear-gradient(180deg, var( --e-global-color-primary ) 0%, var( --e-global-color-primary ) 100%);}.elementor-259 .elementor-element.elementor-element-45c4278{background-color:#000000;z-index:0;}body.elementor-page-259:not(.elementor-motion-effects-element-type-background), body.elementor-page-259 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-c2a62f6 */<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:wght@500;600;700&display=swap');

.templiers-page {
  --accent: #b57935;
  --accent-light: #d4a765;
  --accent-dark: #6f4522;
  --text-soft: #e6dccd;
  --border-soft: rgba(181, 121, 53, 0.28);

  --hero-image: url("https://clockwisescape.com/wp-content/uploads/2026/06/20231124_162948.jpg");
  --logo-image: url("https://clockwisescape.com/wp-content/uploads/2026/06/Heritage-templiers-titre.png");

  --detail-image-1: url("https://clockwisescape.com/wp-content/uploads/2026/06/20231124_162948.jpg");
  --detail-image-2: url("https://clockwisescape.com/wp-content/uploads/2026/06/AFFICHE-heritage-des-templers-carree.jpg");

  --content-width: 1240px;

  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: #000;
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  overflow: hidden;
}

.templiers-page * {
  box-sizing: border-box;
}

/* =========================
   HERO
========================= */

.templiers-hero {
  position: relative;
  width: 100vw;
  min-height: clamp(610px, 78vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: var(--hero-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.templiers-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at center, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.34) 46%, rgba(0,0,0,0.90) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.20) 45%, rgba(0,0,0,0.90) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.58), rgba(0,0,0,0.04) 42%, rgba(0,0,0,0.54));
}

.templiers-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 28%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 72%, rgba(181,121,53,0.11), transparent 44%),
    radial-gradient(ellipse at 80% 76%, rgba(181,121,53,0.09), transparent 42%),
    linear-gradient(to bottom, rgba(0,0,0,0), #000 82%);
}

.templiers-hero-inner {
  position: relative;
  z-index: 3;
  width: min(var(--content-width), 92%);
  text-align: center;
  padding: 24px 0 46px;
}

/* =========================
   LOGO HERO
========================= */

.templiers-logo {
  width: min(520px, 54vw);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 24px;

  filter:
    drop-shadow(0 8px 22px rgba(0,0,0,0.88))
    drop-shadow(0 0 12px rgba(181,121,53,0.12));
}

/* =========================
   INFOS HERO
========================= */

.templiers-meta {
  max-width: 1120px;
  margin: 0 auto 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: start;
}

.templiers-meta-item {
  position: relative;
  text-align: center;
  padding: 0 8px;
}

.templiers-meta-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: -11px;
  width: 1px;
  height: 54px;
  background: rgba(181,121,53,0.34);
}

.templiers-meta-title {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(25px, 2vw, 35px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 9px;
  letter-spacing: 0.02em;
  text-shadow:
    0 2px 10px rgba(0,0,0,0.75),
    0 0 8px rgba(255,255,255,0.10);
}

.templiers-meta-text {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 650;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--accent-light);
}

.templiers-difficulty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.templiers-difficulty-bars {
  display: flex;
  gap: 7px;
}

.templiers-difficulty-bars span {
  width: 34px;
  height: 8px;
  border-radius: 999px;
  background: rgba(181,121,53,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.templiers-difficulty-bars span.active {
  background: linear-gradient(
    180deg,
    #d9b078 0%,
    #b57935 48%,
    #6f4522 100%
  );
  box-shadow:
    0 0 8px rgba(181,121,53,0.26),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.templiers-difficulty-score {
  font-family: "Cinzel", Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
}

/* =========================
   BOUTON
========================= */

.templiers-btn-wrap {
  margin-top: 4px;
}

.templiers-btn {
  position: relative;
  display: inline-block;
  min-width: 210px;
  padding: 12px 22px;
  overflow: hidden;

  text-decoration: none !important;
  text-transform: uppercase;
  text-align: center;

  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(13px, 0.9vw, 15px);
  font-weight: 800;
  letter-spacing: 0.13em;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  background: linear-gradient(
    180deg,
    #a86f34 0%,
    #8f5b2c 40%,
    #71441f 72%,
    #5b3519 100%
  );

  border: 1px solid rgba(212,167,101,0.55);
  border-radius: 5px;

  box-shadow:
    0 8px 18px rgba(0,0,0,0.42),
    0 0 8px rgba(181,121,53,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06);

  transition:
    transform .25s ease,
    filter .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.templiers-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(230, 198, 150, 0.20),
    transparent
  );
  transform: skewX(-18deg);
  transition: left .65s ease;
}

.templiers-btn:hover,
.templiers-btn:focus,
.templiers-btn:visited {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}

.templiers-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  border-color: rgba(220,175,110,0.85);

  box-shadow:
    0 12px 28px rgba(0,0,0,0.52),
    0 0 18px rgba(181,121,53,0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.templiers-btn:hover::after {
  left: 135%;
}

/* =========================
   CONTENU
========================= */

.templiers-content {
  position: relative;
  background:
    radial-gradient(circle at 50% 0%, rgba(181,121,53,0.07), transparent 26%),
    #000;
  padding: 44px 0 58px;
}

.templiers-content-inner {
  width: min(var(--content-width), 90%);
  margin: 0 auto;
}

.templiers-row {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(26px, 3vw, 42px);
  align-items: center;
  margin-bottom: 44px;
}

.templiers-row.reverse {
  grid-template-columns: 1.05fr 1fr;
  margin-bottom: 34px;
}

.templiers-panel {
  position: relative;
  padding: 18px 20px 18px 22px;
}

.templiers-panel.left-border::before,
.templiers-panel.right-border::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--accent), transparent);
  opacity: 0.75;
}

.templiers-panel.left-border::before {
  left: 0;
}

.templiers-panel.right-border::after {
  right: 0;
}

/* TITRES BAS */
.templiers-section-title,
.templiers-page .templiers-section-title,
.templiers-panel h2.templiers-section-title {
  margin: 0 0 16px !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(34px, 3.45vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;

  color: #c18a4b !important;
  -webkit-text-fill-color: #c18a4b !important;

  text-shadow:
    0 2px 12px rgba(0,0,0,0.85),
    0 0 14px rgba(181,121,53,0.18) !important;
}

.templiers-body {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.55;
  color: var(--text-soft);
  font-weight: 600;
}

.templiers-body p {
  margin: 0 0 14px;
}

.templiers-image-box {
  position: relative;
  min-height: 340px;
  border: 1px solid var(--border-soft);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
  background: #060606;
}

.templiers-image-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(0,0,0,0.02), rgba(0,0,0,0.38)),
    linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.42));
  z-index: 1;
}

.templiers-image-1,
.templiers-image-2 {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
}

.templiers-image-1 {
  background-image: var(--detail-image-1);
  background-position: center center;
}

.templiers-image-2 {
  background-image: var(--detail-image-2);
  background-position: center center;
}

.templiers-image-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 2;

  font-family: "Cinzel", Georgia, serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

/* =========================
   TRAIT FINAL AVANT RÉSERVATION
========================= */

.templiers-reservation-separator {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #000;
  padding: 0;
}

.templiers-reservation-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(181,121,53,0.18) 12%,
    rgba(181,121,53,0.72) 50%,
    rgba(181,121,53,0.18) 88%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(181,121,53,0.18);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
  .templiers-row,
  .templiers-row.reverse {
    grid-template-columns: 1fr;
  }

  .templiers-row .templiers-image-box {
    order: 2;
  }

  .templiers-row .templiers-panel {
    order: 1;
  }

  .templiers-panel.right-border::after {
    display: none;
  }

  .templiers-panel.right-border::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--accent), transparent);
    opacity: 0.75;
  }
}

@media (max-width: 767px) {
  .templiers-hero {
    min-height: 690px;
    background-position: center top;
  }

  .templiers-hero-inner {
    padding: 24px 0 42px;
  }

  .templiers-logo {
    width: 80vw;
    max-width: 450px;
    margin-bottom: 22px;
  }

  .templiers-meta {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 14px;
    margin-bottom: 22px;
  }

  .templiers-meta-item::after {
    display: none;
  }

  .templiers-difficulty-bars span {
    width: 24px;
    height: 7px;
  }

  .templiers-btn {
    min-width: 0;
    width: min(100%, 240px);
    padding: 12px 18px;
  }

  .templiers-content {
    padding: 36px 0 48px;
  }

  .templiers-row {
    margin-bottom: 34px;
  }

  .templiers-panel {
    padding: 14px 0 14px 18px;
  }

  .templiers-image-box {
    min-height: 250px;
  }

  .templiers-body {
    font-size: 17px;
  }
}
</style>

<div class="templiers-page">

  <section class="templiers-hero">
    <div class="templiers-hero-inner">

      <img
        class="templiers-logo"
        src="https://clockwisescape.com/wp-content/uploads/2026/06/Heritage-templiers-titre.png"
        alt="L’Héritage des Templiers"
      >

      <div class="templiers-meta">
        <div class="templiers-meta-item">
          <div class="templiers-meta-title">Genre</div>
          <div class="templiers-meta-text">Quête · Médiéval</div>
        </div>

        <div class="templiers-meta-item">
          <div class="templiers-meta-title">Joueurs</div>
          <div class="templiers-meta-text">2 à 6 joueurs</div>
        </div>

        <div class="templiers-meta-item">
          <div class="templiers-meta-title">Durée</div>
          <div class="templiers-meta-text">60 minutes</div>
        </div>

        <div class="templiers-meta-item">
          <div class="templiers-meta-title">Difficulté</div>
          <div class="templiers-difficulty">
            <div class="templiers-difficulty-bars" aria-label="Difficulté 4 sur 5">
              <span class="active"></span>
              <span class="active"></span>
              <span class="active"></span>
              <span class="active"></span>
              <span></span>
            </div>
            <div class="templiers-difficulty-score">4 / 5</div>
          </div>
        </div>
      </div>

      <div class="templiers-btn-wrap">
        <a href="https://www.clockwisescape.com/reservation" class="templiers-btn">
          Réserver
        </a>
      </div>

    </div>
  </section>

  <section class="templiers-content">
    <div class="templiers-content-inner">

      <div class="templiers-row">
        <div class="templiers-panel left-border">
          <h2 class="templiers-section-title">
            L’Héritage<br>des Templiers
          </h2>

          <div class="templiers-body">
            <p>
              Le 10 juin 1194, la cathédrale de Chartres est partiellement détruite par un gigantesque incendie.
              Les chanoines se sont réfugiés dans la chapelle de Saint-Lubin, protégeant la relique sacrée de Chartres,
              lorsqu’ils sont ensevelis sous les décombres.
            </p>

            <p>
              Quelques jours plus tard, les décombres sont dégagés et les chanoines sauvés. La relique est alors mise
              en sécurité par l’évêque Renaud de Bar, qui décide de la confier au Commandeur de l’Ordre des Templiers,
              Gilbert Hérail.
            </p>

            <p>
              Malheureusement, le 21 décembre 1200, Gilbert Hérail décède au début de sa quatrième croisade. L’endroit
              secret où la relique avait été cachée sombre alors dans l’oubli.
            </p>
          </div>
        </div>

        <div class="templiers-image-box">
          <div class="templiers-image-1"></div>
          <div class="templiers-image-caption">Secret · Foi · Transmission</div>
        </div>
      </div>

      <div class="templiers-row reverse">
        <div class="templiers-image-box">
          <div class="templiers-image-2"></div>
          <div class="templiers-image-caption">Chartres · Ordre · Reliques</div>
        </div>

        <div class="templiers-panel right-border">
          <h2 class="templiers-section-title">
            Votre quête
          </h2>

          <div class="templiers-body">
            <p>
              Nous sommes le 24 octobre 1260. La cathédrale doit être consacrée solennellement aujourd’hui.
              Le Pape en personne s’est déplacé. La procession commencera à 18h, sous les hourras de la foule.
            </p>

            <p>
              La recherche est confiée aux templiers et à leur nouveau commandeur, Thomas Béraud. Il fonde une section
              spéciale dont la seule mission est de retrouver la relique de Chartres.
            </p>

            <p>
              Vous faites partie de cette section, héritière des nombreux templiers qui se sont succédé dans cette aventure.
              La procession débute dans un peu plus d’une heure : il est de votre devoir de sauver l’Ordre des Templiers.
            </p>
          </div>
        </div>
      </div>

    </div>
  </section>

  <div class="templiers-reservation-separator">
    <div class="templiers-reservation-line"></div>
  </div>

</div>/* End custom CSS */