/* La carte, et la fiche qui s'ouvre derriere elle. Une seule feuille pour tout le produit : la
   boutique d'un client et la vitrine publique la chargent toutes les deux, donc elles dessinent
   exactement le meme objet. Le HTML est rendu par src/carte.js.

   L'ordre de chargement n'est pas le meme des deux cotes, et c'est voulu. La boutique la met AVANT
   /boutique.css, parce que sa fenetre de commande porte les classes fiche et confirmation a la
   fois, et que .confirmation h2 doit gagner sur .fiche h2. La vitrine la met APRES /accueil.css,
   parce que /marque.css donne un bloc sobre a .carte et une planche a rivets a .cadre, et que la
   carte doit gagner.

   Et un nom de classe pose ici vaut pour toute la page qui charge cette feuille : .prix, .b, .pied
   et .haut sont ceux d'une carte, pas ceux d'une page. Une page qui s'en sert pour autre chose voit
   son element pris pour un morceau de carte. C'est arrive a la section des tarifs de la vitrine,
   qui s'appelait .prix : son panneau a disparu, parce que la carte met son .prix en
   display:contents. La regle est donc : ce qui n'est pas une carte ne porte aucun de ces noms.

   Reprise du design valide sur la mission 489224 : cadre epais, la rarete d'une carte est son palier
   de marche, l'or reserve a la Legendaire et aux prix. Ce qui bouge n'anime que transform et
   opacity, et se met en pause hors de l'ecran (classe .au-repos, posee par /carte.js).

   Les couleurs de rarete sont ecrites ici et pas dans /marque.css : ce ne sont pas les jetons d'une
   page, c'est la matiere de la carte, la meme partout ou elle est posee. */

/* Le marine n'est ecrit qu'une fois, et les deux halos le lisent : ces jetons portent les memes
   noms que ceux de /marque.css, et comme cette feuille est chargee en dernier sur la vitrine, ce
   sont eux qui valent pour toute la page. Ecrire le halo en dur le ferait mentir le jour ou le
   marine de la marque bouge. */
:root{--navy:#0a1a33;--or:#ffcc33;--vert-f:#0b6b2e;--acquis:#35d6f5;
  --titre:'Lilita One','Plus Jakarta Sans',system-ui,sans-serif;
  --halo:0 2px 0 var(--navy),0 -2px 0 var(--navy),2px 0 0 var(--navy),-2px 0 0 var(--navy),1.5px 1.5px 0 var(--navy),-1.5px 1.5px 0 var(--navy),1.5px -1.5px 0 var(--navy),-1.5px -1.5px 0 var(--navy);
  --halo3:0 3px 0 var(--navy),0 -3px 0 var(--navy),3px 0 0 var(--navy),-3px 0 0 var(--navy),2.2px 2.2px 0 var(--navy),-2.2px 2.2px 0 var(--navy),2.2px -2.2px 0 var(--navy),-2.2px -2.2px 0 var(--navy)}
/* L'encre de la carte est la sienne, posee sur ses deux racines : une page qui aurait un autre
   --encre ne repeint pas l'interieur d'une carte. La Mystere les renverse, plus bas.
   Les chiffres sont a chasse fixe : un volume et un prix s'y lisent en colonne, et la carte ne
   change pas de largeur selon les chiffres qu'elle porte. La page n'a pas a le demander. */
