/* Achat public d'une carte cadeau — design importé de Claude Design
 * (projet « site web espace eleve », `Carte Cadeau - Bloc Elementor.html`).
 *
 * ⚠️ **Tout est scopé sous `.tenae-giftcard`.** Le bloc est posé dans un widget
 * « Shortcode » d'Elementor : une règle non scopée y écraserait le design de la
 * page porteuse, et un Kit Elementor écraserait la nôtre. Le préfixe est aussi
 * ce qui permet de porter les styles de boutons et de champs sans `!important`
 * partout — la spécificité `.tenae-giftcard .btn-primary` (0,2,0) passe devant
 * les règles de kit (0,1,1).
 *
 * ⚠️ **Raleway n'est PAS demandée à Google.** Elle est auto-hébergée et
 * préchargée par `tenae-header` ; la redemander annulerait ce préchargement et
 * ferait réapparaître le FOUT qu'il corrige. La pile de repli couvre le cas où
 * le header ne serait pas actif.
 */

.tenae-giftcard {
	/* Jetons repris tels quels du design. */
	--tgc-cream: #F7F3EE;
	--tgc-ink: #1C1C1A;
	--tgc-green-dark: #3B4933;
	--tgc-green: #5C6E4B;
	--tgc-sage: #7B938C;
	--tgc-sage-dark: #65786F;
	--tgc-mist: #E4EDEB;
	--tgc-grey: #8A9C95;
	--tgc-gold: #CC9C71;
	--tgc-leaf: #A9C4A0;

	background: var(--tgc-cream);
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	color: var(--tgc-ink);
	-webkit-font-smoothing: antialiased;
}

.tenae-giftcard *,
.tenae-giftcard *::before,
.tenae-giftcard *::after { box-sizing: border-box; }

.tenae-giftcard a { text-decoration: none; color: inherit; }
.tenae-giftcard button { cursor: pointer; font-family: inherit; }

.tenae-giftcard .eyebrow {
	font-family: 'Caveat', cursive;
	font-size: 22px;
	color: var(--tgc-gold);
	margin-bottom: 10px;
}

/* ── Grille ─────────────────────────────────────────────────── */

.tenae-giftcard .gc-section { padding: 88px 56px; }

.tenae-giftcard .gc-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 64px;
	align-items: start;
}

/* ── Champs ─────────────────────────────────────────────────── */

.tenae-giftcard .field-group { margin-bottom: 26px; }

.tenae-giftcard .field-group > label,
.tenae-giftcard .field-legend {
	display: block;
	font-family: 'Raleway', 'Lato', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tgc-green-dark);
	margin-bottom: 10px;
}

.tenae-giftcard .field-hint {
	font-size: 12px;
	font-weight: 300;
	color: var(--tgc-grey);
	margin-top: 6px;
	line-height: 1.6;
}

.tenae-giftcard input[type="text"],
.tenae-giftcard input[type="email"],
.tenae-giftcard input[type="number"],
.tenae-giftcard textarea {
	width: 100%;
	background: #fff;
	border: 1px solid var(--tgc-mist);
	border-radius: 0;
	padding: 14px 16px;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 14px;
	color: var(--tgc-ink);
	transition: border-color 0.2s;
}

.tenae-giftcard input:focus,
.tenae-giftcard textarea:focus {
	outline: none;
	border-color: var(--tgc-sage);
}

/* ⚠️ Un champ refusé par le navigateur doit se VOIR : sans cette règle, le
   seul signal est la bulle native, qui disparaît au premier clic ailleurs. */
.tenae-giftcard input:user-invalid,
.tenae-giftcard textarea:user-invalid { border-color: #B4541F; }

.tenae-giftcard textarea {
	resize: vertical;
	min-height: 96px;
}

.tenae-giftcard .grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* ── Montant ────────────────────────────────────────────────── */

.tenae-giftcard .amount-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.tenae-giftcard .amount-input-wrap { position: relative; max-width: 180px; }

.tenae-giftcard .amount-input-wrap input {
	padding-right: 34px;
	font-family: 'Tenor Sans', sans-serif;
	font-size: 22px;
	color: var(--tgc-gold);
}

.tenae-giftcard .amount-input-wrap::after {
	content: '€';
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'Tenor Sans', sans-serif;
	font-size: 20px;
	color: var(--tgc-gold);
	pointer-events: none;
}

.tenae-giftcard .amount-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.tenae-giftcard .amount-chip {
	background: none;
	border: 1px solid var(--tgc-mist);
	border-radius: 0;
	padding: 9px 16px;
	white-space: nowrap;
	font-family: 'Raleway', 'Lato', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--tgc-green-dark);
	transition: all 0.2s;
}

