/**
 * Habillage de la page de liste.
 *
 * Volontairement minimal : la feuille de style de l'extension d'origine
 * (`tsgr-public`) est chargée avant celle-ci et fournit déjà les cartes, les
 * badges et les boutons. On ne redéfinit que ce qui est nouveau — le partage,
 * le mur de code, l'état chiffré des articles — pour que l'ensemble reste
 * cohérent si le client retouche son thème.
 */

.tzwl-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
}

/* --- En-tête ------------------------------------------------------------ */

.tzwl-entete {
	text-align: center;
	margin-bottom: 2rem;
}

.tzwl-proprietaire,
.tzwl-date {
	margin: 0.25rem 0;
	opacity: 0.75;
}

.tzwl-avancement {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	font-weight: 600;
}

/* --- La page du destinataire -------------------------------------------- *
 *
 * Ce qui suit ne décore pas : il répond au constat mesuré. Le titre de la
 * liste commençait à 571 px du haut, soit les deux tiers d'un écran de
 * téléphone — l'invité voyait une boutique, pas une liste de cadeaux. La cause
 * (une requête prise pour l'accueil) est traitée en PHP ; ce qui suit donne à
 * la page ce que le titre seul ne donnait pas : de quel évènement il s'agit,
 * et quoi faire.
 */

/* ⚠️ LA HAUTEUR EST ICI, ET PAS AILLEURS.
 *
 * Je l'avais d'abord bornée dans un correctif servi aux seules personnes
 * CONNECTÉES. Le destinataire d'une liste ne l'est pas : il recevait donc la
 * couverture en pleine page, et mes mesures — faites connecté — la voyaient
 * bornée. Le correctif marchait pour tout le monde sauf pour celui à qui il
 * était destiné.
 *
 * La borne est explicite en plus du rapport de forme : l'habillage du thème
 * impose `height: auto` aux images, ce qui lève un `aspect-ratio` sans bruit. */
/*
 * ⚠️ TZ-131 — C'EST L'IMAGE QUI DONNE SA HAUTEUR AU CADRE, PLUS L'INVERSE.
 *
 * Mesuré en visiteur anonyme, avant correction : cadre en ratio 2,29
 * (`aspect-ratio: 16/7`) contre un fichier `wedding.png` en 1200×600, soit
 * 2,00. Avec `object-fit: cover`, environ **13 % de la hauteur de l'image
 * était coupée**, aux deux largeurs. Elle n'était pas déformée : elle était
 * rognée, et personne ne pouvait voir ce qui manquait.
 *
 * Arbitrage de la cliente : rien ne doit être coupé.
 *
 * ⚠️ ON NE FIGE PAS LE RATIO À 2/1 POUR AUTANT. Ce serait accorder le cadre à
 * la SEULE couverture mesurée ; la première livrée dans un autre format se
 * ferait recouper, et le défaut renaîtrait sans que rien n'ait changé ici. On
 * retire la contrainte, et le fichier impose la sienne, quel qu'il soit.
 *
 * `max-height` disparaît aussi, et ce n'est pas un oubli : avec `width: 100%`
 * et `height: auto`, un plafond de hauteur ne rogne pas — il ÉCRASE. On
 * remplacerait un recadrage par une déformation.
 *
 * La note ci-dessus disait que le thème impose `height: auto` aux images et
 * lève ainsi tout `aspect-ratio` : c'est précisément ce comportement qu'on
 * épouse maintenant, au lieu de lutter contre lui.
 */
/*
 * ⚠️ ET LA PREMIÈRE VERSION DE CE CORRECTIF A CASSÉ RCV-01.
 *
 * En retirant toute contrainte, la couverture est passée de 503×220 à
 * **1068×534** sur bureau : elle prenait la largeur entière de son conteneur.
 * Rien n'était plus coupé — et la règle RCV-01 de la spécification, « la liste
 * (couverture, titre, propriétaire, date) commence dans le premier écran »,
 * tombait. Mesuré : à 1280×720 les QUATRE éléments passaient sous la ligne de
 * flottaison, à 1440×800 le titre, le propriétaire et la date.
 *
 * C'est le troisième défaut de ce projet créé par la correction du précédent.
 *
 * Le plafond porte donc sur la HAUTEUR, et c'est la largeur qui suit :
 * `width: auto` + `max-width: 100%` + `max-height` laisse le navigateur
 * conserver le rapport de forme intrinsèque du fichier. Rien n'est coupé
 * (ce que la cliente a demandé), rien n'est écrasé, et le bloc tient.
 *
 * Un `max-height` sur une image en `width: 100%` aurait, lui, ÉCRASÉ l'image :
 * on aurait remplacé un recadrage par une déformation.
 */
