/*
 * Card Generator - feuille de style dediee.
 *
 * L'apparence reprend celle de Card Collection : bandeaux de section
 * colores, vignettes de cartes en grille, boutons pleins.
 *
 * COMPATIBILITE TOUS THEMES
 * Une seule couleur d'accent est definie, en variable CSS. Un style qui
 * veut l'adapter n'a qu'une declaration a surcharger :
 *
 *     :root { --cardgen-accent: #8b1f2f; }
 *
 * Tout le reste est exprime en gris neutre transparent, qui laisse
 * passer le fond du style actif - clair comme sombre.
 */

:root {
	--cardgen-accent: #2f8fef;
	--cardgen-accent-text: #ffffff;
}

/* --- Section : bandeau colore + corps ----------------------------- */

/*
 * Pas d'overflow: hidden ici. Il servait a rogner le bandeau colore aux
 * coins arrondis, mais il annule aussi position: sticky sur tout ce que
 * la section contient - l'apercu de l'atelier restait fige en haut au
 * lieu de suivre le defilement. Les coins sont donc arrondis sur le
 * bandeau et le corps separement.
 */
.cardgen-section {
	margin-bottom: 1.2rem;
	border-radius: .4rem;
	background: rgba(128, 128, 128, .07);
}

.cardgen-section-head {
	border-radius: .4rem .4rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	padding: .7rem 1rem;
	background: var(--cardgen-accent);
	color: var(--cardgen-accent-text);
}

.cardgen-section-head h2,
.cardgen-section-head h3 {
	margin: 0;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: 1.05em;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.cardgen-count {
	display: inline-block;
	min-width: 1.6rem;
	margin-left: .5rem;
	padding: .05rem .5rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, .3);
	font-size: .85em;
	text-align: center;
}

.cardgen-section-body {
	padding: 1rem;
	border-radius: 0 0 .4rem .4rem;
}

/* Bouton pose sur le bandeau : il doit rester lisible sur la couleur
   d'accent, donc bord et texte heritent du blanc plutot que des
   couleurs du style. */
.cardgen-head-action {
	padding: .25rem .8rem;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: .25rem;
	color: inherit;
	font-size: .85em;
	text-decoration: none;
}

.cardgen-head-action:hover {
	background: rgba(255, 255, 255, .2);
	color: inherit;
}

/* --- Grille de vignettes ------------------------------------------ */

.cardgen-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 1.2rem;
}

.cardgen-item {
	display: flex;
	flex-direction: column;
	gap: .45rem;
}

/* La vignette. Fond clair et non gris : des rectangles gris sur fond
   gris ne se distinguent pas. Le blanc casse reste neutre vis-a-vis du
   style actif tout en donnant un vrai support aux zones. */
.cardgen-thumb {
	position: relative;
	display: block;
	width: 100%;
	/* Rapport de la toile, fond perdu compris : les zones y sont posees
	   en coordonnees de toile. */
	aspect-ratio: var(--cg-ratio, 695 / 949);
	border: 1px solid rgba(128, 128, 128, .4);
	border-radius: .3rem;
	background: #fbfbf9;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	overflow: hidden;
	text-decoration: none;

	/* Reference des tailles de texte, comme sur la toile de l'atelier :
	   chaque zone exprime sa police en pourcentage de cette valeur, si
	   bien que la vignette se met a l'echelle d'un seul reglage. La
	   valeur correspond a la largeur reelle d'une vignette. */
	font-size: 9.5rem;
	--cg-cardw: 9.5rem;
	color: #222;
}

/* Bandeau de titre en bas de vignette, comme sur les cartes reelles. */
/* ATTENTION - .cardgen-thumb porte font-size: 9.5rem, qui sert de
   reference aux zones exprimees en pourcentage. Tout element qui n'est
   pas une zone doit donc fixer sa taille en unite ABSOLUE (rem, px).
   Un em ou un pourcentage se calculerait sur 9,5 rem : c'est ce qui a
   rendu ce bandeau gigantesque en 1.6.2. */
.cardgen-thumb-label {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: .3rem .45rem;
	background: rgba(20, 20, 20, .78);
	color: #fff;
	font-size: .74rem;
	font-weight: normal;
	line-height: 1.25;
}

