:root{
  --navy:#020d1f; --navy2:#0b1e46; --blue:#0056c9; --orange:#ff6200;
  --white:#fff; --off:#f5f6f7; --ink:#101828; --muted:#667085;
}
*{box-sizing:border-box} body{margin:0;font-family:Montserrat,Arial,sans-serif;color:var(--ink);background:var(--off)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:
 radial-gradient(circle at 15% 20%,#fff 0 1px,transparent 1.5px),
 radial-gradient(circle at 70% 55%,#8fc8ff 0 1px,transparent 1.5px);
 background-size:19px 19px,27px 27px;mix-blend-mode:screen}
a{color:inherit;text-decoration:none}.wrap{max-width:1180px;margin:auto;padding:0 24px}
.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid #17325f}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.logo{font-weight:900;font-size:25px;letter-spacing:1px}.logo span{color:var(--orange);display:block;font-size:12px;letter-spacing:2px}
.menu{display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:13px;font-weight:700}.menu a{opacity:.9}.menu a:hover,.menu .active{color:var(--orange)}
.btn{display:inline-block;background:var(--orange);color:#fff;padding:13px 18px;font-weight:800;border-radius:3px;border:1px solid var(--orange);font-size:13px}.btn.alt{background:transparent;border-color:#fff}.btn.blue{background:var(--blue);border-color:var(--blue)}
.hero{min-height:510px;color:#fff;display:flex;align-items:center;background:linear-gradient(90deg,rgba(2,13,31,.97) 0%,rgba(2,13,31,.86) 38%,rgba(2,13,31,.15) 75%),url('../images/hero.jpeg') center/cover}
.hero h1{font-size:clamp(42px,7vw,84px);line-height:.92;margin:14px 0;text-transform:uppercase;font-weight:900;font-style:italic;max-width:650px}.hero h1 span{color:var(--orange)}.hero p{max-width:500px;line-height:1.6}.eyebrow{color:var(--orange);font-size:13px;font-weight:900;letter-spacing:.8px}
.stats{background:#fff;display:grid;grid-template-columns:repeat(4,1fr);padding:20px 0;border-bottom:1px solid #ddd}.stat{text-align:center;border-right:1px solid #ddd}.stat:last-child{border:0}.stat b{display:block;font-size:30px;color:var(--navy)}.stat small{font-weight:800;color:var(--muted)}
.section{padding:70px 0}.section.dark{background:var(--navy);color:#fff}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.grid.two{grid-template-columns:repeat(2,1fr)}.card{background:#fff;padding:26px;border:1px solid #e3e6eb;box-shadow:0 12px 30px rgba(2,13,31,.06)}.dark .card{background:#0b1e46;border-color:#24416e}.card h3{margin-top:0}.card p{line-height:1.65;color:var(--muted)}.dark .card p{color:#dbe5f4}
h2{font-size:40px;line-height:1.05;margin:0 0 16px;text-transform:uppercase;font-style:italic}.lead{font-size:18px;line-height:1.7;color:var(--muted)}.dark .lead{color:#dbe5f4}
.pagehead{padding:80px 0 45px;color:#fff;background:linear-gradient(115deg,var(--navy),var(--navy2));position:relative;overflow:hidden}.pagehead:after{content:"";position:absolute;right:-80px;top:-110px;width:420px;height:420px;border:38px solid rgba(0,86,201,.35);transform:rotate(25deg);box-shadow:0 0 0 15px rgba(255,98,0,.18)}
.pagehead h1{position:relative;z-index:1;font-size:58px;margin:0;text-transform:uppercase;font-style:italic}.pagehead p{position:relative;z-index:1;max-width:650px;line-height:1.7}
.table{width:100%;border-collapse:collapse;background:#fff}.table th,.table td{padding:14px;text-align:left;border-bottom:1px solid #e5e7eb}.table th{background:var(--navy);color:#fff}.badge{display:inline-block;padding:5px 8px;background:#e9f2ff;color:var(--blue);font-size:12px;font-weight:800}
.footer{background:var(--navy);color:#fff;padding:35px 0}.footer small{color:#b7c7de}
@media(max-width:800px){.menu{gap:10px;font-size:11px}.nav{height:auto;padding:14px 0;align-items:flex-start}.stats{grid-template-columns:repeat(2,1fr);gap:18px}.stat{border:0}.grid,.grid.two{grid-template-columns:1fr}.hero{min-height:560px}.pagehead h1{font-size:42px}}



/* =========================================================
   ENTETES RACING - MOTIF NID D'ABEILLE
   Accueil volontairement exclu
   ========================================================= */

.pagehead {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background-color: #071b35 !important;
}

/* Motif hexagonal discret à droite */
.pagehead::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: -40px !important;
  bottom: 0 !important;
  width: 48% !important;
  z-index: -1 !important;
  opacity: 0.34 !important;
  pointer-events: none !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width=' ninety' height='104' viewBox='0 0 90 104'%3E%3Cg fill='none' stroke='%2389a9c9' stroke-width='1.2' opacity='.52'%3E%3Cpath d='M22.5 1 45 14v26L22.5 53 0 40V14z'/%3E%3Cpath d='M67.5 1 90 14v26L67.5 53 45 40V14z'/%3E%3Cpath d='M45 53 67.5 66v26L45 105 22.5 92V66z'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 90px 104px !important;
  background-position: right center !important;
  background-repeat: repeat !important;

  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 24%,
    black 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 24%,
    black 100%
  ) !important;
}

/* Dégradé pour fondre le motif dans le bandeau */
.pagehead::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      #071b35 0%,
      rgba(7, 27, 53, 0.92) 28%,
      rgba(7, 27, 53, 0.25) 72%,
      rgba(7, 27, 53, 0.78) 100%
    ) !important;
}

/* Le texte reste au-dessus du motif */
.pagehead .wrap,
.pagehead h1,
.pagehead p {
  position: relative !important;
  z-index: 2 !important;
}

/* Petite signature racing conservée */
.pagehead h1::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 1.05em !important;
  margin-right: 18px !important;
  vertical-align: middle !important;
  background: #f28c28 !important;
  transform: skewX(-18deg) !important;
}

/* Accueil exclu explicitement */
.gems-home-hero::before,
.gems-home-hero::after {
  display: none !important;
}

@media (max-width: 800px) {
  .pagehead::before {
    right: -90px !important;
    width: 72% !important;
    opacity: 0.24 !important;
  }

  .pagehead h1::before {
    width: 5px !important;
    margin-right: 10px !important;
  }
}

/* =========================================================
   ENTETES INTERNES - DEGRADE BLEU ET NID D'ABEILLE
   L'accueil n'est pas concerné
   ========================================================= */

.pagehead {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      100deg,
      #071b35 0%,
      #0b2d58 48%,
      #236b9f 100%
    ) !important;
}

/* Suppression complète de l'ancienne barre orange */
.pagehead h1::before {
  content: none !important;
  display: none !important;
}

/* Motif hexagonal propre, principalement à droite */
.pagehead::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 52% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.72 !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='104' viewBox='0 0 90 104'%3E%3Cg fill='none' stroke='%2398c1dc' stroke-width='1.2' opacity='.58'%3E%3Cpath d='M22.5 1 45 14v26L22.5 53 0 40V14z'/%3E%3Cpath d='M67.5 1 90 14v26L67.5 53 45 40V14z'/%3E%3Cpath d='M45 53 67.5 66v26L45 105 22.5 92V66z'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 90px 104px !important;
  background-repeat: repeat !important;
  background-position: right center !important;

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.35) 22%,
    #000 58%,
    #000 100%
  ) !important;

  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.35) 22%,
    #000 58%,
    #000 100%
  ) !important;
}