.tzwl-couverture {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	margin: 0 auto 1.25rem;
	width: fit-content;
	max-width: 100%;
	background: linear-gradient(135deg, #f7a072 0%, #c44e08 100%);
}

.tzwl-couverture img {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 42vh;
	display: block;
	margin: 0 auto;
}

/*
 * Le repli : pas d'image, mais jamais une zone morte de hauteur nulle.
 *
 * Sans image, plus rien ne donne de hauteur au cadre depuis que c'est le
 * fichier qui la décide. Il en faut donc une ici, sans quoi le bloc serait
 * haut de zéro — un aplat invisible.
 */
.tzwl-couverture--sans-image {
	aspect-ratio: 16 / 5;
	max-height: 220px;
}

/*
 * « Créez la vôtre » (TZ-131) — en bas de page, discret mais lisible.
 *
 * Le fond est celui de la marque, et le texte blanc dessus : c'est le même
 * couple que la cliente a tranché comme voulu ailleurs sur le site. On ne
 * rouvre pas ce sujet ici.
 */
.tzwl-appel-creation {
	margin: 2.5rem 0 1rem;
	padding: 1.5rem;
	border-radius: 16px;
	text-align: center;
	background: linear-gradient(135deg, #f7a072 0%, #c44e08 100%);
	color: #fff;
}

.tzwl-appel-creation h2 {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	color: #fff;
}

.tzwl-appel-creation p {
	margin: 0 auto 1rem;
	max-width: 46ch;
	font-size: 0.95rem;
}

/* La cible tactile atteint 44 px : c'est un bouton qu'on veut voir appuyé. */
.tzwl-appel-creation .tzwl-creer-la-mienne {
	display: inline-block;
	min-height: 44px;
	padding: 0.7rem 1.6rem;
	line-height: 1.6;
}

.tzwl-surtitre {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #c44e08;
}

.tzwl-entete h1 {
	margin: 0 0 0.35rem;
	line-height: 1.15;
	text-wrap: balance;
}

.tzwl-date {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	opacity: 1;
}

.tzwl-date-jour {
	font-weight: 600;
}

.tzwl-date-reste {
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background: rgba(196, 78, 8, 0.12);
	color: #8f3a06;
	font-size: 0.85rem;
	font-weight: 600;
}

/* Le mode d'emploi n'est montré qu'à l'invité : le propriétaire, lui, sait
   déjà ce qu'est sa liste. */
/* ⚠️ `max-width` seul ne suffisait pas : 32 rem valent 512 px, soit plus que
   l'écran d'un téléphone, et la phrase débordait des deux côtés — le client l'a
   photographiée amputée de sa première lettre. On borne aussi par la largeur
   disponible, et l'on n'autorise aucun débordement. */
.tzwl-mode-emploi {
	max-width: min(32rem, 100%);
	margin: 0.9rem auto 0;
	padding: 0 0.25rem;
	font-size: 0.92rem;
	line-height: 1.45;
	opacity: 0.75;
	overflow-wrap: break-word;
}

.tzwl-articles-distincts {
	font-weight: 400;
	opacity: 0.75;
}

/* La page elle-même ne doit jamais défiler latéralement. */
.tzwl-page {
	overflow-x: hidden;
}

/* --- Partage ------------------------------------------------------------ */

.tzwl-partage {
	margin: 0 0 2.5rem;
	padding: 1.25rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 12px;
}

.tzwl-partage h2 {
	margin-top: 0;
	font-size: 1.1rem;
}

.tzwl-lien {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.tzwl-lien input {
	flex: 1 1 18rem;
	min-width: 0; /* sans quoi un lien long déborde de son conteneur */
	padding: 0.5rem 0.7rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9rem;
}

.tzwl-messageries {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
}

.tzwl-messageries a {
	display: inline-block;
	padding: 0.35rem 0.8rem;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.9rem;
}

.tzwl-avertissement {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	opacity: 0.8;
}

.tzwl-code code {
	font-size: 1.1rem;
	letter-spacing: 0.12em;
	padding: 0.15rem 0.4rem;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 4px;
}

.tzwl-revoquer small {
	display: block;
	margin-top: 0.35rem;
	opacity: 0.7;
}

/* --- Mur de code -------------------------------------------------------- */

.tzwl-mur {
	max-width: 26rem;
	margin: 3rem auto;
	text-align: center;
}

.tzwl-formulaire-code {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

.tzwl-formulaire-code input {
	padding: 0.6rem 0.8rem;
	font-size: 1.15rem;
	text-align: center;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.tzwl-erreur {
	color: #b32d2e;
	font-weight: 600;
}

/* --- Articles ----------------------------------------------------------- */

.tzwl-articles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem;
}

.tzwl-articles h2 {
	grid-column: 1 / -1;
	font-size: 1.05rem;
	margin: 1.5rem 0 0.25rem;
}

.tzwl-etat {
	margin: 0.4rem 0;
	font-weight: 600;
}

.tzwl-retenu {
	font-weight: 400;
	opacity: 0.7;
}

/* Les cadeaux déjà offerts restent lisibles mais cessent d'attirer l'œil :
   les masquer ferait croire que la liste a été vidée. */
.tzwl-carte--offerte {
	opacity: 0.6;
}

.tzwl-note-proprietaire {
	font-size: 0.85rem;
	opacity: 0.7;
}

/* Le vide n'est plus une phrase grisée mais une issue : le texte reste
   discret, le bouton non — sans quoi le destinataire arrive sur un cul-de-sac
   à 70 % d'opacité, bouton compris. */
.tzwl-vide {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
	margin: 3rem 0;
}

.tzwl-vide p {
	margin: 0;
	opacity: 0.7;
}

/* --- Bloc de partage sur l écran de gestion ----------------------------- */

.tzwl-gestion-partage {
	margin: 2rem 0;
	padding: 1.25rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 12px;
}

.tzwl-gestion-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tzwl-gestion-liste li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/*
 * L'adresse et son bouton de copie forment un couple (TZ-130) : ils doivent
 * rester sur la même ligne, et c'est le CHAMP qui absorbe la place restante.
 * Le bouton ne rétrécit pas — un « Copy link » coupé en deux serait pire que
 * pas de bouton.
 */
.tzwl-gestion-lien-ligne {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: 1 1 20rem;
	min-width: 0;
}

.tzwl-gestion-lien {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.35rem 0.5rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85rem;
}

.tzwl-gestion-lien-ligne .tzwl-copier {
	flex: 0 0 auto;
	white-space: nowrap;
}

.tzwl-confidentialite {
	font-size: 0.8rem;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
}