/* ============================================================
   IN MY ELEMENT — 11 · LA CARTE DE LA MAISON  +  LE GAUFRAGE
   « Elle ne donne droit à rien.
     Elle dit seulement que vous êtes passé. »

   Deux blocs indépendants dans un seul fichier :

   1. .emboss-*  LE GAUFRAGE EN DIRECT — composant autonome.
                 Aucune règle ne dépend de .carte : il s'installe
                 aussi bien sur une carte 3D que sur une zone
                 posée au-dessus d'une photographie produit
                 (accessoires.html, produit.html).
   2. .carte-*   LA SECTION D'ACCUEIL — le sommet de la page.

   Tous les tokens sont appelés avec repli : les deux blocs
   tiennent même sans tokens.css (aperçu isolé).
   Aucune dépendance externe, aucune requête.
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1 — LE GAUFRAGE
   ------------------------------------------------------------
   La physique tenue de bout en bout : lumière d'atelier en
   HAUT-GAUCHE, donc

     · la paroi HAUTE du creux est dans l'ombre  → liseré sombre
       au-dessus du glyphe ;
     · la lèvre BASSE reçoit la lumière           → liseré clair
       au-dessous ;
     · le FOND du creux est plus sombre que le champ, et
       s'éclaircit vers le bas (lumière rasante qui rebondit) ;
     · autour, le cuir est COMPRESSÉ par la matrice : une cuvette
       à peine perceptible, plus sombre, avec son propre bord
       de lumière. C'est elle qui interdit la lecture
       « texte posé sur une image ».

   Un gaufrage n'est jamais une ombre portée : il n'y a rien
   au-dessus du cuir. Aucune règle ci-dessous ne projette
   d'ombre vers l'extérieur.
   ════════════════════════════════════════════════════════════ */

.emboss{
  /* — géométrie — */
  --emboss-size:  clamp(1.9rem, 5.2vw, 3.6rem);
  --emboss-track: .17em;
  --emboss-rot:   0deg;          /* angle de la zone sur une photo */
  --emboss-depth: 1;             /* 0 → 1,4 : profondeur du coup de presse */

  /* — le fond du creux, gaufrage à FROID (aucune encre, aucun métal) —
       bible §8 : sur champ vert, le glyphe est aubergine. */
  --emboss-blind-1: #2C1418;
  --emboss-blind-2: #4A2530;
  --emboss-blind-3: #4A2A28;
  --emboss-blind-4: #65464E;     /* la lèvre basse — ≥ 4,8:1 sur vert */

  /* — le fond du creux, gaufrage à l'OR (feuille déposée à chaud) —
       dominante --gold-ink #4A2530 ; le seul arrêt clair est la
       lèvre basse, sur les 15 derniers pour cent de la hauteur :
       une spéculaire, jamais la couleur lue. */
  --emboss-gold-1: #331A22;
  --emboss-gold-2: #4A2530;
  --emboss-gold-3: #4A2530;
  --emboss-gold-4: #4A2530;
  --emboss-gold-5: #6B3A47;

  /* — les deux arêtes du creux — */
  --emboss-lip:  rgba(255,255,255,.62);        /* lèvre basse, éclairée   */
  --emboss-wall: rgba(28,32,12,.72);           /* paroi haute, dans l'ombre */

  position: relative;
  display: inline-grid;
  place-items: center;
  transform: rotate(var(--emboss-rot));
  line-height: 1;
  isolation: isolate;
  /* la place de la frappe est tenue AVANT la frappe :
     la carte vierge ne se recompose pas à la première lettre. */
  min-block-size: calc(var(--emboss-size) * .8);
  min-inline-size: calc(var(--emboss-size) * 1.35);
}

/* — la cuvette : le cuir écrasé autour du coup de matrice.
     AUCUNE arête : une cuvette qui montre son contour est une
     pastille collée. Uniquement des dégradés qui meurent dans le
     champ, et un flou qui interdit toute silhouette. */
.emboss-bed{
  position: absolute;
  inset: -34% -18%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(56% 62% at 50% 44%,
      rgba(46,50,24,calc(.15 * var(--emboss-depth))) 0%,
      rgba(46,50,24,calc(.06 * var(--emboss-depth))) 48%,
      rgba(46,50,24,0) 76%),
    radial-gradient(46% 40% at 50% 92%,
      rgba(255,255,255,calc(.20 * var(--emboss-depth))) 0%,
      rgba(255,255,255,0) 72%);
  filter: blur(5px);
  opacity: 0;
  transition: opacity var(--dur-emboss, .4s) var(--ease-press, cubic-bezier(.86,0,.07,1));
}
.emboss.is-marked .emboss-bed{ opacity: 1; }