.cardgen-thumb-label b {
	display: block;
	font-size: .74rem;
	word-break: break-word;
}

.cardgen-thumb-label span {
	display: block;
	font-size: .68rem;
	opacity: .82;
}

/* --- Zones du gabarit --------------------------------------------- */

/* Chaque zone porte son libelle, ecrit dans son coin haut gauche. Un
   rectangle nu ne dit pas ce qu'il represente ; c'etait le defaut de la
   version precedente. */
.cardgen-zone {
	position: absolute;
	overflow: hidden;
	border: 1px solid rgba(60, 60, 60, .38);
	border-radius: .12rem;
	padding: 1px 2px;
	font-size: 9px;
	line-height: 1.1;
	color: rgba(40, 40, 40, .72);
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Les trois types se distinguent par le trait ET par la teinte : le
   trait suffit en noir et blanc, la teinte accelere la lecture. */
.cardgen-zone-image {
	background: rgba(90, 140, 190, .22);
	border-color: rgba(70, 120, 175, .5);
}

.cardgen-zone-text {
	background: rgba(120, 120, 120, .1);
	border-style: dashed;
}

.cardgen-zone-stats {
	background: rgba(150, 130, 80, .2);
	border-color: rgba(140, 120, 70, .5);
	border-style: dotted;
}

.cardgen-zone.is-round {
	border-radius: 50%;
}

/* Sous une certaine taille le libelle devient une bouillie : on le
   masque plutot que de l'afficher tronque a un caractere. */
.cardgen-zone-tiny {
	font-size: 0;
}

/* --- Legende et actions sous la vignette -------------------------- */

.cardgen-meta {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.cardgen-small {
	font-size: .8em;
	opacity: .72;
}

.cardgen-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .35rem;
}

.cardgen-btn {
	flex: 1 1 auto;
	padding: .3rem .6rem;
	border: 0;
	border-radius: .25rem;
	background: var(--cardgen-accent);
	color: var(--cardgen-accent-text);
	font-size: .82em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.cardgen-btn:hover {
	color: var(--cardgen-accent-text);
	filter: brightness(1.1);
}

.cardgen-btn-ghost {
	background: rgba(128, 128, 128, .2);
	color: inherit;
}

.cardgen-btn-ghost:hover {
	background: rgba(128, 128, 128, .32);
	color: inherit;
}

/* --- Atelier ------------------------------------------------------ */

.cardgen-tabs {
	display: flex;
	gap: .25rem;
	margin-bottom: -1px;
}

.cardgen-tab {
	padding: .4rem 1.1rem;
	border-radius: .3rem .3rem 0 0;
	background: rgba(128, 128, 128, .18);
	font-size: .9em;
	text-decoration: none;
}

.cardgen-tab.is-active {
	background: var(--cardgen-accent);
	color: var(--cardgen-accent-text);
	font-weight: bold;
}

.cardgen-workspace {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.5rem;
}

/* L'apercu reste visible pendant qu'on fait defiler le formulaire.
   position: sticky degrade proprement : un navigateur qui l'ignore
   affiche simplement un bloc normal. */
/*
 * L'apercu suit le defilement. La largeur est bornee par la hauteur
 * disponible : sans cela, sur un ecran bas - portable en paysage - la
 * carte depasserait par le bas et son bandeau de titre resterait
 * invisible quoi qu'on fasse.
 *
 * 0.62 est le rapport 63,5 / 88,9 de la carte : une largeur de 62 % de
 * la hauteur disponible donne une carte entierement visible.
 */
.cardgen-stage {
	position: sticky;
	top: 1rem;
	flex: 0 0 auto;
	width: min(17rem, 62vh);
}

.cardgen-fields {
	flex: 1 1 22rem;
	min-width: 17rem;
}

.cardgen-canvas {
	position: relative;
	width: 100%;
	/* Rapport de la TOILE, fond perdu compris - pas celui de la carte
	   coupee. Les zones sont placees en coordonnees de toile : avec le
	   rapport de la carte, tout se trouvait etire verticalement. */
	aspect-ratio: var(--cg-ratio, 695 / 949);

	/* Reference des tailles de texte : chaque zone exprime sa police en
	   pourcentage de cette valeur, si bien que toute la carte se met a
	   l'echelle d'un seul reglage.

	   --cg-cardw porte la meme valeur sous forme de longueur, pour les
	   reglages qui ne sont pas des tailles de texte : epaisseur de
	   contour notamment. */
	font-size: 17rem;
	--cg-cardw: 17rem;

	border-radius: .3rem;
	background: rgba(128, 128, 128, .1);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .22);
	overflow: hidden;
}

/* Valeur de repli. Les zones recoivent leur taille en style inline ; si
   celui-ci etait absent ou invalide, elles heriteraient des 9,5 rem du
   conteneur. Ce defaut borne les degats. */
/*
 * Conteneur flex en colonne : c'est ce qui permet d'aligner
 * verticalement un contenu dont on ignore la hauteur. Un display: block
 * ne sait faire que "en haut".
 *
 * L'alignement horizontal, lui, reste sur text-align : il doit
 * s'appliquer ligne par ligne dans un paragraphe, ce que
 * justify-content ne fait pas.
 */
/* box-sizing: le contour se dessine a l'interieur de la zone. Sans
   cela, un filet de 10 px agrandirait le bloc de 20 px et decalerait
   tout ce qui l'entoure. */
.cardgen-live {
	position: absolute;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 3%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	line-height: 1.15;
}

/*
 * ATTENTION au selecteur : span.
 *
 * Le div de la zone porte lui aussi la classe cardgen-live-text, formee
 * par cardgen-live-{TYPE} avec TYPE = "text". Sans la restriction aux
 * span, white-space: pre-wrap s'appliquait au div - et le retour a la
 * ligne place entre <div> et <span> dans le gabarit Twig etait alors
 * rendu comme une ligne vide, poussant le texte d'une ligne vers le bas.
 *
 * C'est ce qui decalait le Code par rapport au bloc Discover a Y egal :
 * ce dernier porte la classe cardgen-live-discover et n'heritait donc
 * pas de la regle.
 */
span.cardgen-live-text {
	display: block;
	width: 100%;
	word-break: break-word;
	white-space: pre-wrap;
}

/*
 * L'image est posee par une couche ::after, pas par le background de
 * l'element.
 *
 * Motif : le fond propre d'un element est peint SOUS ses
 * pseudo-elements. Une image mise en background-image passait donc sous
 * la couche de couleur ::before et disparaissait des qu'une couleur de
 * fond etait choisie - y compris le blanc pose par defaut sur les
 * pastilles. C'est pour cela qu'un fond importe n'apparaissait pas dans
 * l'apercu alors qu'il sortait bien au rendu.
 *
 * Ordre d'empilement, du bas vers le haut :
 *   ::before  couleur de fond
 *   ::after   image
 *   contenu   texte
 */
.cardgen-live-image {
	border: 1px dashed rgba(128, 128, 128, .4);
	opacity: var(--cg-op, 1);
}

.cardgen-live::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background-image: var(--cg-img, none);
	background-position: center;
	background-size: var(--cg-img-size, cover);
	background-repeat: var(--cg-img-repeat, no-repeat);
}

