/* ============================================================
   TATRIBU — Palette terre / ocre / forêt (portage)
============================================================ */
:root{
  --bg:#1f1912;
  --bg-warm:#2a2118;
  --bg-deep:#15110b;
  --paper:#f1e8d7;
  --paper-warm:#e6dac3;
  --paper-dim:#c9b893;

  --ink: #f1e8d7;
  --ink-dim: rgba(241,232,215,0.7);
  --ink-mute: rgba(241,232,215,0.45);

  --ember:#e8631a;
  --ember-soft:#f08a4f;
  --ember-deep:#b84916;
  --ochre:#d99b4b;
  --forest:#556b3d;
  --forest-light:#7a9460;
  --line: rgba(241,232,215,0.12);
  --line-2: rgba(241,232,215,0.22);

  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Geist', -apple-system, 'Helvetica Neue', sans-serif;

  --shadow: 0 18px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Grain doux + lueur (version légère) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
body::after{
  content:"";
  position:fixed;
  bottom:-40vh; left:50%;
  transform:translateX(-50%);
  width:120vw; height:100vh;
  background: radial-gradient(ellipse at center, rgba(232,99,26,0.12) 0%, transparent 60%);
  pointer-events:none;
  z-index:0;
}

a{color:inherit;text-decoration:none}

.container{width:min(1100px, calc(100% - 48px)); margin:0 auto; position:relative; z-index:1}

.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  background: rgba(31,25,18,0.55);
  border-bottom: 1px solid var(--line);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.02em;
}
.nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-dim)}
.nav a:hover{color:var(--paper)}

/* Header responsive */
.nav-dd{display:flex; align-items:center}
.nav-toggle{display:none}
.nav-toggle{cursor:pointer; -webkit-tap-highlight-color: transparent}
.nav-toggle::-webkit-details-marker{display:none}
.nav-toggle::marker{content:""}
.nav-toggle:focus{outline:none}
.nav-toggle:focus-visible{outline:2px solid rgba(232,99,26,0.45); outline-offset:3px; border-radius:12px}
.nav-toggle-bars{
  width:18px;height:12px;display:block;position:relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after,
.nav-toggle-bars{
  background: transparent;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; border-radius:2px;
  background: rgba(241,232,215,0.75);
}
.nav-toggle-bars::before{top:0}
.nav-toggle-bars::after{bottom:0}
.nav-toggle{
  width:42px;height:38px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(241,232,215,0.04);
  align-items:center;justify-content:center;
  color: var(--paper);
}

@media (max-width: 760px){
  .topbar-inner{gap:10px}
  .nav-dd{display:block; width:100%}
  .nav-toggle{display:flex}
  .nav{
    display:none;
    width:100%;
    padding:10px;
    border:1px solid var(--line);
    border-radius:16px;
    background: rgba(31,25,18,0.65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .nav-dd[open] .nav{display:flex}
  .nav{flex-direction:column; align-items:stretch; gap:8px}
  .nav a{
    padding:10px 12px;
    border-radius:12px;
    background: rgba(241,232,215,0.03);
    border:1px solid var(--line);
    color: var(--paper);
  }
  .nav a.btn{
    background: var(--ember);
    border-color: rgba(232,99,26,0.55);
    color: var(--bg);
  }
  .nav a.btn-link{
    background: rgba(241,232,215,0.03);
    color: var(--paper);
  }
}

.btn,.btn-link{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:999px;border:1px solid var(--line-2);
}
.btn{
  background: var(--ember);
  border-color: rgba(232,99,26,0.55);
  color: var(--bg);
  font-weight: 700;
  box-shadow: 0 6px 24px rgba(232,99,26,0.20);
}
.btn:hover{background: var(--paper); color: var(--bg)}
.btn-link{background:transparent;color:var(--paper)}
.btn-link:hover{background: rgba(241,232,215,0.08)}

main.container{padding:24px 0 56px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr 1fr}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

.card{
  background: rgba(241,232,215,0.04);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(241,232,215,0.06);
  padding: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.h1{font-family:var(--serif);font-size:34px;letter-spacing:-.03em;margin:0 0 12px;font-weight:300;color:var(--paper)}
.h2{font-family:var(--serif);font-size:22px;letter-spacing:-.02em;margin:0 0 10px;font-weight:400;color:var(--paper)}
.muted{color:var(--ink-dim)}
.kpi{display:flex;gap:12px;flex-wrap:wrap}
.pill{
  display:inline-flex;gap:8px;align-items:center;
  padding:6px 10px;border:1px solid var(--line);
  border-radius:999px;color:var(--ink-dim);
  font-size:12px;background: rgba(241,232,215,0.03);
}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
label{display:block;font-size:13px;color:var(--ink-mute);margin:0 0 6px}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(31,25,18,0.55);
  color: var(--paper);
  outline:none;
}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color: rgba(232,99,26,0.7); box-shadow:0 0 0 4px rgba(232,99,26,0.12)}
.alert{padding:12px 14px;border-radius:14px;border:1px solid var(--line);margin:0 0 16px;background: rgba(241,232,215,0.03)}
.alert-success{border-color: rgba(122,148,96,.55); background: rgba(122,148,96,.10)}
.alert-warning{border-color: rgba(217,155,75,.55); background: rgba(217,155,75,.10)}
.alert-danger{border-color: rgba(232,99,26,.55); background: rgba(232,99,26,.10)}
.alert-info{border-color: rgba(232,99,26,.35); background: rgba(232,99,26,.07)}
.list{display:flex;flex-direction:column;gap:10px}
.item{padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(241,232,215,0.03)}
.item:hover{border-color: rgba(232,99,26,0.35)}
.item-title{font-weight:700;letter-spacing:-.01em;color:var(--paper)}
.footer{border-top:1px solid var(--line);padding:22px 0;background:rgba(21,17,11,.65)}
.right{margin-left:auto}
.small{font-size:12px}
.danger{color:var(--ember-soft)}
.ok{color:var(--forest-light)}

/* Marketplace / SaaS sections */
.hero{padding:28px 0 8px}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr}}
.hero-copy .pill{display:inline-flex;margin-bottom:12px}
.hero-title{
  font-family:var(--serif);
  font-weight:300;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height:1.05;
  letter-spacing:-.035em;
  margin:0 0 12px;
  color:var(--paper);
}
.hero-title em{font-style:italic;color:var(--ember)}
.hero-sub{color:var(--ink-dim);max-width:60ch;margin:0}
.hero-card{
  align-self:stretch;
  justify-self:end;
  width: min(520px, 100%);
}
@media (max-width:900px){
  .hero-card{justify-self:stretch; width:100%;}
}
.search{display:grid;gap:12px}
.search-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.search-row{grid-template-columns:1fr}}
.search-field label{font-size:12px;letter-spacing:.08em;text-transform:uppercase}