/* — le repère de matrice : où les lettres tomberont —
     un filet, pas un placeholder. Il s'efface au premier caractère. */
.emboss-guide{
  position: absolute;
  z-index: 0;
  width: calc(var(--emboss-size) * 1.25);
  height: 1px;
  bottom: calc(var(--emboss-size) * -.04);
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(58,28,34,0), rgba(58,28,34,.34), rgba(58,28,34,0));
  box-shadow: 0 1px 0 rgba(255,255,255,.3);
  opacity: .75;
  transition: opacity .5s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.emboss.is-marked .emboss-guide{ opacity: 0; }

/* — les lettres — */
.emboss-ink{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--sans, 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif);
  font-weight: 500;
  font-size: var(--emboss-size);
  letter-spacing: var(--emboss-track);
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
.emboss-ink i{
  display: inline-block;
  font-style: normal;
  /* Le fond du creux : sombre en haut (sous la paroi), qui s'ouvre
     vers le bas. C'est ce dégradé, et non la couleur, qui dit
     « il y a une épaisseur là-dedans ». */
  background-image: linear-gradient(177deg,
    var(--emboss-blind-1) 0%,
    var(--emboss-blind-2) 36%,
    var(--emboss-blind-3) 72%,
    var(--emboss-blind-4) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Les deux arêtes. drop-shadow (et non text-shadow) : il suit la
     silhouette réelle du glyphe une fois le dégradé détouré.
     Offsets en em : l'arête doit rester fine par rapport au trait,
     que la lettre fasse 24 px sur une fiche produit ou 90 px ici. */
  filter:
    drop-shadow(0  .026em 0      var(--emboss-lip))
    drop-shadow(0 -.021em .011em var(--emboss-wall))
    drop-shadow(0  .05em  .04em  rgba(46,50,24,calc(.26 * var(--emboss-depth))));
  transition: filter .35s var(--ease, cubic-bezier(.22,.61,.36,1));
}
/* le crénage laisse une chasse après la dernière lettre : sans ce
   rattrapage, le bloc gaufré n'est pas centré sur la pièce. */
.emboss-ink i:last-child{ margin-inline-end: calc(-1 * var(--emboss-track)); }

/* — à l'or : la feuille est déposée AU FOND du creux —
     mêmes arêtes, la lèvre basse se réchauffe (le métal renvoie
     une lumière chaude, pas blanche). */
.emboss--gold .emboss-ink i{
  background-image: linear-gradient(176deg,
    var(--emboss-gold-1) 0%,
    var(--emboss-gold-2) 22%,
    var(--emboss-gold-3) 48%,
    var(--emboss-gold-4) 76%,
    var(--emboss-gold-5) 100%);
  filter:
    drop-shadow(0  .026em 0      rgba(255,246,226,.55))
    drop-shadow(0 -.021em .011em var(--emboss-wall))
    drop-shadow(0  .05em  .04em  rgba(46,50,24,calc(.24 * var(--emboss-depth))));
}

/* — sur photographie : le gaufrage prend la lumière du cliché — */
.emboss--photo .emboss-ink{ mix-blend-mode: multiply; }
.emboss--photo .emboss-bed{ mix-blend-mode: multiply; opacity: 0; }
.emboss--photo.is-marked .emboss-bed{ opacity: .9; }

/* — le coup de presse : descente instantanée, arrêt sec —
     une matrice qui touche du cuir ne rebondit pas. */
@keyframes emboss-press{
  0%   { transform: translateZ(0) scale(1.055); filter: brightness(1.06); }
  55%  { transform: translateZ(0) scale(.988);  filter: brightness(.94); }
  100% { transform: translateZ(0) scale(1);     filter: brightness(1); }
}
.emboss-ink i.is-pressing{
  animation: emboss-press var(--dur-press, .62s) var(--ease-press, cubic-bezier(.86,0,.07,1)) both;
}

/* — repli si background-clip:text est refusé — */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .emboss-ink i{
    background: none;
    color: var(--emboss-blind-1);
    -webkit-text-fill-color: var(--emboss-blind-1);
    filter: none;
    text-shadow:
      0  1px 0    var(--emboss-lip),
      0 -1px .5px var(--emboss-wall);
  }
  .emboss--gold .emboss-ink i{
    color: var(--gold-ink, #4A2530);
    -webkit-text-fill-color: var(--gold-ink, #4A2530);
  }
}

@media (prefers-reduced-motion: reduce){
  .emboss-ink i.is-pressing{ animation: none; }
  .emboss-bed, .emboss-guide{ transition: none; }
}

/* ——— Le champ de saisie du composant (réemployé tel quel
        sur les fiches produit) ——— */
.emboss-field{
  display: grid;
  gap: .55rem;
  font-family: var(--sans, 'Jost', system-ui, sans-serif);
}
.emboss-field__label{
  font-size: var(--fs-xs, .72rem);
  letter-spacing: var(--track-wide, .24em);
  text-transform: uppercase;
}
.emboss-input{
  width: 100%;
  max-width: 9.5rem;
  padding: .78rem .2rem .6rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--sans, 'Jost', system-ui, sans-serif);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 300;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  text-align: center;
  transition: border-color .4s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.emboss-input::placeholder{ opacity: .34; letter-spacing: .34em; }
.emboss-input:focus{ outline: none; }
.emboss-input:focus-visible{
  outline: 2px solid var(--ime-green, #C2CC83);
  outline-offset: 4px;
}

/* — les deux mots : « À l'or » / « À froid » — */
.emboss-modes{ border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.emboss-modes__legend{
  padding: 0;
  font-size: var(--fs-xs, .72rem);
  letter-spacing: var(--track-wide, .24em);
  text-transform: uppercase;
  opacity: .72;
}
.emboss-seg{
  display: inline-flex;
  margin-top: .7rem;
  border: 1px solid currentColor;
  border-radius: var(--r-pill, 999px);
  padding: 3px;
  gap: 2px;
}
.emboss-seg input{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.emboss-seg label{
  cursor: pointer;
  padding: .5rem 1.05rem;
  border-radius: var(--r-pill, 999px);
  font-size: var(--fs-xs, .72rem);
  letter-spacing: var(--track-mid, .14em);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .62;
  transition:
    background-color .4s var(--ease, cubic-bezier(.22,.61,.36,1)),
    color .4s var(--ease, cubic-bezier(.22,.61,.36,1)),
    opacity .4s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.emboss-seg input:checked + label{
  opacity: 1;
  background: var(--ime-green, #C2CC83);
  color: var(--ink, #4A2530);      /* aubergine sur vert : 8,9:1 */
}
.emboss-seg input:focus-visible + label{
  outline: 2px solid var(--ime-green, #C2CC83);
  outline-offset: 3px;
}
@media (hover: hover){
  .emboss-seg label:hover{ opacity: 1; }
}


/* ════════════════════════════════════════════════════════════
   2 — LA SECTION : LA CARTE DE LA MAISON
   Position 11. Le sommet de la page : fond noir de chapitre
   (--noir-abyss), un seul objet, son nom dessus.
   ════════════════════════════════════════════════════════════ */

.carte{
  --carte-w: clamp(272px, 33vw, 430px);
  --carte-h: calc(var(--carte-w) / 1.586);   /* format carte, 85,6 × 54 mm */
  --carte-t: 4px;                            /* 0,8 mm de cuir tranché     */
  --carte-spin: 44s;                         /* tour de présentoir         */
  --carte-pitch: 15s;

  --carte-green:      var(--ime-green, #C2CC83);
  --carte-green-deep: var(--ime-green-deep, #A8B268);
  --carte-ink:   var(--ink, #4A2530);
  --carte-paper: var(--paper, #F4F1E9);
  --carte-gold:  var(--gold, #4A2530);
  --carte-gold-soft: var(--gold-soft, #6B3A47);
  --carte-sans:  var(--sans, 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif);
  --carte-serif: var(--serif, 'Cormorant Garamond', 'Times New Roman', serif);
  --carte-mono:  var(--mono, 'Space Mono', ui-monospace, Menlo, monospace);
  --carte-ease:  var(--ease, cubic-bezier(.22,.61,.36,1));
  --carte-press: var(--ease-press, cubic-bezier(.86,0,.07,1));

  /* pilotés par le JS */
  --carte-rx: 0deg;
  --carte-ry: 0deg;
  --carte-turn: 0deg;
  --carte-lx: 0px;
  --carte-shx: 0px;

  --carte-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");

  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--carte-paper);
  background:
    radial-gradient(94% 62% at 50% 34%, rgba(194,204,131,.085) 0%, rgba(194,204,131,0) 62%),
    radial-gradient(80% 60% at 14% 100%, rgba(58,28,34,.55) 0%, rgba(58,28,34,0) 64%),
    linear-gradient(180deg, #331A22 0%, #161113 52%, #331A22 100%);
}
.carte::after{
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: var(--carte-grain);
  background-size: 150px 150px;
  opacity: .06;
  mix-blend-mode: overlay;
}

.carte-inner{
  position: relative; z-index: 1;
  max-width: var(--maxw, 1560px);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(1.25rem, 5vw, 5rem));
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  display: grid;
  grid-template-columns: minmax(300px, .92fr) 1fr;
  column-gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
}

/* ——— Le titre : le refus ——— */
.carte-head{ grid-column: 2; grid-row: 1; max-width: 32ch; }

.carte-eyebrow{
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--carte-sans);
  font-size: var(--fs-xs, .72rem);
  letter-spacing: var(--track-wide, .24em);
  text-transform: uppercase;
  color: var(--carte-green);            /* vert sur noir : 10,6:1 */
}
.carte-eyebrow__n{
  font-family: var(--carte-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--carte-green-deep);
}
.carte-eyebrow::after{
  content: "";
  height: 1px; width: clamp(28px, 6vw, 74px);
  background: linear-gradient(90deg, var(--carte-gold), rgba(180,137,76,0));
}

.carte-title{
  margin-top: 1.5rem;
  font-family: var(--carte-sans);
  font-weight: 300;
  text-transform: uppercase;
  /* une phrase entière ne se compose pas au tracking d'un wordmark :
     au-delà de six mots, .24em déchire la ligne. */
  letter-spacing: var(--track-mid, .14em);
  line-height: 1.14;
  font-size: clamp(1.55rem, 2.9vw, 2.6rem);
  color: var(--carte-paper);
  text-wrap: balance;
}
.carte-title em{
  display: block;
  margin-top: .38em;
  font-family: var(--carte-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: .01em;
  line-height: 1.1;
  font-size: 1.3em;
  color: var(--carte-green);
}

/* ——— Le corps : le champ, les deux mots, la prise ——— */
.carte-body{ grid-column: 2; grid-row: 2; max-width: 44ch; margin-top: clamp(2rem, 3.4vw, 3rem); }

.carte-ask{
  font-family: var(--carte-serif);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.5;
  color: #EAE4D6;
}
.carte-ask b{
  display: block;
  font-family: var(--carte-sans);
  font-weight: 300;
  font-size: var(--fs-xs, .72rem);
  letter-spacing: var(--track-wide, .24em);
  text-transform: uppercase;
  color: var(--carte-green-deep);
  margin-bottom: .8rem;
}

.carte-form{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: clamp(1.5rem, 2.6vw, 2.2rem);
}
.carte-form .emboss-field__label{ color: var(--carte-green); }
.carte-form .emboss-input{
  color: var(--carte-paper);
  border-bottom-color: rgba(201,166,107,.55);
}
.carte-form .emboss-input:focus{ border-bottom-color: var(--carte-green); }
.carte-form .emboss-modes__legend{ color: #BFB2B0; }
.carte-form .emboss-seg{ border-color: rgba(201,166,107,.42); color: #D9CFC9; }

.carte-note{
  margin-top: 1.1rem;
  font-family: var(--carte-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  line-height: 1.7;
  color: #7A5E64;
}
.carte-note[hidden]{ display: none; }

/* — les actions : « Prenez-la. » — */
.carte-acts{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.6rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  min-height: 2.6rem;
}
.carte-take,
.carte-turnbtn{
  display: inline-flex; align-items: center; gap: .8rem;
  position: relative;
  padding: .35rem 0 .5rem;
  border: 0; background: none; cursor: pointer;
  font-family: var(--carte-sans);
  font-size: var(--fs-xs, .72rem);
  letter-spacing: var(--track-wide, .24em);
  text-transform: uppercase;
  color: var(--carte-paper);
}
.carte-take::before,
.carte-turnbtn::before{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--carte-gold-soft);
  transform-origin: left;
  transition: transform .55s var(--carte-ease);
}
.carte-take::after{
  content: "";
  width: 34px; height: 1px;
  background: var(--carte-gold-soft);
  transition: width .55s var(--carte-ease);
}
.carte-take:hover::after{ width: 56px; }
.carte-turnbtn{ color: #BCA9AE; }
.carte-turnbtn::before{ background: rgba(201,166,107,.42); }
.carte-take:focus-visible,
.carte-turnbtn:focus-visible{
  outline: 2px solid var(--carte-green);
  outline-offset: 5px;
}
.carte-take[hidden]{ display: none; }

/* — le pont commercial — */
.carte-bridge{
  margin-top: clamp(2rem, 3.4vw, 2.8rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(180,137,76,.24);
  font-family: var(--carte-serif);
  font-size: 1.02rem;
  line-height: 1.55;
  color: #D9CFC9;
  max-width: 42ch;
}
.carte-bridge a{
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: .7rem;
  font-family: var(--carte-sans);
  font-size: var(--fs-xs, .72rem);
  letter-spacing: var(--track-wide, .24em);
  text-transform: uppercase;
  color: var(--carte-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(194,204,131,.4);
  padding-bottom: .3rem;
}
.carte-bridge a:hover{ border-bottom-color: var(--carte-green); }
.carte-bridge a:focus-visible{ outline: 2px solid var(--carte-green); outline-offset: 4px; }

/* ============================================================
   LA SCÈNE
   ============================================================ */
.carte-showcase{
  grid-column: 1; grid-row: 1 / span 2;
  margin: 0; align-self: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.4rem;
}
.carte-stage{
  position: relative;
  width: 100%;
  height: calc(var(--carte-h) * 1.45);
  display: grid; place-items: center;
  perspective: 1400px;
  perspective-origin: 50% 46%;
}
.carte-stage::before{
  content: "";
  position: absolute; inset: 8% 2% 10%;
  pointer-events: none;
  background: radial-gradient(52% 42% at 50% 40%, rgba(194,204,131,.11) 0%, rgba(194,204,131,0) 72%);
}
.carte-stage::after{
  content: "";
  position: absolute; left: 4%; right: 4%; bottom: 8%;
  height: calc(var(--carte-w) * .34);
  pointer-events: none;
  background: radial-gradient(44% 52% at 50% 76%, rgba(214,206,186,.14) 0%, rgba(214,206,186,.045) 46%, rgba(214,206,186,0) 78%);
}
.carte-plinth{
  position: absolute; left: 12%; right: 12%; bottom: 15%;
  height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(180,137,76,0), rgba(180,137,76,.5) 28%, rgba(180,137,76,.5) 72%, rgba(180,137,76,0));
}
.carte-shadow{
  position: absolute; left: 50%; bottom: 12.5%;
  width: calc(var(--carte-w) * 1.02);
  height: calc(var(--carte-w) * .15);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(6,5,6,.94) 0%, rgba(6,5,6,.5) 44%, rgba(6,5,6,0) 76%);
  filter: blur(11px);
  transform: translate(-50%, 0) translateX(var(--carte-shx));
  animation: carte-shadow-breathe var(--carte-spin) linear infinite;
}

.carte-float{ transform-style: preserve-3d; animation: carte-float 13s ease-in-out infinite; }
.carte-tilt{
  transform-style: preserve-3d;
  transform: rotateX(var(--carte-rx)) rotateY(var(--carte-ry));
}
.carte.is-hovered .carte-tilt{ will-change: transform; }
.carte-pitch{ transform-style: preserve-3d; animation: carte-pitch var(--carte-pitch) ease-in-out infinite; }
.carte-spin{
  transform-style: preserve-3d;
  animation: carte-spin var(--carte-spin) linear infinite;
  will-change: transform;
}
/* la carte se fige : on gèle la rotation à l'endroit exact où elle
   se trouve, puis on la ramène de face. On ne tape pas sur un
   objet qui bouge. */
.carte-spin.is-settling{
  animation: none;
  transition: transform 1.05s var(--carte-ease);
}
/* le retournement — geste délibéré, jamais élastique */
.carte-turn{
  transform-style: preserve-3d;
  transform: rotateY(var(--carte-turn));
  transition: transform 1.3s var(--carte-press);
}

@keyframes carte-spin{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } }
@keyframes carte-pitch{
  0%,100%{ transform: rotateX(-5deg); }
  50%    { transform: rotateX(4.5deg); }
}
@keyframes carte-float{
  0%,100%{ transform: translate3d(0,-6px,0); }
  50%    { transform: translate3d(0, 6px,0); }
}
@keyframes carte-shadow-breathe{
  0%,100%{ transform: translate(-50%,0) translateX(var(--carte-shx)) scaleX(1);   opacity: .95; }
  25%    { transform: translate(-50%,0) translateX(var(--carte-shx)) scaleX(.2);  opacity: .5; }
  50%    { transform: translate(-50%,0) translateX(var(--carte-shx)) scaleX(1);   opacity: .95; }
  75%    { transform: translate(-50%,0) translateX(var(--carte-shx)) scaleX(.2);  opacity: .5; }
}

/* ============================================================
   L'OBJET — carte de cuir de veau, vert Élément
   ============================================================ */
.carte-object{
  position: relative;
  width: var(--carte-w);
  height: var(--carte-h);
  transform-style: preserve-3d;
}
.carte-face{
  position: absolute; left: 50%; top: 50%;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 7px;
}
.carte-face--front, .carte-face--back{
  width: var(--carte-w); height: var(--carte-h);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5.5%;
  padding: 9% 8%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -18px 36px rgba(48,54,26,.46),
    inset 16px 0 34px rgba(48,54,26,.24),
    inset -16px 0 34px rgba(48,54,26,.32);
}
/* Le pigment : le vert du CUIR (bible §8, --ime-green-leather),
   pas le vert d'écran. Sur un aplat plein, #C2CC83 seul lit
   « menthe » — le cuir teint dans la masse lit olive. */
.carte-face--front{
  transform: translate(-50%,-50%) translateZ(calc(var(--carte-t) / 2));
  background: radial-gradient(118% 90% at 26% 10%,
    #C4CE85 0%, #AEB871 30%, #8C9659 68%, #626B3F 110%);
}
.carte-face--back{
  transform: translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--carte-t) / 2));
  background: radial-gradient(118% 90% at 30% 12%,
    #B9C37D 0%, #A0AA68 40%, #818B54 78%, #5C653B 116%);
}
/* la lumière directionnelle : haut-gauche éclairé, bas-droite dans
   l'ombre. C'est ce dégradé qui sépare le cuir de l'aplat. */
.carte-face--front::after, .carte-face--back::after{
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(138deg,
    rgba(255,255,255,.15) 0%,
    rgba(255,255,255,.03) 20%,
    rgba(58,64,30,0) 44%,
    rgba(58,64,30,.22) 74%,
    rgba(40,45,20,.46) 100%);
}

/* — tranches : cuir tranché, teint main — */
.carte-face--edge{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(0,0,0,.16) 24%, rgba(0,0,0,.44) 100%),
    linear-gradient(90deg, #5E6636 0%, #A8B268 30%, #A8B268 52%, #5E6636 100%);
  border-radius: 1px;
}
.carte-face--left{
  width: var(--carte-t); height: var(--carte-h);
  transform: translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--carte-w) / 2));
}
.carte-face--right{
  width: var(--carte-t); height: var(--carte-h);
  transform: translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--carte-w) / 2));
}
.carte-face--top{
  width: var(--carte-w); height: var(--carte-t);
  transform: translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--carte-h) / 2));
  background:
    linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(255,255,255,.16) 34%, rgba(0,0,0,.3) 100%),
    linear-gradient(180deg, #A9B372, #808A59);
}
.carte-face--bottom{
  width: var(--carte-w); height: var(--carte-t);
  transform: translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--carte-h) / 2));
  background:
    linear-gradient(90deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.24) 40%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, #A8B268, #5E6636);
}

/* — grain de peau — */
.carte-grain{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--carte-grain);
  background-size: 62px 62px;
  opacity: .34;
}
.carte-grain::after{
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.30) .4px, rgba(255,255,255,0) 1.3px),
    radial-gradient(circle at 72% 66%, rgba(0,0,0,.22) .4px, rgba(0,0,0,0) 1.3px);
  background-size: 5px 5px, 11px 11px;
  opacity: .34;
}
/* — surpiqûre creusée, avec son ourlet de lumière — */
.carte-stitch{
  position: absolute; inset: 5.5%; z-index: 1; pointer-events: none;
  border: 1px dashed rgba(52,58,28,.42);
  border-radius: 4px;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.32));
}
/* — reflet : une bande étroite qui traverse, jamais un voile — */
.carte-sheen{
  position: absolute; inset: -40% -46%; z-index: 4;
  pointer-events: none; overflow: hidden;
  transform: translateX(var(--carte-lx));
  will-change: transform;
}
.carte-sheen i{
  display: block; width: 100%; height: 100%;
  background: linear-gradient(102deg,
    rgba(255,255,255,0) 32%,
    rgba(255,255,255,.05) 42%,
    rgba(255,255,255,.14) 47%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.14) 53%,
    rgba(255,255,255,.05) 58%,
    rgba(255,255,255,0) 68%);
  animation: carte-sheen var(--carte-spin) linear infinite;
  opacity: 0;
}
.carte-face--back .carte-sheen i{ animation-delay: calc(var(--carte-spin) / -2); }
@keyframes carte-sheen{
  0%, 100%{ transform: translateX(0%);   opacity: .95; }
  6%      { transform: translateX(30%);  opacity: .55; }
  12%     { transform: translateX(58%);  opacity: 0; }
  50%     { transform: translateX(58%);  opacity: 0; }
  86%     { transform: translateX(-58%); opacity: 0; }
  94%     { transform: translateX(-30%); opacity: .55; }
}

