/* Fichier CSS principal pour Wired Wolf */

:root{
  --bg:#0b0b0b;
  --bg-soft:#121212;
  --gold:#c7a253;
  --gold-2:#b1893f;
  --text:#d9d9d9;
  --text-dim:#aaaaaa;
  --maxw:1120px;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial;
  line-height:1.45;
  background-image:
    radial-gradient(1200px 600px at 50% -20%, rgba(199,162,83,0.06), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 2px, rgba(0,0,0,0.02) 2px 4px);
  background-attachment: fixed;
}

h1,h2,h3{font-family: "Cinzel", serif}
.alt-deco-1{font-family:"Cormorant Garamond",serif}
.alt-deco-2{font-family:"Spectral SC",serif}

/* Bannière */
.banner{
  background: linear-gradient(180deg, #101010 0%, #0b0b0b 100%);
  border-bottom:1px solid rgba(199,162,83,.25);
}

.banner-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:22px 12px;  /* aligné avec nav-inner */
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
}

.brand{display:flex; align-items:center; gap:14px}
.brand-link{

  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
}
.brand img{
  width:52px; height:52px; border-radius:50%; outline:1px solid rgba(199,162,83,.25);
  box-shadow:inset 0 0 0 1px rgba(199,162,83,.15), 0 0 28px rgba(199,162,83,.06);
}
.brand h1{
  margin:0; font-size: clamp(20px, 2.5vw, 30px); letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold);
}
.tagline{margin:2px 0 0; font-size:13px; color:var(--text-dim); letter-spacing:.04em}

/* NAV */
.nav{
  position:sticky; top:0; z-index:80;
  background:#0d0d0d;
  border-bottom:1px solid rgba(199,162,83,.2);
  transition:.2s;
}
.nav.scrolled{box-shadow:0 10px 18px rgba(0,0,0,.35)}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 12px;
  display:flex; align-items:center; gap:8px;
}
.menu{display:flex; gap:6px; margin:0; padding:0; list-style:none}
.menu a{
  display:block; padding:14px 18px; text-decoration:none; color:var(--text);
  font-size:15px; letter-spacing:.02em; border-radius:10px; position:relative;
}
.menu a:hover{background:rgba(199,162,83,.08)}
.menu a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0); transition:.25s ease;
}
.menu a:hover::after{transform:scaleX(1)}
.menu .active{color:var(--gold)}

.burger{
  margin-left:auto; display:none; background:transparent;
  border:1px solid rgba(199,162,83,.35); color:var(--gold);
  padding:8px 12px; border-radius:10px; cursor:pointer;
}

@media (max-width:960px){
  .menu{display:none}
  .burger{display:block}
  .menu.open{display:flex; flex-direction:column; width:100%; padding:8px 0}
  .menu.open a{padding:12px 14px}
}

/* Contenu */
.main{position:relative; isolation:isolate}
.container{
  max-width:var(--maxw); margin:0 auto;
  padding:48px 20px 100px; position:relative;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
  border:1px solid rgba(199,162,83,.18); border-radius:var(--radius);
  padding:28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(0.6px);
}
.card h2{
  margin:0 0 10px; color:var(--gold);
  letter-spacing:.04em; text-transform:uppercase;
}
.lead{color:#cfcfcf}

/* Watermark (fixé à l'écran, suit le scroll) */
.watermark{
  position:fixed;
  right:-12vw;
  bottom:-8vh;

  width:min(70vw,880px);
  aspect-ratio:1/1;
  opacity:.07;

  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;

  filter:contrast(105%) saturate(120%);
  pointer-events:none;

  z-index:0; /* plus de -1 sinon ça peut disparaître */
}
.watermark{background-image:url('../img/wired_wolf_gold.png')}



/* Animations (désactivées par défaut, juste une légère translation) */
/* --- REVEAL AU SCROLL --- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  filter:blur(2px);
  transition:opacity .55s ease, transform .55s ease, filter .55s ease;
  will-change: opacity, transform, filter;
}

.reveal.on{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* Variantes (optionnelles) */
.reveal.r-left{ transform:translateX(-14px); }
.reveal.r-right{ transform:translateX(14px); }
.reveal.r-zoom{ transform:scale(.98); }
.reveal.on.r-left,
.reveal.on.r-right,
.reveal.on.r-zoom{ transform:translate(0,0) scale(1); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; filter:none; transition:none; }
  #intro::before, #intro::after{ display:none; }
  .intro-logo{ animation:none; opacity:1; transform:none; filter:none; }
}

