/* ==========================================================================
   Tunnel d'achat, compte client et réinitialisation de mot de passe.
   Styles PROPRES à ces pages. Les champs de formulaire (.kk-field/.kk-label/
   .kk-field-error), boutons (.kk-btn), cartes (.kk-card) et fil d'Ariane
   (.kk-crumb) viennent des composants partagés (components.css) — on ne les
   redéfinit pas ici.
   ========================================================================== */

/* --- Écran d'authentification : carte centrée (reset mdp, connexion) ------- */

.tn-auth {
	background: radial-gradient(120% 130% at 86% 0%, var(--k-hero-tint) 0%, var(--k-bg) 58%);
}

.tn-auth-wrap {
	max-width: 520px;
	margin: 0 auto;
	padding: clamp(24px, 4.5vw, 52px) clamp(16px, 4vw, 32px) clamp(40px, 6vw, 72px);
}

/* Les cartes d'authentification sont des .kk-card (components.css). Ici, juste
   la pastille d'icône (kk-icotile) espacée du titre, le style du H1 de carte,
   et l'option centrée de l'écran « terminé ». */

.tn-auth .kk-icotile { margin-bottom: 18px; }

.tn-auth h1 {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: clamp(23px, 3vw, 31px);
	letter-spacing: -0.02em;
	line-height: 1.14;
	margin: 0 0 10px;
}

.tn-lead {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--k-muted);
	margin: 0 0 22px;
}

/* Carte centrée (écran « terminé »). */
.tn-center { text-align: center; }
.tn-center .kk-icotile { margin-left: auto; margin-right: auto; }

.tn-center .tn-lead {
	max-width: 42ch;
	margin-left: auto;
	margin-right: auto;
}

/* Espacement entre groupes de champs successifs. */
.tn-fields > * + * { margin-top: 14px; }

/* Bouton pleine largeur (CTA principal des cartes d'auth). */
.tn-btn-block {
	width: 100%;
	justify-content: center;
}

/* Lien secondaire centré sous le CTA (« Revenir à la connexion »). */
.tn-auth-alt {
	text-align: center;
	margin-top: 14px;
}

/* Intertitre en capitales : composant partagé .kk-eyebrow (components.css). */

/* --- Encart d'astuces (« e-mail envoyé ») --------------------------------- */

.tn-panel {
	background: var(--k-tile);
	border: 1px solid var(--k-border);
	border-radius: 16px;
	padding: 16px 18px;
}

.tn-tip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--k-body);
}

.tn-tip + .tn-tip { margin-top: 9px; }
.tn-tip svg { flex: none; color: var(--k-orange); margin-top: 2px; }

/* --- Règles de mot de passe ----------------------------------------------- */

.tn-rules { margin-top: 16px; }

.tn-rule {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--k-body);
}

.tn-rule + .tn-rule { margin-top: 8px; }

.tn-rule-check {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--k-border-warm);
	color: var(--k-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .14s, border-color .14s, color .14s;
}

/* Règle satisfaite (bascule par la validation JS). */
.tn-rule.is-ok .tn-rule-check {
	background: var(--k-green-tint);
	border-color: var(--k-green-border);
	color: var(--k-green);
}

/* --- Champ mot de passe avec bouton afficher/masquer ---------------------- */

.tn-reveal-wrap { position: relative; }
.tn-reveal-wrap .kk-field { padding-right: 52px; }

.tn-reveal {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: transparent;
	color: var(--k-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* --- Rangée de boutons d'action (côte à côte, repliables) ----------------- */

.tn-actions {
	display: flex;
	gap: 11px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.tn-actions > * {
	flex: 1 1 170px;
	justify-content: center;
	text-align: center;
}

/* ==========================================================================
   Tableau de bord « Mon compte » (maquette Mon compte.dc.html).
   ========================================================================== */

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

.ac-hero {
	background: radial-gradient(120% 130% at 88% 0%, var(--k-hero-tint) 0%, var(--k-bg) 58%);
	border-bottom: 1px solid var(--k-border);
}

.ac-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(20px, 3vw, 30px) clamp(16px, 4vw, 40px) clamp(24px, 3.4vw, 34px);
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 20px);
	flex-wrap: wrap;
}

.ac-initials {
	flex: none;
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--k-border);
	color: var(--k-orange-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: 21px;
	letter-spacing: -0.02em;
}

.ac-hero-txt { flex: 1; min-width: 220px; }

.ac-hero-txt h1 {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: clamp(24px, 3.2vw, 34px);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 4px;
}

.ac-hero-sub { font-size: 14.5px; color: var(--k-soft); margin: 0; }

/* --- Disposition nav + contenu -------------------------------------------- */

.ac-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(22px, 3.4vw, 38px) clamp(16px, 4vw, 40px) clamp(40px, 5vw, 64px);
}

.ac-layout {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: clamp(18px, 3vw, 34px);
	align-items: start;
}

.ac-nav { position: sticky; top: 22px; display: flex; flex-direction: column; gap: 3px; }

.ac-tab {
	display: flex;
	align-items: center;
	gap: 11px;
	text-align: left;
	background: transparent;
	color: var(--k-nav);
	border-radius: 12px;
	padding: 12px 14px;
	min-height: 46px;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: 14.5px;
	cursor: pointer;
	transition: background .14s, color .14s;
}

.ac-tab span { flex: none; display: inline-flex; color: var(--k-soft); }
.ac-tab[aria-selected="true"] { background: var(--k-orange-tint); color: var(--k-orange-dark); }
.ac-tab[aria-selected="true"] span { color: var(--k-orange); }