.search-details{border:1px solid var(--line); border-radius:16px; background: rgba(241,232,215,0.03); overflow:hidden}
.search-details[open]{background: rgba(241,232,215,0.04); border-color: rgba(232,99,26,0.25)}
.search-summary{
  list-style:none;
  cursor:pointer;
  padding:14px 14px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  color: var(--paper);
}
.search-summary-left{display:flex;align-items:center;gap:12px}
.search-summary-title{display:block;font-weight:650;letter-spacing:-.01em}
.search-summary::-webkit-details-marker{display:none}
.search-summary-hint{display:block;color:var(--ink-dim); font-size:12px; margin-top:2px}
.search-ico{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(241,232,215,0.04);
  border:1px solid var(--line);
  color: var(--paper);
  flex: 0 0 auto;
}
.search-ico svg{width:18px;height:18px;opacity:.9}
.search-summary-right{display:flex;align-items:center;justify-content:center}
.search-summary-right .chev{width:18px;height:18px;color:var(--ink-dim);transition: transform .22s ease, color .22s ease}
.search-details[open] .search-summary-right .chev{transform: rotate(180deg); color: var(--paper)}
.search-body{padding:0 14px 14px}
.search-inline{margin: 10px 0 14px}

.section{padding:18px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
@media (max-width:780px){.section-head{flex-direction:column;align-items:flex-start}}

/* Service band (tatribu) */
.service-band{padding:26px 0}
.service-card-wrap{padding:22px}
.service-inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width:900px){.service-inner{grid-template-columns:1fr}}
.service-copy{
  display:flex;
  flex-direction:column;
}
.service-copy-top{max-width: 62ch}
.service-ctas{margin-top:auto}
.service-copy .h2 em{color:var(--ember); font-style:italic}
.service-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width:560px){.service-grid{grid-template-columns:1fr}}
.service-card{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(241,232,215,0.04);
  box-shadow: inset 0 1px 0 rgba(241,232,215,0.06);
}
.service-k{
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--paper);
  margin-bottom: 6px;
}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

