:root {
      --c-light: #f7f9f8;
      --shadow: 0 2px 10px rgba(0,0,0,0.08);
      --accord-line-h: 6px;
      --accord-gap: 25px;
      --accord-side-pad: 12px;
    }
    body {
      margin: 0;
      font-family: var(--font-sans);
      background: var(--c-light);
      color: var(--color-text);
      overflow-x: hidden;
    }
    .container {
      max-width: 740px;
      margin: auto;
      padding: 2rem 1rem;
      position: relative;
      z-index: 10;
    }
    .site-main {
      padding-top: clamp(0.2rem, 0.9vw, 0.8rem);
    }
    .scent-hero {
      display: flex;
      justify-content: center;
      padding: clamp(0.5rem, 2.4vw, 2rem) 1.2rem clamp(1rem, 2.6vw, 1.5rem);
      position: relative;
      overflow: visible;
    }
    .scent-hero__inner {
      position: relative;
      width: min(100%, 1100px);
      display: flex;
      justify-content: center;
      align-items: center;
      isolation: isolate;
    }
    .scent-hero-card {
      position: relative;
      width: min(100%, 1100px);
      max-width: var(--hero-image-width, 1100px);
      min-height: min(clamp(380px, 55vw, 520px), var(--hero-image-height, 520px));
      border-radius: 32px;
      overflow: hidden;
      background: linear-gradient(135deg, #f1f1f1 0%, #e3e6e9 100%);
      box-shadow: 0 18px 50px rgba(36, 41, 46, 0.18), 0 0 0 2px rgba(255, 255, 255, 0.45);
      transition: transform 0.35s ease, box-shadow 0.35s ease;
      isolation: isolate;
      z-index: 2;
    }
    .scent-hero-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 26px 60px rgba(36, 41, 46, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.5);
    }
    .scent-hero-card__media {
      position: absolute;
      inset: 0;
    }
    .scent-hero-card__media img,
    .scent-hero-card__media-placeholder {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .scent-hero-card__media.is-portrait img,
    .scent-hero-card__media-placeholder.is-portrait {
      object-position: center top;
    }
    .scent-hero-card__media.is-square img,
    .scent-hero-card__media-placeholder.is-square,
    .scent-hero-card__media.is-landscape img,
    .scent-hero-card__media-placeholder.is-landscape {
      object-position: center;
    }
    .scent-hero-card__media-placeholder {
      background: linear-gradient(135deg, rgba(200, 205, 209, 0.95), rgba(150, 158, 170, 0.9));
    }
    .scent-hero-card__media.is-portrait img,
    .scent-hero-card__media-placeholder.is-portrait { aspect-ratio: auto; }
    .scent-hero-card__gradient {
      position: absolute;
      inset: auto 0 0 0;
      height: 35%;
      background: linear-gradient(180deg, rgba(10, 14, 23, 0) 0%, rgba(10, 14, 23, 0.35) 42%, rgba(10, 14, 23, 0.65) 100%);
      mix-blend-mode: multiply;
      pointer-events: none;
    }
    .scent-hero-card__overlay {
      position: relative;
      inset: 0;
      height: 100%;
      padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      text-align: center;
      gap: 1.1rem;
      color: #fff;
      z-index: 2;
    }
    .scent-hero-card__badge {
      width: clamp(78px, 10vw, 112px);
      height: clamp(78px, 10vw, 112px);
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: rgba(255, 255, 255, 0.18);
      border: 4px solid var(--badge-border-color, #d9d9d9);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(8px);
      margin-bottom: 0.3rem;
    }
    .scent-hero-card__badge-icon {
      width: 66%;
      height: 66%;
      object-fit: contain;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
    }
    .scent-hero-card__badge-fallback {
      display: inline-block;
      font-weight: 600;
      letter-spacing: 0.04em;
      font-size: clamp(0.85rem, 2.3vw, 1rem);
      text-transform: uppercase;
    }
    .scent-hero-card__title {
      margin: 0;
      font-size: clamp(2.4rem, 6vw, 3.75rem);
      font-weight: 700;
      line-height: 1.1;
      max-width: 18ch;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
    }
    .scent-hero-card__title::after {
      content: "";
      display: block;
      margin: 0.65rem auto 0;
      width: clamp(48px, 12vw, 90px);
      height: 3px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.6);
      opacity: 0.75;
    }
    .scent-hero-card__subtitle {
      margin: -0.2rem 0 0;
      font-size: clamp(1.05rem, 2.8vw, 1.35rem);
      color: rgba(255, 255, 255, 0.85);
    }
    .scent-hero-card__meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.55rem;
    }
    .scent-hero-card__tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.35rem 0.9rem;
      border-radius: 999px;
      font-size: 0.95rem;
      font-weight: 500;
      background: rgba(0, 0, 0, 0.22);
      color: #fff;
      backdrop-filter: blur(6px);
      text-decoration: none;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .scent-hero-card__tag--link:hover,
    .scent-hero-card__tag--link:focus-visible {
      background: rgba(255, 255, 255, 0.28);
      color: #10131a;
    }
    .scent-hero-card__tag.note-top { background: rgba(255, 159, 67, 0.45); }
    .scent-hero-card__tag.note-heart { background: rgba(255, 99, 132, 0.38); }
    .scent-hero-card__tag.note-base { background: rgba(92, 141, 255, 0.38); }
    .scent-hero-card::before {
      content: "";
      position: absolute;
      inset: auto 15% -25% 15%;
      height: 60%;
      background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.6), rgba(138, 149, 169, 0));
      z-index: 0;
      opacity: 0.75;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .scent-hero-halo {
      position: absolute;
      top: 50%;
      right: clamp(-260px, -18vw, -110px);
      transform: translateY(-46%);
      width: clamp(420px, 48vw, 640px);
      aspect-ratio: 1 / 1;
      pointer-events: none;
      z-index: 1;
      opacity: 0.88;
      filter: saturate(115%);
    }
    .scent-hero-halo::before,
    .scent-hero-halo::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
    }
    .scent-hero-halo::before {
      background: radial-gradient(
        circle at 18% 50%,
        color-mix(in srgb, var(--halo-color-1, rgba(215, 220, 228, 0.9)) 88%, transparent) 0%,
        color-mix(in srgb, var(--halo-color-2, var(--halo-color-1, rgba(215, 220, 228, 0.75))) 80%, transparent) 32%,
        color-mix(in srgb, var(--halo-color-3, var(--halo-color-2, rgba(215, 220, 228, 0.6))) 72%, transparent) 63%,
        color-mix(in srgb, var(--halo-color-4, var(--halo-color-3, rgba(215, 220, 228, 0.45))) 58%, transparent) 78%,
        rgba(255, 255, 255, 0) 100%
      );
      filter: blur(70px);
      opacity: 0.95;
    }
    .scent-hero-halo::after {
      background: radial-gradient(
        circle at 8% 48%,
        color-mix(in srgb, var(--halo-color-1, rgba(215, 220, 228, 0.85)) 55%, transparent) 0%,
        color-mix(in srgb, var(--halo-color-2, var(--halo-color-1, rgba(215, 220, 228, 0.65))) 45%, transparent) 45%,
        transparent 100%
      );
      filter: blur(120px);
      opacity: 0.55;
      transform: scale(1.25);
    }

    @media (min-width: 1200px) {
      .scent-hero {
        padding: 3.5rem 1.5rem 3rem;
      }
      .scent-hero-card {
        min-height: clamp(420px, 45vw, 560px);
        box-shadow: 0 24px 70px rgba(36, 41, 46, 0.22), 0 0 0 3px rgba(255, 255, 255, 0.55);
      }
      .scent-hero-card::before {
        inset: auto 12% -20% 12%;
        opacity: 0.95;
      }
      .scent-hero-halo {
        right: clamp(-340px, -20vw, -140px);
        width: clamp(520px, 52vw, 720px);
        opacity: 0.92;
      }
    }

    @media (min-width: 920px) and (max-width: 1199px) {
      .scent-hero-card {
        min-height: clamp(400px, 52vw, 540px);
        box-shadow: 0 20px 60px rgba(36, 41, 46, 0.2), 0 0 0 2px rgba(255, 255, 255, 0.5);
      }
      .scent-hero-card::before {
        opacity: 0.6;
      }
      .scent-hero-halo {
        width: clamp(360px, 44vw, 520px);
        right: clamp(-240px, -16vw, -120px);
        opacity: 0.75;
      }
    }

    @media (max-width: 768px) {
      .scent-hero {
        padding: 1.4rem 1rem 1.8rem;
      }
      .scent-hero-card {
        min-height: clamp(440px, 105vw, 620px);
        border-radius: 24px;
        box-shadow: 0 14px 36px rgba(36, 41, 46, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.35);
      }
      .scent-hero-card::before {
        opacity: 0.18;
      }
      .scent-hero-card__gradient {
        height: 45%;
      }
      .scent-hero-card__overlay {
        gap: 0.85rem;
      }
      .scent-hero-halo {
        opacity: 0.08;
        filter: blur(140px);
      }
    }
    /* -------- ACCORDS - Lignes et bandes dynamiques --------- */
    .accords-olfactifs-wrap {
      position: relative;
      margin: clamp(0.35rem, 1.4vw, 1.2rem) 0 3.1rem 0;
      background: #fff;
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding: 2.1rem 1rem 2.3rem 1.3rem;
      overflow: visible;
    }
    .accords-olfactifs-wrap h3 {
      margin: 0 0 1.2rem 0;
      font-size: 1.15rem;
      font-weight: 600;
    }
    .accords-olfactifs-list {
      display: flex;
      flex-direction: column;
      gap: var(--accord-gap);
      position: relative;
    }
    .accord-olfactif-row {
      display: flex;
      align-items: center;
      position: relative;
      min-height: 38px;
      z-index: 2;
    }
    .accord-tag {
      display: inline-block;
      color: #222;
      font-weight: 500;
      padding: 0.4rem 1.05rem 0.36rem 1.05rem;
      border-radius: 18px;
      font-size: 0.99rem;
      background: #ededed;
      letter-spacing: 0.01em;
      box-shadow: 0 1px 5px rgba(0,0,0,.07);
      margin-right: 22px;
      position: relative;
      z-index: 5;
      min-width: 90px;
      text-align: left;
    }
    .accord-horizontal {
      height: var(--accord-line-h);
      border-radius: 3px;
      flex-grow: 1;
      min-width: 50px;
      margin-right: 0;
      position: relative;
      z-index: 3;
      transition: background 0.22s;
    }
    /* Timeline styles moved to shared: css/components/timeline_anecdotes.css */
    /* Graph */
    .usage-graph {
      background: #fff;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: var(--shadow);
      margin: 2rem 0;
    }
    .usage-graph h3 {
      margin-bottom: 1rem;
    }
    .caption {
      margin-top: .7rem;
      font-size: 0.9rem;
      color: #999;
    }

    /* Associated scents */
    .assoc-scents {
      background: #fff;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: var(--shadow);
      margin: 2rem 0;
    }
    .assoc-scents-graph {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: flex-end;
    }
    .assoc-scents-graph img {
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }
    .assoc-item {
      display: block;
    }
    /* Cross navigation */
    .cross-navigation {
      background: #fff;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: var(--shadow);
      margin: 2rem 0;
    }
    .cross-navigation__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1.5rem;
    }
    .cross-navigation__item {
      background: #f7faf9;
      padding: 1rem;
      border-radius: 10px;
      border: 1px solid rgba(27, 94, 85, 0.08);
      min-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 0.4rem;
    }
    .cross-navigation__item h4 {
      margin-bottom: 0.75rem;
      font-size: 1rem;
      text-transform: none;
      letter-spacing: 0.01em;
    }
    .cross-navigation__body {
      margin: 0;
      font-size: 0.98rem;
    }
    .cross-navigation__link {
      color: var(--c-primary, #1b5e55);
      font-weight: 600;
      text-decoration: none;
    }
    .cross-navigation__link:hover,
    .cross-navigation__link:focus {
      text-decoration: underline;
    }
    .cross-navigation__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 0.4rem;
    }
    .cross-navigation__list a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      padding-bottom: 0.1rem;
      transition: border-color 0.2s ease;
    }
    .cross-navigation__list a:hover,
    .cross-navigation__list a:focus {
      border-color: rgba(27, 94, 85, 0.35);
    }
    .cross-navigation__hint {
      margin-top: 0.5rem;
      font-size: 0.9rem;
      color: #5f6f6b;
    }
    .cross-navigation__item--map {
      background: linear-gradient(135deg, rgba(27,94,85,0.08), rgba(27,94,85,0.02));
      border: 1px solid rgba(27, 94, 85, 0.12);
    }
    /* Anecdotes styles moved to shared: css/components/timeline_anecdotes.css */
    /* Retour */
    .back-link {
      text-align: center;
      margin: 2rem 0;
    }
    .back-link a {
      color: var(--c-primary, #1b5e55);
      text-decoration: none;
    }
    @media (max-width:900px) {
      .container{max-width:100vw;}
      .accord-bar-vertical{display:none;}
    }
    @media (max-width:768px) {
      .hero {
        grid-template-columns: 1fr;
        justify-items: center;
      }
      .hero-title {
        text-align: center;
      }
      .hero-heading {
        justify-content: center;
      }
    }