@media (max-width: 940px) {
	.ac-layout { grid-template-columns: minmax(0, 1fr); }
	/* Onglets en pleine largeur, partagée à parts égales : pas de défilement
	   horizontal ni d'onglet coupé au bord (« Informations & adresses »). */
	.ac-nav { position: static; flex-direction: row; gap: 8px; }
	.ac-nav .ac-tab { flex: 1 1 0; justify-content: center; min-width: 0; text-align: center; }
}

/* Onglets très étroits : on autorise le retour à la ligne du libellé. */
@media (max-width: 520px) {
	.ac-nav .ac-tab { font-size: 13.5px; padding: 10px 10px; }
}

/* --- Panneaux : ce sont des .kk-card (components.css) ---------------------- */

/* Pile de cartes de l'onglet « Informations & adresses ». */
.ac-stack { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 20px); }

/* En-tête de la carte « commandes » (carte en --card-padding:0). */
.ac-phead { padding: clamp(18px, 2.6vw, 26px) clamp(18px, 2.6vw, 26px) 16px; }

.ac-ptitle {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.01em;
	margin: 0;
}

/* --- Tableau des commandes ------------------------------------------------- */

.ac-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ac-orders { min-width: 620px; }

.ac-orow {
	display: grid;
	grid-template-columns: minmax(150px, 1.4fr) 120px minmax(150px, 1fr) minmax(150px, 1fr);
	align-items: center;
}

.ac-orow--head {
	background: var(--k-blue);
	color: #fff;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: 12.5px;
}

.ac-orow--head > div { padding: 13px 20px; }
.ac-orow + .ac-orow { border-top: 1px solid var(--k-border); }
.ac-orow > div { padding: 16px 20px; }

.ac-ocell-strong { font-family: var(--k-font-title); font-weight: 800; font-size: 15px; }
.ac-ocell-sub { font-size: 13px; color: var(--k-soft); margin-top: 2px; }

/* Le statut de commande est un .kk-badge + variante de couleur (components.css). */

.ac-docs { display: flex; gap: 14px; flex-wrap: wrap; }

/* Statut : le badge, et sous lui (commande à payer) un bouton « Payer » compact,
   dimensionné à son contenu (pas un bloc pleine largeur). */
.ac-status { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.ac-paybtn { --btn-size: 13px; --btn-radius: 10px; --btn-padding: 8px 15px; }

.ac-doclink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: 13px;
	color: var(--k-orange-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.ac-doclink--muted { color: var(--k-nav); }
.ac-empty { padding: clamp(18px, 2.6vw, 26px); color: var(--k-soft); font-size: 14.5px; }

/* Commandes en CARTES EMPILÉES sur mobile : la table étroite devient une liste
   de blocs, chaque cellule préfixée de son libellé de colonne (data-label). */
@media (max-width: 640px) {
	.ac-scroll { overflow-x: visible; }
	.ac-orders { min-width: 0; }

	.ac-orow {
		display: block;
		padding: 6px 0 12px;
	}

	/* Double classe : spécificité supérieure à .ac-orow ci-dessus, sinon le
	   display:block de .ac-orow (règle plus bas) réafficherait l'en-tête. */
	.ac-orow.ac-orow--head { display: none; }

	.ac-orow > div { padding: 8px clamp(18px, 5vw, 26px); }

	/* Première cellule = en-tête de la carte (n° + date), sans libellé. */
	.ac-orow > div:first-child { padding-top: 14px; }

	/* Cellules à libellé (montant, statut, documents) : libellé à gauche,
	   valeur à droite. */
	.ac-orow > div[data-label] {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.ac-orow > div[data-label]::before {
		content: attr(data-label);
		flex: none;
		font-family: var(--k-font-title);
		font-weight: 700;
		font-size: 11.5px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--k-faint);
	}
}

/* --- Informations ---------------------------------------------------------- */

.ac-head-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.ac-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px clamp(18px, 3vw, 34px);
}

.ac-info-item { padding-bottom: 12px; border-bottom: 1px solid var(--k-border); }

.ac-info-k {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--k-faint);
	margin-bottom: 4px;
}

.ac-info-v { font-size: 15px; font-weight: 600; color: var(--k-charcoal); }

.ac-pw-row {
	display: flex;
	align-items: center;
	gap: 11px;
	background: var(--k-tile);
	border: 1px solid var(--k-border);
	border-radius: 14px;
	padding: 13px 16px;
	margin-top: 18px;
	flex-wrap: wrap;
}

.ac-pw-row .ac-pw-ico { flex: none; display: inline-flex; color: var(--k-soft); }
.ac-pw-row .ac-pw-txt { flex: 1; min-width: 170px; font-size: 13.5px; color: var(--k-muted); }

/* --- Carnet d'adresses ----------------------------------------------------- */

.ac-addr-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(14px, 2vw, 20px);
}

@media (max-width: 760px) {
	.ac-info-grid,
	.ac-addr-grid { grid-template-columns: minmax(0, 1fr); }
}

.ac-addr {
	background: var(--k-tile);
	border: 1px solid var(--k-border);
	border-radius: 18px;
	padding: 17px 19px;
}

.ac-addr-name { font-family: var(--k-font-title); font-weight: 800; font-size: 15.5px; margin-bottom: 8px; }
.ac-addr p { font-size: 14px; line-height: 1.6; color: var(--k-muted); margin: 0; }

/* --- Création de compte : sélecteur Particulier / Professionnel ------------ */

