/* ==========================================================================
   L'ECRIN (v39, DECISIONS §90) — la carte scellee, son etiquette, la
   visionneuse et l'atelier. Chargee par le jeu (index.html) et par la page
   publique /ecrin/<n>.

   L'etiquette et la plaque sont mesurees en cqw (largeur de leur propre
   boite) : dessinees a 410 et 380 px dans la maquette validee, elles restent
   identiques a toutes les tailles, de la vignette a la visionneuse.
   PIEGE : un cqw se mesure sur le conteneur ANCETRE. Sur la boite qui EST le
   conteneur, il vaut la largeur de l'ecran (aucun ancetre) : la colonne de la
   bande faisait 105 px au lieu de 30. La boite elle-meme ne parle donc qu'en
   %, et ses enfants en cqw — d'ou les boites interieures du plat et de la
   vignette.

   A PLAT (mode sobre, sans WebGL, listes) : ni fusion, ni flou, ni masque,
   ni animation — ce qui fait tomber le rendu logiciel (DECISIONS §33).
   ========================================================================== */

/* --------------------------------------------------------- l'etiquette (A) */
.ec-etiquette{container-type:inline-size;position:relative;width:100%;aspect-ratio:410/132;
  border-radius:1.7%/5.3%;overflow:hidden;display:grid;grid-template-columns:7.32% 1fr 15.12% 22.93%;
  --e-fond:linear-gradient(160deg,#161A2B,#0B0D17);--e-encre:#EEF1F8;--e-pale:#8F9AB4;--e-accent:#9EF3FF;
  background:var(--e-fond);color:var(--e-encre);font-family:Archivo,sans-serif;
  box-shadow:0 1px 3px #0008,inset 0 0 0 1px #FFFFFF18;text-align:left}
.ec-etiquette .ec-bande{display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:2.2cqw 0 1.95cqw;color:#0B0D17;background-size:100% 320%;
  background-image:linear-gradient(170deg,#4FE3D0,#5AA8FF 22%,#A97BFF 44%,#FF77C4 64%,#FFC46B 82%,#4FE3D0);
  background-position:50% var(--ec-reflet,50%)}
.ec-etiquette .ec-bande svg{width:5.37cqw;height:5.37cqw}
.ec-etiquette .ec-bande i{font:800 2.07cqw "JetBrains Mono",monospace;letter-spacing:.26em;font-style:normal;
  writing-mode:vertical-rl;transform:rotate(180deg)}
.ec-etiquette .ec-corps{padding:2.2cqw .98cqw 1.95cqw 2.93cqw;display:flex;flex-direction:column;
  justify-content:space-between;min-width:0}
.ec-etiquette .ec-corps>*{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-etiquette .ec-maison{font:700 2.07cqw "JetBrains Mono",monospace;letter-spacing:.2em;color:var(--e-pale)}
.ec-etiquette .ec-nom{font-size:5.12cqw;font-weight:800;letter-spacing:-.015em;line-height:1.05}
.ec-etiquette .ec-ligne{font-size:2.68cqw;font-weight:600;color:var(--e-pale)}
.ec-etiquette .ec-ligne em{font-style:normal;font-weight:800;color:var(--ec-rang,#FFC46B)}
.ec-etiquette .ec-ligne strong{font-weight:700;color:var(--e-encre)}
.ec-etiquette .ec-mono{font:600 2.32cqw "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--e-pale)}
.ec-etiquette .ec-grade{display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-left:.25cqw solid #FFFFFF14}
.ec-etiquette .ec-grade small{font:700 1.95cqw "JetBrains Mono",monospace;letter-spacing:.18em;color:var(--e-pale)}
.ec-etiquette .ec-grade b{font-size:11.2cqw;font-weight:900;line-height:.95;letter-spacing:-.04em;
  background:linear-gradient(170deg,#FFFFFF 20%,var(--e-accent));-webkit-background-clip:text;background-clip:text;
  color:transparent}
.ec-etiquette .ec-qr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw}
.ec-etiquette .ec-qr-code{display:block;width:18cqw;height:18cqw;border-radius:1.46cqw;background:#F6F7FB;
  overflow:hidden}
.ec-etiquette .ec-qr svg{display:block;width:100%;height:100%}
.ec-etiquette .ec-qr path{fill:#0B0D17}
.ec-etiquette .ec-qr>span:last-child{font:700 2.07cqw "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--e-pale)}
/* Les quatre teintes : Nuit (defaut), Nacre, Or, Iris. */
.ec-etiquette.ec-et-nacre{--e-fond:linear-gradient(160deg,#FBF9F4,#E9E6DE 60%,#F4EFE6);--e-encre:#171A24;
  --e-pale:#6B6F7D;--e-accent:#5AA8FF}
.ec-etiquette.ec-et-or{--e-fond:linear-gradient(160deg,#F7DC93,#D6A64C 55%,#F2CF7E);--e-encre:#2A1C04;
  --e-pale:#6A4C13;--e-accent:#FFF3CF}
.ec-etiquette.ec-et-or .ec-qr-code{background:#FFF8E6}
.ec-etiquette.ec-et-iris{--e-fond:linear-gradient(115deg,#BDF6EE,#BCD9FF 30%,#DCCBFF 55%,#FFC9E6 78%,#FFE3B5);
  --e-encre:#121526;--e-pale:#3D4466;--e-accent:#A97BFF;background-size:260% 100%;
  background-position:var(--ec-reflet,50%) 50%}
.ec-etiquette.ec-et-nacre .ec-grade b{background:linear-gradient(170deg,#171A24 30%,#5A6BD6);
  -webkit-background-clip:text;background-clip:text}
.ec-etiquette.ec-et-or .ec-grade b{background:linear-gradient(170deg,#2A1C04 30%,#7A5310);
  -webkit-background-clip:text;background-clip:text}
.ec-etiquette.ec-et-iris .ec-grade b{background:linear-gradient(170deg,#121526 30%,#6A3FD0);
  -webkit-background-clip:text;background-clip:text}
.ec-etiquette:is(.ec-et-nacre,.ec-et-or,.ec-et-iris) .ec-grade{border-left-color:#0000001C}
/* Sur une etiquette claire, la couleur du rang (or, rose, cyan) ne se lit plus. */
.ec-etiquette:is(.ec-et-nacre,.ec-et-or,.ec-et-iris) .ec-ligne em{color:var(--e-encre)}
/* La premiere tiree au monde : le chiffre se dore. */
.ec-etiquette .ec-grade.premiere b{background:linear-gradient(170deg,#FFF3CF 10%,#FFC46B 60%,#C98A2A);
  -webkit-background-clip:text;background-clip:text}

/* ---------------------------------------------------- la plaque gravee (B) */
.ec-plaque{container-type:inline-size;position:relative;width:100%;aspect-ratio:380/92;border-radius:2.63%/10.9%;
  overflow:hidden;display:grid;grid-template-columns:1fr 20.5%;color:#23262F;text-align:left;
  background:repeating-linear-gradient(90deg,#FFFFFF0A 0 .26cqw,#00000008 .26cqw .79cqw),
    linear-gradient(100deg,#9DA4B2 0%,#E9EDF3 var(--ec-reflet,40%),#A3A9B6 calc(var(--ec-reflet,40%) + 22%),#D2D7E0 100%);
  box-shadow:0 2px 4px #0009,inset 0 1px 0 #FFFFFFB0,inset 0 -1px 0 #0000004D}
.ec-plaque .ec-corps{padding:2.63cqw 1.58cqw 2.37cqw 4.21cqw;display:flex;flex-direction:column;
  justify-content:space-between;min-width:0}
.ec-plaque .ec-corps>*{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 .26cqw 0 #FFFFFF99}
.ec-plaque .ec-nom{font-size:5cqw;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1;
  color:#262A33;text-shadow:0 .26cqw 0 #FFFFFFB5,0 -.26cqw 0 #00000030}
.ec-plaque .ec-ligne{font-size:2.76cqw;font-weight:700;color:#3A3F4C}
.ec-plaque .ec-mono{font:600 2.37cqw "JetBrains Mono",monospace;letter-spacing:.07em;color:#4B5160}
.ec-plaque .ec-qr{display:flex;align-items:center;justify-content:center}
.ec-plaque .ec-qr-code{display:block;width:17.4cqw;height:17.4cqw}
.ec-plaque .ec-qr svg{display:block;width:100%;height:100%}
.ec-plaque .ec-qr path{fill:#2A2E38}

/* --------------------------------------------------------------- a plat -- */
.ec-plat{container-type:inline-size;position:relative}
.ec-plat-boite{position:relative;display:flex;flex-direction:column;
  gap:3.9cqw;padding:5.2cqw;border-radius:4.4cqw;
  background:linear-gradient(150deg,#FFFFFF2A 0%,#FFFFFF0A 24%,#FFFFFF05 62%,#FFFFFF16 100%);
  box-shadow:inset 0 0 0 .35cqw #FFFFFF3D,inset 0 0 0 1.8cqw #A9D8E30D,0 5cqw 10cqw #000A}
.ec-plat-boite::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,transparent 32%,#FFFFFF12 39%,transparent 47%)}
.ec-plat .ec-puits{position:relative;padding:.9cqw;border-radius:5.4cqw/4cqw;background:var(--ec-lisere)}
.ec-plat .ec-puits>.carte{box-shadow:0 .4cqw 1.6cqw #0009}
.ec-plat.ec-mo-cristal .ec-plat-boite{padding:12cqw 12cqw 9cqw;gap:5cqw;border-radius:2.4cqw;
  border:1.6cqw solid transparent;
  background:linear-gradient(150deg,#1A2236F2,#0D1220F2) padding-box,
    linear-gradient(135deg,#4FE3D0,#5AA8FF 25%,#A97BFF 50%,#FF77C4 75%,#FFC46B) border-box;
  box-shadow:inset 0 0 0 .4cqw #FFFFFF55,inset 0 0 6cqw #A97BFF2E,0 6cqw 12cqw #000B}
/* Les gravures, a plat : des points d'etoiles poses une fois, immobiles. */
.ec-plat.ec-gr-constellation .ec-plat-boite::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:radial-gradient(circle at 12% 8%,#FFFFFFCC 0 .35cqw,transparent .5cqw),
    radial-gradient(circle at 86% 14%,#9EF3FFCC 0 .45cqw,transparent .6cqw),
    radial-gradient(circle at 6% 52%,#C9B3FFCC 0 .3cqw,transparent .45cqw),
    radial-gradient(circle at 94% 61%,#FFFFFFCC 0 .35cqw,transparent .5cqw),
    radial-gradient(circle at 18% 93%,#FFC9E6CC 0 .4cqw,transparent .55cqw),
    radial-gradient(circle at 78% 95%,#9EF3FFCC 0 .3cqw,transparent .45cqw),
    radial-gradient(circle at 50% 3%,#FFFFFF99 0 .3cqw,transparent .45cqw)}
/* Le liseré autour de la carte : iris, argent, or. */
.ec-li-iris{--ec-lisere:linear-gradient(135deg,#4FE3D0,#5AA8FF 30%,#A97BFF 60%,#FF77C4 85%,#FFC46B)}
.ec-li-argent{--ec-lisere:linear-gradient(135deg,#8C93A3,#F2F5FA 35%,#9EA5B5 65%,#E4E8EF)}
.ec-li-or{--ec-lisere:linear-gradient(135deg,#9A6A1E,#FFE7A6 35%,#C99634 65%,#FFD983)}

/* ------------------------------------------------------------ vignettes -- */
.ec-etagere{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
.ec-vignette{container-type:inline-size;position:relative;display:block;padding:0;border:0;border-radius:8%/6%;
  cursor:pointer;color:var(--txt,#F1F3F9);text-align:left;font:inherit;
  background:linear-gradient(150deg,#FFFFFF24,#FFFFFF08 40%,#FFFFFF14);
  box-shadow:inset 0 0 0 1px #FFFFFF3A,0 10px 24px #0008}
.ec-v-boite{display:flex;flex-direction:column;gap:3cqw;padding:6cqw 6cqw 5cqw}
.ec-vignette.ec-mo-cristal{background:linear-gradient(150deg,#1A2236,#0D1220) padding-box,
    linear-gradient(135deg,#4FE3D0,#5AA8FF 25%,#A97BFF 50%,#FF77C4 75%,#FFC46B) border-box;
  border:2px solid transparent}
.ec-vignette:focus-visible{outline:2px solid var(--iris-2,#5AA8FF);outline-offset:3px}
.ec-vignette:hover{box-shadow:inset 0 0 0 1px #FFFFFF5A,0 12px 30px #000A}
.ec-vignette img{display:block;width:100%;aspect-ratio:734/1024;object-fit:cover;border-radius:4cqw;
  border:2cqw solid transparent;background:var(--ec-lisere) border-box}
.ec-v-bandeau{font:700 7cqw "JetBrains Mono",monospace;letter-spacing:.1em;color:#0B0D17;text-align:center;
  border-radius:3cqw;padding:2cqw 0;background:linear-gradient(100deg,#4FE3D0,#5AA8FF,#A97BFF,#FF77C4)}
.ec-vignette.ec-et-nacre .ec-v-bandeau{background:#F4F1EA}
.ec-vignette.ec-et-or .ec-v-bandeau{background:linear-gradient(100deg,#F7DC93,#D6A64C)}
.ec-vignette.ec-et-nuit .ec-v-bandeau{background:#161A2B;color:#9EF3FF}
.ec-v-nom{font-size:9.5cqw;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-v-tirage{font:600 7cqw "JetBrains Mono",monospace;color:var(--gris,#9BA2B8)}

/* --------------------------------------------------- la scene en 3D -- */
/* pan-y : un glisser vertical fait defiler la page, un glisser horizontal tourne le bloc. */
.ec-scene{position:relative;overflow:hidden;touch-action:pan-y;outline:none}
.ec-scene.prise{cursor:grabbing}
.ec-scene:focus-visible{box-shadow:inset 0 0 0 2px var(--iris-2,#5AA8FF)}
.ec-scene .ec-vue{position:absolute;inset:0;overflow:hidden}
.ec-scene .ec-cam{position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d}
/* Origine au centre, toujours : la matrice venue de WebGL retourne l'axe y. */
.ec-scene .ec-cam>*{position:absolute;left:0;top:0;transform-style:preserve-3d;transform-origin:50% 50%}
.ec-scene .ec-pose>.carte{box-shadow:0 2px 8px #0009,0 0 0 1px #FFFFFF10}
.ec-scene .ec-gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Dans le bloc, la carte ne reagit plus seule a la souris : la carte du jeu
   s'inclinait au survol et tournait DANS le plexiglas. Le bloc bouge d'une
   seule piece, a l'ecran entier (ecrin.mjs, monterScene). */
.ec-pose .carte,.ec-pose .carte *,.ec-plat .carte,.ec-plat .carte *{pointer-events:none!important}
.ec-pose .carte,.ec-plat .carte{--rot-x:0deg!important;--rot-y:0deg!important}
.ec-scene.a-plat{display:flex;align-items:center;justify-content:center;cursor:default;touch-action:auto}
.ec-scene.a-plat>.ec-plat{width:min(72%,340px)}
.ec-scene.a-plat>.ec-plat.ec-mo-cristal{width:min(80%,380px)}

/* ----------------------------------------------- visionneuse et atelier -- */
.ec-voile{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;
  background:#06050CF2}
.ec-voile.on{display:flex}
/* Une confirmation passe toujours devant : y compris devant un Ecrin ou un profil. */
.voile.confirmation{z-index:1400}
.ec-panneau{position:relative;width:min(1120px,96vw);height:min(780px,94vh);display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);border-radius:18px;overflow:hidden;
  background:radial-gradient(ellipse 70% 80% at 30% 50%,#1D1934 0%,#0B0A15 62%,#07060D 100%);
  box-shadow:inset 0 0 0 1px #FFFFFF12,0 30px 80px #000C}
.ec-panneau>.fermer{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid #FFFFFF22;background:#0B0A15;color:#F1F3F9;font-size:16px;cursor:pointer}
.ec-panneau>.ec-scene{min-height:0}
.ec-info{padding:56px 32px 28px 8px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.ec-info h2{margin:0;font-size:30px;font-weight:900;letter-spacing:-.02em}
.ec-sous{margin:0;color:var(--gris,#9BA2B8);font-weight:600}
.ec-attente{color:var(--gris,#9BA2B8);margin:auto}
.ec-faits{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:6px 0 0;font-size:14.5px}
.ec-faits dt{color:var(--gris,#9BA2B8);font:600 12px "JetBrains Mono",monospace;letter-spacing:.06em;
  text-transform:uppercase;padding-top:2px}
.ec-faits dd{margin:0;font-weight:650;overflow-wrap:anywhere}
.ec-verdict{margin:4px 0 0;padding:10px 14px;border-radius:10px;font-weight:650;font-size:14px;
  background:#FFFFFF0A;border:1px solid #FFFFFF14}
.ec-verdict.conforme{background:#3FD6A414;border-color:#3FD6A455;color:#9EF3D0}
.ec-verdict.nonConforme{background:#E8875F14;border-color:#E8875F55;color:#FFB59A}
.ec-note{margin:0;color:var(--gris,#9BA2B8);font-size:13.5px;line-height:1.5}
.ec-actes{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px}
.ec-actes button,.ec-actes .ec-lien{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;
  font:650 14px Archivo,sans-serif;cursor:pointer;color:#F1F3F9;background:#FFFFFF0D;border:1px solid #FFFFFF22;
  text-decoration:none}
.ec-actes button.pri{color:#0B0D17;border:0;background:linear-gradient(100deg,#4FE3D0,#5AA8FF 40%,#A97BFF 75%,#FF77C4)}
.ec-actes button.grave{color:#FFB59A;border-color:#E8875F66}
.ec-actes button:disabled{opacity:.5;cursor:default}

.ec-atelier{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:22px 26px 20px}
.ec-atelier>h2{margin:0 48px 14px 0;font-size:26px;font-weight:900;letter-spacing:-.02em}
.ec-atelier-corps{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px}
.ec-recherche{width:100%;max-width:360px;padding:10px 14px;border-radius:10px;border:1px solid #FFFFFF22;
  background:#0B0A15;color:#F1F3F9;font:inherit}
.ec-choix-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.ec-choix-carte{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:12px;cursor:pointer;
  border:1px solid #FFFFFF14;background:#FFFFFF08;color:#F1F3F9;font:600 12.5px Archivo,sans-serif;text-align:left}
.ec-choix-carte img{width:100%;aspect-ratio:734/1024;object-fit:cover;border-radius:8px;
  box-shadow:0 0 0 2px var(--ec-rang,#8E96AC)}
.ec-choix-carte span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-choix-carte:hover,.ec-choix-carte:focus-visible{border-color:#FFFFFF44;background:#FFFFFF10}
.ec-choix-carte{position:relative}
.ec-choix-carte:disabled{opacity:.45;cursor:default}
.ec-badge{position:absolute;top:10px;left:10px;padding:2px 8px;border-radius:999px;font:700 10.5px Archivo,sans-serif;
  font-style:normal;color:#0B0D17;background:linear-gradient(100deg,#4FE3D0,#5AA8FF,#A97BFF)}
.ec-retour{align-self:flex-start;padding:4px 0;border:0;background:none;color:var(--gris,#9BA2B8);
  font:650 13.5px Archivo,sans-serif;cursor:pointer}
.ec-retour:hover{color:#F1F3F9}
.ec-exemplaires{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:560px}
.ec-exemplaire{width:100%;display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:12px;
  border:1px solid #FFFFFF1C;background:#FFFFFF08;color:#F1F3F9;font:600 14px Archivo,sans-serif;cursor:pointer;
  text-align:left}
.ec-exemplaire span{color:var(--gris,#9BA2B8);font-weight:550}
.ec-exemplaire:hover:not(:disabled){border-color:#5AA8FF88}
.ec-exemplaire:disabled{opacity:.45;cursor:default}
/* L'apercu remplit la hauteur ; les reglages defilent seuls, et le prix et
   le bouton restent en bas, toujours visibles. */
.ec-atelier-cols{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);gap:18px}
.ec-apercu{min-height:0;border-radius:14px;background:#FFFFFF05}
.ec-reglages{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto}
.ec-groupe{margin:0;padding:0;border:0}
.ec-groupe legend{padding:0;margin-bottom:8px;font:700 12px "JetBrains Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris,#9BA2B8)}
.ec-segments{display:flex;flex-wrap:wrap;gap:8px}
.ec-seg{padding:9px 14px;border-radius:999px;border:1px solid #FFFFFF22;background:#FFFFFF08;color:#F1F3F9;
  font:650 13.5px Archivo,sans-serif;cursor:pointer}
.ec-seg[aria-pressed="true"]{border-color:transparent;color:#0B0D17;
  background:linear-gradient(100deg,#4FE3D0,#5AA8FF 40%,#A97BFF 75%,#FF77C4)}
.ec-pied{margin-top:auto;position:sticky;bottom:0;display:flex;flex-direction:column;gap:10px;padding:10px 0 2px;
  border-top:1px solid #FFFFFF14;background:#0D0C17}
.ec-prix{margin:0;font-weight:650;color:#F1F3F9}
.ec-pied .cta:disabled{opacity:.5;cursor:default}

/* ------------------------------------------- la page publique (/ecrin/<n>) -- */
body.ec-page{height:auto;min-height:100dvh;overflow:auto;-webkit-user-select:text;user-select:text}
.ec-page .barre{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;
  border-bottom:1px solid #FFFFFF1A}
.ec-page .marque{font-weight:800;letter-spacing:.18em;text-decoration:none;font-size:15px;color:transparent;
  background:linear-gradient(102deg,#4FE3D0,#5AA8FF 34%,#A97BFF 62%,#FF77C4);-webkit-background-clip:text;background-clip:text}
.ec-page .serie{color:var(--gris,#9BA2B8);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.ec-page-main{max-width:1180px;margin:0 auto;padding:18px 20px 60px;display:grid;gap:24px;align-items:start;
  grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr)}
.ec-page-scene{height:min(78vh,760px);border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 70% 80% at 50% 50%,#1D1934 0%,#0B0A15 62%,#07060D 100%)}
.ec-page-repli{display:block;max-height:86%;max-width:70%;width:auto;border-radius:4.6%/3.3%}
.ec-page .ec-info{padding:8px 0}
.ec-page h1{margin:0;font-size:clamp(28px,4vw,40px);font-weight:900;letter-spacing:-.02em}
.ec-page .appel{margin:10px 0 0}
.ec-page .bouton{display:inline-block;padding:12px 20px;border-radius:999px;font-weight:700;text-decoration:none;
  color:#0B0D17;background:linear-gradient(100deg,#4FE3D0,#5AA8FF 40%,#A97BFF 75%,#FF77C4)}
.ec-page .pitch{margin:0;color:var(--gris,#9BA2B8);font-size:14.5px;max-width:46ch}

/* ----------------------------------------------- profil et fiche (jeu) -- */
.pp-ecrins{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.pp-ecrin-vitrine{cursor:pointer}
.pp-ecrin-vitrine:focus-visible{outline:2px solid var(--iris-2,#5AA8FF);outline-offset:3px}
.pp-ecrin-vedette{width:min(300px,100%);display:flex;flex-direction:column;gap:10px;cursor:pointer}
.pp-ecrins>.ec-etagere{flex:1 1 280px}
.fiche-ecrin{margin-top:18px;padding-top:16px;border-top:1px solid var(--verre-bord,#FFFFFF1A)}

/* Telephone : la scene en haut, le reste dessous, plein ecran. */
@media (max-width:760px){
  .ec-panneau{width:100vw;height:100dvh;border-radius:0;grid-template-columns:1fr;grid-template-rows:56dvh auto}
  .ec-info{padding:18px 18px 26px;overflow:visible}
  .ec-panneau:not(.ec-atelier){overflow:auto}
  .ec-info h2{font-size:24px}
  .ec-atelier{grid-template-rows:auto minmax(0,1fr);padding:16px 14px}
  .ec-atelier-cols{grid-template-columns:1fr;flex:0 0 auto}
  .ec-apercu{min-height:46dvh}
  .ec-reglages{overflow:visible}
  .ec-etagere{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
  .ec-page-main{grid-template-columns:1fr;padding:12px 14px 40px}
  .ec-page-scene{height:62dvh}
}