/* --- SECTION CONTACT --- */

.contact-grid{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
  gap:24px;
  align-items:flex-start;
}

.contact-card-title{
  margin-bottom:10px;
}

.contact-info-list{
  list-style:none;
  margin:0;
  padding:0;
  font-size:14px;
}

.contact-info-list li+li{
  margin-top:6px;
}

.contact-pill{
  display:inline-block;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(199,162,83,.45);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
}

/* Formulaire contact */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.contact-row{
  display:flex;
  gap:10px;
}

.contact-row > div{
  flex:1;
}

.contact-label{
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:3px;
}

.contact-input,
.contact-textarea{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(199,162,83,.18);
  background:#080808;
  color:var(--text);
  padding:9px 11px;
  font-size:14px;
}

.contact-textarea{
  min-height:110px;
  resize:vertical;
}

.contact-input:focus,
.contact-textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(199,162,83,.4);
}

.contact-submit{
  margin-top:10px;
  align-self:flex-start;
  background:var(--gold);
  color:#111;
  border:none;
  padding:10px 18px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
}

.contact-submit:hover{
  filter:brightness(1.05);
}

/* Responsif Contact */
@media (max-width:900px){
  .contact-grid{
    grid-template-columns:1fr;
  }
}

/* --- SECTION SERVICES --- */

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
}

.service-kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:4px;
}

.service-title{
  margin:0 0 8px;
  color:var(--gold);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:16px;
}

.service-text{
  font-size:14px;
  color:#cfcfcf;
}

.service-list{
  margin:10px 0 0;
  padding-left:18px;
  font-size:13px;
  color:#d0d0d0;
}

.service-list li+li{
  margin-top:3px;
}

/* --- SECTION A PROPOS --- */

.about-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
  gap:24px;
  align-items:flex-start;
}

.about-highlight{
  font-size:14px;
  color:#cfcfcf;
}

.about-highlight strong{
  color:var(--gold);
}

.about-list{
  margin:10px 0 0;
  padding-left:18px;
  font-size:14px;
  color:#d0d0d0;
}

.about-list li+li{
  margin-top:4px;
}

.about-pill{
  display:inline-block;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(199,162,83,.45);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
}

@media (max-width:900px){
  .about-grid{
    grid-template-columns:1fr;
  }
}

/* --- SECTION REALISATIONS --- */

.realisations-intro{
  max-width:720px;
}

.realisations-grid{
  display:flex;
  flex-direction:column;
  gap:32px;
}

.realisations-grid > .card{
  margin-bottom:0;
}


.real-card{
  position:relative;
  overflow:hidden;
}

.real-tag{
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:4px;
}

.real-title{
  margin:0 0 8px;
  color:var(--gold);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:16px;
}

.real-text{
  font-size:14px;
  color:#cfcfcf;
}

.real-list{
  margin:8px 0 0;
  padding-left:18px;
  font-size:13px;
  color:#d0d0d0;
}

.real-list li+li{
  margin-top:3px;
}

.real-meta{
  margin-top:10px;
  font-size:12px;
  color:var(--text-dim);
}

/* Zone image (placeholder) */
.real-img{
  margin:10px 0 0;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(199,162,83,.15);
  background:#050505;
  min-height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:var(--text-dim);
}

/* --- FOOTER GLOBAL --- */

.site-footer{
  border-top:1px solid rgba(199,162,83,.25);
  background:#050505;
  padding:18px 20px 22px;
  font-size:12px;
  color:var(--text-dim);
  margin-top:40px;
}

.site-footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}

.site-footer-left{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.site-footer-brand{
  font-family:"Cinzel",serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--gold);
}