.tn-seg {
	display: inline-flex;
	gap: 4px;
	background: var(--k-tile);
	border: 1px solid var(--k-border);
	border-radius: 12px;
	padding: 4px;
	margin-bottom: 20px;
}

.tn-seg label { cursor: pointer; display: block; }
.tn-seg input { position: absolute; opacity: 0; pointer-events: none; }

.tn-seg span {
	display: block;
	min-height: 40px;
	padding: 9px 18px;
	border-radius: 9px;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: 14px;
	color: var(--k-nav);
	transition: background .14s, color .14s, box-shadow .14s;
}

.tn-seg input:checked + span { background: #fff; color: var(--k-orange-dark); box-shadow: 0 2px 6px -2px rgba(20, 32, 54, 0.2); }
.tn-seg input:focus-visible + span { outline: 2px solid var(--k-orange); outline-offset: 2px; }

/* Champs réservés aux professionnels : masqués sauf si « Professionnel » coché. */
.signup-pro { display: none; }
form:has(input[name="type_compte"][value="pro"]:checked) .signup-pro { display: block; }

/* Tuile « Ajouter une adresse » (carnet d'adresses). */
.ac-addr-add {
	background: #fff;
	border: 2px dashed var(--k-border-warm);
	border-radius: 18px;
	padding: 17px 19px;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 120px;
	text-decoration: none;
	color: inherit;
	transition: border-color .14s;
}

.ac-addr-add:hover { border-color: var(--k-orange); }

/* Icône « ajouter une adresse » : composant kk-icotile paramétré (cf. tn-radiocard-ico). */
.ac-addr-add-ico { --tile-size: 34px; --tile-radius: 10px; --tile-bg: var(--k-orange-tint); --tile-color: var(--k-orange-dark); }

/* ==========================================================================
   Tunnel d'achat — coquille + panier (maquette Tunnel achat.dc.html).
   ========================================================================== */

.tn-ckbody { background: var(--k-bg); }

/* En-tête minimal « sécurisé » du tunnel (pas la nav du site). */
.tn-ckhead { background: #fff; border-bottom: 1px solid var(--k-border); }

.tn-ckhead-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 12px clamp(14px, 4vw, 32px);
	display: flex;
	align-items: center;
	gap: 14px;
}

.tn-ckhead-logo { display: inline-flex; align-items: center; }
.tn-ckhead-logo img { height: 26px; width: auto; }

.tn-ckhead-secure {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: 12.5px;
	color: var(--k-green-ink);
}

/* Fil d'étapes numéroté (1 Panier — 2 Livraison — 3 Paiement). */
.tn-cksteps { background: #fff; border-bottom: 1px solid var(--k-border); }

.tn-cksteps-inner {
	max-width: 600px;
	margin: 0 auto;
	padding: 14px clamp(14px, 4vw, 32px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tn-ckstep { display: flex; align-items: center; gap: 9px; min-width: 0; }

.tn-ckstep-mark {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: 12.5px;
	border: 2px solid var(--k-border-warm);
	background: #fff;
	color: var(--k-faint);
	transition: background .18s, border-color .18s, color .18s;
}

.tn-ckstep-label {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: 14px;
	color: var(--k-faint);
	white-space: nowrap;
}

.tn-ckstep--current .tn-ckstep-mark { background: var(--k-orange); border-color: var(--k-orange); color: #fff; }
.tn-ckstep--current .tn-ckstep-label { color: var(--k-charcoal); }
.tn-ckstep--done .tn-ckstep-mark { background: var(--k-orange-tint); border-color: var(--k-orange-tint); color: var(--k-orange-dark); }
.tn-ckstep--done .tn-ckstep-label { color: var(--k-nav); }

.tn-ckstep-line {
	flex: none;
	width: clamp(18px, 5vw, 46px);
	height: 2px;
	margin: 0 6px;
	border-radius: 2px;
	background: var(--k-border-warm);
}

.tn-ckstep-line.is-on { background: var(--k-orange); }

/* iPhone SE & co. : les 4 libellés + traits débordent. On garde la barre de
   progression (pastilles coche/numéro + traits) et on n'affiche QUE le libellé
   de l'étape COURANTE ; les étapes passées/à venir restent des pastilles. Sur la
   page de confirmation (tout est « done », pas de « current »), il ne reste que
   les pastilles cochées — compact et lisible. */
@media (max-width: 430px) {
	.tn-cksteps-inner { padding: 12px 10px; }
	.tn-ckstep-mark { width: 26px; height: 26px; font-size: 12px; }
	.tn-ckstep { gap: 7px; }
	.tn-ckstep-label { font-size: 12.5px; }
	.tn-ckstep-line { width: clamp(10px, 4vw, 20px); margin: 0 5px; }
	.tn-ckstep--done .tn-ckstep-label,
	.tn-ckstep--todo .tn-ckstep-label { display: none; }
}

/* Grille du tunnel : contenu + panneau de commande (350px). */
.tn-grid {
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 40px) clamp(14px, 4vw, 32px) clamp(36px, 5vw, 64px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: clamp(18px, 3vw, 32px);
	align-items: start;
}

.tn-ckmain { min-width: 0; }

/* Étape panier : COLONNE UNIQUE (780px), le récap prolonge la carte des articles. */
/* Étape panier : colonne unique centrée (780px). Deux cartes distinctes ESPACÉES,
   mais dont les coins qui se font face sont CARRÉS (coins extérieurs arrondis).
   Le panier vide occupe la même largeur. */
.tn-grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 780px; gap: clamp(14px, 2vw, 18px); }
.tn-grid--solo .tn-cartcard { border-radius: 24px 24px 0 0; }
.tn-grid--solo .tn-aside { position: static; }
.tn-grid--solo .tn-aside-card { border-radius: 0 0 24px 24px; }

@media (max-width: 900px) {
	.tn-grid { grid-template-columns: minmax(0, 1fr); }
	.tn-aside { position: static; order: 2; }
}

/* Carte des articles (haut de la carte unifiée en solo). */
/* Carte des articles = composant .kk-card (components.css) ré-paramétré. Les
   coins CARRÉS côté jointure sont posés par la règle .tn-grid--solo plus haut. */
.tn-cartcard {
	--card-radius: 24px;
	--card-padding: clamp(14px, 2vw, 20px);
	--card-shadow: 0 18px 40px -32px rgba(40, 30, 15, 0.5);
}

/* Panneau de commande (récap + total + action). */
.tn-aside { position: sticky; top: 20px; }

/* Panneau de commande = composant .kk-card (components.css) ré-paramétré. */
.tn-aside-card {
	--card-radius: 22px;
	--card-padding: clamp(22px, 2.4vw, 28px);
	--card-shadow: 0 18px 38px -30px rgba(40, 30, 15, 0.5);
}

.tn-aside-title {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: 16.5px;
	letter-spacing: -0.01em;
	margin: 0 0 20px;
}

.tn-cart-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: clamp(14px, 2vw, 20px);
}

.tn-cart-h1 {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: clamp(23px, 3vw, 31px);
	letter-spacing: -0.02em;
	margin: 0;
}

.tn-cart-count { font-size: 14px; font-weight: 600; color: var(--k-soft); }

/* --- Panier vide --- */
/* Panier vide = composant .kk-empty (components.css), juste ré-paramétré. */
.tn-cart-empty {
	--empty-radius: 22px;
	--empty-padding: clamp(26px, 4vw, 44px) 20px;
}

.tn-cart-empty .kk-icotile { margin: 0 auto 14px; }
.tn-cart-empty-t { font-family: var(--k-font-title); font-weight: 800; font-size: 19px; margin: 0 0 6px; }
.tn-cart-empty-p { font-size: 14.5px; line-height: 1.6; color: var(--k-soft); margin: 0 0 20px; }

/* --- Liste d'articles --- */
.tn-cart-list {
	background: var(--k-tile);
	border-radius: 18px;
	padding: clamp(10px, 1.4vw, 14px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tn-cart-item {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	gap: clamp(14px, 2vw, 20px);
	align-items: center;
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: 15px;
	padding: clamp(12px, 1.6vw, 15px);
}

.tn-cart-thumb {
	position: relative;
	width: var(--thumb, 84px);
	height: var(--thumb, 84px);
	border-radius: 12px;
	background: var(--k-tile);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.tn-cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
/* Icône de secours (produit sans photo) : SVG en block pour un centrage
   vertical parfait dans la vignette (l'inline laisse un décalage baseline). */
.tn-cart-thumb svg { display: block; }

/* Petite vignette du récapitulatif de commande : la pastille de quantité
   (.hd-badge) déborde le coin, donc overflow visible. */
.tn-thumb-sm { --thumb: 44px; border-radius: 11px; overflow: visible; }
.tn-thumb-sm img { border-radius: 11px; }
.tn-cart-mid { min-width: 0; }
.tn-cart-name { font-family: var(--k-font-title); font-weight: 800; font-size: clamp(16px, 2vw, 19px); letter-spacing: -0.01em; line-height: 1.2; }

/* Contrôle de quantité. */
.tn-qty {
	display: inline-flex;
	align-items: center;
	margin-top: 11px;
	background: var(--k-tile);
	border: 1px solid var(--k-border);
	border-radius: 999px;
	padding: 3px;
}

.tn-qty form { display: inline-flex; }

.tn-qty-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	color: var(--k-nav);
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
}

.tn-qty-n { min-width: 36px; text-align: center; font-family: var(--k-font-title); font-weight: 800; font-size: 15px; }

.tn-cart-end { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.tn-cart-line { font-family: var(--k-font-title); font-weight: 800; font-size: clamp(18px, 2.2vw, 22px); letter-spacing: -0.02em; white-space: nowrap; }

.tn-cart-remove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 10px;
	background: transparent;
	border: none;
	color: var(--k-faint);
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}

.tn-cart-remove:hover { color: var(--k-red-ink); }
/* Lien « Continuer mes achats » : inline-flex (sinon le margin-top n'a aucun
   effet sur un <a> inline) + taille maquette (14px). */
.tn-cart-continue { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 0 4px; font-size: 14px; }

@media (max-width: 460px) {
	.tn-cart-item { grid-template-columns: 64px minmax(0, 1fr); }
	.tn-cart-end { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
	.tn-cart-thumb { width: 64px; height: 64px; }
}

/* --- Panneau de commande : récapitulatif produits. --- */
.tn-order-recap {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--k-border);
}

.tn-order-recap-item { display: flex; align-items: center; gap: 13px; }
.tn-order-rname { flex: 1; min-width: 0; font-family: var(--k-font-title); font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.tn-order-rline { font-family: var(--k-font-title); font-weight: 700; font-size: 13.5px; white-space: nowrap; }

/* Sélecteur de pays de livraison (maquette) : composant custom (bouton +
   popup listbox), pas un <select> natif. JS : tunnel.js. */
.tn-cselect { position: relative; margin-top: 9px; }

.tn-cselect-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 56px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: 14px;
	font-family: var(--k-font-title);
	cursor: pointer;
	transition: border-color .14s, box-shadow .14s;
}

.tn-cselect-btn[aria-expanded="true"] { border-color: var(--k-orange); box-shadow: 0 0 0 3px var(--k-orange-glow); }

.tn-cselect-cur { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Pastille pin = composant .kk-icotile (components.css) ré-paramétré. */
.tn-cselect-pin {
	--tile-size: 28px;
	--tile-radius: 9px;
	--tile-bg: var(--k-orange-tint);
	--tile-color: var(--k-orange-dark);
}

.tn-cselect-name { font-weight: 800; font-size: 16px; color: var(--k-nav); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-cselect-chev { flex: none; color: var(--k-orange-dark); display: inline-flex; transition: transform .18s; }
.tn-cselect-btn[aria-expanded="true"] .tn-cselect-chev { transform: rotate(180deg); }

.tn-cselect-pop {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	max-height: 320px;
	overflow-y: auto;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: 16px;
	box-shadow: 0 24px 48px -20px rgba(20, 32, 54, 0.35);
}

.tn-cselect-opt {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	background: transparent;
	border: none;
	border-radius: 10px;
	text-align: left;
	font-family: var(--k-font-title);
	font-size: 14.5px;
	color: var(--k-nav);
	cursor: pointer;
}

.tn-cselect-opt:hover { background: var(--k-tile); }
.tn-cselect-opt.is-sel { background: var(--k-orange-tint); }
.tn-cselect-check { flex: none; width: 18px; color: var(--k-orange); display: inline-flex; opacity: 0; }
.tn-cselect-opt.is-sel .tn-cselect-check { opacity: 1; }
.tn-cselect-optname { flex: 1; min-width: 0; }
.tn-cselect-opt.is-sel .tn-cselect-optname { font-weight: 700; }

.tn-order-lines { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--k-border); display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.tn-order-line small { display: block; font-size: 12px; color: var(--k-faint); font-weight: 400; }

.tn-order-line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14.5px;
	color: var(--k-muted);
}

.tn-order-line span:last-child { font-weight: 700; color: var(--k-charcoal); white-space: nowrap; }

.tn-order-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--k-border);
	font-family: var(--k-font-title);
}

.tn-order-total > span:first-child { font-weight: 800; font-size: 15.5px; }
.tn-order-total > span:last-child { font-weight: 800; font-size: clamp(24px, 2.6vw, 28px); letter-spacing: -0.03em; color: var(--k-charcoal); white-space: nowrap; }
.tn-order-total small { font-size: 11.5px; font-weight: 600; color: var(--k-faint); }

/* Encart DOM-TOM : prix affichés HT (parité legacy). */
.tn-domtom {
	margin: 14px 0 0;
	padding: 13px 15px;
	border-radius: 14px;
	background: var(--k-orange-tint);
	color: var(--k-body);
	font-size: 13px;
	line-height: 1.55;
}

.tn-domtom strong { font-weight: 800; }

/* Badges de paiement : composant du footer réutilisé (.ft-pay, footer.css),
   centré sous le panneau (le footer les aligne à gauche). */
.tn-aside .ft-pay { margin-top: 13px; justify-content: center; }

/* ==========================================================================
   Étape « Compte » du tunnel : tuiles connexion / création / invité.
   ========================================================================== */

.tn-ac-sub { font-size: 14.5px; line-height: 1.6; color: var(--k-soft); margin: 6px 0 clamp(14px, 2vw, 20px); }

.tn-authtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: clamp(14px, 2vw, 18px); }

.tn-authtile {
	text-align: left;
	background: #fff;
	border: 2px solid var(--k-border);
	border-radius: 16px;
	padding: 14px 16px;
	cursor: pointer;
	transition: background .14s, border-color .14s;
}

.tn-authtile:hover { border-color: var(--k-border-warm); }
.tn-authtile.is-active { background: var(--k-orange-tint); border-color: var(--k-orange); }

.tn-authtile-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.tn-authtile-ico { --tile-size: 26px; --tile-radius: 8px; --tile-bg: var(--k-tile); --tile-color: var(--k-soft); }
.tn-authtile.is-active .tn-authtile-ico { --tile-bg: #fff; --tile-color: var(--k-orange-dark); }
.tn-authtile-t { font-family: var(--k-font-title); font-weight: 700; font-size: 14.5px; }
.tn-authtile-d { display: block; font-size: 12.5px; line-height: 1.45; color: var(--k-soft); }

/* Panneau du formulaire = kk-card ré-paramétré. */
.tn-authpanel { --card-radius: 22px; --card-padding: clamp(18px, 2.4vw, 28px); --card-shadow: 0 18px 40px -32px rgba(40, 30, 15, 0.5); }

/* Chaque mode est un <fieldset> : reset visuel (le style vient des champs). */
.tn-authpane { border: none; margin: 0; padding: 0; min-width: 0; }

/* Variante verte de l'encart .tn-panel (note du mode invité). */
.tn-panel--ok { background: var(--k-green-tint); border-color: var(--k-green-border); }

@media (max-width: 560px) {
	/* Étape Compte : ONGLETS horizontaux compacts (on garde les 3 colonnes)
	   plutôt que des tuiles empilées l'une sous l'autre. Icône au-dessus du
	   titre, centré ; la description est masquée (le détail vit dans le panneau
	   du mode sélectionné). */
	.tn-authtiles { gap: 7px; }
	.tn-authtile { padding: 11px 6px; text-align: center; border-radius: 13px; }
	.tn-authtile-head { flex-direction: column; gap: 6px; margin-bottom: 0; }
	.tn-authtile-ico { --tile-size: 24px; }
	.tn-authtile-t { font-size: 12px; line-height: 1.2; }
	.tn-authtile-d { display: none; }
}

/* Disposition de l'étape Compte : le captcha vit dans le panneau (au-dessus du
   CTA) ; « Retour » est une 3e cellule — sous le formulaire en desktop, tout en
   bas en mobile (plus de captcha/bouton « au milieu » sans contexte). */
.tn-grid--account .tn-ckmain { grid-column: 1; grid-row: 1; }
.tn-grid--account .tn-aside { grid-column: 2; grid-row: 1 / span 2; }
.tn-grid--account .tn-account-back { grid-column: 1; grid-row: 2; margin-top: 4px; }

@media (max-width: 900px) {
	.tn-grid--account .tn-ckmain,
	.tn-grid--account .tn-aside,
	.tn-grid--account .tn-account-back { grid-column: auto; grid-row: auto; }
	.tn-grid--account .tn-ckmain { order: 1; }
	.tn-grid--account .tn-aside { order: 2; }
	.tn-grid--account .tn-account-back { order: 3; margin-top: 8px; }
}

/* Lien « Mot de passe oublié ? » sous le champ mot de passe : discret, aligné à
   gauche et souligné (le composant .kk-inline-link est sans soulignement). */
.tn-forgot { font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Étape « Livraison » : cartes d'adresse, cartes-radio transporteur, CGV.
   ========================================================================== */

.tn-dl-card { margin-bottom: clamp(14px, 2vw, 18px); }
.tn-dl-h2 { font-family: var(--k-font-title); font-weight: 800; font-size: clamp(18px, 2.4vw, 22px); letter-spacing: -0.01em; margin: 0 0 18px; }
/* Titre H1 de la carte facturation : espace avant les champs (le sous-titre a
   été retiré, sinon le titre colle au formulaire). */
.tn-dl-card > .tn-cart-h1 { margin-bottom: 18px; }

.tn-radiogroup { display: flex; flex-direction: column; gap: 10px; }

.tn-radiocard {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: #fff;
	border: 2px solid var(--k-border);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color .14s, background .14s;
}

.tn-radiocard input { position: absolute; opacity: 0; pointer-events: none; }
.tn-radiocard:hover { border-color: var(--k-border-warm); }
.tn-radiocard.is-active,
.tn-radiocard:has(input:checked) { border-color: var(--k-orange); background: var(--k-orange-tint); }

.tn-radiocard-dot {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--k-border-warm);
	background: #fff;
	position: relative;
	transition: border-color .14s;
}

.tn-radiocard.is-active .tn-radiocard-dot,
.tn-radiocard:has(input:checked) .tn-radiocard-dot { border-color: var(--k-orange); }
.tn-radiocard.is-active .tn-radiocard-dot::after,
.tn-radiocard:has(input:checked) .tn-radiocard-dot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--k-orange);
}

.tn-radiocard-ico { --tile-size: 34px; --tile-radius: 10px; --tile-bg: var(--k-tile); --tile-color: var(--k-nav); }
.tn-radiocard.is-active .tn-radiocard-ico,
.tn-radiocard:has(input:checked) .tn-radiocard-ico { --tile-bg: #fff; --tile-color: var(--k-orange-dark); }

.tn-radiocard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tn-radiocard-t { font-family: var(--k-font-title); font-weight: 700; font-size: 15px; }
.tn-radiocard-sub { font-size: 12.5px; color: var(--k-soft); }
.tn-radiocard-price { flex: none; font-family: var(--k-font-title); font-weight: 800; font-size: 14.5px; white-space: nowrap; }
.tn-radiocard-price.is-free { color: var(--k-green); }

.tn-dl-shipform { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--k-border); }

/* Pays de livraison en lecture seule (dérivé du panier à cette étape). */
.tn-country-ro {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 7px;
	padding: 12px 14px;
	border: 1px solid var(--k-border);
	border-radius: 14px;
	background: var(--k-tile);
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: 16px;
	color: var(--k-nav);
}

/* Case CGV. */
.tn-cgv { position: relative; display: flex; align-items: flex-start; gap: 11px; margin-top: 4px; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--k-body); }
.tn-cgv input { position: absolute; opacity: 0; pointer-events: none; }

.tn-cgv-box {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	border: 1.5px solid var(--k-border-warm);
	background: #fff;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .14s, border-color .14s;
}

.tn-cgv input:checked + .tn-cgv-box { background: var(--k-orange); border-color: var(--k-orange); }
.tn-cgv input:focus-visible + .tn-cgv-box { box-shadow: 0 0 0 3px var(--k-orange-glow); }
.tn-cgv-txt a { color: var(--k-orange-dark); text-decoration: underline; }

/* Éléments du récap masqués dynamiquement au recalcul des modes ([hidden] doit
   l'emporter sur leur display explicite). */
.tn-order-line[hidden], .tn-order-total[hidden], .tn-btn-block[hidden], .tn-dl-noship[hidden] { display: none; }

/* ==========================================================================
   Point relais : bloc dans la carte « Mode de livraison » + modale de choix.
   ========================================================================== */

.tn-relay { margin-top: 16px; }
.tn-relay-chosen { display: flex; align-items: flex-start; gap: 12px; }
.tn-relay-chosen-ico { flex: none; color: var(--k-green); display: inline-flex; margin-top: 1px; }
.tn-relay-chosen-txt { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.5; font-weight: 600; color: var(--k-green-ink); }
.tn-relay-change { flex: none; font-size: 12.5px; }
.tn-relay-cta { width: 100%; justify-content: center; }
/* Ces éléments ont un display explicite : forcer le masquage par [hidden]. */
.tn-relay-chosen[hidden], .tn-relay-cta[hidden] { display: none; }

.tn-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 28px); background: rgba(30, 37, 48, 0.55); backdrop-filter: blur(2px); }
.tn-modal[hidden] { display: none; }

