/* =============================================================
   pc5/css/pc5.css — maquette « shh.video »

   Repris du dessin fourni : sombre mais chaleureux, rose pastel,
   titres manuscrits, washi tape, post-it kraft, chats noirs aux
   yeux roses. Trois colonnes en grand écran, empilées en petit.

   Tout est local : aucune police distante, aucune image distante.
   L'écriture manuscrite s'appuie sur les polices déjà installées
   (Ink Free sur Windows, Bradley Hand sur macOS) avec repli sur
   une cursive générique — jamais de téléchargement.
   ============================================================= */

/* -------------------------------------------------------------
   1. Jetons
   ------------------------------------------------------------- */
:root {
	--bg:      #0b0910;
	--pan:     #16121c;
	--pan-2:   #1b1622;
	--carte:   #191420;
	--line:    rgba(255,255,255,.065);
	--line-2:  rgba(255,255,255,.12);

	--ink:     #ece6f2;
	--dim:     #9c93a8;
	--faint:   #6e6680;

	--rose:    #e0739f;
	--rose-2:  #c4507f;
	--rose-3:  #f4a6c8;
	--rose-b:  rgba(224,115,159,.14);

	--kraft:   #d8c8a4;
	--kraft-i: #4a4033;
	--tape:    rgba(216,166,200,.72);

	--r:       14px;
	--r-lg:    20px;
	--side:    220px;
	--rail:    336px;
	--gap:     22px;
	--pad:     clamp(14px, 2vw, 24px);

	--hand: "Ink Free", "Segoe Script", "Bradley Hand", "Chalkboard SE",
	        "Comic Sans MS", cursive;
	--ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
	      Roboto, "Helvetica Neue", Arial, sans-serif;
	--hand-lh: 1.2;
}

/* Les polices manuscrites latines (Ink Free, Bradley Hand…) n'ont
   AUCUN glyphe japonais ni chinois : sans ces piles, tous les titres
   des trois autres langues retomberaient sur une police système
   quelconque. On choisit à la place les fontes rondes/manuscrites
   déjà installées, qui gardent le ton du dessin. Toujours rien à
   télécharger. */
html:lang(ja) {
	--hand: "UD Digi Kyokasho N-R", "Hiragino Maru Gothic ProN", "Yu Gothic UI",
	        "Yu Gothic", Meiryo, sans-serif;
	--ui: "Yu Gothic UI", "Hiragino Sans", Meiryo, system-ui, sans-serif;
	--hand-lh: 1.5;
}
html:lang(zh-TW) {
	--hand: "Hiragino Maru Gothic ProN", "Microsoft JhengHei UI", "PingFang TC",
	        "Microsoft JhengHei", sans-serif;
	--ui: "Microsoft JhengHei UI", "PingFang TC", system-ui, sans-serif;
	--hand-lh: 1.5;
}
html:lang(zh-CN) {
	--hand: "Hiragino Maru Gothic ProN", "Microsoft YaHei UI", "PingFang SC",
	        "Microsoft YaHei", sans-serif;
	--ui: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
	--hand-lh: 1.5;
}

/* -------------------------------------------------------------
   2. Base
   ------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 400 14px/1.55 var(--ui);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2 { margin: 0; font-weight: 600; }
p { margin: 0 0 .8em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.art, .ic { display: block; flex: none; }

/* Ruban adhésif : un rectangle rose translucide à pois, posé de
   travers. Deux exemplaires suffisent à donner le ton « collé ». */
.tape {
	position: absolute; width: 76px; height: 20px;
	background:
		radial-gradient(circle at 6px 6px, rgba(255,255,255,.42) 1.6px, transparent 1.7px) 0 0/13px 11px,
		var(--tape);
	opacity: .85;
	box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* Punaise des post-it */
.pin {
	position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
	width: 13px; height: 13px; border-radius: 50%;
	background: radial-gradient(circle at 35% 32%, #ffb3d1, var(--rose-2));
	box-shadow: 0 2px 5px rgba(0,0,0,.45);
}

/* Boutons */
.btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 20px; border-radius: 999px;
	font-size: 14px; font-weight: 600;
	transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.btn-rose { background: var(--rose-2); color: #fff; box-shadow: 0 6px 18px -8px rgba(196,80,127,.9); }
.btn-rose:hover { background: #d35e8f; transform: translateY(-1px); }
.btn-doux { background: rgba(255,255,255,.05); color: var(--dim); border: 1px solid var(--line-2); }
.btn-doux:hover { color: var(--ink); border-color: var(--rose); }

/* Gribouillis posés à côté des titres */
.doodle { display: inline-flex; gap: 3px; align-items: center; color: var(--rose); opacity: .8; vertical-align: 2px; }
.doodle .art { display: inline-block; }

.badge {
	display: inline-block; padding: 3px 8px; border-radius: 6px;
	background: var(--rose-2); color: #fff;
	font-size: 9.5px; font-weight: 700; letter-spacing: .05em; font-style: normal;
}

/* -------------------------------------------------------------
   3. Coque et grille
   ------------------------------------------------------------- */
.app { max-width: 1560px; margin: 0 auto; padding: 16px var(--pad) 0; }
/* minmax(0,1fr) et non 1fr : sans cela une colonne de grille prend la
   largeur intrinsèque de son contenu, et les pistes horizontales
   poussent toute la page hors de l'écran en petite largeur. */
.grid { display: grid; gap: var(--gap); align-items: start; grid-template-columns: minmax(0, 1fr); }
.grid > * { min-width: 0; }

/* -------------------------------------------------------------
   4. Barre du haut
   ------------------------------------------------------------- */
.top { display: grid; gap: var(--gap); align-items: center; margin-bottom: 16px; grid-template-columns: minmax(0, 1fr); }
.top > * { min-width: 0; }

.logo { position: relative; display: flex; align-items: flex-end; gap: 2px; }
.logo-box {
	position: relative;
	padding: 8px 20px 10px;
	border: 1.6px solid #6d5a4a;
	border-radius: 4px;
	background: rgba(255,255,255,.02);
	transform: rotate(-1.4deg);
}
.logo-box .tape-a { width: 26px; height: 13px; top: -6px; left: -8px; transform: rotate(-38deg); }
.logo-box .tape-b { width: 26px; height: 13px; bottom: -6px; right: -8px; transform: rotate(-38deg); }
.logo-t { font: 400 27px/1 var(--hand); color: var(--rose); letter-spacing: .01em; }
.logo-t em { font-style: normal; letter-spacing: .12em; }
.logo-cat { margin: 0 0 -4px -10px; }

.quest {
	position: relative; display: flex; align-items: center; gap: 10px;
	padding: 9px 8px 9px 14px;
	background: var(--pan); border: 1px solid var(--line);
	border-radius: 999px;
	transition: border-color .2s;
}
.quest:focus-within { border-color: rgba(224,115,159,.45); }
.quest input {
	flex: 1; min-width: 0; border: 0; background: none; color: var(--ink);
	font: inherit; font-size: 14px; padding: 2px 0;
}
.quest input::placeholder { color: var(--faint); }
.quest input:focus { outline: none; }
.quest-cat { display: grid; place-items: center; flex: none; opacity: .75; }
/* Suggestions de recherche */
.quest { position: relative; }
.quest-vide {
	display: grid; place-items: center; width: 26px; height: 26px; flex: none;
	border-radius: 50%; color: var(--faint); transform: rotate(45deg);
}
.quest-vide[hidden] { display: none; }
.quest-vide:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.sugg {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 44;
	padding: 6px; border-radius: var(--r);
	background: var(--pan); border: 1px solid var(--line-2);
	box-shadow: 0 20px 44px -20px rgba(0,0,0,.95);
	animation: monte .18s cubic-bezier(.22,1,.36,1);
}
.sugg[hidden] { display: none; }
.sugg-i {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px; border-radius: 10px;
	font-size: 13.5px; color: var(--dim);
	transition: background .14s, color .14s;
}
.sugg-i:hover, .sugg-i:focus { background: rgba(255,255,255,.05); color: var(--ink); }
.sugg-ic {
	width: 6px; height: 6px; flex: none; border-radius: 50%;
	background: var(--rose); opacity: .6;
}
.quest-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--dim); }
.quest-go:hover { color: var(--rose); background: var(--rose-b); }

.top-r { display: flex; align-items: center; gap: 14px; justify-self: end; }
.invite { display: flex; align-items: center; gap: 7px; color: var(--dim); font-size: 13.5px; }
.invite .ic { color: var(--rose); }
.invite b { font-weight: 500; }
.ghost-btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--dim); }
.ghost-btn:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.dot-new { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); border: 2px solid var(--bg); }
/* Le compte, et son menu de langue */
.moi { position: relative; }
.me {
	display: flex; align-items: center; gap: 6px;
	padding: 3px 8px 3px 3px; border-radius: 999px;
	color: var(--faint);
	transition: background .18s;
}
.me:hover { background: rgba(255,255,255,.05); }
.me-l { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.me-l b { font-weight: 500; }
/* Drapeaux dessinés : Windows n'a aucun glyphe d'émoji drapeau et
   afficherait « JP », « TW »… à la place. */
.dr { display: block; flex: none; border-radius: 3px; }
.me-chev { transition: transform .2s; }
.me[aria-expanded="true"] .me-chev { transform: rotate(180deg); }

.moi-m {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 45;
	min-width: 176px; padding: 10px 8px 8px;
	background: var(--pan); border: 1px solid var(--line-2);
	border-radius: var(--r); overflow: hidden;
	box-shadow: 0 20px 44px -20px rgba(0,0,0,.95);
	animation: monte .2s cubic-bezier(.22,1,.36,1);
}
.moi-m[hidden] { display: none; }
.moi-h {
	display: flex; align-items: center; gap: 6px;
	margin: 0 0 6px; padding: 0 10px;
	font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: var(--faint);
}
.moi-h .ic { color: var(--rose); }
.moi-l a {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 9px 10px; border-radius: 10px;
	font-size: 13.5px; color: var(--dim);
	transition: background .16s, color .16s;
}
.moi-l a:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.moi-l a.on { color: var(--rose); font-weight: 600; }
.moi-l a i { font-style: normal; font-size: 12px; }
.moi-l a span { display: flex; align-items: center; gap: 9px; }
.moi-cat { position: absolute; right: 6px; bottom: -6px; opacity: .35; pointer-events: none; }
.me-pic {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--pan-2); border: 1px solid var(--line-2);
}
.me:hover .me-pic { border-color: var(--rose); }

