@font-face { font-family: 'Archivo'; src: url('/assets/archivo.woff2') format('woff2'); font-weight: 100 900; font-display: block; }
  @font-face { font-family: 'Inter'; src: url('/assets/inter.woff2') format('woff2'); font-weight: 100 900; font-display: block; }

  :root {
    --noir: #050505;
    --fusain: #141414;
    --graphite: #2a2a2a;
    --acier: #9a9a9a;
    --argent: #d9d9d9;
    --blanc: #f5f5f5;
    --titre: 'Archivo', system-ui, sans-serif;
    --corps: 'Inter', system-ui, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--noir); color: var(--blanc); }
  body {
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 26rem);
    justify-content: center;
    align-content: center;
    padding: max(44px, env(safe-area-inset-top)) 14px max(30px, env(safe-area-inset-bottom));
    font-family: var(--corps);
    -webkit-font-smoothing: antialiased;
  }

  .bon {
    position: relative;
    width: 100%;
    background: var(--fusain);
    box-shadow: inset 0 0 0 1px var(--graphite);
    overflow: hidden;
  }

  /* ---------- Le corps : un petit hero, Nico de profil et la valeur ---------- */
  /* Hauteur qui suit le contenu : 64 px au moins entre le logo et « Bon cadeau » (retour de Tey, 11.11.2026) */
  .corps {
    position: relative;
    min-height: 340px;
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    isolation: isolate;
  }
  .logo {
    font-family: var(--titre);
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
  }
  .logo .pt { color: var(--acier); }
  .lueur {
    position: absolute;
    z-index: -1;
    width: 340px;
    height: 340px;
    right: -70px;
    top: 10px;
    background: radial-gradient(closest-side, rgba(245, 245, 245, 0.16), rgba(245, 245, 245, 0.05) 55%, transparent);
  }
  .portrait {
    position: absolute;
    z-index: -1;
    right: -84px;
    top: 30px;
    height: calc(100% - 30px);
    max-height: 392px;
    width: auto;
  }
  /* Voile à gauche : le texte reste lisible là où il croise l'épaule */
  .corps::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, var(--fusain) 22%, rgba(20, 20, 20, 0.82) 46%, rgba(20, 20, 20, 0) 72%);
  }
  .valeur-bloc { margin-top: auto; padding-top: 64px; }
  .intitule {
    font-family: var(--titre);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.01em;
  }
  .valeur {
    display: flex;
    align-items: baseline;
    font-family: var(--titre);
    font-weight: 800;
    font-size: 124px;
    line-height: 0.82;
    letter-spacing: -0.055em;
    margin: 8px 0 12px -5px;
  }
  .valeur .suffixe { color: var(--acier); font-size: 0.4em; letter-spacing: 0; margin-left: 0.12em; }
  /* Le texte s'arrête avant l'épaule (un long petit mot passait sur la photo) ; le filet garde toute la largeur */
  .dedicace {
    margin-top: 16px;
    padding-top: 14px;
    padding-right: 30%;
    border-top: 1px solid var(--graphite);
    text-wrap: pretty;
    font-size: 15px;
    line-height: 1.45;
  }
  /* Les guillemets sont dans le texte (pas en CSS) : le bon redessiné en image les reprend tels quels */
  .dedicace .message { display: block; margin-top: 4px; color: var(--acier); }

  /* ---------- Version sans photo : le mot SPLIT. au trait, debout le long du bord, coupé comme sur le site ---------- */
  .filigrane { display: none; }
  .sans-photo .portrait, .sans-photo .lueur { display: none; }
  .sans-photo .corps { overflow: hidden; }
  .sans-photo .corps::after { display: none; }
  .sans-photo .filigrane {
    display: block;
    position: absolute;
    z-index: -1;
    top: -14px;
    right: -46px;
    writing-mode: vertical-rl;
    font-family: var(--titre);
    font-weight: 800;
    font-size: 176px;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px #3a3a3a;
    user-select: none;
  }
  .sans-photo .filigrane .pt { -webkit-text-stroke-color: var(--acier); }

  /* ---------- Le pli : pointillé et deux encoches, comme un ticket détaché ---------- */
  .pli {
    position: relative;
    height: 0;
    border-top: 1px dashed #3a3a3a;
    margin: 0 18px;
  }
  .encoche {
    position: absolute;
    top: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--noir);
    box-shadow: inset 0 0 0 1px var(--graphite);
  }
  .encoche.g { left: -30px; }
  .encoche.d { right: -30px; }

  /* ---------- Le talon : ce que Nico scanne ---------- */
  .talon { padding: 22px 22px 22px; }
  .scan { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
  .coins {
    --coin: 0.8rem;
    padding: 7px;
    color: rgba(245, 245, 245, 0.7);
    background:
      linear-gradient(currentColor, currentColor) top left / var(--coin) 1px no-repeat,
      linear-gradient(currentColor, currentColor) top left / 1px var(--coin) no-repeat,
      linear-gradient(currentColor, currentColor) top right / var(--coin) 1px no-repeat,
      linear-gradient(currentColor, currentColor) top right / 1px var(--coin) no-repeat,
      linear-gradient(currentColor, currentColor) bottom left / var(--coin) 1px no-repeat,
      linear-gradient(currentColor, currentColor) bottom left / 1px var(--coin) no-repeat,
      linear-gradient(currentColor, currentColor) bottom right / var(--coin) 1px no-repeat,
      linear-gradient(currentColor, currentColor) bottom right / 1px var(--coin) no-repeat;
  }
  .qr { display: block; width: 124px; height: 124px; padding: 9px; background: var(--blanc); }
  .qr svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
  .infos dt { font-size: 12.5px; color: var(--acier); }
  .infos dd {
    font-family: var(--titre);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.04em;
    margin: 2px 0 12px;
    font-variant-numeric: tabular-nums;
  }
  .infos dd:last-child { margin-bottom: 0; }
  .consigne { margin-top: 18px; font-size: 14px; line-height: 1.45; }
  .adresse {
    margin-top: 12px;
    font-style: normal;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--acier);
  }
  /* Cible de 45 px au doigt, sans pousser la mise en page (marges négatives) */
  .adresse a { color: inherit; text-decoration: none; display: inline-block; padding: 15px 0; margin: -15px 0; }

  /* ---------- Rendu réel : montants longs, solde, états ---------- */
  .valeur.long { font-size: 92px; }
  .etat { margin-top: 18px; font-size: 14px; line-height: 1.45; }
  .bon.inactif .qr { opacity: 0.18; }
  .bon.inactif .valeur > span:first-child { color: var(--acier); }
  .marque {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 10px 5px;
    font-family: var(--titre);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 0 1px var(--acier);
    color: var(--argent);
  }
  .nico {
    display: block;
    margin-bottom: 14px;
    padding: 14px 16px;
    background: var(--blanc);
    color: var(--noir);
    font-family: var(--titre);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
  }
  .nico:focus-visible, .adresse a:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }
  @media (max-width: 360px) {
    .valeur { font-size: 104px; }
    .valeur.long { font-size: 78px; }
    .qr { width: 108px; height: 108px; }
  }
  /* Petits iPhone (375 et moins) : le texte gris croise l'épaule. Le buste s'efface vers le bas à gauche,
     le visage reste net (contraste mesuré sur les pixels, 11.11.2026). */
  @media (max-width: 380px) {
    .portrait {
      -webkit-mask-image: linear-gradient(200deg, #000 50%, transparent 75%);
      mask-image: linear-gradient(200deg, #000 50%, transparent 75%);
    }
  }

  /* ---------- Autour du bon : le merci, le bouton « en image », le retour au site ---------- */
  .merci { margin-bottom: 18px; }
  .merci-titre {
    font-family: var(--titre);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
  .merci-titre + p { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--argent); }
  .actions { margin-top: 16px; }
  .enregistrer {
    display: block;
    width: 100%;
    padding: 15px 16px;
    border: 0;
    background: var(--blanc);
    color: var(--noir);
    font: 700 16px/1.2 var(--titre);
    cursor: pointer;
  }
  .enregistrer:hover { background: #fff; }
  .enregistrer[disabled] { opacity: 0.55; cursor: progress; }
  .aide { font-size: 13px; line-height: 1.45; color: var(--acier); text-align: center; }
  .aide:not(:empty) { margin-top: 10px; }
  .retour {
    display: block;
    padding: 14px 0;
    margin-top: 4px;
    text-align: center;
    font-size: 14px;
    color: var(--argent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--acier);
  }
  .enregistrer:focus-visible, .retour:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }

  /* Repli quand le téléphone n'a pas le menu de partage : l'image par-dessus la page, à garder d'un appui long */
  .image-du-bon {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    background: var(--noir);
  }
  .image-du-bon:focus { outline: none; }
  .image-du-bon[hidden] { display: none; }
  .image-du-bon img {
    justify-self: center;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    box-shadow: 0 0 0 1px var(--graphite);
    -webkit-touch-callout: default;
  }
  .image-du-bon p { font-size: 14px; line-height: 1.45; color: var(--argent); text-align: center; }
  .image-du-bon .boutons { display: grid; gap: 8px; margin-top: 12px; }
  .image-du-bon a, .image-du-bon button {
    display: block;
    padding: 14px 10px;
    border: 0;
    font: 700 15px/1.2 var(--titre);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  .image-du-bon a { background: var(--blanc); color: var(--noir); }
  .image-du-bon button { background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 1px var(--acier); }