.tn-modal-card { width: 100%; max-width: 580px; max-height: min(88vh, 760px); display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(20, 32, 54, 0.6); }

.tn-modal-head { display: flex; align-items: center; gap: 12px; padding: clamp(16px, 2.4vw, 22px) clamp(16px, 2.4vw, 24px); border-bottom: 1px solid var(--k-border); }
.tn-modal-ico { --tile-size: 36px; --tile-radius: 11px; --tile-bg: var(--k-orange-tint); --tile-color: var(--k-orange-dark); }
.tn-modal-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tn-modal-title { font-family: var(--k-font-title); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.tn-modal-sub { font-size: 12.5px; color: var(--k-soft); margin-top: 1px; }
.tn-modal-close { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--k-tile); color: var(--k-nav); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; }

.tn-modal-search { padding: clamp(12px, 2vw, 16px) clamp(16px, 2.4vw, 24px); border-bottom: 1px solid var(--k-border); background: var(--k-tile); }
.tn-modal-search-row { display: flex; gap: 9px; margin-top: 7px; }
.tn-modal-search-row .kk-field { flex: 1; min-width: 0; }
.tn-modal-search-row .kk-btn { flex: none; }

.tn-modal-body { overflow-y: auto; padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 24px); }
.tn-modal-foot { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding: clamp(14px, 2vw, 18px) clamp(16px, 2.4vw, 24px); border-top: 1px solid var(--k-border); }

