/** Shopify CDN: Minification failed

Line 192:0 Unexpected "{"
Line 192:1 Expected identifier but found "%"
Line 192:54 Expected identifier but found "%"

**/
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Rajdhani:wght@500;600;700&family=Roboto+Condensed:wght@400;700&display=swap');

:root{
  --bg-dark:#0b0b0b;
  --bg-card:#151515;
  --accent-yellow:#ffd700;
  --accent-orange:#ff9900;
  --accent-red:#e63946;
  --text-grey:#a0a0a0;
  --border-color:#333;
}

.svc-body{
  background-color:var(--bg-dark);
  color:#fff;
  font-family:'Rajdhani',sans-serif;
  min-height:100vh;
  background-image:repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,255,255,0.03) 1px, transparent 2px);
  background-size:100% 4px;
}

/* layout */
.svc-page{
  max-width:1400px;
  margin:40px auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:450px 1fr;
  gap:60px;
  align-items:start;
}

/* left card */
.svc-operator-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:10px;
  position:relative;
}

.svc-operator-card::before{
  content:attr(data-operatorid);
  position:absolute;
  top:-25px; left:0;
  color:var(--accent-yellow);
  font-size:14px;
  font-weight:700;
  letter-spacing:2px;
}

.svc-photo-frame{
  position:relative;
  border:2px solid #444;
  overflow:hidden;
}

.svc-artist-photo{
  width:100%;
  height:auto;
  display:block;
  filter:grayscale(20%) contrast(110%);
}

.svc-faction-badge{
  margin-top:15px;
  background:var(--accent-orange);
  color:#000;
  text-align:center;
  font-family:'Anton',sans-serif;
  font-size:24px;
  padding:10px;
  text-transform:uppercase;
  letter-spacing:2px;
  transform:skewX(-5deg);
}

.svc-stats{
  margin-top:15px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.svc-stat{
  background:#222;
  padding:10px;
  border-left:2px solid var(--accent-yellow);
}
.svc-stat-label{
  font-size:10px;
  color:var(--text-grey);
  text-transform:uppercase;
  display:block;
  margin-bottom:2px;
}
.svc-stat-value{
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
}

/* right content */
.svc-brief{
  padding-top:20px;
}

.svc-title{
  font-family:'Anton',sans-serif;
  font-size:64px;
  line-height:.9;
  text-transform:uppercase;
  margin-bottom:10px;
}

.svc-subtitle{
  font-size:20px;
  color:var(--accent-yellow);
  text-transform:uppercase;
  letter-spacing:2px;
  margin-bottom:40px;
  display:block;
  border-bottom:1px solid #333;
  padding-bottom:20px;
}

.svc-block{
  margin-bottom:40px;
  position:relative;
  padding-left:20px;
  border-left:1px solid #444;
}

.svc-block h3{
  font-family:'Anton',sans-serif;
  font-size:24px;
  text-transform:uppercase;
  margin-bottom:15px;
  color:#ddd;
  display:flex;
  align-items:center;
  gap:10px;
}

.svc-marker{
  color:var(--accent-orange);
  font-size:14px;
}

.svc-block p{
  color:var(--text-grey);
  font-size:16px;
  line-height:1.6;
  margin-bottom:15px;
}

.svc-highlight{
  color:#fff;
  font-weight:700;
}

.svc-bottom{
  margin-top:50px;
  border-top:1px solid #333;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  color:#444;
  font-size:12px;
  font-family:monospace;
  gap:12px;
  flex-wrap:wrap;
}

/* responsive */
@media (max-width: 1100px){
  .svc-page{
    grid-template-columns:1fr;
    gap:30px;
  }
  .svc-title{ font-size:52px; }
}
@media (max-width: 560px){
  .svc-title{ font-size:44px; }
}
{% if request.path contains '/pages/contact' %}active{% endif %}

/* ===== Dropdown custom (langue) ===== */
.svhaine-dd{ position:relative; display:inline-block; }

.svhaine-dd__btn{
  background: rgba(0,0,0,0.25);
  border: 1px solid #333;
  color: #fff;
  padding: 6px 10px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1;
}
.svhaine-dd__btn:hover{ border-color: var(--accent-yellow); }

.svhaine-dd__chev{ opacity:.9; font-size:12px; margin-left:2px; }

.svhaine-dd__menu{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 110px;
  background: #111;
  border: 1px solid #333;
  display:none;
  flex-direction:column;
  z-index:1000;
  padding:6px;
}

/* OUVERTURE AU CLIC (plus stable que :hover) */
.svhaine-dd.is-open .svhaine-dd__menu{ display:flex; }

.svhaine-dd__item{ margin:0; }
.svhaine-dd__item button{
  width:100%;
  background:transparent;
  border:0;
  color:#ccc;
  padding:8px 10px;
  text-align:left;
  cursor:pointer;
  font-weight:700;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px;
}
.svhaine-dd__item button:hover{
  background:#1a1a1a;
  color: var(--accent-yellow);
}

/* Drapeaux (emoji-free) */
/* Flag container (contour propre, sans artefacts) */
.svhaine-flag{
  width:18px;
  height:12px;
  display:inline-block;
  border-radius:2px;

  border:0 !important;                 /* IMPORTANT */
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;

  /* contour externe + léger contour interne */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(0,0,0,0.55);
}

/* FR */
.svhaine-flag--fr{
  background-image: linear-gradient(90deg,
    #0055A4 0 33.333%,
    #F7F7F7 33.333% 66.666%,
    #EF4135 66.666% 100%
  );
}

/* US (simple, propre) */
.svhaine-flag--us{
  background-image:
    linear-gradient(#3C3B6E, #3C3B6E),
    repeating-linear-gradient(180deg,
      #B22234 0 10%,
      #FFFFFF 10% 20%
    );
  background-size: 45% 55%, 100% 100%;
  background-position: left top, left top;
  background-repeat: no-repeat, no-repeat;
}