/* ——— Ce qui est gaufré sur les deux plats ——— */
.carte-seal{
  position: relative; z-index: 1;
  width: calc(var(--carte-w) * .155); aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(76% 76% at 50% 68%,
    rgba(255,255,255,.19) 0%, rgba(46,50,24,.06) 54%, rgba(46,50,24,.19) 100%);
  box-shadow:
    inset 0 3px 5px rgba(46,50,24,.58),
    inset 0 1px 1px rgba(46,50,24,.46),
    inset 0 -2px 3px rgba(255,255,255,.38),
    inset 0 0 0 1px rgba(46,50,24,.18),
    0 1px 0 rgba(255,255,255,.4);
}
.carte-seal::before{
  content: ""; position: absolute; inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(160,120,62,.9);
  box-shadow: inset 0 1px 2px rgba(46,50,24,.46), 0 1px 0 rgba(255,255,255,.36);
}
.carte-seal b{
  font-family: var(--carte-sans);
  font-weight: 500; text-transform: uppercase;
  font-size: calc(var(--carte-w) * .042);
  letter-spacing: .14em; text-indent: .14em;
  line-height: 1;
  background: linear-gradient(176deg, #331A22 0%, #4A2530 22%, #4A2530 48%, #4A2530 76%, #6B3A47 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)) drop-shadow(0 -1px 1px rgba(40,44,20,.6));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .carte-seal b{ color: #4A2530; -webkit-text-fill-color: #4A2530; background: none; }
}

.carte-hair{
  position: relative; z-index: 1;
  width: 22%; height: 1.2px;
  background: linear-gradient(90deg, rgba(160,120,62,0), rgba(160,120,62,.9), rgba(160,120,62,0));
  box-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* mentions gaufrées à froid sur le cuir — jamais d'encre verte */
.carte-cold{
  position: relative; z-index: 1;
  font-family: var(--carte-sans);
  text-transform: uppercase;
  font-size: calc(var(--carte-w) * .032);
  letter-spacing: .28em; text-indent: .28em;
  line-height: 1.9; text-align: center;
  color: rgba(50,22,28,.92);
  text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 -1px 1px rgba(40,44,20,.48);
}
.carte-cold b{ font-weight: 400; display: block; }
.carte-cold--mono{
  font-family: var(--carte-mono);
  font-size: calc(var(--carte-w) * .026);
  letter-spacing: .1em; text-indent: .1em;
}
.carte-verb{
  position: relative; z-index: 1;
  display: grid; gap: .28em; justify-items: center;
  text-align: center;
}
.carte-verb__n{
  font-family: var(--carte-mono);
  font-size: calc(var(--carte-w) * .032);
  letter-spacing: .2em; text-indent: .2em;
  color: rgba(50,22,28,.82);
  text-shadow: 0 1px 0 rgba(255,255,255,.46), 0 -1px 1px rgba(40,44,20,.4);
}
.carte-verb__w{
  font-family: var(--carte-sans);
  font-weight: 400; text-transform: uppercase;
  font-size: calc(var(--carte-w) * .082);
  letter-spacing: .18em; text-indent: .18em;
  line-height: 1;
  background-image: linear-gradient(177deg, #331A22 0%, #43222A 54%, #5A3830 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.58))
    drop-shadow(0 -1px .5px rgba(28,32,12,.68));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .carte-verb__w{
    background: none; color: #331A22; -webkit-text-fill-color: #331A22;
    filter: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.58), 0 -1px .5px rgba(28,32,12,.68);
  }
}
/* si La Coupe n'a pas été jouée : la place du verbe reste ouverte */
.carte-verb--empty .carte-verb__w{
  font-family: var(--carte-serif);
  font-style: italic;
  text-transform: none;
  font-size: calc(var(--carte-w) * .05);
  letter-spacing: .01em; text-indent: 0;
}

/* le gaufrage sur le plat avant : taille dérivée de la carte */
.carte-face--front .emboss{
  --emboss-size: calc(var(--carte-w) * .155);
  --emboss-track: .15em;
  flex: 0 0 auto;
}
.carte-face--front .emboss.is-len-2{ --emboss-size: calc(var(--carte-w) * .175); }
.carte-face--front .emboss.is-len-1{ --emboss-size: calc(var(--carte-w) * .19); }

/* ============================================================
   LE DOS, EN TEXTE — lisible par un lecteur d'écran,
   lisible aussi à l'œil nu. La face 3D n'est qu'un décor.
   ============================================================ */
.carte-legend{
  display: grid;
  gap: 1rem;
  justify-items: center;
  width: 100%;
}
.carte-verso{
  width: 100%;
  max-width: calc(var(--carte-w) * 1.15);
  margin: 0;
  display: grid;
  gap: .1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(180,137,76,.22);
  font-family: var(--carte-mono);
  font-size: .66rem;
  letter-spacing: .07em;
  color: #7A5E64;
}
.carte-verso__row{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding-block: .42rem;
  border-bottom: 1px solid rgba(244,241,233,.07);
}
.carte-verso__row:last-child{ border-bottom: 0; }
.carte-verso dt, .carte-verso dd{ margin: 0; }
.carte-verso__k{ text-transform: uppercase; color: #876E73; }
.carte-verso__v{ color: #D9CFC9; text-align: right; }
.carte-verso__v em{ font-style: italic; color: #7A5E64; }
.carte-verso__v a{ color: var(--carte-green); text-decoration: none; border-bottom: 1px solid rgba(194,204,131,.4); }
.carte-verso__v a:focus-visible{ outline: 2px solid var(--carte-green); outline-offset: 3px; }

.carte-caption{
  text-align: center;
  font-family: var(--carte-sans);
  font-size: .66rem;
  letter-spacing: var(--track-wide, .24em);
  text-transform: uppercase;
  color: #BCA9AE;
}
.carte-hint{
  font-family: var(--carte-mono);
  font-size: .62rem;
  letter-spacing: .07em;
  color: var(--carte-green-deep);
  text-align: center;
  opacity: 0;
  transition: opacity .8s var(--carte-ease);
}
.carte.is-ready .carte-hint{ opacity: 1; }
.carte.is-hovered .carte-hint,
.carte.is-still .carte-hint{ opacity: 0; }

/* lu uniquement par les lecteurs d'écran */
.carte-sr{
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   ENTRÉE EN SCÈNE
   ============================================================ */
.carte-reveal{
  opacity: 0; transform: translateY(24px);
  transition: opacity .95s var(--carte-ease), transform .95s var(--carte-ease);
}
.carte.is-in .carte-reveal{ opacity: 1; transform: none; }
.carte.is-in .carte-reveal--2{ transition-delay: .14s; }
.carte.is-in .carte-reveal--3{ transition-delay: .28s; }

.carte.is-offscreen .carte-float,
.carte.is-offscreen .carte-pitch,
.carte.is-offscreen .carte-spin,
.carte.is-offscreen .carte-shadow,
.carte.is-offscreen .carte-sheen i{ animation-play-state: paused; }

/* posée : plus de rotation de présentoir, la carte est au repos */
.carte.is-still .carte-float,
.carte.is-still .carte-pitch{ animation-play-state: paused; }
.carte.is-still .carte-shadow{ animation: none; opacity: .92; transform: translate(-50%,0) scaleX(.96); }
/* posée, la carte ne garde qu'un filet de lumière : un reflet gelé
   au milieu de sa course laverait tout le cuir. */
.carte.is-still .carte-face--front .carte-sheen i{
  animation: none; opacity: .3; transform: translateX(-18%);
}
.carte.is-still .carte-face--back .carte-sheen i{ animation: none; opacity: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .carte-inner{ grid-template-columns: 1fr; }
  .carte-head, .carte-body, .carte-showcase{ grid-column: 1; grid-row: auto; }
  .carte-head{ order: 1; max-width: 26ch; }
  .carte-showcase{ order: 2; margin-block: clamp(1.4rem, 5vw, 2.6rem) 0; }
  .carte-body{ order: 3; max-width: 52ch; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
  .carte-stage{ perspective: 1600px; }
}
@media (max-width: 700px){
  .carte{
    --carte-w: clamp(228px, 74vw, 330px);
    --carte-t: 3px;
    --carte-spin: 58s;
    --carte-pitch: 19s;
  }
  .carte-stage{ height: calc(var(--carte-h) * 1.55); perspective: 1900px; }
  .carte-form{ gap: 1.5rem; }
  .carte-hint{ display: none; }
}

/* ============================================================
   MOUVEMENT RÉDUIT — la carte ne tourne pas.
   Elle se présente de face, et le gaufrage reste.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .carte-float{ animation: none; }
  .carte-pitch{ animation: none; transform: none; }
  .carte-spin{ animation: none; transform: none; will-change: auto; }
  .carte-spin.is-settling{ transition: none; }
  .carte-turn{ transition: none; }
  .carte-tilt{ will-change: auto; }
  .carte-shadow{ animation: none; transform: translate(-50%,0) scaleX(.94); opacity: .9; }
  .carte-face--front .carte-sheen i{ animation: none; opacity: .28; transform: translateX(-16%); }
  .carte-face--back  .carte-sheen i{ animation: none; opacity: 0; }
  .carte-reveal{ opacity: 1; transform: none; transition: none; }
  .carte-hint{ display: none; }
}