.tn-relaymap { width: 100%; height: 220px; border-radius: 14px; overflow: hidden; margin-bottom: 14px; background: var(--k-tile); }
.tn-relaymap[hidden] { display: none; }

.tn-relaylist { display: flex; flex-direction: column; gap: 10px; }
.tn-relay-note { font-size: 12.5px; line-height: 1.55; color: var(--k-soft); margin: 14px 2px 0; }
.tn-relay-msg { font-size: 14px; color: var(--k-soft); text-align: center; padding: 20px 0; margin: 0; }

.tn-relaycard { position: relative; display: flex; align-items: flex-start; gap: 13px; text-align: left; width: 100%; padding: 14px 16px; background: #fff; border: 2px solid var(--k-border); border-radius: 16px; cursor: pointer; transition: border-color .14s, background .14s; }
.tn-relaycard:hover { border-color: var(--k-border-warm); }
.tn-relaycard.is-active { border-color: var(--k-orange); background: var(--k-orange-tint); }

.tn-relaycard-dot { flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--k-border-warm); background: #fff; position: relative; }
.tn-relaycard.is-active .tn-relaycard-dot { border-color: var(--k-orange); }
.tn-relaycard.is-active .tn-relaycard-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--k-orange); }

.tn-relaycard-body { flex: 1; min-width: 0; }
.tn-relaycard-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.tn-relaycard-name { font-family: var(--k-font-title); font-weight: 800; font-size: 15px; }
.tn-relaycard-dist { font-family: var(--k-font-title); font-weight: 700; font-size: 12.5px; color: var(--k-orange-dark); }
.tn-relaycard-addr { display: block; font-size: 13.5px; line-height: 1.5; color: var(--k-muted); margin-top: 2px; }
.tn-relaycard-hours { display: block; font-size: 12.5px; font-weight: 600; color: var(--k-soft); margin-top: 6px; }

