/**
 * Onglet « Mes gravures » de la page Mon compte.
 *
 * S'appuie sur les tokens du thème (base.css) avec repli, pour rester juste
 * même si la feuille du thème n'a pas encore chargé.
 */

.glassora-gravures__intro,
.glassora-dashboard-accroche {
	color: var(--muted, #5F6470);
	font-family: var(--body, 'Inter', sans-serif);
	line-height: 1.5;
}

.glassora-dashboard-accroche {
	margin-top: 1.25rem;
	padding: .9rem 1.1rem;
	background: var(--bg, #FAFAF8);
	border: 1px solid var(--line, #ECEBE7);
	border-radius: var(--r-field, 12px);
}

.glassora-dashboard-accroche a,
.glassora-gravures__intro a {
	color: var(--gold-ink, #7A6224);
	font-weight: 600;
}

/* Deux sections dans le même onglet : les modèles gardés, puis les gravures
   déjà commandées. Le titre les sépare ; la grille reste la même, parce que
   ce sont les mêmes objets vus sous deux angles. */
.glassora-gravures__section + .glassora-gravures__section {
	margin-top: 2.75rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--line, #ECEBE7);
}

.glassora-gravures__titre {
	margin: 0 0 .35rem;
	font-family: var(--head, 'Manrope', sans-serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--ink, #111827);
}

/* Un liseré or discret distingue un modèle gardé d'une gravure commandée,
   sans en faire deux composants différents. */
.glassora-gravure--modele .glassora-gravure__apercu {
	border-bottom-color: var(--champ, #E6D4A3);
}

/* Renommer : replié tant qu'on ne demande rien (c'est `<details>` qui le
   fait, pas du script). Le déclencheur se tient au rang des actions
   secondaires — le geste principal reste « Reprendre ». */
.glassora-gravure__renommage {
	margin-top: .55rem;
}

.glassora-gravure__renommage-ouvrir {
	display: inline-block;
	cursor: pointer;
	color: var(--muted, #5F6470);
	font-size: .84rem;
	text-decoration: underline;
	text-underline-offset: 2px;
	list-style: none;
}

/* Safari expose encore le triangle par ce pseudo-élément. */
.glassora-gravure__renommage-ouvrir::-webkit-details-marker {
	display: none;
}

.glassora-gravure__renommage-ouvrir:hover,
.glassora-gravure__renommage[open] .glassora-gravure__renommage-ouvrir {
	color: var(--gold-ink, #7A6224);
}

.glassora-gravure__renommage-form {
	display: flex;
	gap: .5rem;
	margin-top: .55rem;
}

.glassora-gravure__renommage-champ {
	flex: 1 1 auto;
	min-width: 0;
	padding: .45rem .6rem;
	border: 1px solid var(--line, #ECEBE7);
	border-radius: var(--r-field, 12px);
	font: inherit;
	font-size: .88rem;
	background: #fff;
}

.glassora-gravure__renommage-champ:focus {
	outline: none;
	border-color: var(--gold, #C8A96A);
	box-shadow: 0 0 0 3px rgba(200, 169, 106, .22);
}

.glassora-gravure__renommage-ok.button {
	flex: 0 0 auto;
	padding: .45rem .85rem;
	font-size: .82rem;
	border-radius: var(--r-btn, 14px);
}

.glassora-gravure__supprimer {
	color: var(--muted, #5F6470);
	font-size: .84rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.glassora-gravure__supprimer:hover,
.glassora-gravure__supprimer:focus {
	color: #9b2c2c;
}

/* La grille des gravures. */
.glassora-gravures__liste {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	/* 220px : avec des cartes devenues courtes, trois colonnes tiennent dans les
	   802px du contenu la ou deux flottaient. Une bibliotheque se lit mieux en
	   grille qu en colonne. */
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
}

.glassora-gravure {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line, #ECEBE7);
	border-radius: var(--r-card, 20px);
	overflow: hidden;
	box-shadow: var(--shadow-soft, 0 10px 30px rgba(0, 0, 0, .06));
}



/* L'APERÇU A UNE HAUTEUR FIXE, ET NON UN RAPPORT DE FORME.
   Avec `aspect-ratio: 4/3`, la vignette suivait la LARGEUR de sa carte : dans
   une colonne de 391px elle faisait 292px de haut, et la carte 521px. Huit
   modèles réclamaient alors plus de deux mille pixels de défilement pour
   montrer huit vignettes — une bibliothèque devenait un couloir.
   Une vignette sert à RECONNAÎTRE, pas à inspecter : « Reprendre » ouvre la
   pièce en grand. La hauteur est donc posée une fois pour toutes, quelle que
   soit la largeur de la carte. */
.glassora-gravure__apercu {
	display: flex;
	align-items: stretch;
	justify-content: center;
	height: 148px;
	padding: 10px;
	gap: 10px;
	background: linear-gradient(160deg, #fff 0%, var(--off, #FAFAF8) 100%);
	border-bottom: 1px solid var(--line, #ECEBE7);
}

/* Une face : la figure occupe toute la bande. Deux faces : elles la partagent
   à parts égales, séparées d'un filet — le même dessin que le bon à graver. */
.glassora-gravure__face {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.glassora-gravure__apercu--duo .glassora-gravure__face + .glassora-gravure__face {
	border-left: 1px solid var(--line, #ECEBE7);
}

.glassora-gravure__apercu img {
	display: block;
	max-width: 100%;
	min-height: 0;
	flex: 1 1 auto;
	object-fit: contain;
	/* `object-position: center` par défaut suffit : le verre est centré dans
	   son aperçu, et le marquage se trouve à mi-hauteur. */
}

.glassora-gravure__face figcaption {
	flex: 0 0 auto;
	font-family: var(--head, 'Manrope', sans-serif);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted, #5F6470);
}

.glassora-gravure__sans-apercu {
	font-size: 2rem;
	color: var(--champ, #E6D4A3);
}

.glassora-gravure__corps {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem 1.1rem 1.15rem;
	flex: 1;
}

.glassora-gravure__nom {
	margin: 0;
	font-family: var(--head, 'Manrope', sans-serif);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--ink, #111827);
}

.glassora-gravure__resume {
	margin: 0;
	color: var(--ink, #111827);
	font-size: .92rem;
	line-height: 1.45;
	/* Un résumé peut être long : on le borne à trois lignes. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.glassora-gravure__meta {
	margin: 0;
	color: var(--muted, #5F6470);
	font-size: .82rem;
}

.glassora-gravure__actions {
	margin-top: auto;
	padding-top: .35rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Le bouton primaire : recommander. */
.glassora-gravure__recommander.button {
	background: var(--gold, #C8A96A);
	border-color: var(--gold, #C8A96A);
	color: var(--navy, #111827);
	border-radius: var(--r-btn, 14px);
	font-family: var(--head, 'Manrope', sans-serif);
	font-weight: 600;
}

.glassora-gravure__recommander.button:hover,
.glassora-gravure__recommander.button:focus {
	filter: brightness(.96);
}

.glassora-gravure__voir {
	color: var(--gold-ink, #7A6224);
	font-size: .88rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.glassora-gravure__indispo {
	color: var(--muted, #5F6470);
	font-size: .84rem;
	font-style: italic;
}

/* L'état vide. */
.glassora-gravures__vide {
	color: var(--muted, #5F6470);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 46ch;
}

.glassora-gravures__cta.button {
	margin-top: 1rem;
	background: var(--gold, #C8A96A);
	border-color: var(--gold, #C8A96A);
	color: var(--navy, #111827);
	border-radius: var(--r-btn, 14px);
	font-weight: 600;
}