/* -------------------------------------------------------------
   5. Colonne de gauche
   ------------------------------------------------------------- */
.side {
	background: var(--pan); border: 1px solid var(--line);
	border-radius: var(--r-lg); padding: 14px 12px 16px;
}
.nav-a {
	position: relative; display: flex; align-items: center; gap: 12px;
	margin: 10px 0;
	padding: 10px 12px; border-radius: 11px;
	color: var(--dim); font-size: 14px;
	transition: background .18s, color .18s;
}
.nav-a:hover { background: rgba(255,255,255,.045); color: var(--ink); }
.nav-a.on { background: var(--rose-b); color: var(--rose); font-weight: 600; }
.nav-a .ic { opacity: .9; }
.nav-doodle { margin-left: auto; display: inline-flex; gap: 2px; color: var(--rose); opacity: .75; }
.nav-plus {
	margin-left: auto; display: grid; place-items: center;
	width: 20px; height: 20px; border-radius: 50%;
	background: rgba(255,255,255,.07); color: var(--dim);
}

/* Le trait de séparation est pointillé, comme sur le dessin. */
.cut { height: 1px; margin: 14px 8px; background-image: linear-gradient(to right, var(--line-2) 46%, transparent 0); background-size: 8px 1px; }

.side-h {
	margin: 0 0 6px; padding: 0 12px;
	display: flex; align-items: center; gap: 6px;
	color: var(--faint); font-size: 11px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase;
}
.side-h .ic { color: var(--rose); }
.nav-2 .nav-a { font-size: 13.5px; padding: 9px 12px; }