/* Fondu bleu par-dessus le motif */
.pagehead::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgba(7,27,53,0.96) 0%,
    rgba(7,27,53,0.78) 38%,
    rgba(7,27,53,0.16) 78%,
    rgba(7,27,53,0.28) 100%
  ) !important;
}

/* Texte au-dessus du motif */
.pagehead .wrap {
  position: relative !important;
  z-index: 2 !important;
}

/* L'accueil reste inchangé */
.gems-home-hero,
.gems-home-hero::before,
.gems-home-hero::after {
  background-image: none !important;
}

/* Version mobile */
@media (max-width: 800px) {
  .pagehead::before {
    width: 78% !important;
    opacity: 0.52 !important;
    background-size: 72px 84px !important;
  }

  .pagehead::after {
    background: linear-gradient(
      90deg,
      rgba(7,27,53,0.96) 0%,
      rgba(7,27,53,0.62) 55%,
      rgba(7,27,53,0.28) 100%
    ) !important;
  }
}

/* =========================================================
   NID D'ABEILLE VISIBLE - VERSION FINALE
   Accueil exclu
   ========================================================= */

.pagehead {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  background-color: #0b315d !important;

  background-image:
    linear-gradient(
      90deg,
      rgba(5, 19, 42, 0.98) 0%,
      rgba(8, 35, 70, 0.92) 42%,
      rgba(26, 91, 137, 0.78) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='112' viewBox='0 0 96 112'%3E%3Cg fill='none' stroke='%23b7d9ec' stroke-width='1.5' opacity='0.72'%3E%3Cpath d='M24 2 48 16v28L24 58 0 44V16Z'/%3E%3Cpath d='M72 2 96 16v28L72 58 48 44V16Z'/%3E%3Cpath d='M48 58 72 72v28L48 114 24 100V72Z'/%3E%3C/g%3E%3C/svg%3E") !important;

  background-repeat: no-repeat, repeat !important;
  background-position: center, right center !important;
  background-size: cover, 96px 112px !important;
}

/* Supprimer définitivement les anciens effets */
.pagehead::before,
.pagehead::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Supprimer la barre orange ajoutée devant les titres */
.pagehead h1::before {
  content: none !important;
  display: none !important;
}

/* Le texte reste au-dessus */
.pagehead .wrap {
  position: relative !important;
  z-index: 2 !important;
}

/* Accueil inchangée */
.gems-home-hero,
.gems-home-hero::before,
.gems-home-hero::after {
  background-image: none !important;
}

/* Mobile */
@media (max-width: 800px) {
  .pagehead {
    background-position: center, right center !important;
    background-size: cover, 72px 84px !important;
  }
}

/* =========================================================
   BANDEAUX INTERNES - MODELE GALERIE PHOTO
   Accueil exclue
   ========================================================= */

.pagehead {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background-color: #061a34 !important;

  /*
    Le motif est placé AVANT le dégradé afin de rester visible.
    Le dégradé sombre à gauche et bleu clair à droite correspond
    au modèle Galerie photo.
  */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='106' viewBox='0 0 92 106'%3E%3Cg fill='none' stroke='%2399c8e5' stroke-width='1.35' opacity='0.62'%3E%3Cpath d='M23 1 46 14v27L23 54 0 41V14Z'/%3E%3Cpath d='M69 1 92 14v27L69 54 46 41V14Z'/%3E%3Cpath d='M46 54 69 67v27L46 107 23 94V67Z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      90deg,
      #041329 0%,
      #071d3c 34%,
      rgba(12, 61, 103, 0.94) 72%,
      #1d6493 100%
    ) !important;

  background-repeat: repeat, no-repeat !important;
  background-position: right center, center !important;
  background-size: 92px 106px, cover !important;
}

/* Aucun ancien motif ou élément supplémentaire */
.pagehead::before,
.pagehead::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Aucun slash ou barre orange devant le titre */
.pagehead h1::before,
.pagehead h1::after {
  content: none !important;
  display: none !important;
}

/* Texte au-dessus du fond */
.pagehead .wrap,
.pagehead h1,
.pagehead p {
  position: relative !important;
  z-index: 2 !important;
}

/* L'accueil ne reçoit pas ce style */
.gems-home-hero,
.gems-home-hero::before,
.gems-home-hero::after {
  background-image: none !important;
}

/* Mobile */
@media (max-width: 800px) {
  .pagehead {
    background-size: 72px 83px, cover !important;
    background-position: right center, center !important;
  }
}