.carte,dialog.fiche{--encre:#0a1a33;--doux:#3a4860;color:var(--encre);font-variant-numeric:tabular-nums}

/* Raretes : r1 a r4 du plus clair au plus sombre, rl pour un libelle sur fond sombre, fc le fond
   interieur de la carte, rb le fond du ruban et rt son texte, choisis pour tenir le contraste
   sans dependre du contour. */
[data-palier=majeur]{--r1:#fff6b8;--r2:#ffcc33;--r3:#f29a00;--r4:#9c5a00;--rl:#ffd95a;--fc:#fff8e2;--lc:#efd9a0;--rb:linear-gradient(#fff3b0 0 14%,#ffcc33 14%,#f5a800 100%);--rt:#0a1a33;--rts:0 1px 0 rgba(255,255,255,.6)}
[data-palier=fort]{--r1:#efe0ff;--r2:#b673ff;--r3:#7d33e0;--r4:#44138a;--rl:#dcbcff;--fc:#f6f0ff;--lc:#dccaf7;--rb:linear-gradient(#b27bff 0 14%,#7a30dc 14%,#5a1fb0 100%);--rt:#fff;--rts:var(--halo)}
[data-palier=solide]{--r1:#d6eeff;--r2:#56aefc;--r3:#1f6fe0;--r4:#0f3b8c;--rl:#a6d5ff;--fc:#edf5ff;--lc:#c6daf3;--rb:linear-gradient(#6fb2ff 0 14%,#1f63d6 14%,#14489e 100%);--rt:#fff;--rts:var(--halo)}
[data-palier=niche]{--r1:#ffffff;--r2:#dce3ec;--r3:#9ba8ba;--r4:#56637a;--rl:#e9eef4;--fc:#f3f5f8;--lc:#d5dce6;--rb:linear-gradient(#fff 0 14%,#dfe5ee 14%,#aab6c6 100%);--rt:#0a1a33;--rts:0 1px 0 rgba(255,255,255,.7)}
[data-palier=sous-seuil]{--r1:#9f8ad9;--r2:#5b459c;--r3:#2c2052;--r4:#120c24;--rl:#cdbcff;--fc:#1c1733;--lc:#3a3063;--rb:linear-gradient(#8b74d6 0 14%,#43328a 14%,#241a4d 100%);--rt:#fff;--rts:var(--halo)}
[data-palier=attente]{--r1:#f4f4f4;--r2:#cfcfcf;--r3:#9d9d9d;--r4:#5e5e5e;--rl:#e2e2e2;--fc:#efefef;--lc:#d5d5d5;--rb:linear-gradient(#f4f4f4 0 14%,#d5d5d5 14%,#a9a9a9 100%);--rt:#0a1a33;--rts:none}

.sprite{position:absolute;width:0;height:0;overflow:clip}
/* Le contour de focus suit le fond qu'il traverse : blanc sur le marine de la page, marine sur
   le fond clair d'une carte ou d'une fiche, blanc a nouveau sur le fond sombre d'une Mystere. */
.cadre :focus-visible,dialog :focus-visible{outline:3px solid var(--focus,#fff);outline-offset:3px}
.cadre,dialog{--focus:var(--navy)}
[data-palier=sous-seuil] .cadre,dialog[data-palier=sous-seuil] header{--focus:#fff}

/* Une page qui peint tout b en clair, pour son fond sombre, effacerait le gras des panneaux
   blancs de la carte : a l'interieur, le gras reprend la couleur de son paragraphe. */
.carte b,.fiche b{color:inherit;font-weight:bold}
/* Les pieces, les ailes du ruban et les puces de la fiche sont dessinees a leur taille interieure,
   bordure en plus : la piece du prix fait 15 px plus ses 2 px de cerne. Une page qui passe ses
   pseudo-elements en border-box, comme /marque.css, les rapetisserait toutes de leur bordure. */
.carte::before,.carte::after,.carte *::before,.carte *::after,
dialog.fiche::before,dialog.fiche::after,.fiche *::before,.fiche *::after{box-sizing:content-box}

/* Les cartes. Le cadre exterieur est dessine par ::before, pour que le feu passe derriere lui. */
ul.grille{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:96px 40px}
/* La carte se dessine entierement elle-meme, fond et cadre compris par ::before. Les trois remises
   a zero et celles de .cadre juste dessous ne servent pas ici : elles effacent ce qu'une page aurait
   pose sur les memes noms de classe, comme /marque.css qui donne a .carte un bloc sobre et a .cadre
   une planche a rivets. Sans elles, la carte de la vitrine heriterait d'un fond marine et d'un texte
   blanc sur ses panneaux clairs. */
.carte{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:22px;padding:9px;background:none;border:0;box-shadow:none;transform:translateY(var(--ty,0px));transition:transform .18s ease-out}
.carte.incline{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
.carte::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:22px;border:3px solid var(--navy);pointer-events:none;
  background:linear-gradient(155deg,var(--r1) 0%,var(--r2) 28%,var(--r3) 72%,var(--r4) 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(0,0,0,.25),0 7px 0 var(--navy),0 18px 26px rgba(0,0,0,.45)}
.carte:hover,.carte.survol{--ty:-6px}
.carte[data-palier=fort]::before{box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(0,0,0,.25),0 7px 0 var(--navy),0 0 24px rgba(182,115,255,.7)}
.carte[data-palier=attente]{filter:saturate(.3)}
.cadre{position:relative;flex:1;display:grid;grid-template-rows:auto auto auto 1fr;grid-template-areas:"illu" "ruban" "titre" "corps";border-radius:15px;overflow:clip;background:var(--fc);border:3px solid var(--navy);padding:0;box-shadow:none;color:var(--encre)}
.cadre::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(circle at var(--mx,70%) var(--my,20%),rgba(255,255,255,.34),rgba(255,255,255,0) 42%);opacity:0;transition:opacity .2s}
.carte:hover .cadre::after,.carte.survol .cadre::after{opacity:1}
.cadre > h3{grid-area:titre;margin:0;padding:10px 14px 0;font:400 22px/1.12 var(--titre);letter-spacing:.2px;color:var(--encre)}
.illu{grid-area:illu;position:relative;height:142px;padding:10px 12px 0;overflow:clip;border-bottom:3px solid var(--navy);
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.1) 0 2px,transparent 2px 18px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.1) 0 2px,transparent 2px 18px),
    radial-gradient(95% 130% at 22% 60%,var(--r1) 0%,var(--r2) 34%,var(--r3) 74%,var(--r4) 100%)}
.illu::before{content:"";position:absolute;left:60px;top:84px;width:460px;height:460px;margin:-230px 0 0 -230px;z-index:0;
  background:repeating-conic-gradient(rgba(255,255,255,.26) 0 8deg,rgba(255,255,255,0) 8deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 25%,transparent 58%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 25%,transparent 58%)}
.haut{position:relative;z-index:2;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.badge{font-size:11.5px;font-weight:800;line-height:1;padding:5px 9px;border-radius:999px;background:#fff;color:var(--navy);border:2px solid var(--navy);box-shadow:0 2px 0 var(--navy)}
.badge.t-page{background:var(--navy);color:#fff}
.badge.t-optimisation{background:#1fb457;color:#fff}
.badge.t-traduction{background:#0e8f9e;color:#fff}
.badge.t-technique{background:#6b3fc0;color:#fff}
/* L'intention d'achat : un ecusson franc, au poids de la rarete, sans or. */
.badge.i-achat{display:inline-flex;align-items:center;gap:6px;font:400 15px/1 var(--titre);letter-spacing:.3px;color:#fff;padding:5px 11px 6px 7px;border-radius:8px 8px 16px 16px;background:linear-gradient(#ef5a42 0 14%,#c62f22 14%,#a8241a 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 3px 0 var(--navy);text-shadow:0 1.5px 0 rgba(10,26,51,.6)}
.badge.i-achat::before{content:"";flex:none;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle closest-side,#fff 0 24%,transparent 30% 52%,#fff 58% 84%,transparent 90%)}
/* Sans plaque, l'embleme ne reste pas colle a gauche avec un grand vide a cote : il prend le
   milieu. C'est le cas d'une carte dont aucune preuve ne porte de quantite courte. */
.scene{position:absolute;z-index:2;left:12px;right:12px;bottom:26px;display:flex;align-items:center;gap:12px}
.scene:not(:has(.vol)){justify-content:center}
.embleme{width:72px;height:72px;flex:none;filter:drop-shadow(0 4px 0 rgba(10,26,51,.55))}
.mystere{flex:none;width:72px;text-align:center;font:400 82px/.9 var(--titre);color:#fff;text-shadow:var(--halo3),0 6px 0 var(--navy),0 0 26px rgba(185,150,255,.9)}
/* La plaque du premier ecran : le volume, ou ce que la carte a mesure quand il n'y a pas de volume.
   Marine sur toutes les raretes : le contraste ne depend jamais du contour. */
.vol{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:5px 12px 7px;border-radius:14px;background:rgba(10,26,51,.9);border:2px solid rgba(255,255,255,.24);box-shadow:0 3px 0 rgba(10,26,51,.5)}
/* Deux lignes au maximum, et une seule pour la legende. Le calibrage de carte.js choisit deja la
   taille, mais la feuille tient le dernier mot : une donnee inattendue ne doit pas pouvoir faire
   monter la plaque jusqu'a se faire couper par le haut de `.illu`, qui fait 142 px. */
.vol{max-height:104px}
.vol b{font:400 38px/1 var(--titre);letter-spacing:.5px;word-spacing:.16em;color:#fff;text-shadow:0 3px 0 #000;max-width:100%;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:clip}
[data-palier=majeur] .vol b{color:#ffd95a}
.vol b.petit{font-size:26px;line-height:1.05}
.vol b.mini{font-size:19px;line-height:1.1}
.vol span{margin-top:3px;font-size:12px;font-weight:700;line-height:1.2;color:#d6e4ff;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:clip}
.vol.attente{font:400 24px/1.1 var(--titre);color:#fff}
.ruban{grid-area:ruban;position:relative;z-index:3;justify-self:center;margin-top:-20px;min-width:64%;display:flex;justify-content:center}
.ruban::before,.ruban::after{content:"";position:absolute;top:9px;height:32px;width:30px;background:linear-gradient(var(--r3),var(--r4));border:3px solid var(--navy)}
.ruban::before{left:-18px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,38% 50%)}
.ruban::after{right:-18px;clip-path:polygon(0 0,100% 0,62% 50%,100% 100%,0 100%)}
.ruban b{position:relative;z-index:1;flex:1;text-align:center;font:400 20px/1 var(--titre);letter-spacing:.6px;color:var(--rt);text-shadow:var(--rts);padding:8px 20px 9px;border:3px solid var(--navy);border-radius:9px;
  background:var(--rb);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 4px 0 var(--navy)}
.corps{grid-area:corps;display:flex;flex-direction:column;gap:9px;padding:6px 14px 16px;color:var(--encre);container-type:inline-size}
.mesure{margin:0;font-size:12px;line-height:1.4;color:var(--doux)}
.gain{margin:0;font-size:13px;line-height:1.4;color:var(--encre);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:clip}
.ligne-stat{display:flex;gap:9px;align-items:center;background:rgba(10,26,51,.06);border:2px solid var(--lc);border-radius:12px;padding:7px 10px 9px 8px}
.ligne-stat > div{flex:1;min-width:0}
.ico{width:26px;height:26px;flex:none}
.stat{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;line-height:1.3;color:var(--doux);font-weight:700;margin-bottom:5px}
.stat span:last-child{color:var(--encre);font-weight:800;text-align:right}
.jauge{position:relative;height:13px;border-radius:7px;background:#1d2f55;border:2px solid var(--navy);overflow:clip;box-shadow:inset 0 3px 0 rgba(0,0,0,.35)}
.jauge i{display:block;height:100%;border-radius:0 5px 5px 0;background:linear-gradient(var(--r1),var(--r2) 45%,var(--r3));box-shadow:inset 0 2px 0 rgba(255,255,255,.45)}
.jauge::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 2px),rgba(10,26,51,.7) calc(25% - 2px) 25%)}

/* Le pied : Detail, puis le geste d'achat qui porte son prix, et la note sous le prix. */
.pied{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"detail achat prix" "note note note";align-items:stretch;row-gap:5px;margin-top:auto;padding-top:12px;border-top:2px dashed var(--lc)}
/* .prix ne dessine rien, ses deux enfants sont des cases du pied. Elle reprend quand meme la police
   et la couleur de la carte : /marque.css donne a .prix une grosse capitale doree, et sans cela la
   note sous le prix sortirait en typo de titre sur la vitrine. */
.prix{display:contents;font:inherit;color:inherit}
.pied [data-action=detail]{grid-area:detail;margin-right:7px;padding:0 10px}
/* Le « ! » prend la case ou vivait le bouton « Detail » : carre, sans texte, il laisse toute la
   rangee a l'etat de la carte, qui est ce qu'on vient y lire. */
.pied .b.signe{grid-area:detail;margin-right:7px;padding:0;width:46px;flex:none}
.pied [data-action=panier],.pied .b.relire,.pied .verrou,.pied a.b{grid-area:achat;min-width:0;padding:0 8px;border-top-right-radius:0;border-bottom-right-radius:0}
/* Une carte sans prix (la vitrine) : plus de piece agrafee a droite du bouton, donc le bouton reprend
   ses coins, la colonne du prix et la ligne de la note disparaissent avec lui. */
.pied:not(:has(.prix)){grid-template-columns:auto minmax(0,1fr);grid-template-areas:"detail achat";row-gap:0}
.pied:not(:has(.prix)) a.b,.pied:not(:has(.prix)) .verrou,.pied:not(:has(.prix)) [data-action=panier],.pied:not(:has(.prix)) .b.relire,
.prixfiche:not(:has(> b)):not(:has(> .voir)) a.b{border-top-right-radius:13px;border-bottom-right-radius:13px}
/* L'oeil tient la case du prix mais n'a pas de note sous lui : la rangee du bas disparait avec elle. */
.pied:has(.voir){row-gap:0}
.pied [data-action=panier][aria-pressed=true]{font-size:13.5px;letter-spacing:-.1px}
.prix b,.prixfiche > b{grid-area:prix;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 8px 0 7px;white-space:nowrap;pointer-events:none;
  font:400 20px/1 var(--titre);letter-spacing:.3px;word-spacing:.12em;color:#ffd95a;border:3px solid var(--navy);border-left-width:2px;border-radius:0 13px 13px 0;
  background:linear-gradient(#1f8a46 0 16%,#0c6429 16%,#0a5723 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 4px 0 var(--navy);transition:transform .07s,box-shadow .07s}
/* La gemme, unite de paiement de la boutique depuis le 19/09/2026. Elle remplace la piece doree
   qui tenait la meme place : un prix en euros disait un paiement, un prix en gemmes dit une
   depense sur un solde deja charge. Taillee en losange et non en rond, pour qu'on la distingue au
   premier coup d'oeil de la piece qui marquait les euros, et vert clair sur le vert du bloc, avec
   son eclat en haut a gauche comme une pierre. */
.prix b::before,.prixfiche > b::before{content:"";flex:none;width:15px;height:15px;
  clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);
  background:linear-gradient(150deg,#b9ffd9 0 18%,#3ddc84 18% 52%,#12a85c 52% 78%,#0a7d42 78%)}
.prix span{grid-area:note;justify-self:end;font-size:12px;font-weight:700;line-height:1.3;color:var(--doux);text-align:right}
/* Une carte deja prise n'a plus de prix a afficher : l'oeil prend la place de la piece et ouvre
   l'adresse ou le travail se constate. Meme piece agrafee au bouton, en blanc comme le prix d'une
   carte verrouillee, mais cliquable, donc avec son enfoncement a elle. */
.prix .voir,.prixfiche > .voir{grid-area:prix;display:flex;align-items:center;justify-content:center;padding:0 10px;
  border:3px solid var(--navy);border-left-width:2px;border-radius:0 13px 13px 0;background:#fff;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 4px 0 var(--navy);transition:transform .07s,box-shadow .07s}
.voir svg{display:block;width:22px;height:22px}
.voir:hover{filter:brightness(1.06)}
.voir:active{transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 1px 0 var(--navy)}
.pied:has(.b.plein:active) .prix b,.prixfiche:has(.b.plein:active) > b{transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 1px 0 var(--navy)}
.pied:has(.b.plein.acquis) .prix b,.prixfiche:has(.b.plein.acquis) > b{background:linear-gradient(#24427c 0 16%,#0f2552 16%,#0a1a33 100%)}
.pied:has(.verrou) .prix b,.prixfiche:has(.verrou) > b{background:#fff;color:var(--encre)}
.b{position:relative;font:inherit;font-size:14.5px;font-weight:800;line-height:1.1;min-height:46px;padding:0 12px;border-radius:13px;cursor:pointer;border:3px solid var(--navy);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  text-shadow:0 1.5px 0 rgba(10,26,51,.7);box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -4px 0 rgba(0,0,0,.2),0 4px 0 var(--navy);transition:transform .07s,box-shadow .07s;-webkit-tap-highlight-color:transparent}
.b:hover{filter:brightness(1.06)}
.b:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.2),0 1px 0 var(--navy)}
/* Ajouter reste vert, comme le bouton d'achat du jeu. Dans le panier : marine, coche cyan. */
.b.plein{background:linear-gradient(#6fe08a 0 18%,#15853b 18%,#117a35 70%,#0d6a2d 100%)}
.b.creux{background:linear-gradient(#5b9bff 0 18%,#1f5bc4 18%,#1a4fb0 100%)}
.b.or{background:linear-gradient(#fff0a3 0 18%,#ffcc33 18%,#e09c00 100%);color:var(--navy);text-shadow:0 1px 0 rgba(255,255,255,.55)}
/* Une carte mise au panier le dit sur son bouton, « Dans le panier » avec sa coche, et rien de
   plus. Elle portait aussi un contour cyan et une pastille cochee sur son coin : la meme chose
   trois fois, et sur un telephone les trois marques se marchaient dessus. */
.b.plein.acquis{background:linear-gradient(#2d4f8f 0 18%,#132d5c 18%,#0a1a33 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.14),inset 0 0 0 2px var(--acquis),0 4px 0 var(--navy)}
.b.plein.acquis::before{content:"";flex:none;width:15px;height:12px;margin-right:5px;background:var(--acquis);clip-path:polygon(0 52%,14% 38%,38% 62%,86% 0,100% 14%,38% 92%)}
.b:disabled{background:linear-gradient(#c9d1dc,#98a4b6);color:#1f2b40;text-shadow:none;cursor:default;filter:none}
/* La piece de la gerbe, jetee par /carte.js au moment ou une carte est prise. Elle vit ici parce
   que les deux pages la lancent : vers le coffre dans la boutique, en retombee sur la vitrine. */
.butin{position:fixed;z-index:60;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fffbe0 0 14%,#ffd84d 36%,#eea100 70%,#a86000 100%);box-shadow:0 0 0 2px #5a3400}
.verrou{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:46px;padding:4px 10px;border-radius:13px;background:#dff5e6;border:3px dashed var(--vert-f);color:#0b5e28;font-weight:800;font-size:13.5px;line-height:1.2;text-align:center}
/* La date sous l'etat : « Livree » dit quoi, la ligne du dessous dit quand. Sur une seule ligne,
   « Commandee le 21/09/2026 » ne tenait pas dans la case a cote de l'oeil. */
.verrou .quand{display:block;font-size:11px;font-weight:700;letter-spacing:.2px;opacity:.78}
/* Sans preuve, rien a acheter : la carte se montre, le geste d'achat ne s'offre pas. */
.verrou.pas-mesure{background:#eef1f6;border-color:#5d6b85;color:#2b3852}
/* Les deux signes d'une carte prise. Le « ! » orange ouvre la fenetre ou le client nous ecrit ; le
   « ? » rouge, pose au coin haut de la carte, ouvre le detail. Ni l'un ni l'autre n'est une image :
   un caractere dans la police de titre, comme la croix qui ferme une fiche, net a toute taille et
   rien a charger. Leur forme est celle des autres boutons du jeu, cadre marine et socle de 4 px. */
.b.alerte{background:linear-gradient(#ffc46b 0 18%,#f08a1c 18%,#d9730a 70%,#bf6108 100%)}
.b.signe{font:400 28px/1 var(--titre);letter-spacing:.5px}
/* Le bouton vert d'une carte a relire porte, sous son mot, la date ou le silence vaudra accord. */
.b.relire{flex-direction:column;line-height:1.1}
.b.relire .quand{display:block;margin-top:2px;font-size:11px;font-weight:700;letter-spacing:.2px;opacity:.88}
.aide{position:absolute;right:9px;top:9px;z-index:5;width:34px;height:34px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:11px;border:3px solid var(--navy);
  background:linear-gradient(#e8503c,#b52619);color:#fff;font:400 22px/1 var(--titre);
  text-shadow:0 2px 0 rgba(10,26,51,.55);box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 3px 0 var(--navy);
  transition:transform .07s,box-shadow .07s}
.aide:hover{filter:brightness(1.08)}
.aide:active{transform:translateY(2px);box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 1px 0 var(--navy)}
.vide{color:#fff;font-weight:700;font-size:15px;padding:14px 18px;background:rgba(10,26,51,.72);border-radius:14px;text-align:center}
@container (max-width:250px){
  .pied [data-action=detail]{margin-right:6px;padding:0 9px}
  .pied .b{font-size:13.5px;padding:0 8px}
  /* Le « ! » garde sa taille de touche : c'est l'etat, a cote, qui se resserre. */
  .pied .b.signe{width:42px;margin-right:6px;padding:0;font-size:26px}
  .prix b{padding:0 8px 0 6px;font-size:19px}
  .b.plein.acquis::before{width:13px;height:11px;margin-right:4px}
}

/* Legendaire. Double lisere or et noir, anneau d'or qui tourne dans le biseau, couronne de feu,
   etincelles. Tout ce qui bouge n'anime que transform et opacity. */
.carte[data-palier=majeur]::before{background:linear-gradient(155deg,#fff6b8 0%,#ffcc33 28%,#f29a00 72%,#9c5a00 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.75),inset 0 -4px 0 rgba(110,55,0,.5),0 0 0 3px #ffcc33,0 0 0 5px var(--navy),0 8px 0 2px var(--navy),0 0 14px 7px rgba(255,190,40,.55)}
.carte[data-palier=majeur] .cadre{box-shadow:inset 0 0 0 2px #ffe27a}
.anneau{position:absolute;inset:3px;z-index:-1;border-radius:19px;padding:6px;overflow:clip;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.anneau::before{content:"";position:absolute;left:50%;top:50%;width:230%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,transparent 0 6%,rgba(255,250,220,.95) 11%,#fff 12.5%,rgba(255,236,150,.85) 15%,transparent 21% 50%,rgba(255,250,220,.95) 56%,#fff 57.5%,rgba(255,236,150,.85) 60%,transparent 66%);
  animation:tourner-centre 3.6s linear infinite}
.feu{position:absolute;inset:0;z-index:-2;pointer-events:none}
.feu::before{content:"";position:absolute;inset:0;border-radius:22px;box-shadow:0 0 3px 2px rgba(255,236,150,.9),0 0 18px 7px rgba(255,165,20,.78);animation:pouls 1.8s ease-in-out infinite alternate}
.feu::after{content:"";position:absolute;left:2%;right:2%;top:-34px;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,170,20,.6),rgba(255,120,0,0))}
.nappe{position:absolute;display:block;left:1%;right:1%;bottom:calc(100% - 16px);height:108px;overflow:clip;transform-origin:50% 100%;
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.nappe svg{display:block;width:100%;height:100%}
.nappe.n1{animation:lecher-1 1.25s ease-in-out infinite alternate,crepite 2.3s linear infinite}
.nappe.n2{left:4%;right:4%;height:78px;bottom:calc(100% - 14px);animation:lecher-2 .85s ease-in-out infinite alternate}
.carte:nth-child(even) .nappe.n1{animation-delay:-.6s,-1.1s}
.carte:nth-child(even) .nappe.n2{animation-delay:-.4s}
.carte[data-palier=majeur] .illu::before{background:repeating-conic-gradient(rgba(255,255,255,.42) 0 8deg,rgba(255,255,255,0) 8deg 22deg);animation:tourner 16s linear infinite}
.eclat{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.12) 52%,rgba(255,255,255,0) 60%);transform:translateX(-100%);animation:balayage 4.6s ease-in-out infinite}
[data-palier=fort] .eclat{background:linear-gradient(105deg,rgba(255,255,255,0) 44%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0) 56%);animation-duration:8s}
.etincelles{position:absolute;inset:-8px;z-index:7;pointer-events:none}
.etincelles i{position:absolute;width:12px;height:12px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0 24%,#ffe680 40%,rgba(255,170,0,0) 70%);animation:braise 2.4s ease-out infinite}
.etincelles i:nth-child(1){left:12%;top:0;animation-delay:-.3s}
.etincelles i:nth-child(2){left:38%;top:-4px;animation-delay:-1.1s}
.etincelles i:nth-child(3){left:64%;top:2px;animation-delay:-1.8s}
.etincelles i:nth-child(4){left:86%;top:0;animation-delay:-.7s}
.etincelles i:nth-child(n+5){width:24px;height:24px;border-radius:0;background:radial-gradient(circle,#fff 0 18%,#fff3b0 30%,#ffcc33 55%);clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);animation:scintille 2.2s ease-in-out infinite}
.etincelles i:nth-child(5){left:0;top:10%;animation-delay:-.4s}
.etincelles i:nth-child(6){right:0;top:34%;animation-delay:-1.3s}
.etincelles i:nth-child(7){left:0;top:70%;animation-delay:-1.9s}
.etincelles i:nth-child(8){right:0;bottom:4%;animation-delay:-.9s}
@keyframes tourner{to{transform:rotate(1turn)}}
@keyframes tourner-centre{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}
@keyframes pouls{from{opacity:.4}to{opacity:1}}
@keyframes lecher-1{0%{transform:scaleY(.82) skewX(-3deg)}45%{transform:translateX(3px) scaleY(1.06) skewX(2deg)}100%{transform:translateX(-2px) scaleY(.92) skewX(-1deg)}}
@keyframes lecher-2{0%{transform:translateX(-3px) scaleY(1.05) skewX(2deg)}55%{transform:translateX(2px) scaleY(.8) skewX(-2.5deg)}100%{transform:scaleY(.96) skewX(1deg)}}
@keyframes crepite{0%,100%{opacity:.95}30%{opacity:.72}55%{opacity:1}80%{opacity:.8}}
@keyframes balayage{0%,58%{transform:translateX(-100%)}88%,100%{transform:translateX(100%)}}
@keyframes braise{0%{transform:translateY(8px) scale(.5);opacity:0}20%{opacity:1}100%{transform:translateY(-58px) scale(.9);opacity:0}}
@keyframes scintille{0%,100%{transform:scale(.2) rotate(0deg);opacity:0}45%{transform:scale(1.05) rotate(45deg);opacity:1}70%{transform:scale(.6) rotate(70deg);opacity:.6}}

.au-repos,.au-repos::before,.au-repos::after,.au-repos *,.au-repos *::before,.au-repos *::after{animation-play-state:paused !important}

/* La carte fantome : la forme d'une carte pendant que la mesure se fait. Elle prend le gris du
   palier « attente », et ses os sont des blocs vides aux dimensions de ce qu'ils remplacent, pour
   que la vraie carte prenne exactement leur place quand elle arrive. Un seul balayage les traverse,
   en transform, donc il se met en pause hors de l'ecran comme le reste. */
.carte.fantome{pointer-events:none;filter:saturate(.18)}
.fantome .cadre{--fc:#eef1f6}
.fantome .os{display:block;position:relative;overflow:clip;border-radius:8px;background:rgba(10,26,51,.17)}
.fantome .os::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
  animation:fantome-balai 1.7s var(--retard,0ms) linear infinite}
@keyframes fantome-balai{to{transform:translateX(100%)}}
.fantome h3{display:flex;flex-direction:column;gap:9px;padding-top:14px}
.fantome h3 .os{height:17px;width:88%}
.fantome h3 .court{width:56%}
.fantome .haut .os{height:23px;width:74px;border-radius:999px;background:rgba(255,255,255,.6)}
.fantome .haut .large{width:104px}
.fantome .scene .embleme{width:72px;height:72px;border-radius:18px;background:rgba(10,26,51,.55)}
.fantome .scene .plaque{flex:1;height:58px;border-radius:14px;background:rgba(10,26,51,.72)}
.fantome .ruban b{padding:9px 20px 10px}
.fantome .ruban .os{height:16px;width:118px;margin:0 auto;background:rgba(10,26,51,.24)}
.fantome .corps .mesure{height:11px;width:72%}
.fantome .corps .stat{height:46px;border-radius:12px}
.fantome .pied{display:flex;gap:7px;align-items:stretch}
.fantome .pied .bouton{width:74px;height:42px;border-radius:12px}
.fantome .pied .achat{flex:1;height:42px;border-radius:12px}

/* Mystere : carte sombre. */
.carte[data-palier=sous-seuil]{--encre:#f3efff;--doux:#cfc6ec}
.carte[data-palier=sous-seuil] .ligne-stat{background:rgba(255,255,255,.05)}
.carte[data-palier=sous-seuil] .jauge{background:#0f0b1f}
.carte[data-palier=sous-seuil] .illu,dialog[data-palier=sous-seuil] header .illu{background:
    radial-gradient(40% 55% at 18% 62%,rgba(170,130,255,.55),transparent 70%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 18px),
    radial-gradient(95% 130% at 22% 60%,#4b3a86 0%,#2c2052 45%,#120c24 100%)}
.carte[data-palier=sous-seuil] .illu::before,dialog[data-palier=sous-seuil] header .illu::before{opacity:.35}
.carte[data-palier=sous-seuil] .mystere{animation:flotte 3.4s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Fiche detail : la fenetre de carte */
dialog.fiche{border:4px solid var(--navy);border-radius:24px;padding:0;max-width:720px;width:calc(100% - 32px);background:#e9f0fa;color:var(--encre);box-shadow:0 8px 0 var(--navy),0 30px 80px rgba(0,0,0,.55);overflow:auto;overscroll-behavior:contain}
dialog.fiche[data-palier=majeur]{border-color:#ffcc33;box-shadow:0 0 0 4px var(--navy),0 0 34px 6px rgba(255,190,40,.7),0 30px 80px rgba(0,0,0,.55)}
dialog::backdrop{background:radial-gradient(circle at 50% 35%,rgba(27,74,168,.6),rgba(4,10,26,.9))}
.fiche > article{padding:0 0 24px}
.fiche header{position:relative}
.fiche header .illu{height:auto;min-height:150px;padding:14px 64px 44px 16px;border-bottom:3px solid var(--navy)}
.fiche header .illu::before{left:70px;top:96px}
.fiche header .scene{position:relative;left:auto;right:auto;bottom:auto;margin-top:14px}
.fiche h2{margin:0;font:400 30px/1.12 var(--titre);letter-spacing:.6px;color:#fff;text-shadow:0 3px 0 #000;background:rgba(10,26,51,.9);border:2px solid rgba(255,255,255,.24);border-radius:14px;padding:6px 12px 8px}
.fiche header .ruban{margin:-22px auto 0;width:min(320px,70%);min-width:0}
.fiche .fermer{position:absolute;right:12px;top:12px;z-index:8;width:46px;height:46px;padding:0;border-radius:13px;cursor:pointer;background:linear-gradient(#d93a28,#b52619);border:3px solid var(--navy);color:#fff;font:400 32px/1 var(--titre);text-shadow:var(--halo);box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 4px 0 var(--navy)}
.fiche .fermer:active{transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 1px 0 var(--navy)}
.fiche section{position:relative;margin:34px 18px 0;padding:22px 18px 14px;background:#fff;border:3px solid #c3d2e8;border-radius:16px;box-shadow:0 4px 0 #c3d2e8}
.fiche h4{position:absolute;left:14px;top:-19px;margin:0;font:400 17px/1 var(--titre);letter-spacing:.3px;color:#fff;text-shadow:var(--halo);background:linear-gradient(#2a63cc,#1d52b5);border:3px solid var(--navy);border-radius:10px;padding:7px 12px 8px;box-shadow:inset 0 3px 0 rgba(255,255,255,.28),0 3px 0 var(--navy);max-width:calc(100% - 28px)}
.fiche h5{margin:0 0 6px;font-size:13px;color:var(--doux);font-weight:800}
.fiche p{margin:0 0 8px;font-size:15px}
.fiche .src{font-size:12.5px;color:var(--doux)}
.fiche code{font:13px ui-monospace,Consolas,monospace;background:#e9f0fa;padding:1px 6px;border-radius:5px;word-break:break-word}
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:12px}
.chiffres div{background:linear-gradient(#f4f8ff,#dfe9f8);border:2px solid #b8c9e2;border-radius:12px;padding:10px 12px;box-shadow:0 3px 0 #b8c9e2}
.chiffres b{display:block;font:400 28px/1.05 var(--titre);letter-spacing:.3px;word-spacing:.14em;color:var(--navy)}
.chiffres div:last-child b{color:var(--r4)}
dialog[data-palier=niche] .chiffres div:last-child b{color:#46536a}
.chiffres span{display:block;margin-top:4px;font-size:12.5px;line-height:1.35;color:var(--doux);font-weight:600}
ul.preuves,ul.inclus,.maille ul{margin:0 0 8px;padding:0;list-style:none}
/* Les preuves : ce qui a ete mesure, avec quoi, ce que ca a donne et quand. */
ul.preuves li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"quoi res" "src src";gap:2px 12px;align-items:baseline;padding:9px 12px;margin-bottom:8px;background:#f4f8ff;border:2px solid #b8c9e2;border-radius:12px}
ul.preuves b{grid-area:quoi;font-size:14.5px;font-weight:800}
ul.preuves .res{grid-area:res;justify-self:end;min-width:0;text-align:right;font:400 19px/1.1 var(--titre);letter-spacing:.3px;word-spacing:.1em;color:var(--navy);overflow-wrap:anywhere}
/* Un resultat long ne tient pas dans la colonne de droite : il prend sa propre ligne, a gauche,
   dans la taille du texte courant. La classe est posee par carte.js, qui connait la longueur ;
   une feuille de style ne sait pas compter les caracteres. */
ul.preuves li.longue{grid-template-columns:minmax(0,1fr);grid-template-areas:"quoi" "res" "src"}
ul.preuves li.longue .res{justify-self:start;text-align:left;font:600 14px/1.45 var(--corps,inherit);letter-spacing:0;word-spacing:normal}
ul.preuves .src{grid-area:src;font-size:12.5px;color:var(--doux)}
.maille{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.maille li{font-size:14px;padding:3px 0}
ul.inclus li{font-size:14.5px;padding:4px 0 4px 24px;position:relative}
ul.inclus li::before{content:"";position:absolute;left:0;top:9px;width:13px;height:13px;transform:rotate(45deg);border-radius:3px;background:linear-gradient(135deg,#a6d5ff,#56aefc 50%,#1f6fe0);border:2px solid var(--navy)}
.prixfiche{display:flex;justify-content:flex-end;align-items:stretch;margin:14px 0 4px !important}
.prixfiche > b{order:2;font-size:24px;padding:0 14px 0 12px}
.prixfiche > b::before{width:18px;height:18px}
/* a.b est le geste d'achat de la vitrine, un lien vers l'inscription : il se cale comme le bouton
   du panier, sinon le prix de la fiche ne serait colle a rien. */
.prixfiche .b[data-action=panier],.prixfiche .b.relire,.prixfiche .verrou,.prixfiche a.b{flex:0 1 230px;font-size:16px;border-top-right-radius:0;border-bottom-right-radius:0}
/* Le « ! » de la fiche : meme carre que sur la carte, pose avant l'etat. */
.prixfiche .b.signe{flex:none;width:52px;margin-right:8px;font-size:30px}

/* --- Ce qui bouge selon la largeur --------------------------------------------------------------- */

@media(max-width:900px){
  .maille{grid-template-columns:1fr}
}
@media(max-width:760px){
  ul.grille{gap:88px 0}
  .fiche header .illu{padding:12px 60px 40px 12px}
  .fiche h2{font-size:24px}
  .fiche section{margin:32px 12px 0;padding:22px 12px 12px}
  .embleme{width:60px;height:60px}
  .fiche .embleme{width:52px;height:52px}
  .prixfiche .b[data-action=panier],.prixfiche .b.relire,.prixfiche a.b{flex:1 1 auto}
  ul.preuves li{grid-template-columns:minmax(0,1fr);grid-template-areas:"quoi" "res" "src";gap:1px}
  ul.preuves .res{justify-self:start;text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .eclat{display:none}
  .fantome .os::after{animation:none}
  .carte:hover,.carte.survol{--ty:0px}
  .etincelles i:nth-child(n+5){opacity:.95;transform:scale(.8)}
}