@media (max-width: 900px) { .tn-modal-card { max-height: 92vh; } }

/* ============================================================================
   Retour de paiement — écrans Confirmation (succès) et Refus.
   Maquette « Tunnel achat ». Réutilise kk-card / kk-btns / kk-btn / icon() +
   tokens --k-* ; ces classes ne portent QUE la mise en page propre à ces deux
   écrans (pastille 72px, en-tête récap 3 colonnes, ligne produit + badge qté,
   causes, encart « et maintenant » bleu).
   ========================================================================== */
.tn-conf { max-width: 720px; margin: 0 auto; }
.tn-conf--narrow { max-width: 640px; }

.tn-conf-top { text-align: center; margin-bottom: 24px; }
.tn-conf-ico {
	width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--k-tile); border: 1px solid var(--k-border); color: var(--k-soft);
}
.tn-conf-ico--ok   { background: var(--k-green-tint); border: 1px solid var(--k-green-border); color: var(--k-green); }
.tn-conf-ico--fail { background: var(--k-red-tint);   border: 1px solid #F2C4BC;               color: var(--k-red); }
.tn-conf-h1 {
	font-family: var(--k-font-title); font-weight: 800;
	font-size: clamp(24px, 3.5vw, 38px); letter-spacing: -0.02em;
	line-height: 1.08; margin: 0 0 10px;
}
.tn-conf-lead { font-size: 16px; line-height: 1.65; color: var(--k-muted); margin: 0 auto; max-width: 46ch; }
.tn-conf-lead strong { color: var(--k-charcoal); }

/* En-tête récap succès : 3 colonnes (N° commande / livraison / total payé). */
.tn-conf-head {
	display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between;
	padding-bottom: 18px; border-bottom: 1px solid var(--k-border);
}
.tn-conf-cl { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--k-faint); margin-bottom: 4px; }
.tn-conf-cv { font-family: var(--k-font-title); font-weight: 800; font-size: 18px; }
.tn-conf-cv--sm { font-weight: 700; font-size: 15px; }
.tn-conf-csub { font-size: 12.5px; color: var(--k-soft); }