.card-link{transition: transform .25s ease, border-color .25s ease, background .25s ease}
.card-link:hover{transform: translateY(-3px); border-color: rgba(232,99,26,0.35); background: rgba(241,232,215,0.06)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card-title{font-weight:700;letter-spacing:-.01em;color:var(--paper);line-height:1.25}
.card-meta{display:flex;justify-content:space-between;gap:10px;margin-top:10px}

/* Hero marquee (badges animés) */
.marquee-card{overflow:hidden}
.marquee-top{margin-bottom:12px}
.marquee-title{font-family:var(--serif);font-size:24px;font-weight:300;color:var(--paper);letter-spacing:-.02em}
.marquee-sub{color:var(--ink-dim);margin-top:6px}
.marquee-wrap{
  position:relative;
  border:1px solid var(--line);
  background: rgba(31,25,18,.45);
  border-radius: 16px;
  overflow:hidden;
  padding: 10px 0;
  margin-top:10px;
}
.marquee-wrap::before,
.marquee-wrap::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width: 60px;
  pointer-events:none;
  z-index:2;
}
.marquee-wrap::before{left:0;background: linear-gradient(90deg, rgba(31,25,18,.95), transparent);}
.marquee-wrap::after{right:0;background: linear-gradient(270deg, rgba(31,25,18,.95), transparent);}
.marquee-track{
  display:flex;
  gap:10px;
  padding: 0 12px;
  width: max-content;
  animation: marqueeMove 18s linear infinite;
}
.marquee-track.reverse{animation-direction: reverse; animation-duration: 22s;}
@keyframes marqueeMove{to{transform: translateX(-50%)}}
.tag{
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(241,232,215,0.03);
  color: var(--paper);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag.views{border-color: rgba(77,163,255,.45); box-shadow: 0 0 0 3px rgba(77,163,255,.10) inset}
.tag.likes{border-color: rgba(255,77,79,.45); box-shadow: 0 0 0 3px rgba(255,77,79,.10) inset}
.tag.money{border-color: rgba(46,204,113,.45); box-shadow: 0 0 0 3px rgba(46,204,113,.10) inset}

/* Hero tilt card (option 2) */
.tilt-card{
  position:relative;
  overflow:hidden;
  min-height: 280px;
  transform-style: preserve-3d;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
  /* Toujours en état "hover" (effet premium permanent) */
  transform: perspective(900px) rotateX(4deg) rotateY(-6deg) translateY(-2px);
  border-color: rgba(232,99,26,0.35);
  background: rgba(241,232,215,0.06);
}
.tilt-card:hover{transform: perspective(900px) rotateX(4deg) rotateY(-6deg) translateY(-2px);}
.tilt-glow{
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(232,99,26,.22), transparent 55%),
    radial-gradient(circle at 70% 50%, rgba(217,155,75,.18), transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(122,148,96,.14), transparent 60%);
  filter: blur(8px);
  opacity:.9;
  animation: tiltGlow 10s ease-in-out infinite;
}
@keyframes tiltGlow{
  0%,100%{transform: translate(0,0) scale(1.02);}
  50%{transform: translate(2%, -2%) scale(1.06);}
}
.tilt-shine{
  position:absolute; inset:-40%;
  background: linear-gradient(120deg, transparent 35%, rgba(241,232,215,.14) 50%, transparent 65%);
  transform: translateX(-30%) rotate(8deg);
  animation: shineMove 6.5s ease-in-out infinite;
  opacity:.55;
}
@keyframes shineMove{
  0%,100%{transform: translateX(-30%) rotate(8deg);}
  50%{transform: translateX(30%) rotate(8deg);}
}
.tilt-top{position:relative; z-index:2}
.tilt-title{font-family:var(--serif);font-size:26px;font-weight:300;color:var(--paper);letter-spacing:-.02em}
.tilt-sub{color:var(--ink-dim);margin-top:6px}
.tilt-chips{position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(31,25,18,.55);
  color: var(--paper);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  backdrop-filter: blur(14px);
  transition: transform .35s ease;
}
.tilt-card .chip{transform: translateY(-2px)}
.chip.c1{border-color: rgba(232,99,26,.35)}
.chip.c2{border-color: rgba(77,163,255,.35)}
.chip.c3{border-color: rgba(255,77,79,.35)}
.chip.c4{border-color: rgba(46,204,113,.35)}
.tilt-mini{
  position:relative; z-index:2;
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(21,17,11,.45);
  padding: 12px;
}
.mini-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.mini-row:first-child{border-top:none}
.dot{width:8px;height:8px;border-radius:99px}
.dot-ember{background:var(--ember)}
.dot-forest{background:var(--forest-light)}
.dot-ochre{background:var(--ochre)}
.mini-txt{color:var(--paper);font-size:13px}
.mini-pill{
  margin-left:auto;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(241,232,215,0.03);
  color: var(--ink-dim);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* Images / avatars */
.card-media{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(241,232,215,0.03);
  overflow:hidden;
  margin-bottom: 12px;
}
.card-img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}
.card-media-placeholder{display:flex;align-items:center;justify-content:center}
.card-media-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, var(--ember), var(--ochre));
  color: var(--bg);
  font-family: var(--serif);
  font-size: 20px;
}