/* Sans image declaree, la couche ne doit rien peindre ni intercepter. */
.cardgen-live:not([style*="--cg-img"])::after {
	display: none;
}

/* Une zone texte vide reste invisible plutot que de dessiner un cadre :
   sur une vignette, un pointille par zone non remplie ferait un
   quadrillage illisible. */
span.cardgen-live-text:empty {
	display: none;
}

/* Une zone image remplie n'a plus besoin de son contour : le pointille
   ne sert qu'a montrer l'emplacement vide. */
.cardgen-live-image[style*="--cg-img"] {
	border-color: transparent;
}

.cardgen-live.is-round { border-radius: 50%; }

/* Pastille par defaut du gabarit HQ. Le fond est laisse a la couche
   ::before quand le membre a choisi une couleur : les deux ne doivent
   pas se cumuler. */
.cardgen-live.is-pill:not([style*="--cg-bg"]) {
	padding: 0 .25em;
	background-color: rgba(255, 255, 255, .8);
	color: #222;
}

.cardgen-stage-note {
	margin-top: .45rem;
}

/* Champs en millimetres : seconde ligne, plus discrete que les
   pourcentages qui font foi. */
.cardgen-mm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	width: 100%;
	opacity: .75;
}

.cardgen-mm input {
	width: 3.6rem;
	padding: .15rem .3rem;
	border: 1px dashed rgba(128, 128, 128, .5);
	border-radius: .2rem;
	background: transparent;
	color: inherit;
	text-align: right;
}

