/* =============================================================
   Abnegation Studio — styles.css (réorganisé)
   Logique d'ordre :
   1) Variables & resets
   2) Éléments de base (tags)
   3) Utilitaires
   4) Layout & structure
   5) Composants génériques (brand, toc, boutons, etc.)
   6) Sections dans l'ordre du HTML (progress, scenes 1→5)
   7) Footer
   8) Accessibilité
   9) Effets (reveal)
  10) Bouton Uiverse
  11) Vidéo (poster overlay)
  12) Media queries (groupées à la fin si possible)
   ============================================================= */

/* -------------------------------------------------------------
   1) Variables & resets
   ------------------------------------------------------------- */
:root{
  --p1:#f8ca2e;
  --p2:#1f1f1f;
  --bg:#0b0b0b; --ink:#eaeaea; --muted:#bfbfbf; --line:#262626;
  --max:1200px; --gap:24px;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}

/* -------------------------------------------------------------
   2) Éléments de base
   ------------------------------------------------------------- */
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Insaniburger Futura Std","Insaniburger FUTURA STD",Arial,sans-serif;line-height:1.6}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Support pratique pour un éventuel usage de classe .data-target */
.data-target {cursor: pointer;}

/* -------------------------------------------------------------
   3) Utilitaires
   ------------------------------------------------------------- */
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.bg-ink-0{background:#000}
.bg-ink-10{background:#0f0f0f}
.bg-ink-12{background:#0e0e0e}

/* -------------------------------------------------------------
   4) Layout & structure (grille principale, rail, main)
   ------------------------------------------------------------- */
.page{display:grid;grid-template-columns:300px 1fr;min-height:100svh}
.rail{position:sticky;top:0;height:100svh;border-right:1px solid rgb(95, 94, 94);padding:18px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,transparent,rgba(255,255,255,.02))}
main{scroll-snap-type:y proximity}

/* -------------------------------------------------------------
   5) Composants génériques (brand, toc, boutons, shortcuts, meta)
   ------------------------------------------------------------- */
.brand{display:flex;align-items:center;gap:10px}
.logo{width: 0;}
.brand h1{margin:0;font-size:18px;text-transform:uppercase;letter-spacing:.12em}

.meta{color:var(--muted);font-size:13px}

.toc{display:grid;gap:6px;margin-top:10px}
.toc a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-left:3px solid transparent;border-radius:8px}
.toc a .dot{width:8px;height:8px;border-radius:999px;background:#444}
.toc a.active{background:rgba(255,255,255,.04);border-left-color:var(--p1)}
.toc a.active .dot{background:var(--p1)}

.cta{display:grid;gap:10px;margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:11px 14px;border-radius:999px;font-weight:900;border:1px solid var(--line)}
.btn.primary{background:var(--p1);color:#111;border:0}

.shortcuts{color:var(--muted);font-size:12px}

/* -------------------------------------------------------------
   6) Sections dans l'ordre du HTML
   ------------------------------------------------------------- */
/* 6.1 — Barre de progression globale (tout en haut) */
#progress{position:fixed;left:0;top:0;height:6px;background:var(--p1);width:0;z-index:80}

/* 6.2 — Scènes (structure commune) */
.scene{position:relative;min-height:100svh;display:grid;place-items:center;scroll-snap-align:center;border-bottom:1px solid var(--line);overflow:hidden}
.inner{max-width:var(--max);width:100%;padding: 0px 20px;position:relative;z-index:1;}
.eyebrow{color:var(--p1);text-transform:uppercase;letter-spacing:.18em;font-weight:900;font-size:12px}
.title{font-size:clamp(30px,5.2vw,72px);line-height:1.04;margin:.2em 0 .1em;font-weight:1000}
.lead{color:var(--muted);max-width:70ch}

/* 6.3 — SCÈNE 1 : HERO + curseur vidéo */
.scene.hero{position:relative;background:
  linear-gradient(120deg, rgba(248,202,46,.08), transparent 45%),
  radial-gradient(1200px 600px at 80% -10%, rgba(248,202,46,.10), transparent 60%),
  var(--bg)}
.scene.hero::before{
  content:"";
  position:absolute;
  inset:auto -10% 0 -10%;
  height:55%;
  background:linear-gradient(to top right, #1111110a 0%, #0c0c0c 60%, transparent);
  transform:skewY(-8deg);
  border-top:1px solid var(--line);
  z-index:-1;
  pointer-events:none;
}
/* Variante plus douce pour la scène 4 */
#scene-4.hero{background:linear-gradient(120deg, rgba(248,202,46,.06), transparent 45%), var(--bg)}

/* Scrubber showreel (SCÈNE 1) */
.scrub{display:grid;grid-template-columns:2fr 1.3fr;gap:var(--gap);align-items:center}
.video-wrap{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#000}
.video-wrap video{width:100%;height:100%;object-fit:cover}
.scrubber{display:flex;align-items:center;gap:10px;margin-top:10px}
.scrubber input[type="range"] { flex:1; min-width:0; }
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.chip{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px dashed var(--line);border-radius:10px;color:#d6d6d6}

/* Support aspect-ratio et stabilité scrollbars pour la vidéo */
.video-wrap{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#000; }
.video-wrap > video, .video-wrap > .video-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
html{ scrollbar-gutter: stable; }
@supports not (aspect-ratio: 1){
  .video-wrap::before{ content:""; display:block; padding-top:56.25%; } /* 16/9 */
}

/* 6.4 — SCÈNE 3 : PORTFOLIO en bandes (après Services) */
.bands{display:grid;gap:10px;margin-top:16px}
.band{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:center;background:linear-gradient(90deg, rgba(255,255,255,.03), transparent);padding:10px;border:1px solid var(--line);border-radius:12px}
.band img{width:100%;height:140px;object-fit:cover;border-radius:10px}

/* 6.5 — SCÈNE 4 : OFFRES façon slide deck */
.deck{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin-top:60px}
.card{grid-column:span 4;background:linear-gradient(180deg,#131313,#0f0f0f);border:1px solid var(--line);border-radius:16px;padding:18px}
.price{font-size:34px;font-weight:1000;color:var(--p1);margin:.2em 0}
.card ul{color:#cfcfcf;padding-left:18px}
.card.featured{border-color:var(--p1);box-shadow:0 0 0 2px rgba(248,202,46,.25)}
.card .btn{cursor: pointer;}

/* 6.6 — SCÈNE 5 : CONTACT (poster minimal + formulaire) */
.poster{display:grid;place-items:center;text-align:center;padding:60px 0}
.poster h3{font-size:clamp(24px,3.6vw,40px);margin:0 0 6px}
.poster .cta{justify-items:center}

/* Formulaire */
.form{max-width:820px;margin:22px auto 0;text-align:left;background:linear-gradient(180deg,#111,#0d0d0d);border:1px solid var(--line);border-radius:14px;padding:16px}
.form .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;grid-column:span 6}
.form label.full{grid-column:span 12}
.form span{font-size:12px;color:var(--muted);letter-spacing:.02em}
.form input,.form select,.form textarea{
  width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);
  background:#0c0c0c;color:#fff;outline:none
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:rgba(248,202,46,.6);box-shadow:0 0 0 3px rgba(248,202,46,.12)}
.form .actions{display:flex;gap:10px;justify-content:center;margin-top:10px;}

.form select {
  appearance:none;       /* on cache la flèche native */
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:32px;    /* espace pour notre flèche custom */
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center; /* positionne la flèche où tu veux */
  background-size: 18px;
}

.actions .btn {background-color: #f8ca2e;cursor: pointer;}

/* Iconographie localisation dans .meta (spécifique composant) */
.icon-location{
  width:14px;
  height:14px;
  margin-right:6px;  /* si à gauche */
  vertical-align:middle;
  opacity:.8;        /* léger fondu, tu peux enlever */
}

/* Redéfinition .meta quand utilisée comme conteneur d'icône + texte */
.meta {display: inline-flex;align-items: center;gap: 6px;}
.meta img.icon-location {width: 30px;height: 30px;}

/* 7) Footer */
footer{padding:26px 0 40px;border-top:1px solid var(--line);color:var(--muted);text-align:center}

/* -------------------------------------------------------------
   8) Accessibilité / confort
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* -------------------------------------------------------------
   9) Effets — Reveal on scroll
   ------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(30px) scale(.95);transition:transform .55s cubic-bezier(.25,1,.5,1), opacity .55s ease-out;}
[data-reveal].is-in{opacity:1;transform:translateY(0) scale(1);}
@media (prefers-reduced-motion: reduce){[data-reveal]{ transition:none !important; transform:none !important; opacity:1 !important; }}

/* -------------------------------------------------------------
   10) Bouton Uiverse "Delete"
   ------------------------------------------------------------- */
.button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);
  cursor: pointer;
  transition-duration: .3s;
  overflow: hidden;
  position: relative;
}

.svgIcon {
  width: 12px;
  transition-duration: .3s;
}
.svgIcon path { fill: white; }

.button:hover {
  width: 140px;
  border-radius: 50px;
  background-color: rgb(255, 69, 69);
}
.button:hover .svgIcon {
  width: 50px;
  transform: translateY(60%);
}
.button::before {
  position: absolute;
  top: -20px;
  content: "Supprimer"; /* traduit */
  color: white;
  font-size: 2px;
  transition-duration: .3s;
}
.button:hover::before {
  font-size: 13px;
  opacity: 1;
  transform: translateY(30px);
}

/* -------------------------------------------------------------
   11) Vidéo — poster overlay pour la hero
   ------------------------------------------------------------- */
.video-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.video-wrap.ready .video-poster{
  opacity:0; visibility:hidden; transition:opacity .3s ease;
}

/* -------------------------------------------------------------
   12) Media queries (groupées)
   ------------------------------------------------------------- */
/* Layout responsive principal */
@media(max-width:980px){
  .page{grid-template-columns:1fr}
  .shortcuts{display: none;}
  .cta{margin-top: 40px;}
  .scrub{grid-template-columns:1fr}
  .kpis {margin-bottom: 20px;}
  .rail {border-right: none;}
  .deck {margin-top: 20px;}
  .deck.mt-18{margin-bottom: 20px;}
  #scene-4 .deck{margin-bottom: 20px;}
  .form .actions{margin-top: 0px;}
}

/* Bandes portfolio */
@media(max-width:700px){
  .band{grid-template-columns:1fr}
  .band img{height:170px}
  .bands{margin-bottom: 20px;}
}

/* Cartes (offres) */
@media(max-width:980px){
  .card{grid-column:span 12}
}

/* Formulaire */
@media(max-width:820px){
  .form label{grid-column:span 12}
}
@media(max-width:650px){
  .form{border-radius: 0;}
}

/* Footer */
@media (max-width:980px){
  footer {font-size: 13px;}
}