.item{display:block}
.avatar{
  width:44px;height:44px;border-radius:999px;
  object-fit:cover;
  border:1px solid var(--line);
  float:left;
  margin-right:12px;
  margin-top:2px;
}
.avatar-placeholder{
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, var(--ember), var(--ochre));
  color: var(--bg);
  font-family: var(--serif);
  font-weight: 500;
}

/* Offer visuals (placeholders par type) */
.offer-media{
  width:100%;
  aspect-ratio: 16 / 9;
  min-height: 120px;
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow:hidden;
  background:
    radial-gradient(600px 240px at 20% 20%, rgba(232,99,26,.25), transparent 60%),
    radial-gradient(420px 260px at 80% 30%, rgba(217,155,75,.20), transparent 60%),
    linear-gradient(160deg, rgba(21,17,11,.85), rgba(42,33,24,.85));
  position:relative;
  margin-bottom:12px;
}
.offer-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.02) contrast(1.02);
  transform:scale(1.02);
}
.offer-media .offer-img{
  z-index:0;
}
.offer-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(241,232,215,.08) 0 2px, transparent 2px 10px);
  opacity:.08;
}
.offer-media::after{z-index:1}
.offer-media-label{
  position:absolute; left:12px; bottom:12px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(31,25,18,.55);
  border: 1px solid var(--line);
  color: var(--paper);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter: blur(12px);
}
.offer-media-label{z-index:2}
.offer-media-cinema{background:
  radial-gradient(600px 240px at 20% 20%, rgba(232,99,26,.25), transparent 60%),
  radial-gradient(420px 260px at 80% 30%, rgba(85,107,61,.18), transparent 60%),
  linear-gradient(160deg, rgba(21,17,11,.90), rgba(42,33,24,.85));}
.offer-media-television{background:
  radial-gradient(600px 240px at 20% 20%, rgba(217,155,75,.22), transparent 60%),
  radial-gradient(420px 260px at 80% 30%, rgba(232,99,26,.20), transparent 60%),
  linear-gradient(160deg, rgba(21,17,11,.90), rgba(42,33,24,.85));}
.offer-media-enfants{background:
  radial-gradient(600px 240px at 20% 20%, rgba(122,148,96,.22), transparent 60%),
  radial-gradient(420px 260px at 80% 30%, rgba(217,155,75,.18), transparent 60%),
  linear-gradient(160deg, rgba(21,17,11,.90), rgba(42,33,24,.85));}
.offer-media-divers{background:
  radial-gradient(600px 240px at 20% 20%, rgba(232,99,26,.20), transparent 60%),
  radial-gradient(420px 260px at 80% 30%, rgba(217,155,75,.18), transparent 60%),
  linear-gradient(160deg, rgba(21,17,11,.90), rgba(42,33,24,.85));}

.offer-thumb{
  width:100%;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(241,232,215,0.04);
  margin-bottom: 10px;
}
.offer-thumb-cinema{background: linear-gradient(90deg, rgba(232,99,26,.55), rgba(217,155,75,.25));}
.offer-thumb-television{background: linear-gradient(90deg, rgba(217,155,75,.55), rgba(232,99,26,.25));}
.offer-thumb-enfants{background: linear-gradient(90deg, rgba(122,148,96,.55), rgba(217,155,75,.25));}
.offer-thumb-divers{background: linear-gradient(90deg, rgba(232,99,26,.45), rgba(241,232,215,.08));}

/* Offer row layout (list page) */
.offer-row{display:grid;grid-template-columns: 160px 1fr;gap:14px;align-items:start}
@media (max-width:560px){.offer-row{grid-template-columns: 1fr}}
.offer-row-media{
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow:hidden;
  position: relative;
}