.site-footer-right{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.site-footer-link{
  color:var(--gold);
  text-decoration:none;
}

.site-footer-link:hover{
  text-decoration:underline;
}

@media (max-width:720px){
  .site-footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* --- SECTION CONFIGURATEUR --- */

.config-layout{
  display:grid;
  grid-template-columns:minmax(260px, 300px) minmax(0, 1fr);
  gap:24px;
  align-items:flex-start;
}

.config-filters-card{
  position:sticky;
  top:90px;
}

.config-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:14px;
}

.config-label{
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:3px;
}

.config-input,
.config-select{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(199,162,83,.18);
  background:#080808;
  color:var(--text);
  padding:8px 10px;
  font-size:14px;
}

.config-input:focus,
.config-select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(199,162,83,.4);
}

.config-row{
  display:flex;
  gap:10px;
}

.config-row > div{
  flex:1;
}

.config-checkbox-group,
.config-radio-group{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
}

.config-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
}

.config-submit{
  margin-top:6px;
  background:var(--gold);
  color:#111;
  border:none;
  padding:10px 16px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
}

.config-submit:hover{
  filter:brightness(1.05);
}

/* Résultats */

.config-results-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  margin-bottom:12px;
}

.config-results-title{
  margin:0;
  color:var(--gold);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:16px;
}

.config-results-meta{
  font-size:12px;
  color:var(--text-dim);
}

.config-build{
  margin-top:6px;
  border-top:1px solid rgba(199,162,83,.25);
  padding-top:10px;
}

.config-build-name{
  font-weight:600;
  margin-bottom:4px;
}

.config-build-price{
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:6px;
}

.config-build-parts{
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
  color:#d0d0d0;
}

.config-build-parts li+li{
  margin-top:2px;
}

.config-build-note{
  margin-top:8px;
  font-size:12px;
  color:var(--text-dim);
}

/* Responsive configurateur */
@media (max-width:900px){
  .config-layout{
    grid-template-columns:1fr;
  }
  .config-filters-card{
    position:static;
  }
}


@media(max-width:720px){
  .card{padding:20px}
}
/* --- SECTION PACKs --- */

.pricing-intro{
  max-width:720px;
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
  margin-top:18px;
}

.pricing-card{
  position:relative;
  height:100%;
}

.pricing-header{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}

.pricing-name{
  font-size:18px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
}

.pricing-price{
  font-size:22px;
  font-weight:700;
}

.pricing-tagline{
  font-size:13px;
  color:var(--text-dim);
}

.pricing-list{
  margin:10px 0 0;
  padding-left:18px;
  color:#cfcfcf;
  font-size:14px;
}

.pricing-list li+li{
  margin-top:4px;
}

/* Carte mise en avant (Premium) */
.pricing-featured{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(199,162,83,.45), 0 16px 40px rgba(0,0,0,.65);
}

.pricing-badge{
  position:absolute;
  top:14px;
  right:18px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:999px;
  background:var(--gold);
  color:#111;
}
/* Intro / Loader */
#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 1;
  transition: opacity 1s ease; /* durée cohérente avec le JS */
}

/* --- GAMING OVERLAY (intro only) --- */
#intro::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  mix-blend-mode: overlay;
}

#intro::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    radial-gradient(circle at 50% 50%, rgba(199,162,83,.25), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode: soft-light;
}


#intro.is-out {
  opacity: 0;
  pointer-events: none;
}

.intro-logo{
  width:min(320px, 60vw);      /* évite le logo géant */
  opacity:0;
  transform: scale(0.92);
  filter:
    drop-shadow(0 0 18px rgba(120, 60, 255, .28))
    drop-shadow(0 0 34px rgba(199,162,83,.18));
  animation: introIn .55s ease forwards;
}


@keyframes introIn{
  to{
    opacity:1;
    transform: scale(1);
  }
}

/* --- MICRO GLITCH (intro logo) --- */
.intro-logo.glitch{
  animation: introIn .55s ease forwards, wwGlitch .35s linear 1;
}

@keyframes wwGlitch{
  0%   { transform: translateX(0) scale(0.98); }
  20%  { transform: translateX(-4px) scale(1.01); }
  40%  { transform: translateX(4px) scale(1.00); }
  60%  { transform: translateX(-3px) scale(1.01); }
  80%  { transform: translateX(3px) scale(1.00); }
  100% { transform: translateX(0) scale(1.00); }
}