.tenae-giftcard .amount-chip:hover,
.tenae-giftcard .amount-chip.active {
	border-color: var(--tgc-gold);
	background: var(--tgc-gold);
	color: #fff;
}

/* ── Bandeau de validité, bouton, mentions ──────────────────── */

.tenae-giftcard .validity-note {
	background: var(--tgc-mist);
	padding: 14px 20px;
	font-size: 13px;
	font-weight: 300;
	color: var(--tgc-green-dark);
	line-height: 1.7;
	margin-bottom: 28px;
}

.tenae-giftcard .validity-note strong { font-weight: 600; }

.tenae-giftcard .btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	justify-content: center;
	background: var(--tgc-sage);
	color: #fff;
	border: none;
	border-radius: 0;
	font-family: 'Raleway', 'Lato', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 17px 26px;
	transition: background 0.25s ease;
}

.tenae-giftcard .btn-primary:hover { background: var(--tgc-sage-dark); }
.tenae-giftcard .btn-primary:disabled { opacity: 0.55; cursor: default; }

.tenae-giftcard .form-footnote {
	font-size: 12px;
	font-weight: 300;
	color: var(--tgc-grey);
	text-align: center;
	margin-top: 14px;
	line-height: 1.6;
}

.tenae-giftcard .form-footnote a { text-decoration: underline; }

/* Message d'état (erreur de saisie, indisponibilité du paiement). */
.tenae-giftcard .gc-msg {
	font-size: 13px;
	line-height: 1.6;
	margin: 0 0 14px;
	min-height: 1em;
	color: var(--tgc-green);
}

.tenae-giftcard .gc-msg.is-error { color: #B4541F; font-weight: 400; }
.tenae-giftcard .gc-msg:empty { margin: 0; min-height: 0; }

/* ⚠️ Honeypot : masqué à l'œil SANS `display:none`. Certains robots ignorent
   les champs non rendus, et le piège ne prendrait plus rien. */
.tenae-giftcard .gc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Carte d'aperçu ─────────────────────────────────────────── */

.tenae-giftcard .gc-preview { position: sticky; top: 24px; }

.tenae-giftcard .gc-preview-label {
	font-family: 'Raleway', 'Lato', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tgc-grey);
	margin-bottom: 16px;
}

.tenae-giftcard .gc-card {
	background: var(--tgc-sage);
	color: var(--tgc-cream);
	padding: 44px 36px;
	position: relative;
	overflow: hidden;
	border-top: 2px solid var(--tgc-leaf);
}

.tenae-giftcard .gc-card::before {
	content: '';
	position: absolute;
	top: -80px;
	right: -80px;
	width: 260px;
	height: 260px;
	border: 1.5px solid rgba( 204, 156, 113, 0.18 );
	border-radius: 50%;
}

.tenae-giftcard .gc-card-inner { position: relative; }

/* Sceau : le logo est une aquarelle CLAIRE à texte sombre — posé nu sur le
   sage il devient illisible. Le disque crème lui rend son contraste et le fait
   lire comme un cachet, ce qu'un cadeau supporte bien. */
.tenae-giftcard .gc-seal {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--tgc-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 26px;
}

.tenae-giftcard .gc-seal img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.tenae-giftcard .gc-brand {
	font-family: 'Tenor Sans', sans-serif;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 28px;
}

.tenae-giftcard .gc-amount {
	font-family: 'Tenor Sans', sans-serif;
	font-size: 56px;
	color: var(--tgc-cream);
	letter-spacing: 0.02em;
	line-height: 1;
	margin-bottom: 6px;
}

.tenae-giftcard .gc-amount-label {
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 30px;
}

.tenae-giftcard .gc-line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid rgba( 247, 243, 238, 0.12 );
	font-size: 13px;
}

