/* Cosmo — le site. La lumière de l'éditeur de personnage : blanc nacré et lilas, motes de lumière qui montent,
   encre violette. Polices : le logo (Open Sans SemiBold, comme dans le jeu), Nunito pour le texte, Caveat pour les
   légendes des polaroïds, Cinzel pour le studio. */
@font-face { font-family: 'CosmoLogo'; src: url('../polices/cosmo-logo.woff2') format('woff2'); font-display: swap; }

:root {
	--encre: #403869;
	--encre-douce: #403869a6;
	--lilas: #8f73d6;
	--lilas-clair: #b9a6ee;
	--nacre: #fbfaff;
	--voile: #e9e5f8;
	--carte: rgba(255, 255, 255, 0.62);
	--bord: rgba(184, 168, 228, 0.75);
	--ombre: 0 10px 40px rgba(143, 115, 214, 0.18);
	--commun: #bcc0e0;
	--rare: #7fb3f0;
	--epique: #b98cf0;
	--legendaire: #f0c06a;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: #ece8fb; }
body {
	color: var(--encre);
	font: 16px/1.6 'Nunito', system-ui, sans-serif;
	background: radial-gradient(ellipse at 40% 30%, var(--nacre) 0%, #f1eefc 45%, var(--voile) 100%) fixed;
	overflow-x: hidden;
}
#ciel { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
main, header, footer { position: relative; z-index: 1; }
a { color: var(--lilas); }

/* --- En-tête : le logo qui respire, le menu en haut à droite --- */
header { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; }
.logo-petit { font: 600 28px 'CosmoLogo', 'Open Sans', sans-serif; color: var(--encre); text-decoration: none; position: relative; }
nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
nav a {
	text-decoration: none; color: var(--encre); padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px;
	background: rgba(255, 255, 255, 0.45); border: 1px solid transparent; transition: all .25s ease;
}
nav a:hover, nav a.ici { background: rgba(255, 255, 255, 0.85); border-color: var(--bord); box-shadow: var(--ombre); }
nav a.jouer { background: linear-gradient(135deg, #b8a8f0, var(--lilas)); color: white; }

.logo {
	display: block; margin: 30px auto 6px; width: min(560px, 86vw); height: auto; overflow: visible;
	animation: respire 6s ease-in-out infinite; transform-origin: 50% 60%;
}
.logo text { font: 600 46px 'CosmoLogo', 'Open Sans', sans-serif; }
@keyframes respire {
	0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(184, 158, 242, 0)); }
	50% { transform: scale(1.025); filter: drop-shadow(0 0 18px rgba(184, 158, 242, 0.55)); }
}
.devise { text-align: center; color: var(--encre-douce); font-size: 18px; margin: 0 20px 40px; letter-spacing: .02em; }

main { max-width: 1120px; margin: 0 auto; padding: 0 22px 60px; }
h1, h2 { font-family: 'CosmoLogo', 'Open Sans', sans-serif; font-weight: 600; }
h2 { font-size: 28px; text-align: center; margin: 60px 0 22px; }

/* --- Polaroïds --- */
.polaroids { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;   /* (chacun à sa hauteur : */
	gap: 34px 26px; padding: 10px 0 20px; }                       /* étirés, la légende tombait sous le tirage) */
.polaroid {                              /* le tirage entier (cadre crème compris) vient du jeu : tools/capture_site.gd */
	margin: 0; width: 232px; position: relative; transform: rotate(var(--r, -2deg));
	filter: drop-shadow(0 14px 22px rgba(64, 56, 105, 0.2)); transition: transform .35s ease, filter .35s ease;
}
.polaroid:hover { transform: rotate(0deg) scale(1.07); filter: drop-shadow(0 24px 34px rgba(64, 56, 105, 0.28)); z-index: 2; }
.polaroid img { display: block; width: 100%; height: auto; }
.polaroid figcaption {                   /* écrite à la main dans la marge du bas du tirage */
	position: absolute; left: 0; right: 0; bottom: 6.5%; text-align: center; font: 24px 'Caveat', cursive; color: #5a4f86;
}
.polaroid::before {                     /* un petit ruban adhésif */
	content: ''; position: absolute; top: -9px; left: 50%; width: 70px; height: 22px; transform: translateX(-50%) rotate(-3deg);
	background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(184, 168, 228, 0.35); z-index: 1;
}
.choix-langue { display: inline-flex; gap: 2px; margin-left: 6px; }
.choix-langue a { padding: 8px 10px; font-size: 12px; }

/* --- Pitch et bouton Voyager --- */
.pitch { max-width: 720px; margin: 30px auto 0; text-align: center; font-size: 18px; }
.pitch p { margin: 0 0 14px; }
.voyager {
	display: inline-block; margin: 26px auto 0; padding: 16px 52px; border-radius: 999px; border: 0; cursor: pointer;
	font: 600 24px 'CosmoLogo', 'Open Sans', sans-serif; color: white; text-decoration: none; letter-spacing: .04em;
	background: linear-gradient(135deg, #c9b8f6, var(--lilas) 55%, #7a5fd0);
	box-shadow: 0 10px 34px rgba(143, 115, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	animation: lueur 3.4s ease-in-out infinite; transition: transform .25s ease;
}
.voyager:hover { transform: translateY(-2px) scale(1.04); }
@keyframes lueur { 50% { box-shadow: 0 10px 50px rgba(143, 115, 214, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6); } }
.centre { text-align: center; }
.voyager + .note, .centre + .note { margin-top: 34px; }      /* (le texte sous Voyager : de l'air, pas collé au bouton) */

/* --- Cartes (boutique, compte) --- */
.carte {
	background: var(--carte); border: 1px solid var(--bord); border-radius: 22px; padding: 24px; box-shadow: var(--ombre);
	backdrop-filter: blur(6px);
}
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; align-items: stretch; }
.offre { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; border-width: 3px; }
.offre h3 { font: 600 22px 'CosmoLogo', 'Open Sans', sans-serif; margin: 6px 0 2px; }
.offre .nombre { font-size: 40px; font-weight: 800; color: var(--lilas); line-height: 1.1; }
.offre .unite { font-size: 14px; color: var(--encre-douce); margin-bottom: 10px; }
.offre .bonus { font-size: 13px; font-weight: 700; color: #b06ab8; min-height: 1.4em; }
.offre .prix { font-size: 26px; font-weight: 800; margin: 12px 0 14px; }
.offre .exemples { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 10px 0 4px; min-height: 52px; }
.offre .exemples img { width: 48px; height: 48px; }
.offre .details { font-size: 13px; color: var(--encre-douce); margin: 6px 0 12px; flex: 1; }
.offre.commun { border-color: var(--commun); }
.offre.rare { border-color: var(--rare); box-shadow: 0 10px 40px rgba(127, 179, 240, 0.28); }
.offre.legendaire { border-color: var(--legendaire); box-shadow: 0 10px 40px rgba(240, 192, 106, 0.32); }
.offre.fondateur { border: 3px solid transparent; background:
	linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)) padding-box,
	conic-gradient(from var(--a, 0deg), #ff8fb3, #ffd37a, #a6f08f, #7fe1f0, #9a8cf0, #f08fe6, #ff8fb3) border-box;
	animation: tourne-arc 6s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes tourne-arc { to { --a: 360deg; } }
.etoile-anim { position: absolute; width: 14px; height: 14px; pointer-events: none; animation: scintille 2.6s ease-in-out infinite; }
.etoile-anim svg { width: 100%; height: 100%; }
@keyframes scintille { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.etiquette { position: absolute; top: -13px; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: white; background: var(--lilas); }

.bouton {
	display: inline-block; padding: 11px 26px; border-radius: 999px; border: 1px solid var(--bord); cursor: pointer;
	background: rgba(255, 255, 255, 0.85); color: var(--encre); font: 700 15px 'Nunito', sans-serif; text-decoration: none;
	transition: all .2s ease;
}
.bouton:hover { background: white; box-shadow: var(--ombre); }
.bouton.plein { background: linear-gradient(135deg, #b8a8f0, var(--lilas)); color: white; border-color: transparent; }
.bouton:disabled { opacity: .45; cursor: default; }
.note { font-size: 13px; color: var(--encre-douce); text-align: center; margin-top: 18px; }

/* --- Formulaires --- */
form.compte { display: grid; gap: 10px; max-width: 380px; margin: 0 auto; }
input[type=email], input[type=password], input[type=text] {
	padding: 11px 14px; border-radius: 12px; border: 1px solid var(--bord); background: rgba(255, 255, 255, 0.8);
	font: 15px 'Nunito', sans-serif; color: var(--encre);
}
input:focus { outline: 2px solid var(--lilas-clair); }
.identifiant { text-align: center; margin: 4px 0 0; font-size: 15px; color: var(--encre-douce); }
.identifiant b { color: var(--encre); letter-spacing: .02em; user-select: all; }
form.compte.petit { margin: 14px auto 6px; }
.message:empty { min-height: 0; }
.message { min-height: 1.4em; font-size: 14px; color: #a0508e; text-align: center; }

/* --- Mon compte --- */
.profil { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 26px; align-items: start; }
@media (max-width: 760px) { .profil { grid-template-columns: 1fr; } }
#vue3d { width: 100%; aspect-ratio: 3 / 4; border-radius: 22px; background: radial-gradient(ellipse at 50% 40%, #fff, #ece8fb); display: block; cursor: grab; }
.nom-reveur { font: 600 30px 'CosmoLogo', 'Open Sans', sans-serif; margin: 0; }
.supporter-badge { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; color: white;
	background: linear-gradient(90deg, #ff8fb3, #ffd37a, #a6f08f, #7fe1f0, #9a8cf0); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 16px 0; }
.stat { background: rgba(255, 255, 255, 0.6); border-radius: 14px; padding: 10px 14px; }
.stat b { display: block; font-size: 22px; color: var(--lilas); }
.succes { display: grid; gap: 8px; }
.succes .ligne { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; background: rgba(255, 255, 255, 0.5); border-radius: 12px; padding: 8px 12px; }
.succes .fait { color: #d9a43c; }
.barre { height: 5px; border-radius: 3px; background: #b8a8e440; overflow: hidden; grid-column: 2 / 4; }
.barre i { display: block; height: 100%; background: linear-gradient(90deg, #b8a8f0, var(--lilas)); }
.parures { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.parures img { width: 64px; height: 64px; filter: drop-shadow(0 2px 4px rgba(64, 56, 105, .2)); }
.parures img.portee { outline: 2px solid var(--lilas); border-radius: 50%; }
.cache { display: none !important; }

/* --- Crédits --- */
.credits { max-width: 760px; margin: 0 auto; }
.credits h3 { font-family: 'CosmoLogo', 'Open Sans', sans-serif; font-weight: 600; margin: 28px 0 8px; font-size: 20px; }
.credits ul { margin: 0; padding-left: 20px; }
.credits li { margin: 4px 0; }
.studio { text-align: center; margin: 50px 0 10px; }
.studio .nom { font: 600 46px 'Cinzel', serif; letter-spacing: .32em; margin: 18px 0 0; padding-left: .32em; }
.studio svg { width: 120px; height: 120px; }

footer { text-align: center; padding: 30px 20px 40px; font-size: 13px; color: var(--encre-douce); }

/* --- Télécharger (sous Voyager) : la version de l'appareil, et les autres en petit --- */
.telecharger { margin-top: 14px; font-size: 15px; }
.telecharger a.principal { font-weight: 800; text-decoration: none; border-bottom: 1px dashed var(--lilas-clair); }
.telecharger .autres { margin-top: 6px; font-size: 13px; color: var(--encre-douce); }
.telecharger .autres a { margin: 0 6px; color: var(--encre-douce); }
.telecharger .bientot { font-size: 12px; color: var(--encre-douce); }


/* =====================================================================================================
   Plus organique (demande de l'utilisateur) : grain de papier, liens écrits à la main, soulignés qui ondulent,
   bouton en goutte qui respire, polaroïds éparpillés ; en portrait, une pile qu'on feuillette.
   ===================================================================================================== */
body::before {                                  /* un grain de papier très léger */
	content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35; mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .5  0 0 0 0 .75  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
nav { gap: 2px 14px; align-items: center; }
nav a {                                         /* des mots, pas des pastilles */
	background: none; border: 0; box-shadow: none !important; padding: 6px 4px; font-weight: 700; font-size: 15px;
	position: relative;
}
nav a::after {                                  /* un trait à main levée qui apparaît sous le mot */
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; opacity: 0; transition: opacity .25s ease;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M1 5 C 20 1, 35 8, 52 4 S 85 2, 99 5' stroke='%238f73d6' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat;
}
nav a:hover::after, nav a.ici::after { opacity: 1; }
nav a:hover, nav a.ici { background: none; }
nav a.jouer { background: none; color: var(--lilas); font-family: 'Caveat', cursive; font-size: 24px; padding: 0 4px; }
.choix-langue a { font-size: 12px; opacity: .7; }

h2 { position: relative; display: table; margin-left: auto; margin-right: auto; }
h2::after {                                     /* le titre, souligné d'une vague */
	content: ''; display: block; height: 10px; margin: 4px auto 0; width: 70%;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'><path d='M2 6 Q 15 1, 30 5 T 60 5 T 90 5 T 118 4' stroke='%23b9a6ee' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat;
}
.devise { font: 30px 'Caveat', cursive; color: #5a4f86; }
.pitch p { font-size: 19px; }
.pitch p::before { content: '✦ '; color: var(--lilas-clair); }
.pitch p.note::before { content: none; }

.voyager {                                      /* une goutte de lumière qui respire */
	border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; padding: 20px 58px;
	animation: lueur 3.4s ease-in-out infinite, goutte 9s ease-in-out infinite;
}
@keyframes goutte {
	0%, 100% { border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; }
	33% { border-radius: 45% 55% 42% 58% / 60% 44% 56% 40%; }
	66% { border-radius: 52% 48% 60% 40% / 44% 52% 48% 56%; }
}

/* les quatre polaroïds, éparpillés sur la table */
.polaroids { gap: 0; padding: 26px 0 40px; flex-wrap: nowrap; }
.polaroid { margin: 0 -6px; }
.polaroid:nth-child(1) { margin-top: 18px; }
.polaroid:nth-child(2) { margin-top: -6px; }
.polaroid:nth-child(3) { margin-top: 26px; }
.polaroid:nth-child(4) { margin-top: 4px; }

/* en portrait : une pile qu'on feuillette (glisser, toucher, ou toute seule) */
@media (max-aspect-ratio: 4/5), (max-width: 720px) {
	.polaroids { position: relative; height: min(118vw, 520px); padding: 0; display: block; }
	.polaroid {
		position: absolute; left: 50%; top: 8px; width: min(72vw, 330px); margin: 0 !important;
		transform: translateX(-50%) translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg));
		transition: transform .55s cubic-bezier(.3, .7, .25, 1), opacity .4s ease; touch-action: pan-y;
	}
	.polaroid:hover { transform: translateX(-50%) translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg)); }
	.polaroid.part { transform: translateX(-50%) translate(var(--fx, 120vw), -30px) rotate(var(--fr, 24deg)); opacity: 0; }
	.feuilleter { text-align: center; font: 20px 'Caveat', cursive; color: var(--encre-douce); margin-top: -8px; }
}
@media not all and (max-aspect-ratio: 4/5) { .feuilleter { display: none; } }
@media (min-width: 721px) { .feuilleter { display: none; } }

@media (max-width: 720px) {
	header { padding: 12px 14px; flex-wrap: wrap; gap: 4px; }
	nav { gap: 0 10px; }
	nav a { font-size: 13px; padding: 4px 2px; }
	nav a.jouer { font-size: 20px; }
	.logo { margin-top: 10px; }
	.devise { font-size: 24px; margin-bottom: 18px; }
}