.card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover{
  transform: translateY(-2px);
  border-color: rgba(199,162,83,35);
  box-shadow: 0 14px 44px rgba(0,0,0,55);
}
.brand img{
  transition: box-shadow .2s ease, transform .2s ease;
}

.brand:hover img{
  transform: scale(1.03);
  box-shadow: inset 0 0 0 1px rgba(199,162,83,20), 0 0 40px rgba(199,162,83,14);
}

/* --- MATCH CUT --- */
body.intro-running .brand img{ opacity:0; }

body.intro-done .brand img{
  opacity:1;
  transition: opacity .15s ease;
}

/* Flash violet au moment du snap */
#intro .intro-inner{ position:relative; }
#intro .intro-flash{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background: radial-gradient(circle at center,
    rgba(120,60,255,.35),
    rgba(0,0,0,0) 60%
  );
  mix-blend-mode: screen;
}
/* Flash positionné sur la cible (logo header) */
.ww-flash{
  position:fixed;
  left:0; top:0;
  width:220px; height:220px;
  transform: translate(-50%, -50%);
  border-radius:999px;
  pointer-events:none;
  opacity:0;
  background: radial-gradient(circle at center,
    rgba(120,60,255,.55),
    rgba(120,60,255,.18) 35%,
    rgba(0,0,0,0) 70%
  );
  mix-blend-mode: screen;
  z-index: 10000; /* au-dessus de tout */
}
.brand-link{
  text-decoration:none;
  color:inherit;
  display:flex;             /* au cas où .brand est un flex */
  align-items:center;
  gap:12px;                 /* ajuste si on avait déjà un gap */
  cursor:pointer;
}

.brand-link:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:6px;
  border-radius:10px;
}

.layout-3{
  display:grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  gap:18px;
  max-width: calc(var(--maxw) + 560px + 36px);
  margin: 0 auto;
  padding: 18px 12px;
}

.side{
  position: sticky;
  top: 12px;
  align-self:start;
}

.rss-box, .contact-box{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(199,162,83,.18);
  border-radius: 14px;
  padding: 12px;
}