.postit {
	position: relative; margin: 18px 6px 14px;
	padding: 18px 16px 22px;
	background: linear-gradient(180deg, #e0d1ae, var(--kraft));
	color: var(--kraft-i);
	border-radius: 3px;
	transform: rotate(-1.2deg);
	box-shadow: 0 8px 18px -10px rgba(0,0,0,.9);
}
.postit p { margin: 0; font: 400 14.5px/1.62 var(--hand); }
.postit-cat { position: absolute; right: 6px; bottom: -8px; }

.side-c { margin: 0; padding: 0 12px; display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: 11.5px; }
.side-c i { color: var(--rose); display: inline-flex; }

/* -------------------------------------------------------------
   6. Héro
   ------------------------------------------------------------- */
.hero {
	position: relative; overflow: hidden;
	display: grid; align-items: center;
	background:
		radial-gradient(90% 120% at 18% 30%, rgba(224,115,159,.09), transparent 60%),
		var(--pan);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: clamp(22px, 3.4vw, 38px);
	margin-bottom: 30px;
	min-height: 300px;
}
.tape-hero { top: -6px; right: 60px; transform: rotate(9deg); }
.hero-art { justify-self: center; }
.hero-t { text-align: center; }
.hero-t h1 {
	font: 400 clamp(28px, 4vw, 42px)/1.34 var(--hand);
	letter-spacing: .005em;
}
.hero-t mark {
	background: var(--rose-2); color: #fff;
	padding: 2px 14px 5px; border-radius: 4px;
	box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.mk-heart { display: inline-block; vertical-align: -3px; margin-left: 4px; color: #ffdbe9; }
.hero-t p { margin: 16px 0 24px; color: var(--dim); font-size: 15.5px; }
.btn-hero { padding: 13px 26px; font-size: 15px; }

.hero-note {
	position: absolute; right: 26px; bottom: 30px;
	padding: 10px 16px 12px;
	background: linear-gradient(180deg, #e0d1ae, var(--kraft));
	color: var(--kraft-i);
	font: 400 17px/1 var(--hand);
	border-radius: 3px; transform: rotate(-7deg);
	box-shadow: 0 8px 16px -9px rgba(0,0,0,.9);
	display: flex; align-items: center; gap: 4px;
}
.pin-b { top: -5px; left: 22%; width: 11px; height: 11px; }
.hn-cat { display: inline-flex; margin-bottom: -3px; }

.hero-doodles { position: absolute; inset: 0; pointer-events: none; color: var(--rose); }
.hero-doodles .d { position: absolute; display: block; opacity: .55; }
.d1 { top: 14%; left: 21%; } .d2 { top: 9%;  left: 34%; opacity: .4 !important; }
.d3 { top: 30%; left: 15%; } .d4 { top: 22%; right: 30%; }
.d5 { top: 46%; left: 26%; } .d6 { bottom: 22%; left: 32%; }
.d7 { top: 58%; right: 26%; }

.puces { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 7px; }
.puces i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.puces i.on { background: var(--rose); }

/* -------------------------------------------------------------
   7. Rangées et pistes
   ------------------------------------------------------------- */
.rangee { margin-bottom: 30px; }
.rang-h { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 400 21px/var(--hand-lh) var(--hand); }
.rang-s { margin: -8px 0 14px; color: var(--faint); font-size: 12.5px; }

.piste-wrap { position: relative; }
.piste {
	display: flex; gap: 14px;
	overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 2px 0 4px;
}
.piste::-webkit-scrollbar { display: none; }
.piste > * { scroll-snap-align: start; flex: none; width: clamp(126px, 34vw, 148px); }

.fleche {
	position: absolute; top: 38%; z-index: 3;
	display: grid; place-items: center;
	width: 30px; height: 46px; border-radius: 10px;
	background: rgba(11,9,16,.78); border: 1px solid var(--line);
	color: var(--dim);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	transition: color .2s, border-color .2s, opacity .2s;
}
.fleche:hover { color: var(--rose); border-color: rgba(224,115,159,.4); }
.fleche.g { left: -13px; transform: scaleX(-1); }
.fleche.d { right: -13px; }

/* -------------------------------------------------------------
   8. Cartes de titre — tout vit sur l'image.

   Le bloc de texte sous la vignette mangeait la moitié de la carte
   pour deux lignes : titre et durée sont désormais posés SUR l'image,
   sur un dégradé, et le cœur flotte dans un coin. À surface égale,
   l'image occupe presque tout.
   ------------------------------------------------------------- */
.carte {
	position: relative; width: 100%;
	border-radius: var(--r); overflow: hidden;
	background: #100d15; border: 1px solid var(--line);
	transition: transform .25s, border-color .25s, box-shadow .25s;
}
.carte:hover {
	transform: translateY(-3px); border-color: rgba(224,115,159,.4);
	box-shadow: 0 14px 30px -18px rgba(0,0,0,.9);
}
.carte-a { position: relative; display: block; aspect-ratio: 1 / 1; }
.carte-a img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.carte:hover .carte-a img { transform: scale(1.05); }
.carte.fermee:hover .carte-a img { transform: none; }
.carte-voile {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(9,7,13,.94) 2%, rgba(9,7,13,.5) 34%, transparent 62%);
}
.carte-sur { position: absolute; left: 10px; right: 10px; bottom: 9px; }
.carte-t {
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
	-webkit-box-orient: vertical; overflow: hidden;
	font-size: 12.5px; font-weight: 600; line-height: 1.32;
	text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.t-ferme { color: var(--dim); font-weight: 500; }
.carte-an { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; color: #b9b0c6; }

/* Le cœur flotte : il ne prend plus de ligne à lui seul. */
.carte .coeur {
	position: absolute; top: 7px; right: 7px; z-index: 2;
	display: grid; place-items: center; width: 28px; height: 28px;
	border-radius: 50%; color: #fff;
	background: rgba(12,10,18,.5);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	opacity: 0; transition: opacity .18s, background .18s, color .18s;
}
.carte:hover .coeur, .carte .coeur:focus-visible, .carte .coeur.on { opacity: 1; }
.carte .coeur:hover { background: var(--rose-2); }
.coeur .c-p { display: none; }
.coeur.on { color: var(--rose-3); }
.coeur.on .c-o { display: none; }
.coeur.on .c-p { display: block; }

.carte-neuf { position: absolute; top: 8px; left: 8px; z-index: 2; }
.carte-rang {
	position: absolute; top: 8px; left: 8px; z-index: 2;
	min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
	display: grid; place-items: center;
	background: var(--rose-2); color: #fff;
	font-size: 13px; font-weight: 700; font-style: normal;
}
.cadenas {
	position: absolute; inset: 0; display: grid; place-items: center;
	color: var(--rose-3); opacity: .85; z-index: 1;
}
.no-hit, .vide { margin-top: 22px; font-size: 12px; color: var(--faint); text-align: center; }

/* -------------------------------------------------------------
   9. Collections secrètes
   ------------------------------------------------------------- */
.piste-coll { gap: 14px; }

/* -------------------------------------------------------------
   La grille des pages de rubrique.

   Elle n'existait pas : les pages employaient « .cards » sans qu'aucune
   règle ne la définisse, si bien que les vignettes s'empilaient en
   blocs au lieu de se ranger en colonnes.

   Les colonnes sont calées sur la largeur d'une vignette de rail
   (~168 px). Au-delà, « auto-fill » fabrique moins de colonnes et
   chacune s'étire : les vignettes deviennent bien plus grosses que sur
   l'accueil.
   ------------------------------------------------------------- */
.cards {
	display: grid; align-items: stretch;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
@media (min-width: 620px) {
	.cards { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); }
}
@media (min-width: 900px) {
	.cards { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); }
}
.coll {
	width: 100%;
	display: flex; flex-direction: column; align-items: center;
	padding: 20px 14px 14px;
	background: var(--carte); border: 1px solid var(--line);
	border-radius: var(--r);
	text-align: center;
	transition: transform .25s, border-color .25s, background .25s;
}
.coll:hover { transform: translateY(-3px); border-color: rgba(224,115,159,.35); }
.coll-art { display: grid; place-items: center; height: 86px; margin-bottom: 12px; }
.coll-t { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 5px; }
.coll-n { display: block; font-size: 11.5px; color: var(--faint); }
/* une teinte de fond par collection, très légère */
.c1 { background: linear-gradient(180deg, rgba(150,130,190,.13), transparent 62%), var(--carte); }
.c2 { background: linear-gradient(180deg, rgba(190,150,120,.13), transparent 62%), var(--carte); }
.c3 { background: linear-gradient(180deg, rgba(190,140,170,.13), transparent 62%), var(--carte); }
.c4 { background: linear-gradient(180deg, rgba(210,120,150,.13), transparent 62%), var(--carte); }
.c5 { background: linear-gradient(180deg, rgba(130,110,190,.13), transparent 62%), var(--carte); }

/* -------------------------------------------------------------
   10. Colonne de droite
   ------------------------------------------------------------- */
.rail { display: grid; gap: 16px; }
.pan { background: var(--pan); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 16px 12px; }
.pan-h { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font: 400 18px/var(--hand-lh) var(--hand); }
.pan-ic { color: var(--rose); }

.recent li + li { margin-top: 3px; }
.recent a {
	display: grid; grid-template-columns: 56px 1fr auto; gap: 11px; align-items: center;
	padding: 7px; border-radius: 11px; transition: background .18s;
}
.recent a:hover { background: rgba(255,255,255,.045); }
.recent img { width: 56px; height: 42px; object-fit: cover; border-radius: 7px; }
.recent-t { min-width: 0; }
.recent-t b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.recent-t i { font-style: normal; font-size: 11px; color: var(--faint); }
.recent-w { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.bull { width: 5px; height: 5px; border-radius: 50%; background: var(--rose); }

.fils li + li { margin-top: 2px; }
.fils a, .fils .fil-a {
	display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: start;
	padding: 9px 7px; border-radius: 11px; transition: background .18s;
}
.fils a:hover { background: rgba(255,255,255,.045); }
/* Les fils sont inertes tant qu'aucun babillard n'existe : pas de
   curseur « main » qui promettrait une page. */
.fils .fil-a { cursor: default; }
.fil-p { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
.p1 { background: #a67ee0; } .p2 { background: #e0c07e; } .p3 { background: #7ed0a8; }
.fil-t b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.fil-t i { font-style: normal; font-size: 11px; color: var(--faint); }
.fil-n { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--faint); }

.pan-faux { margin: 10px 7px 0; font-size: 10.5px; line-height: 1.5; color: var(--faint); font-style: italic; }
.pan-more {
	display: flex; align-items: center; justify-content: flex-end; gap: 3px;
	padding: 8px 4px 2px; color: var(--rose); font-size: 12.5px; font-weight: 600;
}
.pan-more:hover { gap: 6px; }

.pan-vip { position: relative; overflow: hidden; padding-bottom: 20px; }
.vip-ic { color: #e0c07e; }
.pan-vip p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.65; max-width: 22ch; }
.vip-cat { position: absolute; right: 8px; bottom: -6px; opacity: .9; }

/* -------------------------------------------------------------
   11. Fiche d'un titre
   ------------------------------------------------------------- */
.fil-ariane { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12.5px; color: var(--faint); }
.fil-ariane a:hover { color: var(--rose); }
.fil-ariane span { color: var(--dim); }

.fiche { margin-bottom: 30px; }
.fiche-img { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 7; background: #100d15; }
.fiche-img img, .fiche-img video { width: 100%; height: 100%; object-fit: cover; }
.fiche-voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,9,16,.94) 6%, rgba(11,9,16,.3) 52%, transparent 82%); }
.tape-fiche { top: -6px; left: 48px; transform: rotate(-8deg); }
.fiche-sur { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px, 3vw, 30px); }
.fiche-sur h1 { margin: 10px 0 8px; font: 400 clamp(24px, 4vw, 38px)/1.2 var(--hand); }
.fiche-m { margin: 0; color: var(--dim); font-size: 13px; }
.fiche-m i { font-style: normal; color: var(--faint); margin: 0 4px; }

.fiche-b { display: grid; gap: 18px; margin-top: 18px; }
.fiche-p { background: var(--pan); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.act { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.bloc-h { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font: 400 18px/var(--hand-lh) var(--hand); }
.fiche-note { color: var(--dim); font-size: 14px; max-width: 62ch; }
.etiq { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.etiq li { padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.postit-fiche { margin: 0; justify-self: start; max-width: 230px; transform: rotate(1.4deg); }

/* -------------------------------------------------------------
   12. Titre gardé au coin secret
   ------------------------------------------------------------- */
.ferme-bloc {
	position: relative; overflow: hidden; text-align: center;
	background:
		radial-gradient(80% 100% at 50% 0%, rgba(224,115,159,.1), transparent 62%),
		var(--pan);
	border: 1px solid var(--line); border-radius: var(--r-lg);
	padding: clamp(30px, 5vw, 54px) clamp(20px, 4vw, 48px) clamp(28px, 4vw, 44px);
	margin-bottom: 30px;
}
.ferme-cat { display: grid; place-items: center; margin-bottom: 6px; }
.ferme-bloc h1 { font: 400 clamp(26px, 4vw, 38px)/1.32 var(--hand); }
.ferme-bloc mark { background: var(--rose-2); color: #fff; padding: 2px 12px 5px; border-radius: 4px; }
.ferme-l { max-width: 54ch; margin: 18px auto 24px; color: var(--dim); font-size: 14px; }
.ferme-a { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------
   13. Fenêtre du coin secret
   ------------------------------------------------------------- */
.modale {
	position: fixed; inset: 0; z-index: 80;
	display: grid; place-items: center; padding: 20px;
	background: rgba(6,5,9,.72);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	animation: fondu .25s ease;
}
.modale[hidden] { display: none; }
.modale-c {
	position: relative; width: 100%; max-width: 420px; text-align: center;
	background: var(--pan); border: 1px solid var(--line-2);
	border-radius: var(--r-lg); padding: 34px 26px 26px;
	animation: monte .3s cubic-bezier(.22,1,.36,1);
}
.modale-cat { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); }
.modale-c h2 { margin: 8px 0 12px; font: 400 21px/1.3 var(--hand); display: flex; align-items: center; justify-content: center; gap: 7px; }
.modale-c h2 i { color: var(--rose); display: inline-flex; }
.modale-c p { color: var(--dim); font-size: 13.5px; }
.modale-a { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
@keyframes monte { from { transform: translateY(14px); opacity: 0; } }
@keyframes fondu { from { opacity: 0; } }

/* -------------------------------------------------------------
   13bis. Formules et tunnel d'inscription
   ------------------------------------------------------------- */
/* Le bouton d'entrée du tunnel, dans la barre du haut */
.btn-join {
	padding: 9px 17px; border-radius: 999px;
	background: var(--rose-2); color: #fff;
	font-size: 13px; font-weight: 600; white-space: nowrap;
	box-shadow: 0 6px 16px -8px rgba(196,80,127,.9);
	transition: background .18s, transform .18s;
}
.btn-join:hover { background: #d35e8f; transform: translateY(-1px); }

/* Le rappel discret sous l'appel principal du héro */
.hero-a { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-plans {
	display: inline-flex; align-items: center; gap: 3px;
	color: var(--rose); font-size: 13px; font-weight: 600;
}
.hero-plans:hover { gap: 7px; }
.hero-t .hero-a { justify-content: center; }

.plans {
	position: relative; overflow: hidden; text-align: center;
	margin: 6px 0 30px;
	padding: clamp(28px, 5vw, 46px) clamp(18px, 4vw, 40px) clamp(24px, 4vw, 36px);
	border: 1px solid var(--line); border-radius: var(--r-lg);
	background:
		radial-gradient(90% 120% at 50% 0%, rgba(224,115,159,.1), transparent 62%),
		var(--pan);
}
/* Hors de l'accueil, le bloc vit après la grille, en pleine largeur,
   juste au-dessus du pied. Le filet .grid > .plans est une ceinture de
   sécurité : si le bloc retombait un jour dans la grille, il s'étalerait
   sur toutes les colonnes au lieu de se coincer sous la barre latérale. */
.app > .plans { margin: 30px 0 8px; }
.grid > .plans { grid-column: 1 / -1; }
.tape-plans { top: -6px; left: 38px; transform: rotate(-7deg); }
.plans-cat { display: grid; place-items: center; margin: 0 auto 8px; }
.plans h2 { font: 400 clamp(21px, 3.4vw, 29px)/var(--hand-lh) var(--hand); }
.plans-s { margin: 8px 0 22px; font-size: 13px; color: var(--dim); }

.plans-g { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); max-width: 620px; margin: 0 auto; }
.plan {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: 20px 14px 16px; border-radius: var(--r);
	background: var(--carte); border: 1px solid var(--line);
	text-align: center; transition: transform .2s, border-color .2s, background .2s;
}
.plan:hover { transform: translateY(-3px); border-color: rgba(224,115,159,.45); }
.plan.vedette { border-color: rgba(224,115,159,.5); background: linear-gradient(180deg, rgba(224,115,159,.09), transparent 60%), var(--carte); }
.plan-mark {
	position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
	padding: 3px 10px; border-radius: 999px; white-space: nowrap;
	background: var(--rose-2); color: #fff; font-size: 10px; font-weight: 700; font-style: normal;
}
.plan-duree { font-size: 12.5px; color: var(--dim); }
.plan-prix { display: flex; align-items: baseline; gap: 3px; }
.plan-prix b { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.plan-prix i { font-style: normal; font-size: 12px; color: var(--faint); }
.plan-total { font-size: 11.5px; color: var(--faint); }
.plan-remise {
	margin-top: 6px; padding: 3px 9px; border-radius: 999px; font-style: normal;
	background: rgba(224,115,159,.16); color: var(--rose); font-size: 11px; font-weight: 600;
}
.plan-cta {
	margin-top: 12px; padding: 9px 18px; border-radius: 999px;
	background: var(--rose-2); color: #fff; font-size: 13px; font-weight: 600;
}
.plan:hover .plan-cta { background: #d35e8f; }
.plans-deja { margin: 20px 0 0; font-size: 12.5px; color: var(--faint); }
.plans-deja a { color: var(--rose); font-weight: 600; }

/* Le tunnel : une feuille montante, comme le menu « Plus » */
.rejoindre {
	position: fixed; inset: 0; z-index: 95;
	display: grid; align-items: end;
	background: rgba(6,5,9,.74);
	backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
	animation: fondu .22s ease;
}
.rejoindre[hidden] { display: none; }
.rej-c {
	position: relative; width: 100%; max-width: 460px; margin: 0 auto;
	background: var(--pan); border: 1px solid var(--line-2); border-bottom: 0;
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	padding: 12px 20px calc(22px + env(safe-area-inset-bottom));
	max-height: 88vh; overflow-y: auto;
	animation: monte .3s cubic-bezier(.22,1,.36,1);
}
.rej-prise { display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--line-2); margin: 0 auto 10px; }
.rej-x {
	position: absolute; top: 12px; right: 12px;
	display: grid; place-items: center; width: 30px; height: 30px;
	border-radius: 50%; color: var(--faint); transform: rotate(45deg);
}
.rej-x:hover { color: var(--ink); background: rgba(255,255,255,.06); }
/* Retour vers la matrice depuis les étapes qui en découlent. */
.rej-retour {
	display: inline-flex; align-items: center; gap: 4px;
	margin: 0 0 10px; padding: 5px 10px 5px 4px; border-radius: 999px;
	color: var(--faint); font-size: 12px;
	float: left;
}
.rej-retour .ic { transform: scaleX(-1); }
.rej-retour:hover { color: var(--rose); background: rgba(255,255,255,.05); }
.rej-e { text-align: center; }
.rej-cat { display: grid; place-items: center; margin: 0 auto 8px; }
.rej-e h2 { font: 400 20px/var(--hand-lh) var(--hand); margin-bottom: 16px; }
.rej-l { display: block; text-align: left; font-size: 11.5px; color: var(--faint); margin: 0 0 5px; }
.rej-c input[type="email"], .rej-c input[type="password"], .rej-c input[type="text"] {
	width: 100%; padding: 12px 14px; margin-bottom: 12px;
	background: rgba(255,255,255,.045); border: 1px solid var(--line-2);
	border-radius: 12px; color: var(--ink); font: inherit; font-size: 14.5px;
}
.rej-c input:focus { outline: none; border-color: rgba(224,115,159,.55); }
.rej-err { min-height: 17px; margin: 0 0 8px; font-size: 12px; color: #ff9ec8; }
.rej-go { width: 100%; justify-content: center; }
.rej-go[disabled] { opacity: .55; cursor: progress; }
.rej-p { font-size: 13px; color: var(--dim); text-align: left; }
.rej-p b { color: var(--rose); font-size: 15px; }
.rej-note { margin: 12px 0 0; font-size: 11px; color: var(--faint); text-align: left; }

/* Carte prépayée : les trois étapes, numérotées, avec le lien externe. */
.pp-pas { counter-reset: pp; margin: 0 0 14px; padding: 0; text-align: left; }
.pp-pas li { counter-increment: pp; position: relative; padding: 0 0 12px 28px; }
.pp-pas li::before {
	content: counter(pp); position: absolute; left: 0; top: 1px;
	width: 19px; height: 19px; border-radius: 50%;
	background: var(--rose-b); color: var(--rose);
	font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}
.pp-pas p { margin: 0 0 8px; font-size: 13px; color: var(--dim); }
.pp-pas p b { color: var(--rose); font-size: 15px; }
.pp-lien { display: inline-flex; padding: 8px 14px; font-size: 13px; }
.pp-lien .ic { transform: rotate(-45deg); }
.rej-e h2.pp-t { min-height: 1em; }
.rej-bas { margin: 16px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--faint); text-align: center; }

/* La matrice du site : moyens en lignes, durées en colonnes.
   Le client compare d'un coup d'œil ce que chaque croisement coûte. */
.paytab-w { overflow-x: auto; margin: 0 -4px 16px; padding: 0 4px; }
.paytab {
	width: 100%; table-layout: fixed;
	border-collapse: separate; border-spacing: 4px;
}
/* En « fixed », les colonnes sans largeur se partagent le reste à parts
   égales : la troisième cessait d'être écrasée hors du cadre. */
.paytab thead td:first-child, .paytab tbody th { width: 96px; }
.paytab thead th {
	padding: 9px 4px; border-radius: 10px 10px 0 0;
	background: rgba(255,255,255,.035);
	font-weight: 600; line-height: 1.2;
	transition: background .16s;
}
.paytab thead th b { display: block; font-size: 16px; }
.paytab thead th span { display: block; margin-top: 1px; font-size: 10px; color: var(--faint); font-weight: 400; }
.paytab tbody th {
	padding: 5px 6px; border-radius: 10px;
}
/* Sans pastille claire, les logos sombres (Visa marine, PayPal bleu) se
   fondent dans le fond : on les éclaircit plutôt que de poser une
   pastille, pour ne pas casser le noir de la maquette. */
.paytab tbody th img { filter: brightness(1.55) saturate(1.15); }
.paytab tbody th img { width: 100%; max-width: 82px; height: 34px; object-fit: contain; margin: 0 auto; }
/* PayPal et Visa sont dessinés avec beaucoup de marge interne : à
   hauteur égale ils paraissent deux fois plus petits que Mastercard. */
.paytab tbody th img[src*="paypal"] { height: 44px; max-width: 88px; }
.paytab tbody th img[src*="visa"]   { height: 40px; max-width: 86px; }
.paytab td { padding: 0; }
.paytab td.hs { background: rgba(255,255,255,.015); border-radius: 10px; }
/* La case elle-même : le rond gris devient une coche rose une fois choisi. */
.paytab input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.paytab label {
	position: relative; display: block; height: 46px; border-radius: 10px;
	background: rgba(255,255,255,.05); cursor: pointer;
	transition: background .16s, box-shadow .16s;
}
.paytab label::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
	border-radius: 50%; background: var(--faint);
	transition: background .16s, transform .16s;
}
.paytab label:hover { background: rgba(255,255,255,.09); }
.paytab input:focus-visible + label { outline: 2px solid var(--rose); outline-offset: 2px; }
.paytab input:checked + label { background: var(--rose-2); box-shadow: 0 4px 14px -6px rgba(196,80,127,.9); }
.paytab input:checked + label::after {
	width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
	border-radius: 0;
}
/* La formule cliquée sur la page teinte l'en-tête de SA colonne. Un
   contour sur les cases se lisait à tort comme une case déjà cochée. */
.paytab thead th.vise { background: rgba(224,115,159,.16); }
.paytab thead th.vise b { color: var(--rose); }
.rej-go[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }

.coins { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.coin {
	width: 100%; display: flex; align-items: center; gap: 10px;
	padding: 11px 12px; border-radius: 12px;
	background: rgba(255,255,255,.04); border: 1px solid var(--line);
	font-size: 13px; font-weight: 600; text-align: left;
}
.coin img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.coin span { display: flex; align-items: baseline; gap: 5px; }
.coin i { font-style: normal; font-size: 9.5px; color: var(--faint); font-weight: 400; }
.coin:hover { border-color: rgba(224,115,159,.45); background: rgba(255,255,255,.07); }
.rej-sortie { margin-top: 14px; font-size: 12.5px; color: var(--dim); }
.rej-qr { width: 168px; margin: 0 auto; border-radius: 10px; background: #fff; padding: 6px; }
.rej-adr { margin: 10px 0 0; font-size: 11px; word-break: break-all; color: var(--ink); }

/* ---- écran de paiement crypto (système local) ------------------
   Deux informations doivent être lisibles sans effort et copiables
   sans erreur : le montant EXACT et l'adresse. Tout le reste est
   secondaire. D'où la police à chasse fixe, les chiffres bien
   espacés, et un bouton de copie collé à chaque valeur — recopier
   une adresse à la main est le meilleur moyen de perdre l'argent.

   Le réseau est répété deux fois (en tête et en avertissement) :
   c'est volontaire. Envoyer sur la mauvaise chaîne est la seule
   erreur vraiment irréversible de tout le parcours. */
.coin[data-local] span { flex-direction: column; gap: 1px; }
.coin[data-local] i { font-size: 9px; line-height: 1.25; }

/* Une fois la pièce choisie, le menu s'efface. Garder la liste et le
   titre « quelle monnaie ? » au-dessus de la consigne de paiement,
   c'était laisser deux écrans se disputer l'attention alors qu'un
   seul a encore quelque chose à dire. Le bouton « changer » reste :
   c'est par lui qu'on revient. */
.rej-e.cr-actif > h2,
.rej-e.cr-actif > .coins { display: none; }
.rej-e.cr-actif .rej-sortie { margin-top: 4px; }

.cr { text-align: left; }

/* ---- en-tête : sur quelle chaîne on est ---- */
.cr-tete {
	display: flex; align-items: center; gap: 11px;
	padding: 11px 13px; margin-bottom: 18px; border-radius: 14px;
	background: rgba(224,115,159,.09);
	border: 1px solid rgba(224,115,159,.2);
}
.cr-tete img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.cr-tete i { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.cr-tete b { display: block; margin-top: 1px; font-size: 13.5px; color: var(--ink); }

/* ---- les deux valeurs à recopier ---- */
.cr-champ { margin-bottom: 12px; }
.cr-lab { display: block; margin-bottom: 6px; font-size: 11.5px; color: var(--dim); }
.cr-val {
	display: flex; align-items: center; gap: 9px;
	padding: 11px 12px; border-radius: 14px;
	background: rgba(255,255,255,.05); border: 1px solid var(--line-2);
}
.cr-val code {
	flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace;
	color: var(--ink); word-break: break-all; line-height: 1.45;
}
.cr-val b { flex: none; font-size: 11px; color: var(--faint); font-weight: 600; }

/* Le montant est le seul élément en gros caractères de tout l'écran.
   C'est la valeur dont une décimale de travers coûte le paiement :
   elle doit être la première chose que l'œil attrape. */
.cr-bloc-mt .cr-val {
	padding: 14px 13px;
	background: rgba(255,255,255,.075);
	border-color: rgba(224,115,159,.38);
}
.cr-mt { font-size: 21px; font-weight: 700; letter-spacing: .01em; word-break: normal; }
.cr-bloc-mt .cr-val b { font-size: 12px; color: var(--rose); }
.cr-ad { font-size: 11.5px; }

.cr-cp {
	flex: none; padding: 7px 12px; border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(224,115,159,.16); color: var(--rose);
	font-size: 11px; font-weight: 600; white-space: nowrap;
	transition: background .16s, color .16s;
}
.cr-cp:hover { background: rgba(224,115,159,.3); }
.cr-cp.ok { background: rgba(126,208,168,.22); color: #8fdcb4; }

/* ---- les deux mises en garde ---- */
.cr-note { margin: 0 0 6px; font-size: 11.5px; line-height: 1.6; color: var(--faint); }
.cr-champ + .cr-note { margin-top: 15px; }

/* Se tromper de réseau est la seule erreur irréversible du parcours :
   c'est la seule note qui a droit à une couleur et à un cadre. */
.cr-avert {
	display: flex; gap: 8px; align-items: flex-start;
	margin-top: 9px; padding: 10px 12px; border-radius: 12px;
	background: rgba(232,163,127,.09); border: 1px solid rgba(232,163,127,.24);
	color: #edb695;
}
.cr-avert::before { content: '⚠'; flex: none; font-size: 12px; line-height: 1.5; }

/* ---- le bloc vivant : où en est le paiement ---- */
.cr-suivi {
	margin-top: 16px; padding: 13px; border-radius: 14px;
	background: rgba(255,255,255,.045); border: 1px solid var(--line);
	text-align: center;
}
.cr-etat {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	margin: 0; font-size: 12.5px; color: var(--dim);
}
/* Le point qui bat : sans lui, une page qui attend ressemble à une
   page en panne, et le client écrit au support. */
.cr-etat::before {
	content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
	background: var(--rose); animation: cr-bat 1.5s ease-in-out infinite;
}
@keyframes cr-bat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .cr-etat::before { animation: none; } }

.cr-temps { margin: 7px 0 0; font-size: 11px; color: var(--faint); }

/* Détecté, en cours de confirmation : ça avance. */
.cr-vu .cr-suivi { background: rgba(224,115,159,.11); border-color: rgba(224,115,159,.28); }
.cr-vu .cr-etat  { color: #ffb3d0; }

.cr-ok .cr-suivi { background: rgba(126,208,168,.13); border-color: rgba(126,208,168,.32); }
.cr-ok .cr-etat  { color: #a6e2c2; }
.cr-ok .cr-etat::before { background: #7ed0a8; animation: none; }

.cr-exp .cr-suivi { background: rgba(255,255,255,.03); }
.cr-exp .cr-etat  { color: var(--faint); }
.cr-exp .cr-etat::before { background: var(--faint); animation: none; }

.cr-ok .cr-temps, .cr-exp .cr-temps { display: none; }

@media (min-width: 620px) {
	.rejoindre { place-items: center; }
	.rej-c { border-radius: var(--r-lg); border-bottom: 1px solid var(--line-2); padding-bottom: 22px; }
}

/* -------------------------------------------------------------
   13ter. Pages de rubrique
   ------------------------------------------------------------- */
/* Le chapeau est un vrai panneau, décoré comme le reste : sans cela
   une page de liste n'était qu'un titre posé sur un mur de cartes. */
.rub {
	position: relative; overflow: hidden;
	margin: 4px 0 22px; padding: clamp(18px, 3vw, 26px) clamp(16px, 3vw, 26px);
	border: 1px solid var(--line); border-radius: var(--r-lg);
	background:
		radial-gradient(80% 130% at 12% 0%, rgba(224,115,159,.1), transparent 62%),
		var(--pan);
	display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
}
.tape-rub { top: -7px; left: 34px; width: 62px; height: 17px; transform: rotate(-7deg); }
.rub-cat { flex: none; margin-bottom: -6px; }
.rub-t { flex: 1 1 200px; min-width: 0; }
.rub h1 { font: 400 clamp(23px, 4vw, 33px)/var(--hand-lh) var(--hand); }
.rub-s { margin: 5px 0 0; font-size: 12.5px; color: var(--faint); }
.rub-c { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rub-doodles { position: absolute; top: 16px; right: 18px; display: flex; gap: 6px; color: var(--rose); opacity: .5; }

/* Étiquettes de tri et de rubrique */
.ch {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 7px 13px; border-radius: 999px;
	background: rgba(255,255,255,.05); border: 1px solid var(--line);
	font-size: 12.5px; color: var(--dim); white-space: nowrap;
	transition: border-color .16s, color .16s, background .16s;
}
.ch:hover { color: var(--ink); border-color: var(--line-2); }
.ch.on { background: var(--rose-b); border-color: rgba(224,115,159,.4); color: var(--rose); font-weight: 600; }
.ch-x { background: var(--rose-2); border-color: transparent; color: #fff; font-weight: 600; }
.ch-x b { font-weight: 700; opacity: .8; }
.ch-x:hover { background: #d35e8f; color: #fff; }
.ch-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; }
.vide { padding: 40px 0; text-align: center; color: var(--faint); font-size: 13px; }

/* -------------------------------------------------------------
   Le fil vertical de l'accueil

   Un écran = un titre. Le conteneur défile à l'intérieur de
   lui-même avec un accrochage par diapositive ; la page en dessous
   (formules, pied) reste accessible en faisant défiler la fenêtre
   elle-même.

   dvh et non vh : sur mobile, vh compte la barre d'adresse et fait
   déborder d'autant — c'est le décalage d'un demi-écran classique
   des fils vidéo mal réglés.
   ------------------------------------------------------------- */
/* La hauteur écrite ici n'est qu'un REPLI pour navigateur sans
   JavaScript : la vraie hauteur est mesurée par pc5.js (filTaille),
   qui soustrait la place réelle de la barre du haut et de la barre
   d'onglets. Les valeurs en dur se trompaient de 47 px sur mobile —
   la barre du haut n'a pas la même hauteur selon la largeur. */
.fil {
	height: calc(100vh - 130px);
	height: calc(100dvh - 130px);
	overflow-y: auto; overscroll-behavior: contain;
	scroll-snap-type: y mandatory;
	border-radius: var(--r-lg);
	background: #000;
	scrollbar-width: none;
}
.fil::-webkit-scrollbar { display: none; }

/* Une diapositive = trois plans :
     1. le FOND — l'affiche floutée et assombrie, étalée sur tout
        l'écran. C'est elle qui donne sa couleur à la scène : fini le
        letterbox noir de part et d'autre d'une vidéo paysage ;
     2. le CADRE — la vidéo (ou l'affiche en attendant), nette, en
        16/9, coins arrondis, ombre portée, un bout de washi posé de
        travers — la carte de la maquette, en grand ;
     3. la LÉGENDE — titre, durée, bouton, sur un voile en bas.

   Le cadre est borné DEUX fois : par la largeur disponible et par la
   hauteur de la diapositive (sinon un écran court le ferait passer
   sous la légende). */
.fil-s {
	position: relative; height: 100%;
	scroll-snap-align: start; scroll-snap-stop: always;
	overflow: hidden;
	display: grid; place-items: center;
	padding: 16px clamp(14px, 3vw, 40px) 118px;
	background: var(--bg);
}
.fil-fond {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover;
	filter: blur(34px) saturate(1.15) brightness(.34);
	transform: scale(1.18);   /* le flou éclaircit les bords : on les sort de l'écran */
}
/* Un souffle de rose sur le fond, pour rester chez shh.video et pas
   dans un lecteur générique. */
.fil-s::before {
	content: ''; position: absolute; inset: 0; z-index: 0;
	background: radial-gradient(ellipse at 20% 0%, rgba(224,115,159,.14), transparent 55%);
	pointer-events: none;
}

/* Le cadre ÉPOUSE la vidéo : chaque extrait a son propre format, et
   c'est lui qui commande. --rv porte le rapport largeur/hauteur,
   mesuré sur la vidéo elle-même (loadedmetadata) — 16/9 n'est que le
   point de départ. La même variable borne la largeur par la hauteur
   disponible : un portrait donne un cadre étroit et haut, un paysage
   un cadre large, jamais de rognage ni de bandes.

   Le cadre ne contient QUE la vidéo. Il porte lui-même les coins,
   l'ombre et un fond sombre translucide : tant que la vidéo n'est
   pas prête, c'est un écran éteint — l'affiche nette qu'on y mettait
   dépassait derrière la vidéo dès que les formats différaient. */
.fil-cadre {
	position: relative; z-index: 1;
	width: min(100%, calc((100vh - 330px) * var(--rv, 1.7778)));
	max-width: 1080px;
	aspect-ratio: var(--rv, 1.7778);
	border-radius: 16px;
	background: rgba(10, 8, 14, .55);
	box-shadow: 0 26px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255,255,255,.07);
}
.fil-cadre video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; border-radius: 16px;
	background: #0b0910;
}
.tape-fil {
	position: absolute; top: -11px; left: 26px; z-index: 2;
	transform: rotate(-5deg);
}

/* La barre de lecture : fine, au bas du cadre, cliquable pour se
   déplacer. Le ::after invisible élargit la zone de clic — 4 px nus
   sont injouables au doigt. */
.fil-prog {
	position: absolute; left: 12px; right: 12px; bottom: 9px; z-index: 3;
	height: 4px; border-radius: 999px;
	background: rgba(255,255,255,.24);
	cursor: pointer;
}
.fil-prog::after { content: ''; position: absolute; inset: -9px 0; }
.fil-prog i {
	display: block; height: 100%; width: 0; border-radius: 999px;
	background: var(--rose);
	transition: width .25s linear;
}

/* Le « +10s / −10s » d'un double tap : une bulle qui s'efface. */
.fil-saut {
	position: absolute; top: 50%; z-index: 4;
	padding: 11px 17px; border-radius: 999px;
	background: rgba(0, 0, 0, .58); backdrop-filter: blur(4px);
	font-style: normal; font-size: 14px; font-weight: 700; color: #fff;
	pointer-events: none;
	animation: fil-saut .65s ease forwards;
}
.fil-saut.g { left: 10%; }
.fil-saut.d { right: 10%; }
@keyframes fil-saut {
	0%   { opacity: 0; transform: translateY(-50%) scale(.8); }
	18%  { opacity: 1; transform: translateY(-50%) scale(1); }
	70%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-50%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .fil-saut { animation-duration: .35s; } }

/* La pastille de pause / reprise, au centre du cadre.
   Les deux barres et le triangle sont DESSINÉS : les caractères ⏸ et
   ⏵ manquent à plusieurs polices japonaises et s'affichaient en carré
   vide. */
.fil-etat {
	position: absolute; top: 50%; left: 50%; z-index: 4;
	display: grid; grid-auto-flow: column; place-items: center; gap: 6px;
	width: 64px; height: 64px; border-radius: 50%;
	background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px);
	pointer-events: none;
	animation: fil-etat .62s ease forwards;
}
.fil-etat b { display: block; width: 7px; height: 24px; border-radius: 2px; background: #fff; }
.fil-etat.lire b + b { display: none; }
.fil-etat.lire b {
	width: 0; height: 0; margin-left: 5px; background: none; border-radius: 0;
	border-left: 21px solid #fff;
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
}
@keyframes fil-etat {
	0%   { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
	20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	60%  { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}
@media (prefers-reduced-motion: reduce) { .fil-etat { animation-duration: .35s; } }

.fil-voile {
	position: absolute; inset: auto 0 0 0; height: 200px; z-index: 2;
	background: linear-gradient(180deg, transparent, rgba(8, 6, 12, .88));
	pointer-events: none;
}

.fil-bas {
	position: absolute; left: clamp(16px, 3vw, 40px); right: 16px; bottom: 20px; z-index: 3;
	display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
}
.fil-t {
	max-width: 46ch; font-size: 15.5px; font-weight: 600; line-height: 1.4;
	text-shadow: 0 1px 4px rgba(0,0,0,.85);
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
	-webkit-box-orient: vertical; overflow: hidden;
}
.fil-d {
	padding: 4px 11px; border-radius: 999px;
	background: rgba(255,255,255,.1); backdrop-filter: blur(6px);
	font-size: 11px; color: rgba(255,255,255,.85);
}
.fil-fiche { margin-top: 3px; padding: 10px 20px; font-size: 13px; }

.fil-son {
	position: absolute; top: 14px; right: 14px; z-index: 3;
	width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
	display: grid; place-items: center;
	background: rgba(0,0,0,.45); color: #fff;
	backdrop-filter: blur(4px);
}
.fil-son:hover { background: rgba(0,0,0,.65); }
.fil-son span { display: grid; place-items: center; }
/* display:grid l'emporte sur l'attribut hidden — sans cette ligne les
   deux icônes (muet ET sonore) s'affichaient empilées. Même piège
   déjà payé sur .rej-pas : toute règle display sur un élément que le
   script masque par [hidden] doit prévoir ce cas. */
.fil-son span[hidden] { display: none; }

.fil-astuce { margin: 10px 0 0; text-align: center; font-size: 11.5px; color: var(--faint); }

@media (max-width: 760px) {
	/* Sous la barre du haut et au-dessus de la barre d'onglets. */
	.fil { height: calc(100vh - 174px); height: calc(100dvh - 174px); border-radius: var(--r); }
	.fil-s { padding: 12px 12px 112px; }
	.tape-fil { left: 16px; width: 62px; }
	.fil-voile { height: 170px; }
}

/* -------------------------------------------------------------
   Classement — les trois de tête, puis la grille

   Pas de podium centré : le premier est en TÊTE DE FILE, en haut à
   gauche, là où la lecture commence. Chercher le vainqueur au milieu
   d'une rangée est un effort de plus pour rien.

   Ils sortent tout de même de la grille ordinaire — trois colonnes
   larges au lieu de six étroites — et portent une médaille posée à
   cheval sur l'affiche. Sous chaque titre, une barre dit l'écart
   avec le premier.
   ------------------------------------------------------------- */
.podium {
	display: grid; gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 0 24px; padding: 0; list-style: none;
}
.pod { display: flex; flex-direction: column; min-width: 0; }

.pod-m {
	position: relative; z-index: 3; align-self: flex-start;
	width: 34px; height: 34px; margin: 0 0 -17px 10px;
	display: grid; place-items: center; border-radius: 50%;
	border: 2px solid var(--bg);
	font-size: 16px; font-weight: 800; font-style: normal; color: #2a1520;
}
.pod-1 .pod-m { background: linear-gradient(160deg, #ffe0a0, #e0a33a); box-shadow: 0 0 0 4px rgba(224,163,58,.16); }
.pod-2 .pod-m { background: linear-gradient(160deg, #e6e0ec, #a79db3); }
.pod-3 .pod-m { background: linear-gradient(160deg, #ecbb95, #b87d51); }

/* Le premier a droit à un liseré : il gagne, ça doit se voir sans
   avoir à lire le chiffre. */
.pod-1 .carte { border-color: rgba(224,163,58,.45); }

.rang-i { display: flex; flex-direction: column; min-width: 0; }

.rang-p { margin-top: 7px; }
.jauge {
	display: block; height: 4px; border-radius: 999px;
	background: rgba(255,255,255,.08); overflow: hidden;
}
.jauge i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rose-2), var(--rose)); }
.pod-1 .jauge i { background: linear-gradient(90deg, #e0a33a, #ffe0a0); }

@media (max-width: 460px) {
	.podium { gap: 8px; }
	.pod-m { width: 27px; height: 27px; margin: 0 0 -13px 8px; font-size: 13px; }
}


/* Catégories : des pastilles, comme les étiquettes d'une fiche. */
.chips-g { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.chips-g a {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 11px 14px; border-radius: 12px;
	background: var(--carte); border: 1px solid var(--line);
	transition: border-color .18s, transform .18s;
}
.chips-g a:hover { border-color: rgba(224,115,159,.45); transform: translateY(-2px); }
/* Une seule ligne par pastille : les noms longs prennent des points de
   suspension (le nom complet reste dans le title), et toutes les
   pastilles gardent la même hauteur. */
.chips-g b { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips-g i { font-style: normal; font-size: 11px; color: var(--faint); white-space: nowrap; }

/* Idols : une pastille de chat, un nom, un compte. */
.idols { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.idols { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.idols a {
	display: block; padding: 0; border-radius: var(--r); overflow: hidden;
	background: var(--carte); border: 1px solid var(--line);
	transition: border-color .18s, transform .18s;
}
.idols a:hover { border-color: rgba(224,115,159,.45); transform: translateY(-3px); }
/* Le portrait du site. Si le fichier manque, le <img> se retire et le
   chat dessiné, posé dessous, reste visible : jamais d'image cassée. */
.idol-f {
	position: relative; display: grid; place-items: center;
	aspect-ratio: 1 / 1; background: var(--pan-2); overflow: hidden;
}
.idol-f img {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s;
}
.idols a:hover .idol-f img { transform: scale(1.06); }
.idol-chat { display: grid; place-items: center; opacity: .5; }
.idol-t { display: block; padding: 9px 10px 11px; }
.idols b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.idols i { font-style: normal; font-size: 11px; color: var(--faint); }

/* Pagination */
.pager { display: flex; justify-content: center; gap: 6px; margin: 26px 0 0; flex-wrap: wrap; }
.pg {
	min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px;
	display: grid; place-items: center;
	background: var(--carte); border: 1px solid var(--line);
	font-size: 13px; color: var(--dim);
}
.pg:hover { border-color: rgba(224,115,159,.45); color: var(--ink); }
.pg.on { background: var(--rose-b); border-color: rgba(224,115,159,.45); color: var(--rose); font-weight: 700; }
.pg-f .ic { transform: scaleX(-1); }

/* Pages d'information */
.info { max-width: 560px; margin: 0 auto; text-align: center; padding: 10px 0 40px; }
.info-ic { display: grid; place-items: center; color: var(--rose); margin-bottom: 16px; }
.postit-info { display: inline-block; margin: 0 auto 22px; max-width: 260px; }
.info-t { font-size: 13.5px; color: var(--dim); margin-bottom: 20px; }

/* -------------------------------------------------------------
   13quater. Pages de texte et formulaires
   ------------------------------------------------------------- */
.doc {
	max-width: 74ch; margin: 0 auto; padding: 4px 0 40px;
	font-size: 14.5px; line-height: 1.85; color: var(--dim);
}
.doc h1, .doc h2, .doc h3 {
	margin: 28px 0 10px; color: var(--ink);
	font: 400 clamp(18px, 2.6vw, 22px)/var(--hand-lh) var(--hand);
}
.doc p { margin: 0 0 14px; }
.doc a { color: var(--rose); text-decoration: underline; text-underline-offset: 2px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 20px; }
.doc li { margin: 5px 0; list-style: disc; }
.doc ol li { list-style: decimal; }
.doc img { max-width: 100%; border-radius: var(--r); margin: 12px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.doc td, .doc th { padding: 8px 10px; border: 1px solid var(--line); text-align: left; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.doc strong, .doc b { color: var(--ink); }

.form-w {
	position: relative; max-width: 520px; margin: 0 auto; padding: 0 0 46px;
}
.form-p {
	background: var(--pan); border: 1px solid var(--line);
	border-radius: var(--r-lg); padding: clamp(18px, 4vw, 28px);
}
.form-p label {
	display: block; margin: 0 0 6px; font-size: 12px; color: var(--faint);
}
.form-p input, .form-p textarea {
	width: 100%; margin: 0 0 16px; padding: 12px 14px;
	background: rgba(255,255,255,.045); border: 1px solid var(--line-2);
	border-radius: 12px; color: var(--ink); font: inherit; font-size: 14.5px;
	resize: vertical;
}
.form-p input:focus, .form-p textarea:focus { outline: none; border-color: rgba(224,115,159,.55); }
.form-p .btn { width: 100%; justify-content: center; }
.form-note { margin: 0 0 16px; font-size: 12px; line-height: 1.7; color: var(--faint); }
.form-note a { color: var(--rose); }
.form-liens { margin: 16px 0 0; text-align: center; font-size: 12.5px; color: var(--faint); }
.form-liens a { color: var(--rose); }
.form-liens i { font-style: normal; margin: 0 8px; opacity: .5; }
.form-cat { position: absolute; right: 6px; bottom: -6px; opacity: .5; pointer-events: none; }
.msg-ok, .msg-ko {
	margin: 0 0 14px; padding: 13px 16px; border-radius: 12px; font-size: 13.5px;
}
.msg-ok { background: rgba(126,208,168,.12); border: 1px solid rgba(126,208,168,.3); color: #a6e2c2; }
.msg-ko { background: rgba(224,115,159,.12); border: 1px solid rgba(224,115,159,.32); color: #ff9ec8; }
.msg-ko:empty { display: none; padding: 0; margin: 0; border: 0; }

/* -------------------------------------------------------------
   14. Navigation du petit écran
   Reprise du principe de la .tabbar de /pc2/ : barre fixe en bas,
   cinq onglets, masquée au-dessus de 768 px (voir § 16).
   ------------------------------------------------------------- */
.tabbar {
	display: none;
	position: fixed; inset: auto 0 0 0; z-index: 60;
	background: rgba(11,9,16,.9);
	border-top: 1px solid var(--line);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	padding: 7px max(6px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
}
.tabbar ul { display: flex; justify-content: space-around; }
.tabbar li { flex: 1; }
.tabbar a, .tabbar button {
	position: relative; width: 100%;
	display: grid; justify-items: center; gap: 3px;
	padding: 7px 4px 5px; border-radius: 12px;
	color: var(--faint); font-size: 10px; font-weight: 600; line-height: 1.2;
	transition: color .16s;
}
.tabbar a span, .tabbar button span:last-child { white-space: nowrap; }
.tabbar a:hover, .tabbar button:hover { color: var(--dim); }
/* L'onglet courant reprend la pastille rose de la colonne de gauche. */
.tabbar a[aria-current] { color: var(--rose); }
.tabbar a[aria-current]::before {
	content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
	width: 38px; height: 26px; border-radius: 999px; background: var(--rose-b);
}
.tabbar a[aria-current] .ic { position: relative; }
.tab-cat { display: grid; place-items: center; height: 21px; }

/* La feuille qui porte le reste du menu */
.feuille {
	position: fixed; inset: 0; z-index: 75;
	display: grid; align-items: end;
	background: rgba(6,5,9,.7);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	animation: fondu .22s ease;
}
.feuille[hidden] { display: none; }
.feuille-c {
	background: var(--pan); border-top: 1px solid var(--line-2);
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	padding: 12px 14px calc(18px + env(safe-area-inset-bottom));
	max-height: 82vh; overflow-y: auto;
	animation: monte .28s cubic-bezier(.22,1,.36,1);
}
.feuille-prise { display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--line-2); margin: 0 auto 14px; }
.feuille-n a {
	display: flex; align-items: center; gap: 13px;
	padding: 12px 12px; border-radius: 12px;
	color: var(--dim); font-size: 14.5px;
}
.feuille-n a:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.feuille-h {
	margin: 14px 0 4px; padding: 0 12px;
	display: flex; align-items: center; gap: 6px;
	color: var(--faint); font-size: 11px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase;
}
.feuille-h .ic { color: var(--rose); }
.feuille-x { width: 100%; justify-content: center; margin-top: 18px; }

/* -------------------------------------------------------------
   15. Pied
   ------------------------------------------------------------- */
.bas { text-align: center; padding: 30px var(--pad) 36px; }
.bas-chat { display: block; opacity: .45; margin-bottom: 4px; }
.bas-chat svg { margin: 0 auto; }

/* Six liens sur une ligne, centrés, en pastilles au survol — le même
   geste que le menu de l'affiliation. Rien à aligner, rien à titrer :
   le pied respire au lieu de simuler une grille. */
.bas-liens {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 2px 4px; max-width: 760px; margin: 0 auto 20px;
}
.bas-liens a {
	padding: 7px 13px; border-radius: 999px;
	font-size: 12.5px; color: var(--faint);
	transition: color .16s, background .16s;
}
.bas-liens a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.bas-liens a.hors i { font-style: normal; margin-left: 4px; opacity: .55; font-size: 10px; }

/* Le filet ne traverse pas toute la page : il souligne la signature,
   il ne coupe pas le pied en deux. */
.bas-c {
	max-width: 300px; margin: 0 auto; padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 11.5px; color: var(--faint);
}
.bas-note { max-width: 66ch; margin: 10px auto 0; font-size: 11.5px; line-height: 1.7; color: #55506a; }

/* -------------------------------------------------------------
   16. Largeurs
   ------------------------------------------------------------- */
@media (min-width: 720px) {
	.hero { grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); }
	.hero-t { text-align: left; }
	.hero-t .hero-a { justify-content: flex-start; }
	.fiche-b { grid-template-columns: 1fr auto; align-items: start; }
}
@media (min-width: 1080px) {
	.top { grid-template-columns: var(--side) minmax(0, 1fr) auto; }
	.grid { grid-template-columns: var(--side) minmax(0, 1fr); }
	.quest { max-width: 660px; }
}
@media (min-width: 1320px) {
	.grid { grid-template-columns: var(--side) minmax(0, 1fr) var(--rail); }
	/* Page de rubrique : la place de la colonne de droite revient à la
	   grille, qui gagne deux vignettes par rangée. */
	.grid.sans-rail { grid-template-columns: var(--side) minmax(0, 1fr); }
	/* Collantes, mais jamais plus hautes que l'écran : sinon le bas de
	   la colonne devient inatteignable, la page défilant sous elle. */
	.side, .rail {
		position: sticky; top: 16px; align-self: start;
		max-height: calc(100vh - 32px);
		overflow-y: auto; overscroll-behavior: contain;
		scrollbar-width: none;
	}
	.side::-webkit-scrollbar, .rail::-webkit-scrollbar { display: none; }
}

/* En dessous de 1080 px la colonne de gauche passe en bandeau
   horizontal : garder un tiroir latéral sur mobile coûterait plus
   qu'il ne rapporte pour une maquette. */
@media (max-width: 1079px) {
	.top { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo actions" "quest quest"; }
	.logo { grid-area: logo; } .top-r { grid-area: actions; } .quest { grid-area: quest; }
	.invite b { display: none; }
	.btn-join { padding: 8px 13px; font-size: 12.5px; }
	.me-l { display: none; }   /* l'avatar suffit, la barre est étroite */
	/* Sur une barre étroite, le chat qui dépasse du logo finit SOUS le
	   bouton « rejoindre » — constaté à 390 px : l'oreille recouvrait
	   le libellé. Il redeviendra visible dès qu'il y a de la place. */
	.logo-cat { display: none; }
	.side { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 10px; }
	.side .nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
	.side .nav::-webkit-scrollbar { display: none; }
	.nav-a { white-space: nowrap; padding: 8px 12px; }
	.nav-a span { font-size: 13px; }
	.nav-doodle, .nav-plus { display: none; }
	.cut, .side-h, .postit, .side-c { display: none; }
	.nav-2 { display: flex; gap: 4px; }
	.fleche { display: none; }
	.hero-note { display: none; }
}
/* Sous 768 px, la barre du bas remplace la colonne de gauche : garder
   les deux ferait deux navigations concurrentes à l'écran. */
@media (max-width: 768px) {
	.tabbar { display: block; }
	.side { display: none; }
	body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
	.bas { padding-bottom: 16px; }
}

@media (max-width: 719px) {
	.hero-art { transform: scale(.82); margin-bottom: -14px; }
	.hero-doodles { display: none; }
	.piste > * { width: clamp(118px, 36vw, 134px); }
	.postit-fiche { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	.piste { scroll-behavior: auto; }
	.carte:hover { transform: none; }
	.carte:hover .carte-a img { transform: none; }
}

/* -------------------------------------------------------------
   Espace membre — mysub / myfavorite / mydownload, et le bouton
   « ma liste » de la fiche. Même vocabulaire que le reste.
   ------------------------------------------------------------- */
.mem-note { background: var(--rose-b); border: 1px solid var(--rose-2); color: var(--rose-3); padding: 10px 14px; border-radius: 10px; margin: 0 0 16px; font-size: 13.5px; }
.mem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 4px 0 26px; }
.mem-box  { background: var(--pan); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.mem-l    { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 600; }
.mem-v    { font-size: 18px; font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mem-v i  { font-style: normal; font-size: 13px; color: var(--dim); }
.mem-ok   { color: #8fe0b0; }
.mem-off  { color: var(--dim); }
.mem-ko   { color: #f08a9b; font-size: 12px; }
.mem-stop { margin-top: 8px; align-self: flex-start; font-size: 12.5px; }
.mem-histo { list-style: none; margin: 8px 0 30px; padding: 0; max-width: 560px; }
.mem-histo li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; border-bottom: 1px dashed var(--line-2); font-size: 13.5px; flex-wrap: wrap; }
.mem-histo li span { color: var(--dim); white-space: nowrap; }
.mem-histo.mem-dl li a { color: var(--rose-3); min-width: 0; overflow-wrap: anywhere; }
.mem-sous { color: var(--faint); font-size: 12px; margin: -4px 0 10px; }
.mem-vide { text-align: center; padding: 30px 0 10px; }

.malist .ml-off, .malist .ml-on { display: inline-flex; align-items: center; gap: 6px; }
.malist .ml-on { display: none; color: var(--rose-3); }
.malist.on .ml-off { display: none; }
.malist.on .ml-on { display: inline-flex; }

.moi-compte { margin-bottom: 6px; }
@media (max-width: 560px) { .mem-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------
   Séries — les vraies vignettes du serveur d'images, comme /pc/.
   Sans vignette (onerror), le dessin pastel reprend sa place.
   ------------------------------------------------------------- */
.cards-series { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.serie-c {
	display: block; background: var(--carte); border: 1px solid var(--line);
	border-radius: var(--r); overflow: hidden; padding-bottom: 11px;
	transition: border-color .18s, transform .18s;
}
.serie-c:hover { border-color: rgba(224,115,159,.45); transform: translateY(-2px); }
.serie-c img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; margin-bottom: 9px; }
.serie-c .serie-art { display: none; }
.serie-c.sans-img .serie-art { display: grid; place-items: center; height: 86px; margin-bottom: 6px; }
.serie-c .coll-t, .serie-c .coll-n { display: block; padding: 0 12px; }
.serie-c .coll-t { font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; }
.serie-c .coll-n { font-size: 11.5px; color: var(--faint); }

/* Défilement doux vers les ancres (ex. « 掲示板 » -> #plans),
   sauf si le système demande moins d'animations. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* -------------------------------------------------------------
   Rappel du mot de passe — carte centrée, chat qui regarde.
   ------------------------------------------------------------- */
.remi { display: grid; place-items: center; padding: 64px 0 16px; }
.remi-c {
	position: relative; width: min(430px, 100%);
	background: var(--pan); border: 1px solid var(--line);
	border-radius: var(--r-lg); padding: 40px 26px 26px; text-align: center;
}
.remi-cat { position: absolute; top: -49px; left: 50%; transform: translateX(-50%); }
.remi-c h1 { font: 400 25px/1.2 var(--hand); margin: 0 0 10px; }
.remi-note { color: var(--dim); font-size: 13px; line-height: 1.55; margin: 8px 0; }
.remi-c form { display: grid; gap: 10px; margin: 14px 0 4px; }
.remi-c input {
	padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-2);
	background: var(--bg); color: var(--ink); font: inherit; text-align: center;
}
.remi-c input:focus { outline: none; border-color: var(--rose); }
.remi-ok i { display: block; margin: 6px 0 2px; color: var(--rose-3); }
.remi-ok .btn { margin-top: 12px; }
.remi-ko {
	color: #f08a9b; background: rgba(240,138,155,.1);
	border: 1px solid rgba(240,138,155,.35);
	padding: 8px 10px; border-radius: 10px; font-size: 13px; margin: 10px 0;
}
.remi-liens { margin-top: 16px; font-size: 12.5px; color: var(--faint); }
.remi-liens a { color: var(--rose-3); }
.remi-liens i { font-style: normal; margin: 0 6px; }

/* Chapeau d'une liste filtrée par actrice : son portrait en grand. */
.rub-idol { align-items: center; }
.rub-photo { flex: none; width: clamp(84px, 14vw, 112px); height: clamp(84px, 14vw, 112px);
	border-radius: 16px; overflow: hidden;
	border: 2px solid var(--rose-2); box-shadow: 0 8px 26px rgba(0,0,0,.5); background: var(--pan-2); }
.rub-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
@media (max-width: 560px) { .rub-photo { width: 76px; height: 76px; border-radius: 12px; } }