.tenae-giftcard .gc-line span:first-child { color: #fff; }

.tenae-giftcard .gc-line span:last-child {
	color: var(--tgc-cream);
	font-weight: 400;
	text-align: right;
	/* ⚠️ Un nom long ne doit pas pousser la carte : elle est en colonne étroite
	   et déborderait sous la grille. */
	overflow-wrap: anywhere;
}

/* ⚠️ Le message est écrit en VERT SOMBRE SUR CRÈME, à l'inverse du reste de la
   carte. Deux tentatives ont échoué avant : l'or du design sur le sage donnait
   **1,34:1** — le mot manuscrit disparaissait dans le fond —, et le blanc sur
   un fond à peine assombri plafonnait à ~4:1, encore trop juste pour une
   cursive de 21 px. Ici on atteint ~9:1. Le message est la seule chose que
   l'acheteur a ÉCRITE : c'est ce qui doit se lire du premier coup d'œil, pas
   ce qui se devine. Le carton crème le pose comme un mot glissé dans la carte,
   ce qui sert le propos plutôt que de le contredire. */
.tenae-giftcard .gc-message {
	font-family: 'Caveat', cursive;
	font-size: 17px;
	line-height: 1.45;
	color: var(--tgc-green-dark);
	background: var(--tgc-cream);
	padding: 14px 16px;
	margin-top: 18px;
	overflow-wrap: anywhere;
}

/* Emplacement du code — une PLACE réservée, pas une valeur. Les points de
   suite disent « il y aura quelque chose ici » sans faire croire à un code
   recopiable. */
.tenae-giftcard .gc-code {
	margin-top: 22px;
	padding: 14px 16px;
	background: rgba( 247, 243, 238, 0.10 );
	border: 1px dashed rgba( 247, 243, 238, 0.32 );
	text-align: center;
}

.tenae-giftcard .gc-code-label {
	display: block;
	font-family: 'Raleway', 'Lato', sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 8px;
}

.tenae-giftcard .gc-code-value {
	display: block;
	font-family: 'Tenor Sans', sans-serif;
	font-size: 15px;
	letter-spacing: 0.12em;
	color: var(--tgc-cream);
	/* ⚠️ Le code ne se coupe JAMAIS sur deux lignes : recopié à la main depuis
	   un PDF imprimé, une coupure ferait perdre un tiret ou un groupe. */
	white-space: nowrap;
}

.tenae-giftcard .gc-code-note {
	display: block;
	font-size: 10px;
	letter-spacing: 0.04em;
	color: rgba( 247, 243, 238, 0.72 );
	margin-top: 8px;
	line-height: 1.5;
}

.tenae-giftcard .gc-validity {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid rgba( 247, 243, 238, 0.12 );
	font-size: 11px;
	letter-spacing: 0.06em;
	color: #fff;
}

/* La date d'achat, ajoutée par le JS. Vide tant qu'il n'a pas tourné : le
   séparateur vit dans le pseudo-élément pour ne pas laisser un « · » orphelin. */
.tenae-giftcard #tgc-pv-date:not( :empty )::before { content: ' · '; }

/* ── Écran de retour de paiement ────────────────────────────── */

.tenae-giftcard .gc-confirm {
	display: none;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: 88px 56px;
}

.tenae-giftcard .gc-confirm.visible { display: block; }

.tenae-giftcard .gc-confirm h2 {
	font-family: 'Tenor Sans', sans-serif;
	font-size: clamp( 26px, 3vw, 38px );
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--tgc-green-dark);
	margin-bottom: 18px;
}

.tenae-giftcard .gc-confirm p {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--tgc-green);
	margin-bottom: 12px;
}

.tenae-giftcard .gc-code-box {
	background: var(--tgc-mist);
	padding: 20px 26px;
	margin: 28px 0;
	font-size: 13px;
	color: var(--tgc-green-dark);
	line-height: 1.7;
}

.tenae-giftcard .gc-code-box strong {
	font-family: 'Tenor Sans', sans-serif;
	font-size: 15px;
	letter-spacing: 0.04em;
}

.tenae-giftcard .gc-note { font-size: 12px; color: var(--tgc-grey); }

/* ── Mobile ─────────────────────────────────────────────────── */

@media ( max-width: 900px ) {
	.tenae-giftcard .gc-section,
	.tenae-giftcard .gc-confirm { padding: 56px 24px; }

	.tenae-giftcard .gc-inner { grid-template-columns: 1fr; gap: 40px; }
	.tenae-giftcard .gc-preview { position: static; }
	.tenae-giftcard .grid-2 { grid-template-columns: 1fr; }

	/* ⚠️ L'aperçu reste APRÈS le formulaire, comme dans l'ordre du document.
	   Le remonter avant paraissait logique — « il sert pendant la saisie » —
	   mais on arrivait alors sur une carte vide (« Pour — ») haute de 500 px, on
	   la dépassait pour atteindre le premier champ, et on ne revoyait jamais le
	   résultat sans remonter. Placé après, il tombe juste au-dessus du bouton de
	   paiement : on compose, puis on voit ce qu'on offre avant de payer. */
}

@media ( prefers-reduced-motion: reduce ) {
	.tenae-giftcard * { transition: none !important; }
}