.rss-item{
  padding: 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rss-item:last-child{ border-bottom:0; }

.rss-item a{ color: inherit; text-decoration:none; }
.rss-item a:hover{ text-decoration: underline; }

.social{ display:flex; flex-direction:column; gap:8px; }

/* Responsive: on vire les sidebars sur mobile */
@media (max-width: 1100px){
  .layout-3{ grid-template-columns: 1fr; }
  .side{ position: static; }
}

.rss-section h4{ margin: 6px 0 10px; font-size: 13px; opacity:.95; }
.rss-section{ margin-bottom: 14px; }

@media (max-width: 900px) {
  .side {
    display: none;
  }
}

/* --- TOP TICKER (bandeau défilant) --- */
.top-ticker{
  position: sticky;
  top: 0;
  z-index: 120; /* au-dessus de la nav */
  background: rgba(0,0,0,.72);
  border-bottom: 1px solid rgba(199,162,83,.22);
  backdrop-filter: blur(4px);
  overflow: hidden;
}

.top-ticker__inner{
  overflow: hidden;

}

.top-ticker__label{
  font-family: "Cinzel", serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  font-size: 18px;
  padding: 2px 8px;
  border: 1px solid rgba(199,162,83,.35);
  border-radius: 999px;
}

.top-ticker__text{
  font-size: 18px;
  color: var(--text);
  letter-spacing: .02em;
}

.top-ticker__sep{
  color: rgba(199, 162, 83, 0.966);
}

.top-ticker__track{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: wwTicker 30s linear infinite; /* vitesse ici */
}

.top-ticker__group{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.top-ticker__spacer{
  width: 120px; /* ESPACE ENTRE FIN ET REPRISE */
  flex: 0 0 auto;
}

/* Défilement */
@keyframes wwTicker{
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* Respect accessibilité */
@media (prefers-reduced-motion: reduce){
  .top-ticker__track{ animation: none; transform: none; }
}

/* --- INDEX : BLOCS IMAGE + TEXTE --- */
.feature-stack{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.feature{
  display:grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap:19px;
  align-items:start;

}

.feature-media{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(199,162,83,.15);
  background:#050505;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio: 4 / 3;      /* ou 16/10 si on préfères plus “wide” */
  height: auto;
  min-height: 180px;
  max-height: 280px;        /* optionnel : éviter les cartes gigantesques */
  align-self: start;
  grid-row: 1;
}

.feature-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.feature-kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:4px;
  margin-top:0;
}

.feature-title{
  margin:0 0 6px;
  color:var(--gold);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:16px;
  margin-top:0;
}

.feature-meta{
  font-size:12px;
  color:var(--text-dim);
  margin:0 0 10px;
}

.feature-text{
  font-size:14px;
  color:#cfcfcf;
  margin:0;
}

.feature-cta{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  display:inline-block;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(199,162,83,.35);
  color:var(--text);
  font-size:13px;
}

.btn.primary{
  background:var(--gold);
  color:#111;
  border-color:var(--gold);
  font-weight:600;
}

.btn:hover{ filter:brightness(1.06); }

.feature.flip{
  grid-template-columns: minmax(0, 1fr) 260px;
}
.feature.flip .feature-media{ grid-column:2; }
.feature.flip .feature-body{ grid-column:1; }

@media (max-width:900px){
  .feature, .feature.flip{
    grid-template-columns: 1fr;
  }
  .feature.flip .feature-media,
  .feature.flip .feature-body{
    grid-column:auto;
    
    align-self: start;
  }
  .feature-media{ min-height:160px; }
}

/* =========================
   TITRES FORFAITS (OLD GOLD)
   ========================= */

.main .container h2,
.main .container h3{
  color: var(--gold);
}

/* Galerie réalisations */
.gallery{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}

.gallery img{
  width:100%;
  height:100%;
  max-height:220px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(199,162,83,.18);
  background:#050505;
}

.feature-subtitle{
  margin:14px 0 6px;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
}

.checklist{
  margin:6px 0 0;
  padding-left:18px;
  font-size:13px;
  color:#d0d0d0;
}

.checklist li+li{
  margin-top:4px;
}


/* Remerciements : 2 colonnes + bannières verticales */
.thanks-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}

.thanks-col{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.thanks-col-head{
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
}

/* Bannière verticale de remerciement */
.thanks-banner{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 8px 0 18px;
}

.thanks-banner img{
  width: 100%;
  max-width: 260px;
  height: 65vh;
  max-height: 680px;
  object-fit: contain;

  opacity: 0.45;
  filter: grayscale(10%) contrast(1.05);

  pointer-events: none;
}


.thanks-cards{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

@media (max-width: 900px){
  .thanks-layout{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .thanks-banners{ grid-template-columns: 1fr; }
  .thanks-banners img{ height: 240px; }
}

/* Remerciements : loups collés aux bords de l’écran */
.thanks-shell{
  position: relative;
}

/* Le contenu central garde sa place */
.thanks-shell > div{
  grid-column: 2;
}

/* Sidebars deviennent des “décors” fixés */
.thanks-shell .side{
  position: fixed;
  top: 120px;              /* ajuste si besoin */
  height: calc(100vh - 140px);
  width: 220px;            /* largeur de marge visuelle */
  z-index: 1;
  pointer-events: none;
  display:flex;
  align-items:center;
}

.thanks-shell .side-left{
  left: 0;
  justify-content: flex-start;
  padding-left: 12px;
}

.thanks-shell .side-right{
  right: 0;
  justify-content: flex-end;
  padding-right: 12px;
}

.thanks-shell .thanks-banner{
  width: 100%;
}

.thanks-shell .thanks-banner img{
  width: 100%;
  max-width: 180px;
  height: 100%;
  object-fit: contain;
  opacity: 0.25;
  filter: grayscale(15%) contrast(1.05);
}

/* IMPORTANT : réserver de la place pour ne pas que le texte passe dessous */
.thanks-shell{
  grid-template-columns: 220px minmax(0, var(--maxw)) 220px;
}

/* Mobile : on cache les loups */
@media (max-width: 1100px){
  .thanks-shell{
    grid-template-columns: 1fr;
  }
  .thanks-shell .side{
    display:none;
  }
}

.site-version{
  display:inline-block;
  margin-top:4px;
  padding:3px 8px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid rgba(199,162,83,.35);
  border-radius:999px;
  opacity:.8;
}