/* Lignes produits : vignette 48px + badge quantité. */
.tn-conf-lines { display: flex; flex-direction: column; gap: 13px; padding: 18px 0; }
.tn-conf-line { display: flex; align-items: center; gap: 12px; }
.tn-conf-thumb {
	position: relative; flex: none; width: 48px; height: 48px; border-radius: 10px;
	background: var(--k-tile); border: 1px solid var(--k-border);
	display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--k-soft);
}
.tn-conf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tn-conf-lines-t { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--k-faint); margin: 0; }
.tn-conf-lbody { flex: 1; min-width: 0; }
.tn-conf-lname { font-family: var(--k-font-title); font-weight: 700; font-size: 14px; }
.tn-conf-lqty { font-size: 13px; color: var(--k-soft); margin-top: 2px; }

/* Rangée de boutons (les deux CTA s'étirent à parts égales, comme la maquette). */
.tn-conf-foot { padding-top: 18px; border-top: 1px solid var(--k-border); }
.tn-conf-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tn-conf-actions > .kk-btn { flex: 1 1 180px; }

/* Refus : montant à régler + causes fréquentes. */
.tn-conf-amount {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding-bottom: 16px; border-bottom: 1px solid var(--k-border);
}
.tn-conf-amount-l { font-family: var(--k-font-title); font-weight: 700; font-size: 15px; }
.tn-conf-amount-v { font-family: var(--k-font-title); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.tn-conf-causes-t {
	font-family: var(--k-font-title); font-weight: 800; font-size: 12px; letter-spacing: 0.07em;
	text-transform: uppercase; color: var(--k-soft); margin: 18px 0 10px;
}
.tn-conf-causes { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 9px; }
.tn-conf-causes li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--k-body); }
.tn-conf-causes li > span { flex: none; color: var(--k-orange); display: inline-flex; margin-top: 2px; }