/* --- Blocs de reglage --------------------------------------------- */

/*
 * Motif repris de l'ACP : fieldset arrondi porte par une ombre, legende
 * en pastille chevauchant la bordure. Les valeurs sont exprimees en em
 * plutot qu'en pixels, pour que le bloc suive la taille de police du
 * style actif.
 */
.cardgen-box {
	margin: 0 0 1.2rem;
	padding: .8rem 1rem 1rem;
	border: 1px solid rgba(128, 128, 128, .38);
	border-radius: 1em;
	box-shadow: .1em .1em 0 0 rgba(128, 128, 128, .45);
	background: rgba(128, 128, 128, .05);
}

.cardgen-box legend {
	margin-left: 1em;
	padding: .25em .7em;
	border: .1em solid rgba(128, 128, 128, .42);
	border-radius: .6em;

	/* La legende chevauche la bordure : il lui faut un fond opaque pour
	   la masquer. rgba ne suffirait pas, la bordure transparaitrait. */
	background: var(--cardgen-legend-bg, #fbfbfb);
	color: inherit;
	font-weight: bold;
}

.cardgen-box legend .icon {
	margin-right: .3em;
	opacity: .7;
}

/*
 * Pas de variante prefers-color-scheme ici.
 *
 * Elle suivait le reglage du SYSTEME, pas celui du forum : sur un poste
 * en mode sombre, toutes les pastilles de legende viraient au noir alors
 * que la page, elle, restait claire. Le resultat etait pire que le
 * probleme qu'elle traitait.
 *
 * Un style sombre qui en a besoin surcharge --cardgen-legend-bg dans sa
 * propre feuille : c'est a lui de decider, il connait son fond.
 */

.rtl .cardgen-box legend {
	margin-left: 0;
	margin-right: 1em;
}

.cardgen-box dl {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .5rem 1rem;
	margin: 0 0 .7rem;
}

.cardgen-box dl:last-child {
	margin-bottom: 0;
}

.cardgen-box dt {
	display: flex;
	flex-direction: column;
	flex: 0 0 9rem;
	font-weight: bold;
}

.cardgen-box dt .cardgen-small {
	font-weight: normal;
	line-height: 1.25;
}

.cardgen-box dd {
	flex: 1 1 16rem;
	margin: 0;
	min-width: 0;
}

.cardgen-box dd .inputbox {
	width: 100%;
	max-width: 34rem;
}

.cardgen-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem 1.2rem;
}

