:root {
      --bg-deep: #1a120c;
      --bg-soft: #241a13;
      --sand: #e8dfd1;
      --sand-70: rgba(232,223,209,.7);
      --gold: #c7a158;
      --gold-30: rgba(199,161,88,.3);
      --muted: #b7a99a;
      --maxw: 1200px;
      --radius: 14px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --shadow-soft: 0 6px 20px rgba(0,0,0,.25);
      --transition: 300ms cubic-bezier(.22,.61,.36,1);
    }

    /* Scope global page carrière */
    .careers {
      --section-py: clamp(48px, 8vw, 96px);
      background: radial-gradient(80% 60% at 50% 0%, rgba(199,161,88,.08) 0%, transparent 60%) , var(--bg-deep);
      color: var(--sand);
      font-family: Lato, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height: 1.6;
    }
    .careers a { color: var(--sand); text-decoration: none; }
    .careers a:focus-visible,
    .careers button:focus-visible,
    .careers [tabindex="0"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

    /* Header interne (optionnel si header global) */
    .careers .local-header {
      position: sticky; top: 0; z-index: 50;
      background: linear-gradient(0deg, rgba(26,18,12,.6), rgba(26,18,12,.95));
      backdrop-filter: blur(6px);
      border-bottom: 1px solid var(--gold-30);
    }
    .careers .local-header__inner {
      max-width: var(--maxw); margin: 0 auto; padding: 12px 20px;
      display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
    }
    .careers .brand { font-family: "Playfair Display", serif; letter-spacing:.5px; font-weight:700; text-align:center; }
    .careers .brand em { color: var(--gold); font-style: normal; }

    .careers .back-site{
      font-size:.95rem; padding:8px 12px; border-radius:999px;
      background: linear-gradient(180deg, rgba(199,161,88,.10), rgba(199,161,88,.04));
      border:1px solid rgba(199,161,88,.28); color:var(--sand);
      box-shadow: var(--shadow-soft);
      transition: transform var(--transition), border-color var(--transition);
      justify-self: start;
    }
    .careers .back-site:hover{ transform: translateY(-1px); border-color: var(--gold); }

    /* Sticky subnav */
    .careers .subnav { display: flex; gap: 18px; flex-wrap: wrap; align-items:center; justify-self: end; }
    .careers .subnav a {
      font-size: .95rem; padding: 8px 12px; border-radius: 999px;
      border: 1px solid transparent; transition: transform var(--transition), border-color var(--transition), color var(--transition);
      color: var(--muted);
    }
    .careers .subnav a:hover { color: var(--sand); transform: translateY(-1px); border-color: var(--gold-30); }
    .careers .subnav a.is-active { color: var(--sand); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-30); }

    /* Hero */
    .careers .hero {
      position: relative; height: min(86vh, 760px); overflow: clip;
      display: grid; place-items: center; text-align: center;
      background: radial-gradient(60% 50% at 50% 50%, rgba(199,161,88,.08) 0%, rgba(26,18,12,0) 60%) , var(--bg-deep);
      border-bottom: 1px solid rgba(199,161,88,.18);
    }
    .careers .hero__media {
      position: absolute; inset: 0; background-position: 50% 35%; background-size: cover; background-repeat: no-repeat;
      filter: saturate(.9) contrast(1.05) brightness(.9); transform: translateZ(0);
      background-image: url('/assets/hero/hero10.jpg');
    }
    .careers .hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,18,12,.55) 0%, rgba(26,18,12,.72) 50%, rgba(26,18,12,.9) 100%); }
    .careers .hero__content { position: relative; z-index: 1; padding: 0 20px; max-width: 920px; }
    .careers .kicker { display:inline-flex; align-items:center; gap:10px; color: var(--sand-70); font-size: .95rem; letter-spacing:.08em; text-transform: uppercase; }
    .careers .kicker::before, .careers .kicker::after { content:""; display:block; width: 46px; height:1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
    .careers h1 {
      font-family: "Playfair Display", serif; font-weight:700; letter-spacing:.3px;
      font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.1; margin: 14px 0 10px;
      text-shadow: 0 6px 30px rgba(0,0,0,.45);
    }
    .careers .lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--sand); opacity:.95; margin: 0 auto 28px; max-width: 820px; }
    .careers .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

    .careers .btn-gold {
      --padx: 18px;
      display: inline-flex; align-items:center; gap:10px;
      padding: 12px var(--padx); border-radius: 999px;
      background: linear-gradient(180deg, #d7b66d, #b88f43);
      color: #1b140e; font-weight: 700; letter-spacing:.2px;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 6px 18px rgba(199,161,88,.35), inset 0 1px 0 rgba(255,255,255,.25);
      transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
    }
    .careers .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(199,161,88,.45); filter: brightness(1.02); }
    .careers .btn-ghost {
      padding: 12px 16px; border-radius: 999px; border: 1px solid var(--gold-30); color: var(--sand);
      background: linear-gradient(180deg, rgba(199,161,88,.08), rgba(199,161,88,.02));
      box-shadow: var(--shadow-soft); transition: transform var(--transition), border-color var(--transition), color var(--transition);
    }
    .careers .btn-ghost:hover { transform: translateY(-2px); border-color: var(--gold); color: var(--sand); }

    /* Container & sections */
    .careers .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
    .careers section { padding: var(--section-py) 0; position: relative; }

    /* Séparateur décoratif */
    .careers .decor {
      height: 22px; margin: 10px auto 0; width: 160px; opacity:.9;
      background:
        radial-gradient(closest-side, var(--gold), transparent 70%) center/8px 8px no-repeat,
        linear-gradient(90deg, transparent, var(--gold-30), transparent) center/100% 1px no-repeat;
    }

    /* Intro */
    .careers .intro { text-align: center; }
    .careers .intro p { color: var(--sand-70); font-size: 1.1rem; max-width: 840px; margin: 0 auto; }

    /* Grille catégories */
    .careers .grid { display: grid; gap: 28px; grid-template-columns: repeat(12, 1fr); }
    .careers .card {
      grid-column: span 6; min-height: 300px; border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(199,161,88,.08), rgba(199,161,88,.03));
      border: 1px solid rgba(199,161,88,.22);
      box-shadow: var(--shadow);
      overflow: clip; position: relative; display:flex; flex-direction: column;
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .careers .card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 0 0 1px var(--gold-30); }
    .careers .card__media {
      height: 160px; background-size: cover; background-position: 50% 50%; filter: saturate(.95) contrast(1.05);
      border-bottom: 1px solid rgba(199,161,88,.2);
    }
    .careers .card__body { padding: 18px; display:flex; gap: 14px; flex:1; align-items: flex-start; }
    .careers .card__icon {
      flex: 0 0 44px; height: 44px; border-radius: 10px;
      background: radial-gradient(circle at 30% 30%, #f4e1a6, #c7a158 70%);
      display:grid; place-items:center; color:#1a120c; font-size: 22px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
    }
    .careers .card h3 { margin: 2px 0 6px; font-family: "Playfair Display", serif; letter-spacing:.3px; }
    .careers .card p { color: var(--sand-70); margin: 0 0 10px; }
    .careers .card__actions { display:flex; gap: 10px; padding: 0 18px 18px; flex-wrap: wrap; }

    /* Liste d’offres */
    .careers .list { display: grid; gap: 12px; }
    .careers .list__item {
      display:flex; align-items: center; justify-content: space-between; gap: 14px;
      padding: 14px 16px; border-radius: 12px;
      background: linear-gradient(180deg, rgba(199,161,88,.07), rgba(199,161,88,.02));
      border: 1px solid rgba(199,161,88,.18);
    }
    .careers .tag { color: #1a120c; background: var(--gold); border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: .85rem; }
    .careers .meta { color: var(--muted); font-size: .95rem; }

    /* Bloc appel annuel */
    .careers .banner {
      position: relative; border: 1px solid rgba(199,161,88,.25); border-radius: var(--radius);
      padding: 22px 22px; background:
        radial-gradient(90% 80% at 20% 20%, rgba(199,161,88,.15), transparent 60%),
        linear-gradient(180deg, rgba(199,161,88,.05), rgba(199,161,88,.02));
      box-shadow: var(--shadow);
    }

    /* Formulaire */
    .careers form {
      display: grid; gap: 12px;
      background: linear-gradient(180deg, rgba(199,161,88,.06), rgba(199,161,88,.02));
      border: 1px solid rgba(199,161,88,.22);
      border-radius: var(--radius); padding: 18px;
    }
    .careers label { font-weight: 700; color: var(--sand); }
    .careers input, .careers select, .careers textarea {
      background: rgba(20,14,10,.6); color: var(--sand);
      border: 1px solid rgba(199,161,88,.25); border-radius: 10px;
      padding: 10px 12px; width: 100%;
    }
    .careers textarea { min-height: 120px; resize: vertical; }
    .careers .form-row { display: grid; gap: 12px; grid-template-columns: repeat(12, 1fr); }
    .careers .col-6 { grid-column: span 6; }
    .careers .col-12 { grid-column: span 12; }

    /* Révélations au scroll */
    .reveal { opacity: 0; transform: translateY(18px) scale(.98); transition: opacity 700ms ease, transform 700ms ease; }
    .reveal.is-visible { opacity: 1; transform: none; }

    /* Accent titres section spectacles */
    .careers #spectacles .card h3{ position:relative; padding-right:8px; }
    .careers #spectacles .card h3::after{
      content:""; position:absolute; right:-2px; top:55%; width:46px; height:1px;
      background: linear-gradient(90deg, var(--gold-30), transparent);
    }

    /* Responsive */
    @media (max-width: 960px) {
      .careers .card { grid-column: span 12; }
      .careers .subnav { gap: 10px; }
    }
    @media (max-width: 820px){ .careers .brand{ display:none; } }
    @media (max-width: 680px) {
      .careers .hero { height: 72vh; }
      .careers .form-row { grid-template-columns: 1fr; }
      .careers .col-6 { grid-column: 1 / -1; }
    }

    @media (prefers-reduced-motion: reduce) {
      * { scroll-behavior: auto !important; }
      .reveal { transition: none; transform: none !important; opacity: 1 !important; }
      .careers .btn-gold, .careers .card, .careers .subnav a { transition: none !important; }
    }