/* Encart « Et maintenant ? » : même dégradé bleu que kk-band-dark, mais en carte. */
.tn-next { background: var(--k-gradient-dark); border-radius: 22px; margin-top: 16px; padding: clamp(20px, 3vw, 26px); }
.tn-next-t { font-family: var(--k-font-title); font-weight: 800; font-size: 16px; color: #fff; margin: 0 0 14px; }
.tn-next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.tn-next-item { display: flex; gap: 11px; align-items: flex-start; }
.tn-next-item > span { flex: none; color: var(--k-orange-glow); display: inline-flex; margin-top: 1px; }
.tn-next-it { font-family: var(--k-font-title); font-weight: 700; font-size: 13.5px; color: #fff; margin: 0 0 3px; }
.tn-next-id { font-size: 12.5px; color: rgba(255, 255, 255, 0.82); line-height: 1.5; margin: 0; }

/* ============================================================================
   Étape Paiement — tuiles de MOYEN de paiement. Réutilisent le chrome
   .tn-authtile (bordure, radius, état is-active orange) ; contenu propre
   (nom + tag), en flex-wrap pour s'adapter au nombre de moyens du pays (2 à 4).
   Le corps du moyen (.pay-body = .tn-authpane) bascule via le switching commun.
   ========================================================================== */
.pay-tiles { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.pay-tile {
	flex: 1 1 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	min-height: 60px;
	padding: 12px 10px;
}
.pay-tile-name { font-family: var(--k-font-title); font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.pay-tile-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--k-faint); }
.pay-tile.is-active .pay-tile-tag { color: var(--k-orange-dark); }
.pay-body { margin-top: 4px; }
.pay-body .tn-panel p { margin: 0; }
.pay-body .tn-panel p + p { margin-top: 9px; }
.pay-secure { margin-top: 12px; font-size: 12.5px; color: var(--k-soft); }
.pay-fee { margin-top: 12px; font-size: 13px; color: var(--k-nav); }
/* Total à régler (frais PayPal inclus) : mis en avant au-dessus du bouton. */
.pp-total-pay,
.pay-total-pay {
	margin: 16px 0 0;
	text-align: center;
	font-size: 23px;
	font-weight: 800;
	color: var(--k-orange-dark);
}
/* Chèque / virement : le rappel du montant précède l'encart d'instructions. */
.pay-total-pay { margin-bottom: 16px; }
/* Boutons PayPal (SDK v6) pleine largeur, comme le CTA « Payer ». */
.pp-btn { margin-top: 16px; }
.pp-btn paypal-button,
.pp-btn paypal-pay-later-button { display: block; width: 100%; min-height: 45px; }
.pp-btn paypal-pay-later-button { margin-top: 10px; }

/* Mobile : les moyens de paiement en ONGLETS (une seule ligne), pas empilés.
   Largeur partagée à parts égales, tag masqué, nom sur 1-2 lignes. */
@media (max-width: 560px) {
	.pay-tiles { flex-wrap: nowrap; gap: 6px; }
	.pay-tile { flex: 1 1 0; min-width: 0; padding: 10px 4px; min-height: 52px; }
	.pay-tile-name { font-size: 12px; }
	.pay-tile-tag { display: none; }
}