.cardgen-field {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.cardgen-field input[type="text"] {
	width: 3.6rem;
	padding: .15rem .3rem;
	border: 1px solid rgba(128, 128, 128, .5);
	border-radius: .2rem;
	background: transparent;
	color: inherit;
	text-align: right;
}

/* --- Reglage des dimensions d'une zone ---------------------------- */

.cardgen-geom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

.cardgen-geom label {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	font-size: .82em;
	opacity: .85;
}

.cardgen-geom input {
	width: 3.6rem;
	padding: .15rem .3rem;
	border: 1px solid rgba(128, 128, 128, .5);
	border-radius: .2rem;
	background: transparent;
	color: inherit;
	font-size: .9em;
	text-align: right;
}

/* --- Groupes de reglages ------------------------------------------ */

/*
 * Chaque famille - placement, texte, cadre - est encadree et nommee.
 * Alignes bout a bout sans separation, une douzaine de champs devenaient
 * impossibles a lire : on ne savait plus quel champ agissait sur quoi.
 */
.cardgen-group {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin: .55rem .5rem 0 0;
	padding: .45rem .6rem .35rem;
	border: 1px solid rgba(128, 128, 128, .35);
	border-radius: .4rem;
}

/* Le titre de groupe ne prend pas de fond opaque : il chevauche un
   filet d'un pixel, qu'un simple aplat clair suffit a masquer. Un fond
   sombre ici transformait chaque titre en pave noir. */
.cardgen-group-title {
	position: absolute;
	top: -.55rem;
	left: .5rem;
	padding: 0 .3rem;
	background: var(--cardgen-legend-bg, #fbfbfb);
	color: inherit;
	font-size: .72em;
	text-transform: uppercase;
	letter-spacing: .03em;
	opacity: .8;
}

/* Libelle et champ forment un couple : ils ne doivent pas se separer
   en fin de ligne. */
.cardgen-group label {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	white-space: nowrap;
}

.cardgen-group input[type="text"] {
	width: 3.2rem;
	padding: .15rem .3rem;
	border: 1px solid rgba(128, 128, 128, .5);
	border-radius: .2rem;
	background: transparent;
	color: inherit;
	text-align: right;
}

/* --- Retour a la ligne -------------------------------------------- */

/*
 * pre-wrap conserve les retours saisis par le membre et coupe les
 * lignes trop longues. pre les conserve aussi mais ne coupe rien : le
 * texte deborde alors de la zone, ce que overflow: hidden masque - le
 * comportement attendu quand on demande "une seule ligne".
 */
.cardgen-live.wr-wrap span.cardgen-live-text {
	white-space: pre-wrap;
}

.cardgen-live.wr-nowrap span.cardgen-live-text {
	white-space: pre;
}

/* --- Fond de zone : opacite et arrondi ---------------------------- */

/*
 * Le fond est pose par une couche en pseudo-element plutot que par
 * background-color sur la zone. Raison : opacity sur la zone rendrait
 * aussi le texte transparent. Une couche separee ne fait varier que le
 * fond, le texte gardant son opacite pleine - c'est exactement ce que
 * font les pastilles des cartes HQ, ou le texte est net sur un fond
 * laiteux.
 */
/*
 * z-index: 0 et non -1.
 *
 * Un pseudo-element en z-index negatif passe derriere le fond de ses
 * ancetres, pas seulement derriere le contenu de son parent. La couche
 * etait donc peinte sous le fond de la toile, donc invisible : le
 * reglage d'opacite ne semblait rien faire.
 *
 * A 0, elle reste sous le contenu de la zone - qui est en z-index 1 -
 * et au-dessus de la toile.
 */
.cardgen-live::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: var(--cg-bg, transparent);
	opacity: var(--cg-op, 1);
}

/* Sans fond declare, la couche ne doit rien peindre. */
.cardgen-live:not([style*="--cg-bg"])::before {
	background: none;
}

/* Le contenu passe au-dessus de la couche de fond. */
.cardgen-live > * {
	position: relative;
	z-index: 1;
}

/* --- Alignement vertical du contenu d'une zone -------------------- */

/*
 * La zone est un conteneur flex en colonne : l'axe principal est
 * vertical, l'axe transversal horizontal. D'ou justify-content pour le
 * vertical et align-items pour l'horizontal - l'inverse de l'intuition.
 *
 * align-items est indispensable pour les enfants qui ne font pas toute
 * la largeur, comme le bloc Discover. Dans un conteneur flex,
 * text-align ne les deplace pas : il n'agit qu'a l'interieur d'un
 * element, pas sur sa position. C'est ce qui empechait le bloc de se
 * centrer.
 */
.cardgen-live.va-top    { justify-content: flex-start; }
.cardgen-live.va-middle { justify-content: center; }
.cardgen-live.va-bottom { justify-content: flex-end; }

.cardgen-live.ha-left   { align-items: flex-start; }
.cardgen-live.ha-center { align-items: center; }
.cardgen-live.ha-right  { align-items: flex-end; }

/* Les enfants pleine largeur - un paragraphe - gardent leur alignement
   interne par text-align, pose en style sur la zone. align-items ne
   saurait pas aligner leurs lignes une a une. */
span.cardgen-live-text {
	width: 100%;
}

/* Une zone image n'a pas d'enfant a aligner : son contenu est un fond.
   background-position reprend donc les memes reglages. */
.cardgen-live-image.va-top    { background-position-y: top; }
.cardgen-live-image.va-middle { background-position-y: center; }
.cardgen-live-image.va-bottom { background-position-y: bottom; }

/* --- Bloc Discover Me --------------------------------------------- */

/*
 * Mention et logo forment un ensemble indissociable. Le bloc est en
 * inline-flex : il se reduit a la largeur de son contenu, et c'est le
 * text-align de la zone qui le place a gauche, au centre ou a droite.
 * Un bloc en pleine largeur laisserait le logo colle au bord alors que
 * le texte flotterait au milieu - c'etait le defaut precedent.
 */
.cardgen-discover {
	display: inline-flex;
	align-items: center;
	gap: .25em;
	white-space: nowrap;
	text-align: left;
}

.cardgen-discover[hidden] {
	display: none;
}

.cardgen-discover-text {
	display: block;
}

.cardgen-discover-text b {
	display: block;
	font-weight: bold;
}

.cardgen-discover-text i {
	display: block;
	font-size: .72em;
	font-style: normal;
}

/*
 * Le logo prend la couleur du texte. Une image de fond ne se colore
 * pas ; on l'utilise donc comme masque et c'est la couleur de fond -
 * currentColor, donc celle du texte - qui devient visible a travers.
 *
 * Le logo doit etre monochrome sur fond transparent, un PNG typiquement.
 * Un JPEG opaque donnerait un carre plein.
 */
.cardgen-discover-logo {
	flex: 0 0 auto;
	width: 1.9em;
	height: 1.9em;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Actions sous l'apercu, dans le conteneur collant : elles suivent le
   defilement plutot que d'attendre en bas de page.

   Aucune couleur ni bordure ici : les boutons portent les classes de
   phpBB et prennent l'apparence du style actif, comme ceux de Card
   Collection. On ne regle que leur disposition. */
.cardgen-stage-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
	margin-top: .7rem;
}

.cardgen-stage-actions .button {
	flex: 1 1 auto;
	text-align: center;
}

/* --- Selecteur de couleur ----------------------------------------- */

.cardgen-color {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .35rem;
}

.cardgen-color input[type="color"] {
	width: 2.4rem;
	height: 1.7rem;
	padding: 0;
	border: 1px solid rgba(128, 128, 128, .5);
	border-radius: .2rem;
	background: none;
	cursor: pointer;
}

.cardgen-color-clear {
	padding: .1rem .45rem;
	border: 1px solid rgba(128, 128, 128, .5);
	border-radius: .2rem;
	background: rgba(128, 128, 128, .12);
	color: inherit;
	font-size: .8em;
	cursor: pointer;
}

/* --- Transformation en modele ------------------------------------- */

.cardgen-keep {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.cardgen-keep label {
	display: flex;
	align-items: center;
	gap: .4rem;
}

/* --- Export ------------------------------------------------------- */

/* Conserve pour compatibilite : la barre d'export est passee sous
   l'apercu en 1.20.0. */
.cardgen-export {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-top: 1rem;
}

.cardgen-export .cardgen-btn {
	flex: 0 0 auto;
}

/* --- Bibliotheque d'images ---------------------------------------- */

.cardgen-library {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
	gap: 1rem;
}

.cardgen-asset {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.cardgen-asset img {
	width: 100%;
	height: 6.5rem;
	object-fit: contain;
	border-radius: .25rem;
	background: rgba(128, 128, 128, .14);
}

/* --- Etiquettes et actions d'une image ---------------------------- */

.cardgen-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin: .15rem 0;
}

.cardgen-tag {
	display: inline-block;
	padding: .03rem .4rem;
	border-radius: 1rem;
	background: rgba(128, 128, 128, .2);
	font-size: .75em;
}

/* Une image partagee se repere a l'etiquette pleine, dans la couleur
   d'accent. La distinction ne repose pas seulement dessus : le libelle
   "Publique" reste lisible pour qui ne percoit pas la nuance. */
.cardgen-tag-on {
	background: var(--cardgen-accent);
	color: var(--cardgen-accent-text);
}

.cardgen-tag-warn {
	background: rgba(128, 128, 128, .34);
	font-weight: bold;
}

/* Libelle inerte remplacant le bouton Supprimer quand l'image est
   utilisee. Pas un bouton grise : un bouton desactive invite quand meme
   au clic, et ne dit pas pourquoi il ne repond pas. */
.cardgen-btn-off {
	background: transparent;
	border: 1px dashed rgba(128, 128, 128, .55);
	color: inherit;
	cursor: default;
	opacity: .8;
}

.cardgen-asset .cardgen-actions {
	margin-top: .3rem;
	gap: .3rem;
}

.cardgen-asset .cardgen-btn {
	font-size: .76em;
	padding: .25rem .4rem;
}

/* --- Divers ------------------------------------------------------- */

.cardgen-empty {
	margin: 0;
	opacity: .7;
	font-style: italic;
}

.cardgen-notice {
	margin-bottom: 1rem;
	padding: .6rem .9rem;
	border-left: 3px solid var(--cardgen-accent);
	border-radius: .2rem;
	background: rgba(128, 128, 128, .14);
}

@media (max-width: 700px) {
	/* En colonne, l'apercu passe au-dessus du formulaire : le rendre
	   collant occuperait la moitie de l'ecran en permanence. */
	.cardgen-stage {
		position: static;
		width: 100%;
		max-width: 15rem;
		margin: 0 auto;
	}
}

/* aspect-ratio est inconnu des navigateurs anterieurs a 2021. Sans lui,
   vignettes et toile s'effondreraient a une hauteur nulle, leurs zones
   etant toutes en position absolue. */
@supports not (aspect-ratio: 1) {
	.cardgen-thumb  { height: 14rem; }
	.cardgen-canvas { height: 23.8rem; }
}

/* --- Repere de coupe ---------------------------------------------- */

/*
 * Les zones sont placees en pourcentage de la carte FOND PERDU COMPRIS.
 * La partie reellement conservee est en retrait de --cg-trim-x et
 * --cg-trim-y sur chaque bord.
 *
 * Sans ce repere, on place du contenu a y = 98 % en croyant le voir sur
 * la carte finie, alors qu'il tombe dans le fond perdu et part au
 * massicot. C'est ce qui faisait "manquer des bouts de carte".
 *
 * Le cadre est au-dessus des zones - z-index 3 - pour rester visible
 * quel que soit le contenu.
 */
.cardgen-trim {
	position: absolute;
	z-index: 3;
	top: var(--cg-trim-y, 3%);
	right: var(--cg-trim-x, 4%);
	bottom: var(--cg-trim-y, 3%);
	left: var(--cg-trim-x, 4%);
	border: 1px dashed rgba(220, 30, 30, .75);
	pointer-events: none;
}

/* Titre de famille dans la bibliotheque. */
.cardgen-group-head {
	margin: 1.2rem 0 .5rem;
	padding-bottom: .25rem;
	border-bottom: 1px solid rgba(128, 128, 128, .3);
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.cardgen-group-head:first-child {
	margin-top: 0;
}

.cardgen-group-head .cardgen-count {
	background: rgba(128, 128, 128, .25);
	color: inherit;
}

/* --- Le fond perdu, rendu visible --------------------------------- */

/*
 * La bande hachuree marque ce qui sera coupe. Elle est dessinee sur le
 * pourtour de la toile, en dehors du cadre rouge.
 *
 * Elle est volontairement discrete : cette extension sert a composer une
 * carte, pas a faire un cours de prepresse. Mais sans repere, on ne voit
 * pas que la toile est plus grande que la carte, et on place du contenu
 * dans une zone qui partira au massicot.
 */
.cardgen-bleed {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		repeating-linear-gradient(
			45deg,
			rgba(220, 30, 30, .10) 0,
			rgba(220, 30, 30, .10) 2px,
			transparent 2px,
			transparent 6px
		);
	/* Le centre - la carte conservee - est evide : seule la marge reste
	   hachuree. */
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	padding: var(--cg-trim-y, 3%) var(--cg-trim-x, 4%);
	box-sizing: border-box;
}