@font-face {
      font-family: 'BlackChancery';
      src: url('../fonts/blkchcry-webfont.woff2') format('woff2'),
           url('../fonts/blkchcry-webfont.woff') format('woff');
      font-weight: normal; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Caliburn';
      src: url('../fonts/Caliburn.woff2') format('woff2'),
           url('../fonts/Caliburn.woff') format('woff');
      font-weight: normal; font-style: normal; font-display: swap;
    }

    /* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    img, video { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }
    section[id] { scroll-margin-top: 76px; }

    /* ── Tokens ── */
    :root {
      --ink:     #1c1610;
      --warm:    #3d3528;
      --dust:    #7a7060;
      --haze:    #b0a898;
      --parchment: #f7f4ed;
      --stone:   #ece9e0;
      --line:    #ddd8cc;
      --gold:    #b8903a;
      --gold-lt: #d4ac5e;
      --scarlet: #8b1a1a;
      --deep:    #1a1825;
      --deep2:   #120f1c;
      --ease:    cubic-bezier(.22,1,.36,1);
    }

    body {
      font-family: Georgia, 'Times New Roman', serif;
      color: var(--ink);
      background: var(--parchment);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    .container { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

    /* ── Utility ── */
    .eyebrow {
      font-family: system-ui, sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--gold); }

    /* ═══════════════════════════════════════════
       OUVERTURE DU GRIMOIRE · séquence de chargement
       Deux "pages" sombres s'écartent comme une
       couverture qui s'ouvre, révélant le site.
       ═══════════════════════════════════════════ */
    .opening {
      position: fixed; inset: 0; z-index: 999;
      pointer-events: auto;
      touch-action: manipulation;
      cursor: pointer;
      background: transparent;
    }
    .opening.is-opening { pointer-events: none; cursor: default; }
    .opening-half {
      position: absolute; top: 0; bottom: 0; width: 50.5%;
      background: var(--deep2);
      overflow: hidden;
      transition: transform .92s cubic-bezier(.66,0,.22,1);
      contain: strict;
    }
    .opening.is-opening .opening-half { will-change: transform; }
    /* La couverture — la même, brute, que le volet gauche du hero */
    .opening-half::before {
      content: '';
      position: absolute; inset: 0;
      background: url('../assets/2eme%20de%20couverture.webp') center/cover no-repeat;
    }
    .opening-half::after {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 90% 70% at 100% 50%, rgba(184,144,58,.10) 0%, transparent 60%),
        linear-gradient(rgba(18,15,28,.22), rgba(18,15,28,.22));
    }
    .opening-left  {
      left: 0;
      border-right: 1px solid rgba(212,172,94,.36);
      box-shadow: 24px 0 46px rgba(7,6,15,.42);
    }
    .opening-right {
      right: 0;
      border-left: 1px solid rgba(212,172,94,.36);
      box-shadow: -24px 0 46px rgba(7,6,15,.42);
    }
    .opening-right::after {
      background:
        radial-gradient(ellipse 90% 70% at 0% 50%, rgba(184,144,58,.10) 0%, transparent 60%),
        linear-gradient(rgba(18,15,28,.22), rgba(18,15,28,.22));
    }
    .opening-center {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 22px; text-align: center;
      padding: 24px;
      transition: opacity .34s ease, transform .34s ease;
    }
    .opening-title {
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400;
      font-size: clamp(30px, 5vw, 52px);
      color: var(--parchment);
      letter-spacing: .02em;
      line-height: 1.15;
      opacity: 0;
      transform: translateY(14px);
      animation: openTitle .8s var(--ease) .15s forwards;
      text-shadow: 0 0 32px rgba(184,144,58,.35);
    }
    .opening-sub {
      font-family: system-ui, sans-serif;
      font-size: 11px; font-weight: 700;
      letter-spacing: .3em; text-transform: uppercase;
      color: var(--gold-lt);
      opacity: 0;
      animation: openFade .7s ease .55s forwards;
    }
    .opening-line {
      width: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      animation: openLine .9s var(--ease) .45s forwards;
      box-shadow: 0 0 14px rgba(184,144,58,.5);
    }
    @keyframes openTitle { to { opacity: 1; transform: translateY(0); } }
    @keyframes openFade  { to { opacity: 1; } }
    @keyframes openLine  { to { width: min(220px, 55vw); } }

    /* Phase d'ouverture : les pages s'écartent */
    .opening.reveal .opening-left   { transform: translateX(-101%); }
    .opening.reveal .opening-right  { transform: translateX(101%); }
    .opening.reveal .opening-center { opacity: 0; transform: scale(.97); }
    .opening.done { display: none; }

    /* Le site retient sa respiration pendant l'ouverture */
    body.holding { overflow: hidden; }

    /* ── Header · reliure flottante du grimoire ── */
    header {
      position: sticky; top: 0; z-index: 50;
      padding: 0;
      background:
        linear-gradient(105deg, rgba(255,255,255,.025), transparent 28%, transparent 72%, rgba(255,255,255,.018)),
        linear-gradient(to bottom, rgba(28,26,40,.99), rgba(11,11,23,.99)),
        url('../assets/2eme%20de%20couverture.webp') center/cover no-repeat var(--deep2);
      border-bottom: 1px solid rgba(212,172,94,.33);
      box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.025),
        0 8px 24px rgba(6,5,13,.28);
      transition: transform .45s var(--ease), box-shadow .3s ease;
      pointer-events: auto;
    }
    header.tucked { transform: translateY(-100%); }
    header.raised {
      box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.025),
        0 12px 30px rgba(6,5,13,.48);
    }

    /* Fil d'or de progression de lecture */
    .progress {
      position: absolute; left: 0; bottom: -1px;
      height: 2px; width: 0%; max-width: none;
      background: linear-gradient(90deg, var(--gold) 0%, var(--gold-lt) 100%);
      box-shadow: 0 0 8px rgba(184,144,58,.45);
      transform: none;
      transition: width .1s linear;
      pointer-events: none;
    }

    .nav {
      display: flex; align-items: center;
      justify-content: space-between; height: 68px;
      width: 100%; max-width: none;
      padding: 0 clamp(18px, 4vw, 64px);
      position: relative;
      pointer-events: auto;
      isolation: isolate;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .nav::before {
      content: '';
      position: absolute;
      left: clamp(18px, 4vw, 64px); right: clamp(18px, 4vw, 64px);
      top: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212,172,94,.16), transparent);
      pointer-events: none;
      z-index: -1;
    }
    .nav::after {
      content: '';
      position: absolute;
      left: 50%; bottom: -6px;
      width: 9px; height: 9px;
      background: linear-gradient(135deg, var(--gold-lt), var(--gold));
      border: 2px solid var(--deep2);
      transform: translateX(-50%) rotate(45deg);
      box-shadow: 0 0 14px rgba(212,172,94,.38);
    }
    .brand {
      display: flex; align-items: center; gap: 11px;
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400;
      color: var(--parchment); flex-shrink: 0;
      transition: opacity .2s, transform .3s var(--ease);
    }
    .brand:hover { opacity: .94; transform: translateY(-1px); }
    .brand img {
      width: 46px; height: 46px; object-fit: cover;
      border-radius: 50%;
      border: 1px solid rgba(212,172,94,.6);
      box-shadow:
        0 0 0 4px rgba(184,144,58,.08),
        0 5px 16px rgba(0,0,0,.42);
      transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    }
    .brand:hover img {
      transform: rotate(-3deg) scale(1.06);
      box-shadow: 0 0 0 4px rgba(212,172,94,.13), 0 6px 20px rgba(184,144,58,.28);
    }
    .brand-copy { display: flex; flex-direction: column; line-height: 1; }
    .brand-text { font-size: 20px; letter-spacing: .025em; }
    .brand-kicker {
      margin-top: 6px;
      font-family: system-ui, sans-serif;
      font-size: 8px; font-weight: 800;
      letter-spacing: .21em; text-transform: uppercase;
      color: rgba(212,172,94,.68);
    }
    .brand-short { display: none; }
    .nav-links {
      display: flex; align-items: center; gap: 3px;
      padding: 4px;
      border: 1px solid rgba(255,255,255,.055);
      border-radius: 13px;
      background: rgba(255,255,255,.025);
    }
    .nav-link {
      font-family: system-ui, sans-serif;
      font-size: 12px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      color: rgba(247,244,237,.58);
      padding: 10px 14px;
      border-radius: 9px;
      white-space: nowrap;
      position: relative;
      transition: color .25s, background .25s, box-shadow .25s;
    }
    /* Trait d'or qui se déploie depuis le centre du lien */
    .nav-link:not(.nav-cta)::after {
      content: '';
      position: absolute;
      left: 15px; right: 15px; bottom: 4px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-lt), transparent);
      transform: scaleX(0);
      transition: transform .35s var(--ease);
    }
    .nav-link:not(.nav-cta):hover { color: var(--parchment); background: rgba(255,255,255,.035); }
    .nav-link:not(.nav-cta):hover::after { transform: scaleX(1); }
    /* Chapitre en cours (scrollspy) : le lien s'illumine */
    .nav-link.active {
      color: var(--gold-lt);
      background: rgba(184,144,58,.07);
      box-shadow: inset 0 0 0 1px rgba(184,144,58,.08);
    }
    .nav-link.active::after { transform: scaleX(1); }
    .nav-link:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; border-radius: 6px; }
    .nav-cta {
      margin-left: 5px;
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-lt) 100%);
      color: var(--deep2);
      font-size: 12px; font-weight: 800;
      letter-spacing: .1em;
      padding: 11px 20px;
      border-radius: 4px;
      clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
      overflow: hidden;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 2px 10px rgba(184,144,58,.25);
      transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .25s;
    }
    /* Reflet qui balaie le CTA au survol */
    .nav-cta::before {
      content: '';
      position: absolute;
      top: 0; bottom: 0; left: -70%;
      width: 45%;
      background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
      transform: skewX(-20deg);
      transition: left .6s var(--ease);
      pointer-events: none;
    }
    .nav-cta:hover {
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.3),
        0 6px 18px rgba(184,144,58,.45);
      filter: brightness(1.04);
    }
    .nav-cta:hover::before { left: 135%; }
    .nav-cta:active { transform: translateY(0) scale(.98); }
    .cta-short { display: none; }

    /* Compteur de vues · révélé uniquement après validation du mode admin */
    .admin-view-counter[hidden] { display: none !important; }
    .admin-view-counter {
      position: relative;
      flex: 0 0 auto;
      font-family: system-ui, sans-serif;
    }
    .admin-view-counter__trigger {
      min-width: 70px;
      height: 39px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 5px 10px;
      border: 1px solid rgba(212,172,94,.24);
      border-radius: 9px;
      color: rgba(247,244,237,.78);
      background:
        linear-gradient(135deg, rgba(184,144,58,.11), rgba(184,144,58,.035)),
        rgba(9,8,18,.28);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 3px 12px rgba(0,0,0,.14);
      cursor: pointer;
      transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .22s var(--ease);
    }
    .admin-view-counter__trigger:hover,
    .admin-view-counter.is-open .admin-view-counter__trigger {
      color: var(--gold-lt);
      border-color: rgba(212,172,94,.52);
      background:
        linear-gradient(135deg, rgba(184,144,58,.18), rgba(184,144,58,.06)),
        rgba(9,8,18,.42);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 18px rgba(184,144,58,.13);
      transform: translateY(-1px);
    }
    .admin-view-counter__trigger:focus-visible {
      outline: 2px solid var(--gold-lt);
      outline-offset: 2px;
    }
    .admin-view-counter__trigger svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      flex: 0 0 auto;
    }
    .admin-view-counter__summary {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1;
    }
    .admin-view-counter__summary small {
      margin-bottom: 3px;
      font-size: 7px;
      font-weight: 800;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: rgba(247,244,237,.42);
    }
    .admin-view-counter__summary strong {
      font-size: 14px;
      font-weight: 800;
      color: var(--gold-lt);
      font-variant-numeric: tabular-nums;
    }
    .admin-view-counter__panel {
      position: absolute;
      top: calc(100% + 14px);
      right: 0;
      width: 244px;
      padding: 15px;
      border: 1px solid rgba(212,172,94,.34);
      border-radius: 12px;
      color: var(--parchment);
      background:
        linear-gradient(145deg, rgba(255,255,255,.025), transparent 42%),
        linear-gradient(to bottom, rgba(28,26,40,.995), rgba(11,11,23,.995));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 18px 40px rgba(0,0,0,.48),
        0 0 22px rgba(184,144,58,.08);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-7px) scale(.985);
      transform-origin: top right;
      pointer-events: none;
      transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .24s var(--ease);
      z-index: 80;
    }
    .admin-view-counter__panel::before {
      content: '';
      position: absolute;
      top: -6px;
      right: 25px;
      width: 10px;
      height: 10px;
      border-top: 1px solid rgba(212,172,94,.34);
      border-left: 1px solid rgba(212,172,94,.34);
      background: #1b1927;
      transform: rotate(45deg);
    }
    .admin-view-counter:hover .admin-view-counter__panel,
    .admin-view-counter:focus-within .admin-view-counter__panel,
    .admin-view-counter.is-open .admin-view-counter__panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .admin-view-counter__heading {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      padding-bottom: 9px;
      border-bottom: 1px solid rgba(212,172,94,.16);
    }
    .admin-view-counter__heading span {
      font-family: 'BlackChancery', Georgia, serif;
      font-size: 18px;
      color: var(--gold-lt);
    }
    .admin-view-counter__heading small {
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(247,244,237,.36);
    }
    .admin-view-counter dl,
    .admin-view-counter dt,
    .admin-view-counter dd {
      margin: 0;
    }
    .admin-view-counter dl > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 27px;
      gap: 16px;
      font-size: 11px;
      color: rgba(247,244,237,.62);
    }
    .admin-view-counter dd {
      font-size: 12px;
      font-weight: 800;
      color: rgba(247,244,237,.88);
      font-variant-numeric: tabular-nums;
    }
    .admin-view-counter dl > .admin-view-counter__total {
      min-height: 33px;
      margin-top: 5px;
      padding-top: 6px;
      border-top: 1px solid rgba(212,172,94,.14);
      color: var(--gold-lt);
    }
    .admin-view-counter__total dd { color: var(--gold-lt); }
    .admin-view-counter__panel > p {
      margin: 10px 0 0;
      padding: 8px 9px;
      border-radius: 7px;
      background: rgba(84,147,106,.09);
      color: rgba(184,225,195,.72);
      font-size: 9px;
      line-height: 1.35;
      text-align: center;
    }
    .admin-view-counter__panel > p span {
      margin-right: 4px;
      color: #86c99a;
      font-weight: 900;
    }

    /* ═══════════════════════════════════════════
       HERO DIPTYCH · "Le grimoire qui s'ouvre"
       ═══════════════════════════════════════════ */
    .hero-diptych {
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      min-height: calc(100vh - 69px);
      max-height: 880px;
      position: relative;
    }

    /* ── Page gauche : la 2ème de couverture + le logo ── */
    .diptych-left {
      background: url('../assets/2eme%20de%20couverture.webp') center/cover no-repeat var(--deep2);
      position: relative;
      overflow: hidden;
    }


    /* ── Sortilège secret ("grimoire" au clavier) ── */
    .diptych-left.secret-active .diptych-carousel {
      opacity: 0;
      transition: opacity .6s ease;
      pointer-events: none;
    }
    .secret-reveal {
      position: absolute;
      inset: 0;
      z-index: 6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 40px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .7s ease;
    }
    .secret-reveal.show {
      opacity: 1;
      pointer-events: auto;
      cursor: pointer;
    }
    .secret-reveal-word {
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400;
      font-size: clamp(38px, 6.5vw, 62px);
      letter-spacing: .03em;
      color: #e4f4ff;
      text-shadow:
        0 0 18px rgba(120,190,255,.95),
        0 0 48px rgba(90,160,255,.65),
        0 2px 0 rgba(0,0,0,.35);
      margin-bottom: 18px;
      opacity: 0;
      transform: scale(.82);
      transition: opacity .6s ease .2s, transform .6s var(--ease) .2s;
    }
    .secret-reveal.show .secret-reveal-word {
      opacity: 1;
      transform: scale(1);
    }
    .secret-reveal-sub {
      max-width: 380px;
      font-family: Georgia, serif;
      font-size: 15.5px;
      line-height: 1.65;
      color: rgba(223,241,255,.88);
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .6s ease .45s, transform .6s var(--ease) .45s;
    }
    .secret-reveal.show .secret-reveal-sub {
      opacity: 1;
      transform: none;
    }
    .secret-reveal-sub strong { color: #bfe3ff; }

    /* Canalisation mobile : maintenir le doigt sur le logo */
    .diptych-logo {
      touch-action: none;                 /* le logo est une zone de sortilège */
      -webkit-touch-callout: none;        /* pas de menu contextuel iOS au maintien */
      -webkit-user-select: none;
      user-select: none;
    }
    /* ── Canalisation 3D du sortilège ──────────────────────
       La scène WebGL est créée uniquement après 2 s d'appui, puis détruite
       à la fin : géométrie et profondeur réelles, sans coût au repos. */
    .arcane-charge-3d {
      --spell-size: 300px;
      position: fixed;
      left: 50%;
      top: 50%;
      width: var(--spell-size);
      height: var(--spell-size);
      z-index: 92;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, -50%) scale(.68) rotate(-4deg);
      filter: blur(7px) brightness(.72) saturate(.75);
      transition:
        opacity .42s ease,
        transform .62s cubic-bezier(.16, 1, .3, 1),
        filter .5s ease;
      contain: strict;
      isolation: isolate;
      will-change: opacity, transform, filter;
    }
    .arcane-charge-3d canvas {
      display: block;
      width: 100%;
      height: 100%;
      filter:
        drop-shadow(0 0 6px rgba(103, 185, 255, .5))
        drop-shadow(0 0 18px rgba(57, 105, 255, .2));
    }
    .arcane-charge-3d.is-live {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) rotate(0deg);
      filter: blur(0) brightness(1) saturate(1.08);
    }
    .arcane-charge-3d.is-complete {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.48) rotate(5deg);
      filter: blur(2px) brightness(2.3) saturate(1.5);
      transition-duration: .68s;
      transition-timing-function: cubic-bezier(.2, .72, .3, 1);
    }
    .arcane-charge-3d.is-cancelled {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.58) rotate(-7deg);
      filter: blur(5px) brightness(.55);
      transition-duration: .32s;
    }

    /* Si WebGL est bloqué, le même conteneur accueille désormais une scène
       Canvas à projection 3D — plus aucun ancien cercle CSS n'est conservé. */
    .arcane-charge-canvas canvas {
      filter:
        drop-shadow(0 0 5px rgba(110, 201, 255, .46))
        drop-shadow(0 0 16px rgba(47, 104, 255, .18));
    }
    @media (prefers-reduced-motion: reduce) {
      .diptych-logo { animation: none; }
      .arcane-charge-3d { display: none !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      .secret-reveal, .secret-reveal-word, .secret-reveal-sub,
      .diptych-left.secret-active .diptych-carousel {
        transition: opacity .25s linear !important;
        transform: none !important;
      }
    }

    /* ── Carrousel de slides ───────────────── */
    .diptych-carousel {
      position: absolute;
      inset: 0;
      z-index: 2;
    }
    .carousel-slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      transition: opacity 1.4s ease;
      pointer-events: none;
    }
    .carousel-slide.is-active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Slides image — remplissent tout le panneau avec Ken Burns */
    .carousel-slide-image {
      padding: 0;
      overflow: hidden;
    }
    .carousel-slide-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      animation: kenBurns 9s ease-in-out infinite alternate;
    }
    .carousel-slide-image::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at center, transparent 0%, rgba(18,15,28,.28) 75%, rgba(18,15,28,.6) 100%),
        linear-gradient(to bottom, rgba(18,15,28,.18) 0%, transparent 28%);
      pointer-events: none;
    }

    @keyframes kenBurns {
      from { transform: scale(1)    translate(0, 0);       }
      to   { transform: scale(1.06) translate(-1%, 0.5%);  }
    }

    /* ── Le logo ─────────────────────────────── */
    .diptych-logo {
      width: min(430px, 85%);
      height: auto;
      display: block;
      filter: drop-shadow(0 0 18px rgba(212,172,94,.24));
      animation: logoGlow 6s ease-in-out infinite;
    }
    /* Respiration sur le compositeur (opacity/transform) : même présence
       lumineuse, sans recalculer un flou à chaque image. */
    @keyframes logoGlow {
      0%, 100% { opacity: .96; transform: scale(.995); }
      50%      { opacity: 1; transform: scale(1.008); }
    }


    /* ── La reliure du grimoire ──────────────── */
    .diptych-spine {
      background: linear-gradient(to bottom,
        transparent 0%,
        rgba(184,144,58,.35) 12%,
        rgba(184,144,58,.45) 50%,
        rgba(184,144,58,.35) 88%,
        transparent 100%);
      position: relative;
    }
    .diptych-spine::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      width: 7px;
      height: 7px;
      background: var(--gold);
      box-shadow: 0 0 12px rgba(184,144,58,.5);
      animation: spineGlow 4s ease-in-out infinite;
    }
    @keyframes spineGlow {
      0%,100% { opacity: .72; transform: translate(-50%, -50%) rotate(45deg) scale(.88); }
      50%     { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1.12); }
    }

    /* ── Page droite : le commercial ─────────── */
    .diptych-right {
      background: url('../assets/page.webp') center/cover no-repeat var(--parchment);
      padding: clamp(44px, 5vw, 72px) clamp(32px, 5vw, 72px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }

    .diptych-content {
      max-width: 520px;
      width: 100%;
      margin: 0 auto 0 0;
    }

    /* Entrée orchestrée du contenu après l'ouverture */
    .hero-in {
      opacity: 0;
      transform: translateY(18px);
      filter: blur(4px);
    }
    body.opened .hero-in {
      animation: heroIn .8s var(--ease) forwards;
      animation-delay: calc(.25s + var(--i, 0) * .12s);
    }
    @keyframes heroIn {
      to { opacity: 1; transform: translateY(0); filter: blur(0); }
    }

    .diptych-right .eyebrow {
      margin-bottom: 22px;
    }

    .diptych-right h1 {
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400;
      font-size: clamp(36px, 4.2vw, 58px);
      line-height: 1.05;
      letter-spacing: .01em;
      color: var(--ink);
      margin-bottom: 22px;
    }
    .diptych-right h1 i {
      font-style: normal;
      color: var(--scarlet);
      position: relative;
    }
    /* Trait d'encre qui se dessine sous "terrain d'aventure" */
    .diptych-right h1 i::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: -4px;
      height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--gold-lt) 60%, transparent);
      border-radius: 3px;
      transform: scaleX(0);
      transform-origin: left;
      opacity: .8;
    }
    body.opened .diptych-right h1 i::after {
      transition: transform 1s var(--ease) 1.15s;
      transform: scaleX(1);
    }

    .hero-lead {
      font-size: 17px;
      color: var(--dust);
      line-height: 1.7;
      max-width: 44ch;
      margin-bottom: 30px;
    }

    .hero-actions {
      display: flex; gap: 12px;
      flex-wrap: wrap; margin-bottom: 20px;
    }

    /* Système de boutons : petites capitales espacées,
       liseré d'or intérieur, ombres en couches, état
       actif qui "presse" — plus de survols génériques. */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      font-family: system-ui, sans-serif;
      font-size: 13px; font-weight: 700;
      letter-spacing: .07em; text-transform: uppercase;
      padding: 15px 26px; border-radius: 11px;
      transition:
        transform .3s var(--ease),
        box-shadow .3s var(--ease),
        background .25s, color .25s, filter .25s;
      border: none; cursor: pointer;
      position: relative; overflow: hidden;
      -webkit-tap-highlight-color: transparent;
    }
    .btn:active { transform: translateY(0) scale(.97); }
    .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    .btn-dark {
      background: linear-gradient(165deg, #35291a 0%, var(--ink) 60%);
      color: var(--parchment);
      box-shadow:
        inset 0 0 0 1px rgba(184,144,58,.4),
        inset 0 1px 0 rgba(255,255,255,.06),
        0 2px 10px rgba(28,22,16,.18);
    }
    .btn-dark:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 0 0 1px rgba(212,172,94,.75),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 26px rgba(28,22,16,.28);
    }
    /* Éclat doré qui balaie le bouton principal */
    .btn-dark::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0; left: -60%;
      width: 40%;
      background: linear-gradient(105deg, transparent, rgba(212,172,94,.35), transparent);
      transform: skewX(-20deg);
      transition: left .6s var(--ease);
      pointer-events: none;
    }
    .btn-dark:hover::after { left: 130%; }
    .btn-ghost {
      box-shadow: inset 0 0 0 1px var(--line);
      color: var(--warm);
      background: rgba(255,255,255,.45);
    }
    /* L'étoile-sceau du ghost pivote au survol */
    .btn-ghost::before {
      content: '✦';
      font-size: 10px;
      color: var(--gold);
      transition: transform .5s var(--ease);
    }
    .btn-ghost:hover {
      box-shadow:
        inset 0 0 0 1px var(--gold),
        0 8px 20px rgba(184,144,58,.14);
      color: var(--ink);
      background: rgba(184,144,58,.07);
      transform: translateY(-2px);
    }
    .btn-ghost:hover::before { transform: rotate(180deg) scale(1.25); }

    .hero-note {
      font-family: system-ui, sans-serif;
      font-size: 13px; color: var(--haze);
      display: flex; align-items: flex-start; gap: 7px; line-height: 1.5;
    }
    .hero-note::before { content: '📍'; font-size: 14px; flex-shrink: 0; }

    /* ── Indicateur de scroll : le dé du destin ──
       Posé dans l'encre du chapter-turn : le fondu est conservé,
       c'est l'écriture qui s'adapte — teinte parchemin, halo sombre,
       filets d'or, et z-index au-dessus du voile (chapter-turn = 8). */
    .scroll-hint {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9;
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 12px; font-weight: 700;
      letter-spacing: .3em; text-transform: uppercase;
      color: rgba(247,244,237,.88);
      text-shadow:
        0 1px 3px rgba(10,8,16,.85),
        0 0 18px rgba(10,8,16,.55);
      display: flex; flex-direction: column;
      align-items: center; gap: 11px;
      text-decoration: none;
      transition: color .2s;
    }
    .scroll-hint span {
      display: inline-flex;
      align-items: center;
      gap: 14px;
    }
    .scroll-hint span::before,
    .scroll-hint span::after {
      content: '';
      width: 34px; height: 1px; flex: none;
      background: linear-gradient(90deg, transparent, rgba(212,172,94,.7));
    }
    .scroll-hint span::after {
      background: linear-gradient(90deg, rgba(212,172,94,.7), transparent);
    }
    .scroll-hint:hover { color: var(--gold-lt); }
    .scroll-hint svg.d20 {
      width: 26px; height: 26px;
      stroke: var(--gold-lt);
      stroke-width: 1.4;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter:
        drop-shadow(0 0 7px rgba(212,172,94,.45))
        drop-shadow(0 1px 2px rgba(10,8,16,.7));
      animation: scrollBounce 2.2s ease-in-out infinite;
    }
    .scroll-hint:hover svg.d20 { animation-play-state: paused; transform: rotate(12deg) translateY(2px); transition: transform .3s var(--ease); }
    @keyframes scrollBounce {
      0%,100% { transform: translateY(0); opacity: .6; }
      50%     { transform: translateY(6px); opacity: 1; }
    }

    /* ── "What is RPG" link button ── */
    .whatisrpg {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: system-ui, sans-serif;
      font-size: 14px; font-weight: 600;
      color: var(--gold);
      padding: 6px 2px;
      background: transparent;
      border: none;
      cursor: pointer;
      margin-bottom: 16px;
      position: relative;
      transition: color .18s, transform .18s var(--ease);
    }
    .whatisrpg::after {
      content: '';
      position: absolute;
      left: 28px; right: 2px; bottom: 4px;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .28s var(--ease);
    }
    .whatisrpg:hover { color: #9e7a2e; }
    .whatisrpg:hover::after { transform: scaleX(1); }
    .whatisrpg .q-mark {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--gold);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px; font-weight: 700;
      font-family: Georgia, serif;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(184,144,58,.3);
      transition: transform .18s var(--ease);
    }
    .whatisrpg:hover .q-mark { transform: rotate(-8deg) scale(1.08); }

    /* ── Ornement de transition entre sections ── */
    .ornament {
      display: flex; align-items: center; justify-content: center;
      gap: 14px;
      padding: 0;
      height: 0;
      position: relative;
      z-index: 3;
    }
    .ornament span {
      width: 9px; height: 9px;
      background: var(--gold);
      transform: rotate(45deg) scale(0);
      box-shadow: 0 0 14px rgba(184,144,58,.55);
      transition: transform .6s var(--ease) .2s;
    }
    .ornament::before, .ornament::after {
      content: '';
      height: 1px; width: 0;
      background: linear-gradient(90deg, transparent, var(--gold));
      transition: width .9s var(--ease);
    }
    .ornament::after { background: linear-gradient(90deg, var(--gold), transparent); }
    .ornament.visible span { transform: rotate(45deg) scale(1); }
    .ornament.visible::before, .ornament.visible::after { width: min(120px, 18vw); }

    /* ── Encre de chapitre : passage du héros au manifeste ──
       Cette couche recouvre réellement le bas des deux pages et les
       absorbe dans le bleu du manifeste. Elle n'ajoute plus une forme
       sous le livre : elle fait disparaître sa découpe avant la suite. */
    .chapter-turn {
      position: relative;
      height: 126px;
      margin: -126px 0 0;
      z-index: 8;
      overflow: visible;
      pointer-events: none;
      background: linear-gradient(to bottom,
        rgba(18,15,28,0) 0%,
        rgba(18,15,28,.18) 22%,
        rgba(18,15,28,.72) 66%,
        var(--deep) 100%);
    }
    .chapter-turn::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 18% 100%, rgba(212,172,94,.07), transparent 34%),
        radial-gradient(ellipse at 82% 100%, rgba(212,172,94,.06), transparent 34%),
        linear-gradient(to bottom, transparent 48%, rgba(7,8,18,.16));
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    .chapter-turn::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 1px;
      background: linear-gradient(90deg,
        transparent 4%, rgba(184,144,58,.18) 24%,
        rgba(212,172,94,.5) 50%,
        rgba(184,144,58,.18) 76%, transparent 96%);
      box-shadow: 0 0 14px rgba(184,144,58,.13);
    }
    .chapter-turn span {
      position: absolute;
      left: 50%; bottom: -5px;
      width: 10px; height: 10px;
      background: linear-gradient(135deg, var(--gold-lt), var(--gold));
      border: 3px solid var(--deep);
      transform: translateX(-50%) rotate(45deg);
      box-shadow: 0 0 18px rgba(212,172,94,.42);
    }

    /* ── Couture entre sections ──────────────────
       Une bande de brume parchemin, à cheval sur les
       deux sections, dissout la démarcation franche
       entre leurs images de fond ; le filigrane d'or
       centré marque la transition. */
    .section-seam {
      position: relative;
      height: 160px;
      margin: -80px 0;
      z-index: 4;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to bottom,
        rgba(247,244,237,0)   0%,
        rgba(247,244,237,.92) 42%,
        rgba(247,244,237,.92) 58%,
        rgba(247,244,237,0)   100%);
    }

    /* ── Manifesto ── */
    .manifesto {
      background:
        linear-gradient(rgba(26,24,37,.82), rgba(26,24,37,.82)),
        url('../assets/histoire%20du%20gm.webp') center/cover no-repeat var(--deep);
      color: #fff; padding: 90px 0;
      position: relative;
      overflow: hidden;
    }
    /* Le d20 ambiant — filigrane qui tourne lentement */
    .manifesto .d20-ambient {
      position: absolute;
      top: 50%; left: 50%;
      width: min(520px, 90vw); height: min(520px, 90vw);
      transform: translate(-50%, -50%);
      stroke: var(--gold);
      stroke-width: .6;
      fill: none;
      opacity: .07;
      animation: d20Spin 90s linear infinite;
      pointer-events: none;
    }
    @keyframes d20Spin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(360deg); }
    }
    .manifesto-wrap {
      max-width: 660px; margin: 0 auto; text-align: center;
      position: relative; z-index: 1;
    }
    .manifesto .eyebrow { justify-content: center; color: var(--gold-lt); margin-bottom: 28px; }
    .manifesto .eyebrow::before { background: var(--gold-lt); }
    .manifesto-title {
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400;
      font-size: clamp(34px, 4.5vw, 52px);
      line-height: 1.1;
      color: #fff;
      margin-bottom: 28px;
    }
    /* Révélation mot à mot du titre */
    .manifesto-title .w {
      display: inline-block;
      opacity: 0;
      transform: translateY(16px) rotate(1.5deg);
      filter: blur(3px);
    }
    .manifesto-wrap.visible .manifesto-title .w {
      animation: wordIn .65s var(--ease) forwards;
      animation-delay: calc(var(--i) * .09s);
    }
    @keyframes wordIn {
      to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
    }
    .manifesto-body {
      font-size: 17px; color: rgba(255,255,255,.65);
      line-height: 1.75; margin-bottom: 14px;
    }
    .manifesto-close {
      font-family: 'BlackChancery', Georgia, serif;
      font-size: 21px; color: var(--gold-lt);
      margin-top: 30px; letter-spacing: .02em;
    }
    .gold-line {
      width: 44px; height: 2px;
      background: var(--gold);
      margin: 30px auto 0;
      border-radius: 2px;
      transform: scaleX(0);
      transition: transform .9s var(--ease) .5s;
    }
    .manifesto-wrap.visible .gold-line { transform: scaleX(1); }

    /* ── Formules ── */
    .offers {
      padding: 84px 0;
      background: url('../assets/tarifs.webp') center/cover no-repeat var(--parchment);
    }
    .section-head { margin-bottom: 52px; }
    .section-head h2 {
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400;
      font-size: clamp(30px, 4vw, 44px);
      color: var(--ink); margin: 12px 0 10px;
      letter-spacing: .01em; line-height: 1.1;
    }
    .section-sub {
      font-size: 16px; color: var(--dust);
      max-width: 50ch; line-height: 1.6;
    }

    /* Cards — inclinaison 3D pilotée par le curseur */
    .cards {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
      perspective: 1400px;
    }

    .card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px; overflow: hidden;
      display: flex; flex-direction: column;
      position: relative;
      transform-style: preserve-3d;
      transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
      transition: transform .18s ease-out, box-shadow .3s var(--ease), border-color .3s;
      will-change: transform;
    }
    .card:hover {
      --lift: -6px;
      box-shadow: 0 24px 48px rgba(28,22,16,.13);
      border-color: var(--gold);
    }
    /* Reflet doré qui suit le curseur */
    .card-shine {
      position: absolute; inset: 0;
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%),
        rgba(212,172,94,.16), transparent 70%);
      transition: opacity .3s;
    }
    .card:hover .card-shine { opacity: 1; }

    /* Featured card */
    .card-star {
      border-color: var(--gold);
      box-shadow: 0 6px 20px rgba(184,144,58,.12);
    }
    .star-badge {
      position: absolute; top: 12px; right: 12px; z-index: 5;
      background: var(--gold); color: #fff;
      font-family: system-ui, sans-serif;
      font-size: 10px; font-weight: 800;
      letter-spacing: .07em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 20px;
      box-shadow: 0 3px 10px rgba(184,144,58,.4);
      animation: badgePulse 3.5s ease-in-out infinite;
    }
    @keyframes badgePulse {
      0%,100% { box-shadow: 0 3px 10px rgba(184,144,58,.4); }
      50%     { box-shadow: 0 3px 18px rgba(184,144,58,.75); }
    }

    /* Card media */
    .card-media {
      position: relative;
      height: 340px;
      overflow: hidden;
      padding: 0;
      background: radial-gradient(ellipse at center top, rgba(184,144,58,.05) 0%, transparent 70%);
    }
    .card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 15%;
      display: block;
      -webkit-mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 55%,
        rgba(0,0,0,.65) 76%,
        rgba(0,0,0,.25) 90%,
        transparent 100%);
              mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 55%,
        rgba(0,0,0,.65) 76%,
        rgba(0,0,0,.25) 90%,
        transparent 100%);
      transition: transform .5s var(--ease);
    }
    .card:hover .card-media img {
      transform: scale(1.05);
    }

    /* Card body */
    .card-body {
      padding: 8px 22px 10px;
      margin-top: -60px;
      position: relative;
      z-index: 2;
      flex: 1;
    }
    .card-level {
      font-family: system-ui, sans-serif;
      font-size: 10px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--haze); margin-bottom: 8px;
    }
    .card h3 {
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400; font-size: 24px;
      color: var(--ink); margin-bottom: 6px;
      letter-spacing: .01em;
    }
    .card-price {
      font-family: system-ui, sans-serif;
      font-size: 26px; font-weight: 800;
      color: var(--gold); margin: 8px 0 12px;
      letter-spacing: -.01em;
    }
    .card-price sub {
      font-size: 13px; font-weight: 500;
      color: var(--haze); letter-spacing: 0;
    }
    .card-desc {
      font-size: 14px; color: var(--dust);
      line-height: 1.6; margin-bottom: 16px;
    }
    .card-feats { list-style: none; }
    .card-feats li {
      display: flex; align-items: baseline; gap: 10px;
      font-size: 13.5px; color: var(--warm);
      padding: 7px 0; border-top: 1px solid var(--stone);
      line-height: 1.45;
    }
    .card-feats li::before {
      content: '✦';
      font-size: 9px; color: var(--gold);
      flex-shrink: 0; margin-top: 2px;
      transition: transform .3s var(--ease);
    }
    .card:hover .card-feats li::before { transform: rotate(180deg) scale(1.2); }

    .card-foot { padding: 16px 22px 22px; }
    .btn-card {
      display: block; width: 100%; text-align: center;
      font-family: system-ui, sans-serif;
      font-size: 12.5px; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      padding: 14px 16px; border-radius: 11px;
      background: linear-gradient(165deg, #35291a 0%, var(--ink) 60%);
      color: var(--parchment);
      box-shadow:
        inset 0 0 0 1px rgba(184,144,58,.35),
        inset 0 1px 0 rgba(255,255,255,.06);
      transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .25s;
      position: relative; overflow: hidden;
    }
    .btn-card::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0; left: -60%;
      width: 40%;
      background: linear-gradient(105deg, transparent, rgba(212,172,94,.3), transparent);
      transform: skewX(-20deg);
      transition: left .55s var(--ease);
      pointer-events: none;
    }
    .btn-card:hover::after { left: 130%; }
    .btn-card:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 0 0 1px rgba(212,172,94,.7),
        0 10px 24px rgba(28,22,16,.22);
    }
    .btn-card:active { transform: translateY(0) scale(.98); }
    .btn-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    /* Carte vedette : bouton en or massif */
    .card-star .btn-card {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-lt) 100%);
      color: var(--deep2);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.3),
        0 2px 10px rgba(184,144,58,.22);
    }
    .card-star .btn-card:hover {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 10px 26px rgba(184,144,58,.42);
      filter: brightness(1.04);
    }

    /* ═══════════════════════════════════════════
       EXPLORATEUR D'OFFRES · trois portails
       Desktop : un chapitre actif, ample et lisible.
       Mobile  : rail horizontal natif avec scroll-snap.
       ═══════════════════════════════════════════ */
    .offers .section-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
      column-gap: 64px;
      align-items: end;
    }
    .offers .section-head .eyebrow { grid-column: 1 / -1; }
    .offers .section-head h2 { margin-bottom: 0; }
    .offers .section-head .section-sub { justify-self: end; }

    .offer-explorer {
      position: relative;
      --offer-ink: #171422;
      --offer-deep: #0d0d18;
      --offer-paper: rgba(255,255,255,.965);
    }
    .offer-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 7px;
      margin-bottom: 14px;
      border: 1px solid rgba(99,79,50,.13);
      border-radius: 18px;
      background: rgba(255,255,255,.62);
      box-shadow: 0 10px 30px rgba(58,43,24,.07);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .offer-tab {
      appearance: none;
      border: 0;
      min-width: 0;
      min-height: 72px;
      padding: 11px 14px;
      border-radius: 12px;
      background: transparent;
      color: var(--dust);
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      align-items: center;
      gap: 11px;
      text-align: left;
      cursor: pointer;
      transition: color .3s, background .3s, transform .3s var(--ease), box-shadow .3s;
    }
    .offer-tab:hover {
      color: var(--ink);
      background: rgba(184,144,58,.065);
      transform: translateY(-1px);
    }
    .offer-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    .offer-tab.is-active {
      color: var(--parchment);
      background:
        linear-gradient(110deg, rgba(255,255,255,.035), transparent 52%),
        linear-gradient(145deg, #252131, #12111d);
      box-shadow:
        inset 0 0 0 1px rgba(212,172,94,.24),
        0 8px 20px rgba(19,15,28,.2);
      transform: translateY(-1px);
    }
    .offer-tab-roman {
      width: 36px; height: 36px;
      border: 1px solid rgba(184,144,58,.32);
      border-radius: 50%;
      display: grid; place-items: center;
      font-family: Georgia, serif;
      font-size: 13px;
      color: var(--gold);
      transition: background .3s, color .3s, border-color .3s;
    }
    .offer-tab.is-active .offer-tab-roman {
      color: var(--deep2);
      border-color: var(--gold-lt);
      background: linear-gradient(135deg, var(--gold), var(--gold-lt));
      box-shadow: 0 0 16px rgba(184,144,58,.22);
    }
    .offer-tab-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .offer-tab-copy strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400;
      font-size: 19px;
      color: var(--ink);
    }
    .offer-tab.is-active .offer-tab-copy strong { color: #fff; }
    .offer-tab-copy small {
      font-family: system-ui, sans-serif;
      font-size: 9px; font-weight: 800;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--haze);
    }
    .offer-tab.is-active .offer-tab-copy small { color: rgba(212,172,94,.72); }
    .offer-tab-price {
      font-family: system-ui, sans-serif;
      font-size: 13px; font-weight: 800;
      color: var(--gold);
      white-space: nowrap;
    }

    .offer-stage {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(184,144,58,.28);
      border-radius: 26px;
      background: var(--offer-deep);
      box-shadow:
        0 30px 70px rgba(50,35,18,.18),
        0 6px 18px rgba(24,17,10,.1),
        inset 0 0 0 1px rgba(255,255,255,.025);
    }
    .offer-track { position: relative; }
    .offer-panel {
      display: none;
      grid-template-columns: minmax(0, 1.28fr) minmax(390px, .92fr);
      min-height: 500px;
      background: var(--offer-paper);
    }
    .offer-panel.is-active {
      display: grid;
      animation: offerPanelIn .62s var(--ease) both;
    }
    @keyframes offerPanelIn {
      from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
      to   { opacity: 1; transform: none; filter: none; }
    }
    .offer-visual {
      position: relative;
      min-width: 0;
      min-height: 500px;
      overflow: hidden;
      background: var(--offer-deep);
      isolation: isolate;
    }
    .offer-visual picture { position: absolute; inset: 0; display: block; }
    .offer-visual img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transform: scale(1.015);
      transition: transform 1.1s var(--ease), filter .5s;
    }
    .offer-panel.is-active .offer-visual img { transform: scale(1); }
    .offer-visual-shade {
      position: absolute; inset: 0;
      z-index: 1;
      background:
        linear-gradient(to top, rgba(8,8,16,.78) 0%, rgba(8,8,16,.13) 38%, transparent 64%),
        linear-gradient(to right, transparent 58%, rgba(13,13,24,.22));
      pointer-events: none;
    }
    .offer-chapter {
      position: absolute;
      top: 22px; left: 24px; z-index: 2;
      width: 48px; height: 48px;
      display: grid; place-items: center;
      border: 1px solid rgba(212,172,94,.55);
      border-radius: 50%;
      background: rgba(10,10,19,.56);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: var(--gold-lt);
      font-family: Georgia, serif;
      font-size: 17px;
      box-shadow: 0 8px 24px rgba(0,0,0,.22);
    }
    .offer-favorite {
      position: absolute;
      top: 24px; right: 24px; z-index: 2;
      padding: 8px 13px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(184,144,58,.94), rgba(212,172,94,.94));
      color: var(--deep2);
      font-family: system-ui, sans-serif;
      font-size: 9px; font-weight: 900;
      letter-spacing: .12em; text-transform: uppercase;
      box-shadow: 0 8px 22px rgba(0,0,0,.2);
    }
    .offer-visual-caption {
      position: absolute;
      left: 28px; right: 28px; bottom: 25px; z-index: 2;
      color: #fff;
      font-family: 'BlackChancery', Georgia, serif;
      font-size: clamp(24px, 2.5vw, 36px);
      line-height: 1.05;
      text-shadow: 0 3px 18px rgba(0,0,0,.62);
    }
    .offer-visual-caption span {
      display: block;
      margin-bottom: 8px;
      font-family: system-ui, sans-serif;
      font-size: 9px; font-weight: 800;
      letter-spacing: .18em; text-transform: uppercase;
      color: var(--gold-lt);
    }
    .offer-content {
      position: relative;
      padding: clamp(34px, 4vw, 48px);
      display: flex;
      flex-direction: column;
      min-width: 0;
      background:
        radial-gradient(circle at 100% 0%, rgba(184,144,58,.08), transparent 33%),
        linear-gradient(to bottom, rgba(255,255,255,.985), rgba(253,250,244,.985));
    }
    .offer-content::before {
      content: '';
      position: absolute;
      left: 0; top: 9%; bottom: 9%; width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(184,144,58,.5), transparent);
    }
    .offer-level {
      font-family: system-ui, sans-serif;
      font-size: 9px; font-weight: 900;
      letter-spacing: .18em; text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 8px;
    }
    .offer-heading h3 {
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400;
      font-size: clamp(31px, 3vw, 40px);
      line-height: 1;
      color: var(--ink);
      margin-bottom: 15px;
    }
    .offer-price {
      display: flex; align-items: baseline; gap: 5px;
      font-family: system-ui, sans-serif;
      font-size: 28px; font-weight: 850;
      letter-spacing: -.025em;
      color: var(--gold);
    }
    .offer-price small {
      font-size: 12px; font-weight: 600;
      letter-spacing: 0;
      color: var(--haze);
    }
    .offer-desc {
      margin: 18px 0 19px;
      font-size: 14.5px;
      line-height: 1.65;
      color: var(--dust);
    }
    .offer-details {
      margin-bottom: 22px;
      border-top: 1px solid var(--stone);
    }
    .offer-details summary {
      display: none;
      list-style: none;
    }
    .offer-details summary::-webkit-details-marker { display: none; }
    .offer-features { list-style: none; }
    .offer-features li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid var(--stone);
      font-size: 13px;
      line-height: 1.42;
      color: var(--warm);
    }
    .offer-features li::before {
      content: '';
      width: 6px; height: 6px;
      margin-top: 6px;
      flex: 0 0 auto;
      background: var(--gold);
      transform: rotate(45deg);
      box-shadow: 0 0 9px rgba(184,144,58,.24);
    }
    .offer-cta {
      margin-top: auto;
      min-height: 56px;
      padding: 10px 16px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 3px;
      background: linear-gradient(145deg, #27201a, #17130f);
      color: #fff;
      box-shadow:
        inset 0 0 0 1px rgba(184,144,58,.35),
        0 8px 20px rgba(30,22,14,.14);
      transition: transform .3s var(--ease), box-shadow .3s, filter .3s;
    }
    .offer-cta span {
      font-family: system-ui, sans-serif;
      font-size: 12px; font-weight: 850;
      letter-spacing: .1em; text-transform: uppercase;
    }
    .offer-cta small {
      font-family: system-ui, sans-serif;
      font-size: 9px;
      color: rgba(255,255,255,.48);
    }
    .offer-cta:hover {
      transform: translateY(-2px);
      box-shadow: inset 0 0 0 1px rgba(212,172,94,.68), 0 14px 28px rgba(30,22,14,.2);
    }
    .offer-cta-gold {
      background: linear-gradient(135deg, var(--gold), var(--gold-lt));
      color: var(--deep2);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 24px rgba(184,144,58,.24);
    }
    .offer-cta-gold small { color: rgba(18,15,28,.58); }
    .offer-mobile-nav { display: none; }

    @media (max-width: 760px) {
      .offers .section-head { display: block; }
      .offers .section-head h2 { margin: 12px 0 10px; }
      .offers .section-head .section-sub { max-width: 36ch; }

      .offer-tabs {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding: 5px;
        margin: 0 0 13px;
        border-radius: 15px;
        scrollbar-width: none;
      }
      .offer-tabs::-webkit-scrollbar { display: none; }
      .offer-tab {
        flex: 0 0 auto;
        min-height: 54px;
        width: auto;
        grid-template-columns: 29px auto;
        gap: 8px;
        padding: 8px 11px;
        border-radius: 11px;
      }
      .offer-tab-roman { width: 28px; height: 28px; font-size: 11px; }
      .offer-tab-copy strong { font-family: system-ui, sans-serif; font-size: 11px; font-weight: 800; }
      .offer-tab-copy small { display: none; }
      .offer-tab-price { display: none; }

      .offer-stage {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      .offer-track {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 18px;
        margin-inline: -18px;
        padding: 0 18px 18px;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
      }
      .offer-track::-webkit-scrollbar { display: none; }
      .offer-panel,
      .offer-panel.is-active {
        display: grid;
        flex: 0 0 calc(100vw - 36px);
        width: calc(100vw - 36px);
        max-width: 430px;
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        overflow: hidden;
        border: 1px solid rgba(184,144,58,.24);
        border-radius: 21px;
        background: #fff;
        box-shadow: 0 18px 46px rgba(50,35,18,.15);
        scroll-snap-align: center;
        animation: none;
      }
      .offer-panel.is-active {
        border-color: rgba(184,144,58,.58);
        box-shadow: 0 20px 50px rgba(50,35,18,.18), 0 0 0 1px rgba(184,144,58,.08);
      }
      .offer-visual {
        min-height: 0;
        aspect-ratio: 16 / 10;
      }
      .offer-visual-shade {
        background: linear-gradient(to top, rgba(8,8,16,.68), transparent 60%);
      }
      .offer-chapter {
        top: 14px; left: 14px;
        width: 38px; height: 38px;
        font-size: 13px;
      }
      .offer-favorite { top: 14px; right: 14px; padding: 7px 10px; font-size: 8px; }
      .offer-visual-caption {
        left: 18px; right: 18px; bottom: 16px;
        font-size: 24px;
      }
      .offer-visual-caption span { margin-bottom: 5px; font-size: 8px; }
      .offer-content { padding: 22px 18px 18px; }
      .offer-content::before { display: none; }
      .offer-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        align-items: center;
      }
      .offer-level { grid-column: 1; margin-bottom: 6px; }
      .offer-heading h3 { grid-column: 1; margin: 0; font-size: 28px; }
      .offer-price {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
        font-size: 23px;
      }
      .offer-price small { font-size: 10px; }
      .offer-desc { margin: 16px 0; font-size: 14px; line-height: 1.58; }
      .offer-details {
        margin-bottom: 16px;
        border-top: 1px solid var(--stone);
        border-bottom: 1px solid var(--stone);
      }
      .offer-details summary {
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        cursor: pointer;
        color: var(--warm);
        font-family: system-ui, sans-serif;
        font-size: 11px; font-weight: 850;
        letter-spacing: .09em; text-transform: uppercase;
      }
      .offer-details-icon {
        width: 17px; height: 17px;
        position: relative;
        border: 1px solid rgba(184,144,58,.35);
        border-radius: 50%;
      }
      .offer-details-icon::before,
      .offer-details-icon::after {
        content: '';
        position: absolute;
        left: 4px; right: 4px; top: 7px;
        height: 1px;
        background: var(--gold);
        transition: transform .3s var(--ease);
      }
      .offer-details-icon::after { transform: rotate(90deg); }
      .offer-details[open] .offer-details-icon::after { transform: rotate(0); }
      .offer-features { padding-bottom: 7px; }
      .offer-features li { padding: 7px 0; font-size: 12.5px; }
      .offer-cta { min-height: 54px; }
      .offer-mobile-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 2px;
      }
      .offer-mobile-nav span {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: rgba(99,79,50,.24);
        transition: width .3s var(--ease), background .3s;
      }
      .offer-mobile-nav span.is-active { width: 22px; border-radius: 10px; background: var(--gold); }
      .offer-mobile-nav small {
        margin-left: 8px;
        font-family: system-ui, sans-serif;
        font-size: 9px; font-weight: 700;
        letter-spacing: .08em; text-transform: uppercase;
        color: var(--haze);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .offer-panel.is-active { animation: none; }
      .offer-visual img,
      .offer-tab,
      .offer-details-icon::after { transition: none; }
      .offer-track { scroll-behavior: auto; }
    }

    /* ── Bloc info participants ── */
    .offers-note {
      margin-top: 52px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: clamp(28px, 4vw, 40px);
      position: relative;
      overflow: hidden;
    }
    .offers-note::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--gold) 0%, var(--gold-lt) 50%, var(--gold) 100%);
    }
    .offers-note-title {
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400;
      font-size: clamp(21px, 3vw, 26px);
      color: var(--ink);
      margin-bottom: 24px;
      letter-spacing: .01em;
    }
    .offers-note-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: start;
    }
    .offers-note-formats {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .offers-note-format {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .offers-note-icon {
      font-size: 20px;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .offers-note-format strong {
      display: block;
      font-family: system-ui, sans-serif;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 2px;
    }
    .offers-note-format p {
      font-size: 13.5px;
      color: var(--dust);
      line-height: 1.5;
      margin: 0;
    }
    .offers-note-format p strong {
      display: inline;
      color: var(--gold);
      font-size: inherit;
    }
    .offers-note-pricing {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .offers-note-pricing > p {
      font-size: 14.5px;
      color: var(--warm);
      line-height: 1.65;
      margin: 0;
    }
    .offers-note-pricing > p strong {
      color: var(--ink);
    }
    .offers-note-example {
      background: linear-gradient(
        to right,
        rgba(184,144,58,.08),
        rgba(184,144,58,.03) 70%,
        transparent
      );
      border-left: 2.5px solid var(--gold);
      padding: 14px 16px;
      border-radius: 0 10px 10px 0;
      font-family: system-ui, sans-serif;
      font-size: 13.5px;
      color: var(--warm);
      line-height: 1.6;
    }
    .offers-note-example strong {
      color: var(--gold);
      font-weight: 800;
    }
    .offers-note-example-label {
      display: inline-block;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gold);
      background: rgba(184,144,58,.12);
      padding: 2px 8px;
      border-radius: 4px;
      margin-right: 8px;
      vertical-align: middle;
    }
    @media (max-width: 760px) {
      .offers-note-body {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }

    /* ── Avis / Livre d'or ── */
    .avis {
      padding: 96px 0 100px;
      background: url('../assets/avis.webp') center/cover no-repeat var(--stone);
    }
    .avis-head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
    .avis-title {
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400;
      font-size: clamp(30px, 4.5vw, 44px);
      color: var(--ink);
      margin: 10px 0 14px;
    }
    .avis-sub { color: var(--dust); font-size: 15.5px; }

    /* — Formulaire — */
    .avis-form {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: clamp(26px, 4vw, 38px);
      max-width: 680px;
      margin: 0 auto 64px;
      position: relative;
      overflow: hidden;
    }
    .avis-form::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--gold-lt), var(--gold));
    }
    .avis-form-grid { display: grid; gap: 22px; }
    .avis-field label {
      display: block;
      font-family: system-ui, sans-serif;
      font-size: 11px; font-weight: 800;
      letter-spacing: .09em; text-transform: uppercase;
      color: var(--dust); margin-bottom: 8px;
    }
    .avis-field input[type="text"],
    .avis-field textarea {
      width: 100%;
      font-family: Georgia, serif;
      font-size: 15px;
      color: var(--ink);
      background: var(--parchment);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 12px 14px;
      transition: border-color .25s, box-shadow .25s;
    }
    .avis-field input:focus,
    .avis-field textarea:focus {
      outline: none;
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(184,144,58,.14);
    }
    .avis-field textarea { min-height: 110px; resize: vertical; }

    /* Critères étoilés */
    .avis-criteria {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 28px;
      padding: 18px 0 6px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .crit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .crit-name {
      font-family: system-ui, sans-serif;
      font-size: 13px; font-weight: 600;
      color: var(--warm);
    }
    .stars { display: inline-flex; gap: 3px; }
    .stars button {
      background: none; border: none; padding: 2px; cursor: pointer;
      line-height: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .stars svg {
      width: 21px; height: 21px;
      fill: none;
      stroke: var(--haze);
      stroke-width: 1.6;
      transition: transform .18s var(--ease), fill .18s, stroke .18s;
    }
    .stars button:hover svg { transform: scale(1.25) rotate(-8deg); }
    .stars button.lit svg,
    .stars button.hovering svg {
      fill: var(--gold);
      stroke: var(--gold);
    }
    .stars button.pop svg { animation: starPop .35s var(--ease); }
    @keyframes starPop {
      0% { transform: scale(1); }
      45% { transform: scale(1.5) rotate(10deg); }
      100% { transform: scale(1); }
    }

    /* Note globale */
    .avis-global {
      display: flex; align-items: center; gap: 14px;
      justify-content: center;
      padding: 4px 0;
    }
    .avis-global-num {
      font-family: 'BlackChancery', Georgia, serif;
      font-size: 40px;
      color: var(--gold);
      min-width: 74px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .avis-global-num small { font-size: 20px; color: var(--haze); }
    .avis-global .stars svg { width: 24px; height: 24px; }
    .avis-global-label {
      font-family: system-ui, sans-serif;
      font-size: 11px; font-weight: 800;
      letter-spacing: .09em; text-transform: uppercase;
      color: var(--dust);
    }

    .avis-submit {
      justify-self: center;
      font-family: system-ui, sans-serif;
      font-size: 13px; font-weight: 800;
      letter-spacing: .09em; text-transform: uppercase;
      color: var(--parchment);
      background: linear-gradient(165deg, #35291a 0%, var(--ink) 60%);
      border: none; border-radius: 999px;
      padding: 15px 38px;
      cursor: pointer;
      box-shadow:
        inset 0 0 0 1px rgba(184,144,58,.4),
        inset 0 1px 0 rgba(255,255,255,.06);
      transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    }
    .avis-submit:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 0 0 1px rgba(212,172,94,.75),
        0 12px 26px rgba(184,144,58,.28);
    }
    .avis-submit:active { transform: translateY(0) scale(.98); }
    .avis-submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    .avis-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: inset 0 0 0 1px rgba(184,144,58,.25); }
    .avis-msg {
      text-align: center;
      font-family: system-ui, sans-serif;
      font-size: 13.5px;
      min-height: 20px;
      transition: opacity .3s;
    }
    .avis-msg.ok  { color: #3d7a3d; }
    .avis-msg.err { color: var(--scarlet); }
    .hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

    /* — Liste des avis — */
    .avis-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      gap: 22px;
      max-width: 980px;
      margin: 0 auto;
    }
    .avis-card {
      position: relative;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 24px;
      overflow: hidden;
      cursor: pointer;
      opacity: 0;
      transform: translateY(18px);
      animation: avisIn .6s var(--ease) forwards;
      transition: box-shadow .3s, transform .3s var(--ease);
    }
    .avis-card:hover { box-shadow: 0 14px 34px rgba(28,22,16,.1); transform: translateY(-3px); }
    @keyframes avisIn { to { opacity: 1; transform: none; } }
    .avis-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    .avis-avatar {
      width: 42px; height: 42px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, var(--gold-lt), var(--gold));
      color: #fff;
      font-family: 'BlackChancery', Georgia, serif;
      font-size: 21px;
      display: grid; place-items: center;
      flex-shrink: 0;
      text-transform: uppercase;
      box-shadow: inset 0 -2px 5px rgba(0,0,0,.18);
    }
    .avis-who { min-width: 0; }
    .avis-pseudo {
      font-family: system-ui, sans-serif;
      font-size: 14px; font-weight: 700;
      color: var(--ink);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .avis-date {
      font-family: system-ui, sans-serif;
      font-size: 11.5px; color: var(--haze);
    }
    .avis-note { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .avis-note .stars { gap: 2px; }
    .avis-note .stars svg { width: 16px; height: 16px; }
    .avis-note-val {
      font-family: system-ui, sans-serif;
      font-size: 12.5px; font-weight: 800; color: var(--gold);
    }
    .avis-text {
      font-size: 14.5px;
      color: var(--warm);
      line-height: 1.6;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .avis-hint {
      margin-top: 12px;
      font-family: system-ui, sans-serif;
      font-size: 10.5px;
      letter-spacing: .07em; text-transform: uppercase;
      color: var(--haze);
      display: flex; align-items: center; gap: 6px;
    }
    .avis-hint::before {
      content: '';
      width: 18px; height: 1px; background: var(--haze);
    }

    /* Voile détail (survol / tap) */
    .avis-detail {
      position: absolute; inset: 0;
      background: linear-gradient(160deg, var(--deep), var(--deep2));
      color: #eee6d4;
      padding: 24px;
      display: flex; flex-direction: column; justify-content: center; gap: 13px;
      opacity: 0;
      transform: translateY(100%);
      transition: transform .45s var(--ease), opacity .35s;
      pointer-events: none;
    }
    .avis-card:hover .avis-detail,
    .avis-card.show-detail .avis-detail {
      opacity: 1;
      transform: none;
    }
    .avis-detail-title {
      font-family: 'BlackChancery', Georgia, serif;
      font-size: 17px;
      color: var(--gold-lt);
      margin-bottom: 2px;
    }
    .avis-detail .crit-row { gap: 10px; }
    .avis-detail .crit-name { color: rgba(238,230,212,.75); font-size: 12.5px; }
    .avis-detail .stars svg { width: 15px; height: 15px; stroke: rgba(238,230,212,.35); }
    .avis-detail .stars .lit svg { fill: var(--gold-lt); stroke: var(--gold-lt); }
    .avis-card:hover .avis-detail .crit-row,
    .avis-card.show-detail .avis-detail .crit-row {
      animation: critSlide .5s var(--ease) backwards;
    }
    .avis-card:hover .avis-detail .crit-row:nth-child(2) { animation-delay: .06s; }
    .avis-card:hover .avis-detail .crit-row:nth-child(3) { animation-delay: .12s; }
    .avis-card:hover .avis-detail .crit-row:nth-child(4) { animation-delay: .18s; }
    .avis-card:hover .avis-detail .crit-row:nth-child(5) { animation-delay: .24s; }
    @keyframes critSlide {
      from { opacity: 0; transform: translateX(-14px); }
      to   { opacity: 1; transform: none; }
    }

    /* Suppression (mode admin) */
    .avis-del {
      position: absolute; top: 10px; right: 10px;
      z-index: 5;
      width: 30px; height: 30px;
      border-radius: 50%;
      border: none;
      background: var(--scarlet);
      color: #fff;
      font-size: 15px; line-height: 1;
      cursor: pointer;
      display: grid; place-items: center;
      box-shadow: 0 3px 10px rgba(139,26,26,.4);
      transition: transform .2s var(--ease);
    }
    .avis-del:hover { transform: scale(1.15) rotate(90deg); }

    .avis-empty {
      grid-column: 1 / -1;
      text-align: center;
      color: var(--dust);
      font-style: italic;
      padding: 30px 0;
    }
    .avis-card.removing {
      animation: avisOut .4s var(--ease) forwards;
    }
    @keyframes avisOut {
      to { opacity: 0; transform: scale(.85); }
    }

    @media (max-width: 640px) {
      .avis-criteria { grid-template-columns: 1fr; }
      .avis { padding: 72px 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .avis-card, .avis-detail, .stars svg { animation: none !important; transition: none !important; }
    }

    /* ── Contact ── */
    .contact {
      padding: 84px 0;
      background:
        linear-gradient(rgba(10,11,24,.28), rgba(10,11,24,.38)),
        url('../assets/contact.webp') center / 100% 100% no-repeat var(--deep);
      position: relative; overflow: hidden;
    }

    /* Tant qu'un chapitre est loin sous la ligne de flottaison, son image
       n'est ni téléchargée ni peinte. Une marge généreuse la prépare avant
       que l'utilisateur puisse la voir. Les couleurs de repli restent en place. */
    html.js .art-deferred:not(.art-ready) { background-image: none !important; }

    /* Les boucles décoratives ne tournent que lorsque leur chapitre est visible. */
    .hero-diptych:not(.motion-active) .diptych-logo,
    .hero-diptych:not(.motion-active) .diptych-spine::after,
    .hero-diptych:not(.motion-active) .scroll-hint svg,
    .manifesto:not(.motion-active) .d20-ambient {
      animation-play-state: paused;
    }
    body.scrolled-away .corner-spark,
    body.scrolled-away .corner-spark::after,
    body.scrolled-away .flip-invite-pulse { animation-play-state: paused; }
    /* Vignette de lecture : le décor reste présent sur les bords
       tandis que le contenu conserve un contraste constant. */
    .contact::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse at center, rgba(9,10,23,.08) 0%, rgba(9,10,23,.28) 48%, rgba(9,10,23,.03) 76%),
        linear-gradient(to bottom, rgba(8,9,20,.04), rgba(8,9,20,.18));
      pointer-events: none;
    }
    @keyframes starTwinkle {
      0%,100% { opacity: .5; }
      50%     { opacity: 1; }
    }
    .contact-wrap { max-width: 600px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
    .contact .eyebrow { justify-content: center; color: var(--gold-lt); margin-bottom: 20px; }
    .contact .eyebrow::before { background: var(--gold-lt); }
    .contact-title {
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400;
      font-size: clamp(30px, 4vw, 44px);
      color: #fff; margin-bottom: 14px; line-height: 1.1;
    }
    .contact-sub {
      font-size: 16px; color: rgba(255,255,255,.55);
      line-height: 1.65; margin-bottom: 38px;
    }
    .contact-list { display: flex; flex-direction: column; gap: 10px; }
    .contact-item {
      display: flex; align-items: center; gap: 14px;
      padding: 16px 20px;
      background: linear-gradient(110deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
      border: 1px solid rgba(212,172,94,.16);
      border-radius: 12px; color: #fff;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: background .18s, border-color .18s, transform .2s var(--ease), box-shadow .25s;
    }
    .contact-item:hover {
      background: rgba(255,255,255,.1);
      border-color: rgba(184,144,58,.45);
      transform: translateX(5px);
      box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 0 0 1px rgba(184,144,58,.15);
    }
    .c-icon {
      width: 42px; height: 42px; flex-shrink: 0;
      border-radius: 10px; background: rgba(255,255,255,.09);
      display: flex; align-items: center; justify-content: center;
      transition: background .2s;
    }
    .contact-item:hover .c-icon { background: rgba(184,144,58,.2); }
    .c-icon svg {
      width: 17px; height: 17px;
      stroke: rgba(255,255,255,.8);
      fill: none; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round;
    }
    .c-text { min-width: 0; text-align: left; }
    .c-text strong {
      display: block;
      font-family: system-ui, sans-serif;
      font-size: 15px; font-weight: 600;
      overflow-wrap: anywhere;
    }
    .c-text small { font-family: system-ui, sans-serif; font-size: 12px; color: rgba(255,255,255,.4); }
    .contact-note {
      margin-top: 26px;
      font-family: system-ui, sans-serif;
      font-size: 13px; color: rgba(255,255,255,.3);
    }

    /* ── Footer ── */
    footer {
      background: var(--deep2); padding: 26px 0;
      font-family: system-ui, sans-serif;
      font-size: 12px; color: rgba(255,255,255,.25);
    }
    .footer-row {
      display: flex; align-items: center;
      justify-content: space-between; gap: 16px; flex-wrap: wrap;
    }
    .footer-brand { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.4); font-weight: 600; }
    .footer-brand img {
      width: 26px;
      height: 26px;
      object-fit: contain;
      border-radius: 6px;
      opacity: .7;
    }

    /* ── Reveal (scroll) ── */
    .reveal {
      opacity: 0; transform: translateY(22px);
      filter: blur(3px);
      transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }
    .d1 { transition-delay: .1s; }
    .d2 { transition-delay: .22s; }
    .d3 { transition-delay: .34s; }

    /* ── Modal générique (contact + info) ── */
    .modal-backdrop {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(18, 15, 28, .65);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      opacity: 0; visibility: hidden;
      transition: opacity .28s ease, visibility .28s ease;
    }
    .modal-backdrop.open { opacity: 1; visibility: visible; }
    .modal-backdrop.open .modal-card {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    .modal-card {
      background: var(--parchment);
      border-radius: 22px;
      width: 100%; max-width: 460px;
      overflow: hidden;
      box-shadow:
        0 32px 64px rgba(18,15,28,.35),
        0 0 0 1px rgba(184,144,58,.18);
      transform: translateY(18px) scale(.97);
      opacity: 0;
      transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .34s ease;
    }
    .modal-bar {
      height: 3px;
      background: linear-gradient(90deg, var(--gold) 0%, var(--gold-lt) 50%, var(--gold) 100%);
      background-size: 200% 100%;
      animation: barFlow 4s linear infinite;
    }
    @keyframes barFlow {
      from { background-position: 0% 0; }
      to   { background-position: 200% 0; }
    }
    .modal-inner { padding: 32px 32px 28px; }
    .modal-head {
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 16px;
      margin-bottom: 22px;
    }
    .modal-eyebrow {
      font-family: system-ui, sans-serif;
      font-size: 10px; font-weight: 700;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 6px;
    }
    .modal-title {
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400; font-size: 27px;
      color: var(--ink); line-height: 1.1;
    }
    .modal-close {
      width: 34px; height: 34px; flex-shrink: 0;
      border-radius: 8px; border: 1.5px solid var(--line);
      background: transparent; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .16s, border-color .16s, transform .2s var(--ease);
      margin-top: 2px;
    }
    .modal-close:hover { background: var(--stone); border-color: var(--haze); transform: rotate(90deg); }
    .modal-close svg { width: 14px; height: 14px; stroke: var(--dust); stroke-width: 2.2; stroke-linecap: round; }
    .modal-sub {
      font-family: system-ui, sans-serif;
      font-size: 14px; color: var(--dust);
      line-height: 1.6; margin-bottom: 22px;
    }
    .modal-items { display: flex; flex-direction: column; gap: 10px; }
    .modal-item {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px; color: var(--ink);
      transition: border-color .18s, box-shadow .18s, transform .2s var(--ease);
    }
    .modal-item:hover {
      border-color: var(--gold);
      box-shadow: 0 4px 14px rgba(184,144,58,.1);
      transform: translateX(4px);
    }
    .modal-icon {
      width: 40px; height: 40px; flex-shrink: 0;
      border-radius: 10px; background: var(--stone);
      display: flex; align-items: center; justify-content: center;
    }
    .modal-icon svg {
      width: 16px; height: 16px;
      stroke: var(--gold); fill: none;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    }
    .modal-item-text strong {
      display: block; font-family: system-ui, sans-serif;
      font-size: 14.5px; font-weight: 600; color: var(--ink);
    }
    .modal-item-text small {
      font-family: system-ui, sans-serif;
      font-size: 11.5px; color: var(--haze);
    }
    .modal-note {
      font-family: system-ui, sans-serif;
      font-size: 12px; color: var(--haze);
      text-align: center; margin-top: 20px; line-height: 1.5;
    }

    /* ── Info modal ── */
    .modal-card.modal-info { max-width: 540px; }
    .info-body {
      font-family: Georgia, serif;
      font-size: 15.5px; line-height: 1.75;
      color: var(--warm);
    }
    .info-body p { margin-bottom: 14px; }
    .info-body p:last-child { margin-bottom: 0; }
    .info-body strong {
      color: var(--ink);
      font-weight: 700;
    }
    .info-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--line), transparent);
      margin: 22px 0;
    }
    .info-highlight {
      background: linear-gradient(
        to right,
        rgba(184,144,58,.09),
        rgba(184,144,58,.04) 60%,
        transparent
      );
      border-left: 2.5px solid var(--gold);
      padding: 14px 16px;
      border-radius: 0 8px 8px 0;
      margin: 4px 0;
    }
    .info-highlight p { margin: 0; font-size: 15px; color: var(--warm); }
    .info-highlight strong { color: var(--scarlet); font-family: 'BlackChancery', Georgia, serif; font-weight: 400; font-size: 17px; letter-spacing: .02em; }
    .info-footer {
      margin-top: 22px;
      text-align: center;
    }
    .info-footer .btn-info {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: system-ui, sans-serif;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .07em; text-transform: uppercase;
      padding: 13px 22px;
      border-radius: 10px;
      background: linear-gradient(165deg, #35291a 0%, var(--ink) 60%);
      color: var(--parchment);
      box-shadow:
        inset 0 0 0 1px rgba(184,144,58,.4),
        inset 0 1px 0 rgba(255,255,255,.06);
      transition: transform .3s var(--ease), box-shadow .3s var(--ease);
      cursor: pointer;
      border: none;
    }
    .info-footer .btn-info:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 0 0 1px rgba(212,172,94,.75),
        0 10px 22px rgba(28,22,16,.22);
    }
    .info-footer .btn-info:active { transform: translateY(0) scale(.98); }
    .info-footer .btn-info:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

    @media (max-width: 480px) {
      .modal-inner { padding: 24px 18px 22px; }
      .modal-title { font-size: 23px; }
      .info-body { font-size: 14px; line-height: 1.65; }
      .info-body p { margin-bottom: 12px; }
      .info-highlight { padding: 12px 14px; }
      .info-highlight p { font-size: 13.5px; }
      .info-highlight strong { font-size: 15.5px; }
      .info-divider { margin: 18px 0; }
      .info-footer { margin-top: 18px; }
      .info-footer .btn-info { padding: 10px 18px; font-size: 13px; }
    }

    /* ═══════════════════════════════════════════
       TOURNEZ LA PAGE · pli diagonal de livre
       La page blanche (moitié droite du grimoire) se
       corne depuis son coin inférieur droit. Tirée en
       diagonale, elle se replie sur la page sombre de
       gauche, révélant l'aventure dessous. Le pli est
       calculé par réflexion réelle (vraie géométrie
       de page pliée), rendu via clip-path + matrix.
       ═══════════════════════════════════════════ */

    /* Zone du pli = la page blanche (moitié droite),
       fixée au viewport (ne défile pas, immunisée
       contre les sauts de barre d'adresse mobile) */
    .flip-zone {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      left: 50vw;
      z-index: 120;
      pointer-events: none;
      overflow: visible;
      visibility: visible;
      transition: opacity .3s ease, visibility 0s linear 0s;
    }
    body.scrolled-away .flip-zone {
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease, visibility 0s linear .3s;
    }
    @media (max-width: 960px) {
      .flip-zone { left: 0; }
    }

    /* La page suivante (l'aventure), révélée sous le pli */
    .flip-reveal {
      position: absolute; inset: 0;
      background:
        linear-gradient(rgba(18,15,28,.5), rgba(18,15,28,.5)),
        url('../assets/Vertbois.webp') center/cover no-repeat var(--deep2);
      display: flex;
      align-items: center;
      justify-content: center;
      clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
      will-change: clip-path;
    }
    .flip-teaser {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      text-align: center;
      padding: 24px;
      opacity: 0;
      will-change: transform, opacity;
    }
    .flip-teaser .d20-next {
      width: 48px; height: 48px;
      stroke: var(--gold-lt);
      stroke-width: 1.1;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 18px rgba(184,144,58,.45));
      animation: d20SlowSpin 14s linear infinite;
    }
    @keyframes d20SlowSpin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .flip-eyebrow {
      font-family: system-ui, sans-serif;
      font-size: 10px; font-weight: 700;
      letter-spacing: .28em; text-transform: uppercase;
      color: var(--gold-lt);
    }
    .flip-title {
      font-family: 'BlackChancery', Georgia, serif;
      font-weight: 400;
      font-size: clamp(26px, 3.4vw, 42px);
      color: var(--parchment);
      line-height: 1.1;
      text-shadow: 0 0 30px rgba(184,144,58,.3);
    }
    .flip-line {
      width: min(160px, 40vw); height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      box-shadow: 0 0 14px rgba(184,144,58,.5);
    }

    /* Ombre projetée sur la page révélée, le long du pli */
    .flip-shade {
      position: absolute; inset: 0;
      pointer-events: none;
      will-change: clip-path;
    }

    /* Ombre projetée à gauche du pli, sur la page
       restée à plat (elle s'étale avec la traction) */
    .flip-cast {
      position: absolute; inset: 0;
      pointer-events: none;
      will-change: clip-path;
    }

    /* Le cône de page enroulée : verso parchemin,
       pointe libre qui suit l'orientation du tirage,
       bords incurvés, reflet cylindrique le long du
       pli et ombrage vers la pointe.
       Sa boîte est ADAPTATIVE (pilotée en JS) : petite
       au repos pour réduire la surface des filtres
       drop-shadow, étendue pendant un vrai tirage. */
    .flip-back {
      position: absolute;
      top: 0; bottom: 0; right: 0;
      left: -100%;               /* peut recouvrir la page de gauche */
      will-change: clip-path;
      filter:
        drop-shadow(0 4px 10px rgba(18,15,28,.30))
        drop-shadow(-10px -6px 22px rgba(18,15,28,.16));
    }


    /* ── Zone de saisie du coin (invisible) ────── */
    .corner-hit {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 150px; height: 150px;
      z-index: 125;
      cursor: grab;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: opacity .3s ease;
    }
    @media (max-width: 960px) {
      .corner-hit {
        /* Plus grande, et décollée du bord pour ne pas
           déclencher le geste "retour" du système au bord d'écran */
        width: 60px; height: 60px;
        bottom: 14px; right: 14px;
      }
    }
    body.scrolled-away .corner-hit {
      opacity: 0;
      pointer-events: none;
    }
    .corner-hit:active { cursor: grabbing; }
    .corner-hit:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: -4px; border-radius: 10px; }

    /* L'étincelle qui attire l'œil vers le coin */
    .corner-spark {
      position: absolute;
      right: 30px; bottom: 30px;
      width: 7px; height: 7px;
      background: var(--gold-lt);
      border-radius: 50%;
      pointer-events: none;
      box-shadow: 0 0 10px 2px rgba(212,172,94,.9), 0 0 26px 7px rgba(212,172,94,.35);
      animation: sparkPulse 2.6s ease-in-out infinite;
    }
    .corner-spark::after {
      content: '';
      position: absolute;
      left: 50%; top: 50%;
      width: 22px; height: 22px;
      transform: translate(-50%, -50%);
      background:
        linear-gradient(0deg,   transparent 46%, rgba(255,246,220,.9) 50%, transparent 54%),
        linear-gradient(90deg,  transparent 46%, rgba(255,246,220,.9) 50%, transparent 54%);
      animation: sparkRay 2.6s ease-in-out infinite;
    }
    @keyframes sparkPulse {
      0%, 100% { opacity: .45; transform: scale(.7); }
      50%      { opacity: 1;   transform: scale(1.1); }
    }
    @keyframes sparkRay {
      0%, 100% { opacity: 0;  transform: translate(-50%,-50%) scale(.4) rotate(0deg); }
      50%      { opacity: .9; transform: translate(-50%,-50%) scale(1)  rotate(45deg); }
    }

    /* Invite "Tournez la page !" — diagonale, suit le pli
       Élément extérieur : ne gère QUE le fondu (transition pure)
       Élément intérieur : ne gère QUE la pulsation (animation pure)
       → les deux ne se marchent plus dessus, le fondu reste fluide */
    .flip-invite {
      position: fixed;
      right: 42px;
      bottom: 118px;
      z-index: 124;
      pointer-events: none;
      opacity: 1;
      transition: opacity .5s ease;
    }
    .flip-invite-pulse {
      display: inline-block;
      transform: rotate(-45deg);
      transform-origin: 100% 100%;
      font-family: 'BlackChancery', Georgia, serif;
      font-size: clamp(17px, 2vw, 22px);
      letter-spacing: .04em;
      color: var(--ink);
      white-space: nowrap;
      text-shadow: 0 1px 0 rgba(255,255,255,.6);
      animation: invitePulse 3.2s ease-in-out infinite;
    }
    .flip-invite em {
      font-style: normal;
      color: var(--gold);
    }
    .flip-invite.gone,
    body.scrolled-away .flip-invite {
      opacity: 0;
    }
    @keyframes invitePulse {
      0%, 100% { opacity: .55; transform: rotate(-45deg) scale(.985); }
      50%      { opacity: 1;   transform: rotate(-45deg) scale(1.02); }
    }
    @media (max-width: 960px) {
      .flip-invite { right: 18px; bottom: 56px; }
      .flip-invite-pulse { font-size: 14px; }
      .flip-invite .flip-invite-extra { display: none; } /* "Tournez !" tout court, place réduite */
    }

    /* ── Desktop : invite sur la diagonale du pli ──────────
       Le centre du texte est ancré à égale distance des bords
       droit et bas (122px) : il est donc exactement sur la
       diagonale à 45° que suit la pointe du coin replié
       (idleTarget = [W-L, H-L]) — la flèche du pli vise le
       centre de la phrase. Pas d'encadré : lettrage nu, teinte
       parchemin/or avec fin halo sombre pour rester lisible
       sur le fondu du chapter-turn comme sur le parchemin. */
    @media (min-width: 961px) {
      .flip-invite {
        right: 122px;
        bottom: 122px;
        /* recentre l'élément sur le point (100vw-122px, 100vh-122px) */
        transform: translate(50%, 50%);
      }
      .flip-invite-pulse {
        transform-origin: 50% 50%;
        font-size: 24px;
        color: rgba(247,244,237,.92);
        text-shadow:
          0 1px 2px rgba(10,8,16,.65),
          0 0 12px rgba(10,8,16,.4);
      }
      .flip-invite em {
        color: var(--gold-lt);
        text-shadow:
          0 1px 2px rgba(10,8,16,.65),
          0 0 12px rgba(212,172,94,.35);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .flip-invite-pulse { animation: none; opacity: .9; }
    }

    /* ═══════════════════════════════════════════
       M1 · Hero cinématique mobile (< 960px)
       ═══════════════════════════════════════════ */
    @media (max-width: 960px) {
      .hero-diptych {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        min-height: auto;
        max-height: none;
        background: var(--deep2);
      }
      .diptych-left {
        min-height: clamp(300px, 44vh, 420px);
      }
      .diptych-logo { width: min(360px, 75%); }

      .diptych-spine {
        background: none;
        min-height: 36px;
        position: relative;
      }
      .diptych-spine::after {
        width: 9px;
        height: 9px;
        box-shadow:
          0 0 14px rgba(184,144,58,.55),
          0 0 28px rgba(184,144,58,.25);
      }

      .diptych-right {
        background:
          linear-gradient(to bottom, rgba(18,15,28,.12) 0%, rgba(18,15,28,.24) 100%),
          url('../assets/intro.webp') center / 100% 100% no-repeat var(--deep2);
        padding: 12px clamp(24px, 6vw, 48px) clamp(56px, 10vw, 80px);
        position: relative;
      }

      .diptych-right::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
          radial-gradient(2.5px 2.5px at 12% 20%, rgba(212,172,94,.45) 0%, transparent 100%),
          radial-gradient(2px   2px   at 86% 38%, rgba(212,172,94,.38) 0%, transparent 100%),
          radial-gradient(1.5px 1.5px at 72% 10%, rgba(212,172,94,.42) 0%, transparent 100%),
          radial-gradient(2px   2px   at 25% 72%, rgba(212,172,94,.35) 0%, transparent 100%),
          radial-gradient(1.5px 1.5px at 92% 82%, rgba(212,172,94,.30) 0%, transparent 100%);
        pointer-events: none;
        z-index: 0;
      }
      .diptych-content {
        position: relative;
        z-index: 1;
        margin: 0 auto;
      }

      .diptych-right h1           { color: var(--parchment); }
      .diptych-right h1 i         { color: #d4453a; }
      .diptych-right .hero-lead   { color: rgba(255,255,255,.68); }
      .diptych-right .hero-note   { color: rgba(255,255,255,.42); }

      .diptych-right .btn-dark {
        background: linear-gradient(135deg, var(--gold) 0%, var(--gold-lt) 100%);
        color: var(--deep2);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.3),
          0 4px 14px rgba(184,144,58,.28);
      }
      .diptych-right .btn-dark:hover {
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.32),
          0 10px 26px rgba(184,144,58,.45);
        filter: brightness(1.04);
      }
      .diptych-right .btn-ghost {
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
        color: var(--parchment);
        background: rgba(255,255,255,.05);
      }
      .diptych-right .btn-ghost:hover {
        box-shadow:
          inset 0 0 0 1px var(--gold-lt),
          0 8px 20px rgba(184,144,58,.2);
        background: rgba(184,144,58,.14);
        color: var(--parchment);
      }
      .diptych-right .btn-ghost::before { color: var(--gold-lt); }

      .diptych-right .whatisrpg       { color: var(--gold-lt); }
      .diptych-right .whatisrpg:hover { color: var(--gold); }

      .cards { grid-template-columns: 1fr; gap: 20px; }
    }

    @media (max-width: 640px) {
      header { padding: 0; }
      header .nav {
        width: 100%;
        height: 60px;
        padding: 0 12px;
        border-radius: 0;
      }
      .nav-link:not(.nav-cta) { display: none; }
      .nav-links { gap: 2px; padding: 3px; border-color: transparent; background: transparent; }
      .admin-view-counter__trigger {
        min-width: 46px;
        height: 36px;
        gap: 4px;
        padding: 5px 7px;
      }
      .admin-view-counter__trigger svg { width: 16px; height: 16px; }
      .admin-view-counter__summary small { display: none; }
      .admin-view-counter__summary strong { font-size: 12px; }
      .admin-view-counter__panel {
        right: -68px;
        width: min(244px, calc(100vw - 20px));
      }
      .admin-view-counter__panel::before { right: 93px; }
      .brand { gap: 9px; }
      .brand img { width: 40px; height: 40px; }
      .brand-long {
        display: inline;
        font-size: clamp(15px, 4.6vw, 18px);
        white-space: nowrap;
      }
      .brand-short { display: none; }
      .brand-kicker { font-size: 7px; letter-spacing: .16em; margin-top: 5px; }
      .cta-full { display: none; }
      .cta-short { display: inline; }
      .diptych-left { min-height: clamp(260px, 42vh, 360px); }
      .diptych-logo { width: min(300px, 78%); }
      .diptych-right h1 { font-size: clamp(30px, 7vw, 40px); }
      .diptych-right { padding-bottom: clamp(48px, 10vw, 72px); }
      .hero-actions { flex-direction: column; }
      .btn { justify-content: center; }
      .scroll-hint { display: none; }
      .manifesto, .offers, .contact { padding: 60px 0; }
      .footer-row { flex-direction: column; text-align: center; }
      .contact {
        background:
          linear-gradient(rgba(10,11,24,.24), rgba(10,11,24,.34)),
          url('../assets/contact-mobile.webp') center / 100% 100% no-repeat var(--deep);
      }
    }
    @media (max-width: 480px) {
      .container { padding: 0 18px; }
      header .nav { padding: 0 8px; }
      .diptych-right h1 { font-size: 30px; }
      .brand-kicker { display: none; }
      .nav-cta { padding: 9px 15px; font-size: 11px; margin-left: 0; }
      .admin-view-counter__trigger { min-width: 42px; padding-inline: 6px; }
      .contact-item { padding: 14px; gap: 10px; }
      .contact-item:first-child .c-text strong {
        font-size: 13.5px;
        letter-spacing: -.01em;
      }
    }
    @media (max-width: 400px) {
      body.admin-stats-enabled .brand-long { display: none; }
      body.admin-stats-enabled .brand-short {
        display: inline;
        font-size: 17px;
        white-space: nowrap;
      }
    }

    /* Orientation paysage courte */
    @media (max-height: 620px) and (min-width: 961px) {
      .hero-diptych { min-height: 520px; }
      .diptych-logo { width: min(420px, 75%); }
    }

    /* ── Respect de la préférence utilisateur pour le mouvement ── */
    @media (prefers-reduced-motion: reduce) {
      .opening { display: none; }
      body.holding { overflow: auto; }
      .carousel-slide             { transition: opacity .3s ease; }
      .carousel-slide-image img   { animation: none; }
      .scroll-hint svg.d20        { animation: none; }
      .diptych-spine::after       { animation: none; }
      .star-badge                 { animation: none; }
      .contact::before            { animation: none; }
      .modal-bar                  { animation: none; }
      .manifesto .d20-ambient     { animation: none; }
      .hero-in,
      body.opened .hero-in        { animation: none; opacity: 1; transform: none; filter: none; }
      .diptych-logo,
      .diptych-right h1 i::after,
      body.opened .diptych-right h1 i::after { transition: none; transform: scaleX(1); }
      .manifesto-title .w,
      .manifesto-wrap.visible .manifesto-title .w { animation: none; opacity: 1; transform: none; filter: none; }
      .reveal { transition: opacity .3s ease; transform: none; filter: none; }
      .gold-line, .manifesto-wrap.visible .gold-line { transform: scaleX(1); transition: none; }
      .ornament::before, .ornament::after { transition: none; }
      .ornament.visible::before, .ornament.visible::after { width: min(120px, 18vw); }
      .ornament span, .ornament.visible span { transition: none; transform: rotate(45deg) scale(1); }
      .card { transform: none !important; }
      .corner-spark        { animation: none; opacity: 1; }
      .corner-spark::after { animation: none; opacity: 0; }
      .flip-teaser .d20-next { animation: none; }
    }

    /* ═══════════════════════════════════════════
       ILLUSTRATIONS & FINITIONS MOBILE
       Variantes verticales : elles évitent le fort
       recadrage produit par les visuels desktop.
       Aucun comportement JavaScript n'est modifié.
       ═══════════════════════════════════════════ */
    @media (max-width: 960px) {
      .flip-reveal {
        background:
          linear-gradient(rgba(18,15,28,.32), rgba(18,15,28,.32)),
          url('../assets/Vertbois-mobile.webp') center / 100% 100% no-repeat var(--deep2);
      }
    }

    @media (max-width: 760px) {
      .manifesto {
        background:
          linear-gradient(rgba(18,15,28,.24), rgba(18,15,28,.24)),
          url('../assets/histoire-mobile.webp') center / 100% 100% no-repeat var(--deep);
      }

      /* Ces fonds ont été composés d'après les hauteurs réelles mesurées
         sur la mise en page mobile (référence 360 px). Les détails restent
         aux extrémités et la zone centrale calme absorbe les petits écarts
         de hauteur entre téléphones, sans rupture visible entre les cartes. */
      .offers {
        background-color: #fbf5e9;
        background-image: url('../assets/tarifs-mobile.webp');
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .avis {
        background-color: #f8f2e7;
        background-image: url('../assets/avis-mobile.webp');
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    @media (max-width: 640px) {
      .chapter-turn {
        height: 96px;
        margin: -96px 0 0;
      }

      .section-seam {
        height: 112px;
        margin: -56px 0;
      }

      .manifesto-title {
        font-size: clamp(32px, 9vw, 39px);
        margin-bottom: 24px;
      }
      .manifesto-body {
        color: rgba(255,255,255,.76);
        font-size: 15.5px;
        line-height: 1.72;
        text-align: left;
      }
      .manifesto-close {
        font-size: 19px;
        line-height: 1.35;
      }

      .offers .section-head { margin-bottom: 34px; }
      .cards { gap: 18px; }
      .card { border-radius: 15px; }
      .card-media { height: 280px; }
      .card-body {
        padding: 8px 18px 10px;
        margin-top: -48px;
      }
      .card-foot { padding: 14px 18px 18px; }
      .offers-note {
        margin-top: 34px;
        padding: 26px 20px;
        border-radius: 15px;
      }
      .offers-note-example {
        overflow-wrap: anywhere;
        padding: 13px 14px;
      }

      .avis-head { margin-bottom: 34px; }
      .avis-form {
        padding: 25px 18px;
        margin-bottom: 46px;
        border-radius: 15px;
      }
      .avis-form-grid { gap: 19px; }
      .crit-row { gap: 8px; }
      .avis-global { flex-wrap: wrap; }
      .avis-global-num {
        min-width: 64px;
        font-size: 35px;
      }
      .avis-submit {
        width: 100%;
        padding: 14px 18px;
      }
    }

    /* ═══════════════════════════════════════════
       BOUTONS ÉDITORIAUX · encre & page pliée
       04 = action principale : bande d'encre qui
            se dissout, soulignée d'un filet d'or.
       08 = action secondaire : languette de papier
            découpée, ombre mate et coin replié.
       La matière est une vraie fibre de papier ;
       les formes et les états restent pilotés en CSS.
       ═══════════════════════════════════════════ */

    /* — 04 · actions principales — */
    .btn-dark,
    .btn-card,
    .offer-cta,
    .avis-submit,
    .info-footer .btn-info {
      --cta-line: var(--gold-lt);
      position: relative;
      isolation: isolate;
      overflow: visible;
      min-height: 52px;
      min-width: 224px;
      padding: 14px 24% 14px 24px;
      border: 0;
      border-radius: 0;
      background: none;
      color: var(--parchment);
      box-shadow: none;
      filter: drop-shadow(0 7px 7px rgba(28,22,16,.20));
      cursor: pointer;
      transform: translateZ(0);
      transition:
        transform .28s var(--ease),
        filter .28s var(--ease),
        color .2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-dark::before,
    .btn-card::before,
    .offer-cta::before,
    .avis-submit::before,
    .info-footer .btn-info::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image:
        linear-gradient(90deg,
          rgba(24,20,29,.99) 0%,
          rgba(24,20,29,.96) 66%,
          rgba(24,20,29,.73) 83%,
          rgba(24,20,29,0) 100%),
        url('../assets/button-paper.webp');
      background-size: 100% 100%, 390px 195px;
      background-position: 0 0, center;
      background-blend-mode: normal, multiply;
      clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%);
      -webkit-mask-image: linear-gradient(90deg, #000 0 82%, rgba(0,0,0,.82) 90%, transparent 100%);
      mask-image: linear-gradient(90deg, #000 0 82%, rgba(0,0,0,.82) 90%, transparent 100%);
      transform-origin: left center;
      transition: transform .42s var(--ease), background-position .5s var(--ease);
      pointer-events: none;
    }
    .btn-dark::after,
    .btn-card::after,
    .offer-cta::after,
    .avis-submit::after,
    .info-footer .btn-info::after {
      content: '';
      position: absolute;
      top: auto;
      left: 0;
      right: 9%;
      bottom: 1px;
      width: auto;
      height: 1px;
      z-index: -1;
      background: linear-gradient(90deg, var(--cta-line), rgba(212,172,94,.56) 72%, transparent 100%);
      transform: none;
      transform-origin: left center;
      transition: transform .42s var(--ease), opacity .28s ease;
      pointer-events: none;
    }
    .btn-dark:hover,
    .btn-card:hover,
    .offer-cta:hover,
    .avis-submit:hover,
    .info-footer .btn-info:hover {
      transform: translateY(-2px);
      filter: drop-shadow(0 12px 10px rgba(28,22,16,.26));
      background: none;
      box-shadow: none;
    }
    .btn-dark:hover::before,
    .btn-card:hover::before,
    .offer-cta:hover::before,
    .avis-submit:hover::before,
    .info-footer .btn-info:hover::before {
      transform: translateX(2px) scaleX(1.018);
      background-position: 4px 0, 52% 48%;
    }
    .btn-dark:hover::after,
    .btn-card:hover::after,
    .offer-cta:hover::after,
    .avis-submit:hover::after,
    .info-footer .btn-info:hover::after {
      left: 0;
      transform: scaleX(1.025);
    }
    .btn-dark:active,
    .btn-card:active,
    .offer-cta:active,
    .avis-submit:active,
    .info-footer .btn-info:active {
      transform: translateY(1px) scale(.988);
      filter: drop-shadow(0 3px 3px rgba(28,22,16,.18));
    }
    .btn-dark:focus-visible,
    .btn-card:focus-visible,
    .offer-cta:focus-visible,
    .avis-submit:focus-visible,
    .info-footer .btn-info:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 4px;
    }
    .offer-cta {
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 3px;
    }
    .offer-cta span,
    .offer-cta small { position: relative; z-index: 1; }
    .offer-cta small { color: rgba(248,241,224,.58); }
    .offer-cta-gold {
      --cta-line: #3b2b19;
      color: var(--deep2);
    }
    .offer-cta-gold::before {
      background-image:
        linear-gradient(90deg,
          rgba(207,162,69,.99) 0%,
          rgba(212,172,94,.96) 66%,
          rgba(212,172,94,.70) 83%,
          rgba(212,172,94,0) 100%),
        url('../assets/button-paper.webp');
      background-blend-mode: multiply, normal;
    }
    .offer-cta-gold small { color: rgba(18,15,28,.58); }
    .avis-submit { justify-self: center; min-width: 260px; }
    .avis-submit:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none;
      filter: grayscale(.35) drop-shadow(0 3px 3px rgba(28,22,16,.12));
    }
    .info-footer .btn-info { min-width: 230px; justify-content: center; }

    /* — 08 · actions secondaires et accès de contact — */
    .btn-ghost,
    .contact-item,
    .modal-item {
      position: relative;
      isolation: isolate;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
      color: var(--ink);
      filter: drop-shadow(0 7px 6px rgba(28,22,16,.17));
      transform: translateZ(0);
      transition: transform .28s var(--ease), filter .28s var(--ease), color .2s ease;
    }
    .btn-ghost { min-height: 52px; min-width: 224px; padding: 14px 48px 14px 28px; }
    .btn-ghost::before,
    .contact-item::before,
    .modal-item::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image:
        linear-gradient(98deg,
          rgba(255,255,255,.08) 0%,
          rgba(255,255,255,.02) 62%,
          rgba(55,47,53,.07) 82%,
          rgba(38,32,39,.30) 100%),
        url('../assets/button-paper.webp');
      background-size: 100% 100%, 430px 215px;
      background-position: center;
      background-blend-mode: normal, normal;
      clip-path: polygon(5% 0, 92% 0, 100% 100%, 0 100%, 0 27%);
      transition: transform .42s var(--ease), background-position .5s var(--ease);
      pointer-events: none;
    }
    .btn-ghost::after,
    .contact-item::after,
    .modal-item::after {
      content: none;
      display: none;
    }
    .btn-ghost:hover,
    .contact-item:hover,
    .modal-item:hover {
      color: var(--ink);
      background: none;
      border-color: transparent;
      box-shadow: none;
      transform: translateY(-2px);
      filter: drop-shadow(0 12px 10px rgba(28,22,16,.23));
    }
    .btn-ghost:hover::before,
    .contact-item:hover::before,
    .modal-item:hover::before {
      transform: translateX(2px);
      background-position: 52% 48%;
    }
    .btn-ghost:active,
    .contact-item:active,
    .modal-item:active {
      transform: translateY(1px) scale(.99);
      filter: drop-shadow(0 3px 3px rgba(28,22,16,.14));
    }
    .btn-ghost:focus-visible,
    .contact-item:focus-visible,
    .modal-item:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 4px;
    }
    .contact-item {
      padding: 17px 64px 17px 22px;
      color: var(--ink);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .contact-item .c-text strong { color: var(--ink); }
    .contact-item .c-text small { color: rgba(47,40,36,.58); }
    .contact-item .c-icon,
    .modal-item .modal-icon {
      border-radius: 0;
      background: rgba(184,144,58,.12);
      clip-path: polygon(50% 0, 100% 18%, 100% 82%, 50% 100%, 0 82%, 0 18%);
    }
    .contact-item .c-icon svg { stroke: var(--gold); }
    .contact-item:hover .c-icon { background: rgba(184,144,58,.2); }
    .modal-item { padding: 15px 58px 15px 18px; }

    /* Les sélecteurs d'offres sont des onglets, pas des CTA :
       même matière, mais une silhouette de feuillet plus compacte. */
    .offer-tabs {
      gap: 10px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .offer-tab {
      position: relative;
      isolation: isolate;
      border-radius: 0;
      background: none;
      box-shadow: none;
      filter: drop-shadow(0 4px 4px rgba(28,22,16,.10));
    }
    .offer-tab::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(100deg, rgba(255,255,255,.22), rgba(255,255,255,0)), url('../assets/button-paper.webp') center / 380px 190px;
      clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%, 0 12px);
      transition: transform .3s var(--ease), background .3s ease;
    }
    .offer-tab:hover {
      background: none;
      box-shadow: none;
      transform: translateY(-2px);
    }
    .offer-tab.is-active {
      color: var(--parchment);
      background: none;
      box-shadow: none;
      filter: drop-shadow(0 7px 7px rgba(19,15,28,.22));
    }
    .offer-tab.is-active::before {
      background:
        linear-gradient(100deg, rgba(32,27,39,.98), rgba(17,15,25,.91)),
        url('../assets/button-paper.webp') center / 380px 190px;
      background-blend-mode: multiply;
    }
    .offer-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

    /* Petits contrôles : aucune grosse forme, seulement une découpe papier. */
    .modal-close,
    .avis-del {
      border: 0;
      border-radius: 0;
      background: url('../assets/button-paper.webp') center / 160px 80px;
      clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%);
      filter: drop-shadow(0 4px 4px rgba(28,22,16,.16));
    }
    .modal-close:hover,
    .avis-del:hover {
      background: url('../assets/button-paper.webp') center / 170px 85px;
      border-color: transparent;
      filter: drop-shadow(0 7px 6px rgba(28,22,16,.22));
    }
    .modal-close:focus,
    .modal-close:focus-visible,
    .avis-del:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    .whatisrpg .q-mark {
      border-radius: 0;
      color: var(--ink);
      background: url('../assets/button-paper.webp') center / 120px 60px;
      clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%);
      filter: drop-shadow(0 3px 3px rgba(28,22,16,.18));
      box-shadow: none;
    }
    .whatisrpg:focus-visible,
    .stars button:focus-visible,
    .offer-details summary:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
    }

    @media (max-width: 960px) {
      /* Sur la page d'introduction sombre, le bouton 04 s'inverse
         en papier clair sans changer de construction. */
      .diptych-right .btn-dark {
        --cta-line: #392817;
        color: var(--deep2);
        background: none;
        box-shadow: none;
        filter: drop-shadow(0 9px 8px rgba(0,0,0,.28));
      }
      .diptych-right .btn-dark::before {
        background-image:
          linear-gradient(90deg,
            rgba(201,155,63,.99) 0%,
            rgba(212,172,94,.95) 66%,
            rgba(212,172,94,.68) 83%,
            rgba(212,172,94,0) 100%),
          url('../assets/button-paper.webp');
        background-blend-mode: multiply, normal;
      }
      .diptych-right .btn-ghost { color: var(--ink); background: none; box-shadow: none; }
      .diptych-right .btn-ghost:hover { color: var(--ink); background: none; }
    }

    @media (max-width: 760px) {
      .offer-tabs { padding: 0; gap: 7px; }
      .offer-tab { border-radius: 0; }
      .offer-cta { padding-right: 22%; }
    }

    @media (max-width: 640px) {
      .btn-dark,
      .btn-ghost,
      .avis-submit { width: 100%; }
      .contact-item { padding-right: 52px; }
    }

    @media (max-width: 360px) {
      .btn-dark {
        padding-left: 20px;
        padding-right: 18%;
        font-size: 12px;
        letter-spacing: .055em;
      }
      .contact-item {
        gap: 10px;
        padding: 14px 42px 14px 14px;
      }
      .contact-item .c-icon { width: 38px; height: 38px; }
      .contact-item:first-child .c-text strong {
        font-size: 12.5px;
        letter-spacing: -.025em;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .btn-dark,
      .btn-card,
      .offer-cta,
      .avis-submit,
      .info-footer .btn-info,
      .btn-ghost,
      .contact-item,
      .modal-item,
      .offer-tab,
      .modal-close,
      .avis-del,
      .btn-dark::before,
      .btn-card::before,
      .offer-cta::before,
      .avis-submit::before,
      .info-footer .btn-info::before,
      .btn-ghost::before,
      .contact-item::before,
      .modal-item::before { transition: none; }
    }

    /* Les inclinaisons pilotées par le curseur n'apportent rien
       sur un écran tactile et peuvent rester bloquées après un tap. */
    @media (hover: none), (pointer: coarse) {
      .card {
        transform: none !important;
        will-change: auto;
      }
      .card:hover { --lift: 0px; }
      .card:hover .card-media img { transform: none; }
      .card-shine { display: none; }

      /* Le fondu et le déplacement restent présents ; le flou transitoire,
         coûteux sur les petits GPU, est supprimé sans altérer la composition. */
      .hero-in,
      .reveal,
      .manifesto-title .w,
      .offer-panel.is-active { filter: none; }

      /* Pas d'état hover persistant après un tap. */
      .btn-dark:hover,
      .btn-card:hover,
      .offer-cta:hover,
      .avis-submit:hover,
      .info-footer .btn-info:hover,
      .btn-ghost:hover,
      .contact-item:hover,
      .modal-item:hover { transform: none; }
    }

    /* ═══════════════════════════════════════════
       ANIME.JS · mise en scène légère et progressive
       Les effets ci-dessous utilisent uniquement transform + opacity :
       aucune image supplémentaire, aucun moteur 3D lourd.
       ═══════════════════════════════════════════ */
    html.anime-ready .opening {
      perspective: 1800px;
      /* Le véritable hero est directement sous les couvertures : quand elles
         s'écartent, la page apparaît dans la fente au lieu d'un fond bleu uni. */
      background: transparent;
      isolation: isolate;
    }
    html.anime-ready .opening-half {
      transition: none;
      backface-visibility: hidden;
      transform-style: preserve-3d;
    }
    html.anime-ready .opening-center { transition: none; }
    html.anime-ready .opening-left  { transform-origin: right center; }
    html.anime-ready .opening-right { transform-origin: left center; }
    html.anime-ready .opening-title,
    html.anime-ready .opening-sub,
    html.anime-ready .opening-line {
      animation: none;
    }
    html.anime-ready .opening-line {
      width: min(220px, 55vw);
      transform-origin: center;
    }
    .opening-seal {
      position: relative;
      width: clamp(76px, 9vw, 104px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid rgba(212,172,94,.72);
      background:
        radial-gradient(circle at 38% 30%, rgba(255,255,255,.13), transparent 26%),
        radial-gradient(circle, rgba(184,144,58,.2), rgba(18,15,28,.9) 67%);
      box-shadow:
        inset 0 0 0 5px rgba(184,144,58,.07),
        inset 0 0 22px rgba(184,144,58,.18),
        0 0 0 1px rgba(8,7,14,.9),
        0 12px 32px rgba(0,0,0,.42),
        0 0 36px rgba(184,144,58,.18);
      transform-style: preserve-3d;
    }
    .opening-seal::before,
    .opening-seal::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    .opening-seal::before {
      inset: -9px;
      border: 1px solid rgba(212,172,94,.2);
      box-shadow: 0 0 18px rgba(184,144,58,.12);
    }
    .opening-seal::after {
      inset: 7px;
      border: 1px dashed rgba(212,172,94,.34);
    }
    .opening-seal img {
      width: 72%;
      height: 72%;
      object-fit: contain;
      filter: drop-shadow(0 4px 9px rgba(0,0,0,.38));
      transform: translateZ(16px);
    }
    html.anime-ready .opening-seal { opacity: 0; }

    /* Anime.js remplace les anciennes transitions globales par des entrées
       ciblées. Le contenu reste instantanément lisible en cas de rechargement. */
    html.anime-ready body.opened .hero-in { animation: none; }
    html.anime-ready body:not(.anime-settled) .diptych-logo { animation: none; }
    html.anime-ready body.anime-settled .hero-in {
      opacity: 1;
      transform: none;
      filter: none;
    }
    html.anime-ready .reveal { transition: none; }
    html.anime-ready .reveal.anime-revealing { will-change: transform, opacity; }
    html.anime-ready .offer-panel.is-active { animation: none; }

    /* Relief 3D très léger des découpes papier. La perspective est portée
       par le parent : aucun canvas/WebGL et aucun coût de téléchargement. */
    .paper-perspective { perspective: 900px; }
    .paper-interactive {
      transform-style: preserve-3d;
      backface-visibility: hidden;
      transform-origin: 50% 72%;
    }
    .paper-press {
      position: absolute;
      width: 86px;
      height: 86px;
      margin: -43px 0 0 -43px;
      z-index: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(30,22,15,.2) 0%, rgba(30,22,15,.08) 38%, transparent 70%);
      mix-blend-mode: multiply;
      pointer-events: none;
      opacity: 0;
    }

    /* REDUCTO : cercle construit en CSS, puis animé et peuplé à la demande.
       Les particules n'existent que pendant le sortilège. */
    .secret-reveal > :not(.reducto-ritual) { position: relative; z-index: 2; }
    .secret-reveal::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: 0;
      background:
        radial-gradient(circle at center, rgba(61,145,224,.22), transparent 34%),
        radial-gradient(ellipse at center, rgba(5,9,22,.05), rgba(5,8,19,.72) 78%);
      transition: opacity .45s ease;
      pointer-events: none;
    }
    .secret-reveal.show::before { opacity: 1; }
    html.anime-ready .secret-reveal,
    html.anime-ready .secret-reveal-word,
    html.anime-ready .secret-reveal-sub,
    html.anime-ready .diptych-left.secret-active .diptych-carousel { transition: none; }
    .reducto-ritual {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }
    .reducto-ring,
    .reducto-core {
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 50%;
      opacity: 0;
      transform: translate(-50%, -50%) scale(.1);
      will-change: transform, opacity;
    }
    .reducto-ring-a {
      width: min(62vw, 430px);
      aspect-ratio: 1;
      border: 1px solid rgba(168,220,255,.85);
      box-shadow: 0 0 18px rgba(90,174,255,.42), inset 0 0 22px rgba(90,174,255,.16);
    }
    .reducto-ring-b {
      width: min(47vw, 325px);
      aspect-ratio: 1;
      border: 2px dashed rgba(200,235,255,.58);
      box-shadow: 0 0 28px rgba(83,163,255,.22);
    }
    .reducto-ring-c {
      width: min(32vw, 220px);
      aspect-ratio: 1;
      border: 1px solid rgba(226,246,255,.9);
      outline: 1px solid rgba(86,165,255,.24);
      outline-offset: 9px;
    }
    .reducto-core {
      width: min(18vw, 122px);
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(238,250,255,.86) 0%, rgba(121,201,255,.35) 27%, rgba(79,142,255,.12) 51%, transparent 72%);
      box-shadow: 0 0 44px rgba(104,190,255,.38);
    }
    .reducto-particles { position: absolute; inset: 0; }
    .reducto-particle {
      position: absolute;
      left: 50%; top: 50%;
      width: var(--size, 4px);
      height: var(--size, 4px);
      margin: calc(var(--size, 4px) / -2);
      border-radius: 50%;
      background: #dff5ff;
      box-shadow: 0 0 9px rgba(116,197,255,.9);
      opacity: 0;
      will-change: transform, opacity;
    }

    /* Atmosphère discrète sous la page pendant la prise et le rabattement. */
    .page-turn-aura {
      position: fixed;
      inset: 0;
      z-index: 118;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      background:
        radial-gradient(ellipse 44% 92% at 50% 52%, rgba(212,172,94,.12), transparent 67%),
        linear-gradient(90deg, rgba(10,8,16,.12), transparent 44%, rgba(10,8,16,.18));
      will-change: opacity;
    }
    html.anime-ready .page-turn-aura { visibility: visible; }
    body.scrolled-away .page-turn-aura { visibility: hidden; }

    @media (max-width: 960px) {
      .opening-seal { width: 78px; }
      .reducto-ring-a { width: min(86vw, 390px); }
      .reducto-ring-b { width: min(66vw, 300px); }
      .reducto-ring-c { width: min(45vw, 205px); }
    }
    @media (hover: none), (pointer: coarse) {
      .paper-perspective { perspective: none; }
      .paper-interactive { will-change: auto; }
      .paper-press { mix-blend-mode: normal; opacity: .1; }
    }
    @media (prefers-reduced-motion: reduce) {
      html.anime-ready .opening { display: none; }
      html.anime-ready .hero-in,
      html.anime-ready body.opened .hero-in,
      html.anime-ready .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
      }
      .reducto-ritual,
      .page-turn-aura { display: none; }
      .paper-interactive { transform: none !important; }
    }