/* -------------------------------------------------------------------------
   Leyonto TV — styles spécifiques aux modèles de pages
   Chargé après style.css
   ------------------------------------------------------------------------- */

/* --- Page En direct ------------------------------------------------------ */
.lt-live { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) { .lt-live { grid-template-columns: 1.55fr 1fr; align-items: start; } }

.lt-live__statut {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.4rem 0.9rem; border-radius: 999px; font-size: var(--lt-t-xs);
	font-weight: 600; letter-spacing: 0.06em; margin-bottom: 1rem;
}
.lt-live__statut--on { background: var(--lt-rouge); color: #fff; }
.lt-live__statut--off { background: var(--lt-nuit-3); color: var(--lt-or-clair); }

.lt-live__panneau {
	background: var(--lt-nuit-2); border: 1px solid rgba(201, 162, 39, 0.22);
	border-radius: var(--lt-r-md); padding: 1.35rem; color: rgba(250, 246, 239, 0.8);
}
.lt-live__panneau h3 { color: var(--lt-sable); font-size: var(--lt-t-lg); }
.lt-live__prog { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.lt-live__prog li {
	display: grid; grid-template-columns: 82px 1fr; gap: 0.85rem; align-items: baseline;
	padding-bottom: 0.9rem; border-bottom: 1px solid rgba(250, 246, 239, 0.1);
	font-size: var(--lt-t-sm);
}
.lt-live__prog li:last-child { border-bottom: 0; padding-bottom: 0; }
.lt-live__prog time { font-family: var(--lt-display); color: var(--lt-or-clair); font-size: 1.05rem; }
.lt-live__prog strong { display: block; color: var(--lt-sable); font-weight: 600; }
.lt-live__prog span { color: rgba(250, 246, 239, 0.6); font-size: var(--lt-t-xs); }

/* --- Vidéo seule --------------------------------------------------------- */
.lt-video-single { display: grid; gap: 2rem; }
@media (min-width: 1000px) { .lt-video-single { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.lt-video-meta {
	display: flex; flex-wrap: wrap; gap: 0.55rem 1.15rem; align-items: center;
	font-size: var(--lt-t-sm); color: var(--lt-texte-doux); margin-bottom: 1.25rem;
}
.lt-etiquette {
	display: inline-flex; align-items: center; padding: 0.22rem 0.65rem;
	border-radius: 999px; font-size: var(--lt-t-xs); font-weight: 600;
	background: var(--lt-sable-2); color: var(--lt-encre); text-decoration: none;
}
.lt-etiquette:hover { background: var(--lt-or); color: var(--lt-nuit); }
.lt-etiquette--or { background: var(--lt-or); color: var(--lt-nuit); }
.lt-etiquette--rouge { background: var(--lt-rouge); color: #fff; }

.lt-partage { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 2rem; }
.lt-partage a, .lt-partage button {
	width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
	border: 1px solid var(--lt-trait); color: var(--lt-texte); background: transparent; cursor: pointer;
}
.lt-partage a:hover, .lt-partage button:hover { border-color: var(--lt-or); color: var(--lt-rouge); }
.lt-partage svg { width: 18px; height: 18px; fill: currentColor; }

/* --- Bande de chiffres --------------------------------------------------- */
.lt-chiffres {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem;
	text-align: center;
}
@media (min-width: 800px) { .lt-chiffres { grid-template-columns: repeat(4, 1fr); } }
.lt-chiffres div strong {
	display: block; font-family: var(--lt-display); font-size: clamp(2rem, 5vw, 2.9rem);
	color: var(--lt-or); line-height: 1;
}
.lt-chiffres div span { font-size: var(--lt-t-sm); color: rgba(250, 246, 239, 0.7); }

/* --- Témoignages --------------------------------------------------------- */
.lt-temoignage {
	background: var(--lt-blanc); border: 1px solid var(--lt-trait); border-radius: var(--lt-r-md);
	padding: 1.5rem 1.35rem; display: flex; flex-direction: column; gap: 0.9rem;
}
.lt-temoignage p { font-family: var(--lt-display); font-size: var(--lt-t-lg); line-height: 1.5; margin: 0; }
.lt-temoignage footer { font-size: var(--lt-t-xs); color: var(--lt-texte-doux); margin-top: auto; }
.lt-temoignage::before {
	content: ""; width: 22px; height: 22px; background: var(--lt-or);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

/* --- Bloc infolettre / communauté --------------------------------------- */
.lt-communaute { position: relative; overflow: hidden; }
.lt-communaute__grille { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .lt-communaute__grille { grid-template-columns: 1fr 1fr; } }
.lt-newsletter { display: grid; gap: 0.75rem; }
@media (min-width: 560px) { .lt-newsletter { grid-template-columns: 1fr auto; align-items: start; } }
.lt-newsletter input { min-height: 52px; }

/* --- Contact ------------------------------------------------------------- */
.lt-contact-grille { display: grid; gap: 2.25rem; }
@media (min-width: 900px) { .lt-contact-grille { grid-template-columns: 1fr 1.25fr; align-items: start; } }
.lt-coord { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.lt-coord li { display: grid; gap: 0.2rem; }
.lt-coord strong { font-size: var(--lt-t-sm); }
.lt-coord a { font-family: var(--lt-display); font-size: var(--lt-t-lg); text-decoration: none; }
.lt-coord span { font-size: var(--lt-t-xs); color: var(--lt-texte-doux); }

/* --- 404 & recherche ----------------------------------------------------- */
.lt-404 { text-align: center; padding-block: clamp(3rem, 10vw, 6rem); }
.lt-404 .lt-khatim { width: 42px; height: 42px; margin-inline: auto; }
.lt-404 h1 { font-size: var(--lt-t-3xl); }

.lt-recherche { display: flex; gap: 0.5rem; max-width: 460px; }
.lt-recherche input {
	flex: 1; min-height: 52px; padding: 0.8rem 1rem; border: 1px solid var(--lt-trait);
	border-radius: var(--lt-r-sm); font-family: var(--lt-ui); font-size: var(--lt-t-base);
}
.lt-recherche button { min-height: 52px; }

/* --- Plan du site -------------------------------------------------------- */
.lt-plan { display: grid; gap: 2rem; }
@media (min-width: 700px) { .lt-plan { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lt-plan { grid-template-columns: repeat(3, 1fr); } }
.lt-plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.lt-plan h2 { font-size: var(--lt-t-lg); padding-bottom: 0.6rem; border-bottom: 2px solid var(--lt-trait-or); }

/* --- Article ------------------------------------------------------------- */
.lt-article-tete { max-width: 68ch; }
.lt-article-tete .lt-video-meta { margin-bottom: 0; }
.lt-article__une { margin-block: 2rem; border-radius: var(--lt-r-md); overflow: hidden; }
.lt-article__une img { width: 100%; }

.lt-connexes { border-top: 1px solid var(--lt-trait); margin-top: 3.5rem; padding-top: 2.5rem; }

/* --- Bloc discret pour les rappels de confidentialité ------------------- */
.lt-confidentiel {
	display: flex; gap: 0.75rem; align-items: flex-start;
	background: rgba(201, 162, 39, 0.1); border: 1px dashed var(--lt-trait-or);
	border-radius: var(--lt-r-sm); padding: 0.95rem 1.1rem; font-size: var(--lt-t-sm);
	color: var(--lt-texte-doux);
}
.lt-confidentiel svg { flex: 0 0 auto; width: 20px; height: 20px; fill: var(--lt-or); margin-top: 2px; }
.lt-section--nuit .lt-confidentiel { color: rgba(250, 246, 239, 0.75); }

/* --- Animation d'entrée unique (héros seulement) ------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.lt-hero__inner > * { animation: lt-monte 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
	.lt-hero__inner > *:nth-child(2) { animation-delay: 140ms; }
	@keyframes lt-monte {
		from { opacity: 0; transform: translateY(16px); }
		to { opacity: 1; transform: none; }
	}
}

/* ------------------------------------------------------------------
 * 12. Lecteur natif (vidéos auto-hébergées, phase 2)
 * ---------------------------------------------------------------- */
html body.lt-body .lt-video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--lt-r-md);
	box-shadow: var(--lt-ombre);
}

/* Créateur : bandeau d'identification sous la vidéo */
html body.lt-body .lt-createur {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
	padding: 0.85rem 1rem;
	background: var(--lt-sable-2);
	border-radius: var(--lt-r-sm);
}

html body.lt-body .lt-createur img {
	border-radius: 50%;
	flex: 0 0 auto;
}

html body.lt-body .lt-createur strong {
	display: block;
	font-size: var(--lt-t-sm);
}

html body.lt-body .lt-createur span {
	font-size: var(--lt-t-xs);
	color: var(--lt-texte-doux);
}

/* ------------------------------------------------------------------
 * 13. Fil YouTube et direct TikTok
 * ---------------------------------------------------------------- */
html body.lt-body .lt-carte--yt .lt-carte__corps { padding: 1rem 1.05rem 1.15rem; }

html body.lt-body .lt-carte--yt .lt-carte__titre {
	font-size: var(--lt-t-base);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

html body.lt-body .lt-live-tiktok {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	text-align: center;
	padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
	background: var(--lt-nuit);
	color: var(--lt-sable);
	border: 1px solid rgba(201, 162, 39, 0.28);
	border-radius: var(--lt-r-md);
}

html body.lt-body .lt-live-tiktok h2 { color: var(--lt-or-clair); margin: 0.5rem 0 0; }
html body.lt-body .lt-live-tiktok p { color: rgba(250, 246, 239, 0.82); max-width: 42ch; }
html body.lt-body .lt-live-tiktok svg { width: 34px; height: 34px; fill: var(--lt-rouge-clair); }
html body.lt-body .lt-live-tiktok .lt-btn { width: auto; margin-top: 0.6rem; }

/* Pied de page : boutons d'action de la colonne contact */
html body.lt-body .lt-footer__actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 1.35rem;
	max-width: 15rem;
}

html body.lt-body .lt-footer__actions .lt-btn {
	min-height: 44px;
	padding: 0.55rem 1.05rem;
	gap: 0.45rem;
	text-decoration: none;
}

html body.lt-body .lt-footer__actions .lt-btn svg { width: 17px; height: 17px; fill: currentColor; }
html body.lt-body .lt-footer__actions .lt-btn--contour { color: var(--lt-or); }
html body.lt-body .lt-footer__actions .lt-btn--contour:hover { color: var(--lt-nuit); }
html body.lt-body .lt-footer__actions .lt-btn--or { color: var(--lt-nuit); }

/* ------------------------------------------------------------------
 * 14. Illustrations dessinées (aucune photographie de personne)
 * ---------------------------------------------------------------- */
html body.lt-body .lt-illu {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lt-r-md);
}

html body.lt-body .lt-arc .lt-illu { border-radius: inherit; }

html body.lt-body .lt-illu--fond {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	z-index: -2;
}

/* ------------------------------------------------------------------
 * 15. Versets
 * ---------------------------------------------------------------- */
html body.lt-body .lt-verset {
	margin: 2rem 0;
	padding: 1.6rem 1.5rem;
	border-inline-start: 3px solid var(--lt-or);
	background: var(--lt-sable-2);
	border-radius: 0 var(--lt-r-md) var(--lt-r-md) 0;
}

html body.lt-body .lt-verset__ar {
	font-family: var(--lt-display);
	font-size: clamp(1.25rem, 3.4vw, 1.7rem);
	line-height: 2.1;
	color: var(--lt-or-sombre, #8a6f1a);
	margin: 0 0 0.9rem;
	max-width: none;
}

html body.lt-body .lt-verset__fr {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--lt-display);
	font-size: var(--lt-t-lg);
	line-height: 1.6;
	font-style: italic;
}

html body.lt-body .lt-verset__fr p { margin: 0; }

html body.lt-body .lt-verset__ref {
	margin-top: 0.75rem;
	font-size: var(--lt-t-xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--lt-texte-doux);
}

html body.lt-body .lt-verset--nuit {
	background: rgba(201, 162, 39, 0.08);
	border-inline-start-color: var(--lt-or);
	color: var(--lt-sable);
}

html body.lt-body .lt-verset--nuit .lt-verset__ar { color: var(--lt-or-clair); }
html body.lt-body .lt-verset--nuit .lt-verset__ref { color: rgba(250, 246, 239, 0.68); }

html body.lt-body .lt-verset-bandeau { background: var(--lt-nuit); }
html body.lt-body .lt-verset-bandeau .lt-verset { margin: 0; text-align: center; border-inline-start: 0; border-block: 1px solid rgba(201, 162, 39, 0.3); border-radius: 0; }

/* ------------------------------------------------------------------
 * 16. Consultation : canaux, voies, montants
 * ---------------------------------------------------------------- */
html body.lt-body .lt-canaux {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	html body.lt-body .lt-canaux { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
	html body.lt-body .lt-canaux { grid-template-columns: repeat(3, 1fr); }
}

html body.lt-body .lt-canal {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	padding: 1.1rem 1.15rem;
	background: var(--lt-blanc);
	color: var(--lt-encre);
	border: 1px solid var(--lt-trait);
	border-radius: var(--lt-r-md);
}

html body.lt-body .lt-canal svg { width: 22px; height: 22px; fill: var(--lt-rouge); flex: 0 0 auto; margin-top: 2px; }
html body.lt-body .lt-canal strong { display: block; font-size: var(--lt-t-base); }
html body.lt-body .lt-canal span { font-size: var(--lt-t-sm); color: var(--lt-texte-doux); }

html body.lt-body .lt-voie {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.7rem 1.5rem;
	background: var(--lt-blanc);
	color: var(--lt-encre);
	border: 1px solid var(--lt-trait);
	border-radius: var(--lt-r-lg);
}

html body.lt-body .lt-voie--prio {
	border-color: var(--lt-or);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}

html body.lt-body .lt-voie__etiquette {
	align-self: flex-start;
	font-size: var(--lt-t-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--lt-rouge);
	color: var(--lt-blanc);
}

html body.lt-body .lt-voie__etiquette--calme { background: var(--lt-sable-2); color: var(--lt-texte-doux); }
html body.lt-body .lt-voie h3 { margin: 0.2rem 0 0; }
html body.lt-body .lt-voie ul { list-style: none; margin: 0.4rem 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
html body.lt-body .lt-voie li { position: relative; padding-inline-start: 1.4rem; font-size: var(--lt-t-sm); }
html body.lt-body .lt-voie li::before { content: "✦"; position: absolute; inset-inline-start: 0; color: var(--lt-or); }
html body.lt-body .lt-voie .lt-btn { margin-top: auto; }

html body.lt-body .lt-radio em { display: block; font-style: normal; font-size: var(--lt-t-xs); color: var(--lt-texte-doux); }

/* ------------------------------------------------------------------
 * 17. Assistant en ligne
 * ---------------------------------------------------------------- */
html body.lt-body .lt-chat {
	max-width: 52rem;
	margin-inline: auto;
	background: var(--lt-nuit-2);
	border: 1px solid rgba(201, 162, 39, 0.28);
	border-radius: var(--lt-r-lg);
	overflow: hidden;
}

html body.lt-body .lt-chat__avis {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 1rem 1.2rem;
	background: rgba(163, 22, 33, 0.16);
	border-bottom: 1px solid rgba(201, 162, 39, 0.22);
}

html body.lt-body .lt-chat__avis svg { width: 18px; height: 18px; fill: var(--lt-or-clair); flex: 0 0 auto; margin-top: 3px; }
html body.lt-body .lt-chat__avis p { margin: 0; font-size: var(--lt-t-sm); color: rgba(250, 246, 239, 0.9); max-width: none; }

html body.lt-body .lt-chat__fil {
	display: grid;
	gap: 0.9rem;
	padding: 1.4rem 1.2rem;
	max-height: 26rem;
	overflow-y: auto;
}

html body.lt-body .lt-bulle {
	padding: 0.9rem 1.1rem;
	border-radius: var(--lt-r-md);
	font-size: var(--lt-t-sm);
	line-height: 1.6;
	max-width: 90%;
}

html body.lt-body .lt-bulle p { margin: 0 0 0.6em; max-width: none; }
html body.lt-body .lt-bulle p:last-child { margin-bottom: 0; }

html body.lt-body .lt-bulle--assistant {
	background: rgba(250, 246, 239, 0.07);
	border: 1px solid rgba(201, 162, 39, 0.2);
	color: var(--lt-sable);
	justify-self: start;
}

html body.lt-body .lt-bulle--visiteur {
	background: var(--lt-or);
	color: var(--lt-nuit);
	justify-self: end;
}

html body.lt-body .lt-bulle--attente { opacity: 0.7; font-style: italic; }

html body.lt-body .lt-chat__form {
	display: flex;
	gap: 0.6rem;
	align-items: flex-end;
	padding: 1rem 1.2rem;
	border-top: 1px solid rgba(201, 162, 39, 0.22);
}

html body.lt-body .lt-chat__form textarea {
	flex: 1;
	resize: vertical;
	min-height: 46px;
	padding: 0.7rem 0.9rem;
	border-radius: var(--lt-r-sm);
	border: 1px solid rgba(201, 162, 39, 0.35);
	background: rgba(20, 16, 13, 0.6);
	color: var(--lt-sable);
	font: inherit;
	font-size: var(--lt-t-sm);
}

html body.lt-body .lt-chat__form textarea::placeholder { color: rgba(250, 246, 239, 0.45); }
html body.lt-body .lt-chat__form .lt-btn { flex: 0 0 auto; }
html body.lt-body .lt-chat__note { padding: 0 1.2rem 1.2rem; margin: 0; font-size: var(--lt-t-xs); color: rgba(250, 246, 239, 0.6); }

html body.lt-body .lt-rdv {
	display: inline-block;
	font-family: var(--lt-display);
	font-size: var(--lt-t-xl);
	color: var(--lt-rouge);
	border-bottom: 2px solid var(--lt-or);
	padding-bottom: 0.2rem;
	margin-bottom: 1rem;
}

html body.lt-body .lt-adresse-libre {
	display: flex;
	gap: 0.7rem;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	font-family: var(--lt-display);
	font-size: clamp(1.05rem, 3.4vw, 1.5rem);
	word-break: break-all;
}

html body.lt-body .lt-adresse-libre svg { width: 22px; height: 22px; fill: var(--lt-rouge); flex: 0 0 auto; }

/* ------------------------------------------------------------------
 * 18. Réseaux sociaux et partenaires
 * ---------------------------------------------------------------- */
html body.lt-body .lt-reseaux {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) { html body.lt-body .lt-reseaux { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { html body.lt-body .lt-reseaux { grid-template-columns: repeat(4, 1fr); } }

html body.lt-body .lt-reseau {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.15rem 1.2rem;
	background: var(--lt-blanc);
	color: var(--lt-encre);
	border: 1px solid var(--lt-trait);
	border-radius: var(--lt-r-md);
	text-decoration: none;
	transition: transform var(--lt-transition), border-color var(--lt-transition);
}

html body.lt-body .lt-reseau:hover { transform: translateY(-2px); border-color: var(--lt-or); }

html body.lt-body .lt-reseau__icone {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--lt-nuit);
	flex: 0 0 auto;
}

html body.lt-body .lt-reseau__icone svg { width: 20px; height: 20px; fill: var(--lt-or-clair); }
html body.lt-body .lt-reseau__nom { font-weight: 600; }
html body.lt-body .lt-reseau__action { margin-inline-start: auto; font-size: var(--lt-t-xs); color: var(--lt-rouge); font-weight: 600; }

html body.lt-body .lt-reseau--youtube:hover .lt-reseau__icone { background: #a31621; }
html body.lt-body .lt-reseau--whatsapp:hover .lt-reseau__icone { background: #1c6b45; }

html body.lt-body .lt-partenaires {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
}

@media (min-width: 720px) { html body.lt-body .lt-partenaires { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { html body.lt-body .lt-partenaires { grid-template-columns: repeat(4, 1fr); } }

html body.lt-body .lt-partenaire {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-align: center;
	padding: 1.4rem 1rem;
	background: var(--lt-blanc);
	color: var(--lt-encre);
	border: 1px solid var(--lt-trait);
	border-radius: var(--lt-r-md);
	text-decoration: none;
	min-height: 130px;
}

html body.lt-body a.lt-partenaire:hover { border-color: var(--lt-or); }
html body.lt-body .lt-partenaire img { max-width: 150px; max-height: 62px; width: auto; height: auto; object-fit: contain; }
html body.lt-body .lt-partenaire__nom { font-family: var(--lt-display); font-size: var(--lt-t-lg); }
html body.lt-body .lt-partenaire__mot { font-size: var(--lt-t-xs); color: var(--lt-texte-doux); }

/* ------------------------------------------------------------------
 * 19. Productions et bandeau d'accueil
 * ---------------------------------------------------------------- */
html body.lt-body .lt-production { display: grid; gap: 1.5rem; }

@media (min-width: 900px) {
	html body.lt-body .lt-production { grid-template-columns: 1.5fr 1fr; align-items: center; gap: 2.5rem; }
}

html body.lt-body .lt-production__texte h3 { color: var(--lt-sable); margin: 0.6rem 0 0.5rem; }
html body.lt-body .lt-production__texte p { color: rgba(250, 246, 239, 0.82); }

html body.lt-body .lt-hero__lecteur {
	border-radius: var(--lt-r-lg);
	overflow: hidden;
	border: 1px solid rgba(201, 162, 39, 0.3);
	box-shadow: var(--lt-ombre-forte);
}

html body.lt-body .lt-hero__lecteur .lt-vignette { border-radius: 0; }

/* Icônes sociales du pied de page : en ligne, pas en colonne. */
html body.lt-body .lt-footer ul.lt-socials {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* ------------------------------------------------------------------
 * 20. Contrôles de formulaire — on reprend la main sur Astra
 * Astra applique ses propres couleurs aux boutons et ses propres
 * dimensions aux cases à cocher. Sans cette section, les montants
 * s'affichent en blanc sur blanc et les puces deviennent énormes.
 * ---------------------------------------------------------------- */
html body.lt-body .lt-montant,
html body.lt-body .lt-palier {
	color: var(--lt-encre);
	background: var(--lt-blanc);
	font-family: var(--lt-ui);
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}

html body.lt-body .lt-montant:hover,
html body.lt-body .lt-palier:hover {
	border-color: var(--lt-or);
	color: var(--lt-encre);
	background: #fffdf6;
}

html body.lt-body .lt-montant.est-actif {
	background: var(--lt-or);
	border-color: var(--lt-or);
	color: var(--lt-nuit);
	font-weight: 600;
}

html body.lt-body .lt-radio input[type="radio"],
html body.lt-body .lt-radio input[type="checkbox"],
html body.lt-body .lt-consentement input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: auto;
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	max-width: 18px;
	max-height: 18px;
	flex: 0 0 18px;
	margin: 3px 0 0;
	padding: 0;
	border-radius: 0;
	background: none;
	accent-color: var(--lt-rouge);
}

html body.lt-body .lt-radio {
	text-align: start;
	color: var(--lt-encre);
}

html body.lt-body .lt-radio > span { flex: 1; }

/* ------------------------------------------------------------------
 * 21. Paliers de soutien — visibles au premier coup d'œil
 * ---------------------------------------------------------------- */
html body.lt-body .lt-legende-forte {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	font-size: var(--lt-t-base);
	font-weight: 700;
	margin-bottom: 0.5rem;
	padding: 0;
}

html body.lt-body .lt-obligatoire {
	font-size: var(--lt-t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--lt-blanc);
	background: var(--lt-rouge);
	border-radius: 999px;
	padding: 0.18rem 0.6rem;
}

html body.lt-body .lt-paliers {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.7rem;
}

@media (min-width: 720px) {
	html body.lt-body .lt-paliers { grid-template-columns: repeat(4, 1fr); }
}

html body.lt-body .lt-palier {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-height: 92px;
	padding: 0.9rem 0.6rem;
	cursor: pointer;
	border: 2px solid var(--lt-trait-or);
	border-radius: var(--lt-r-md);
	transition: transform var(--lt-transition), border-color var(--lt-transition), background var(--lt-transition);
}

html body.lt-body .lt-palier__somme {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	font-family: var(--lt-display);
	font-size: clamp(1.15rem, 4vw, 1.45rem);
	font-weight: 700;
	color: var(--lt-encre);
}

html body.lt-body .lt-palier__somme small {
	font-family: var(--lt-ui);
	font-size: 0.62rem;
	letter-spacing: 0.06em;
	color: var(--lt-texte-doux);
}

html body.lt-body .lt-palier__note {
	font-size: var(--lt-t-xs);
	color: var(--lt-texte-doux);
	text-align: center;
}

html body.lt-body .lt-palier:hover { transform: translateY(-2px); }

html body.lt-body .lt-palier.est-actif {
	background: var(--lt-or);
	border-color: var(--lt-or-sombre, #8a6f1a);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
}

html body.lt-body .lt-palier.est-actif .lt-palier__somme,
html body.lt-body .lt-palier.est-actif .lt-palier__somme small,
html body.lt-body .lt-palier.est-actif .lt-palier__note { color: var(--lt-nuit); }

html body.lt-body .lt-form__requis {
	margin: 0.9rem 0 0;
	padding: 0.7rem 0.9rem;
	border-radius: var(--lt-r-sm);
	background: #fdeeee;
	border: 1px solid #e6b3b3;
	color: #7a1c1c;
	font-size: var(--lt-t-sm);
}

/* Logo image : lisible sans écraser l'en-tête */
html body.lt-body .lt-logo__img {
	height: 40px;
	width: auto;
	max-width: min(60vw, 230px);
	object-fit: contain;
}

@media (min-width: 782px) {
	html body.lt-body .lt-logo__img { height: 46px; max-width: 270px; }
}

html body.lt-body .lt-footer .lt-logo__img { height: 52px; max-width: 300px; }

/* ------------------------------------------------------------------
 * 22. Lisibilité — Astra impose sa couleur aux citations
 * `blockquote` et `cite` reçoivent d'Astra un gris-bleu qui devient
 * illisible sur fond nuit. On reprend la main partout.
 * ---------------------------------------------------------------- */
html body.lt-body .lt-verset__fr,
html body.lt-body .lt-verset__fr p {
	color: var(--lt-encre);
	background: none;
	border: 0;
	quotes: none;
}

html body.lt-body .lt-verset--nuit .lt-verset__fr,
html body.lt-body .lt-verset--nuit .lt-verset__fr p,
html body.lt-body .lt-section--nuit .lt-verset__fr,
html body.lt-body .lt-section--nuit .lt-verset__fr p {
	color: var(--lt-sable);
}

html body.lt-body .lt-verset--nuit .lt-verset__ref,
html body.lt-body .lt-section--nuit .lt-verset__ref {
	color: rgba(250, 246, 239, 0.72);
}

html body.lt-body .lt-verset__ar { color: #a8842a; }
html body.lt-body .lt-verset--nuit .lt-verset__ar { color: var(--lt-or-clair); }

html body.lt-body .lt-section--nuit .lt-citation,
html body.lt-body .lt-section--nuit blockquote,
html body.lt-body .lt-footer blockquote,
html body.lt-body .lt-hero blockquote { color: var(--lt-sable); }

/* ------------------------------------------------------------------
 * 23. Consigne réservée à l'équipe
 * ---------------------------------------------------------------- */
html body.lt-body .lt-note-equipe {
	margin: 1.25rem 0;
	padding: 0.9rem 1.1rem;
	border: 1px dashed #b0894a;
	border-radius: var(--lt-r-sm);
	background: rgba(201, 162, 39, 0.1);
}

html body.lt-body .lt-note-equipe > span {
	display: inline-block;
	margin-bottom: 0.35rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a6f1a;
}

html body.lt-body .lt-note-equipe p {
	margin: 0;
	font-size: var(--lt-t-sm);
	color: var(--lt-encre);
}

html body.lt-body .lt-section--nuit .lt-note-equipe p { color: var(--lt-sable); }
html body.lt-body .lt-section--nuit .lt-note-equipe > span { color: var(--lt-or-clair); }

/* ------------------------------------------------------------------
 * 24. Message vocal
 * ---------------------------------------------------------------- */
html body.lt-body .lt-vocal {
	margin: 1.25rem 0;
	padding: 1.15rem 1.2rem;
	border: 1px solid var(--lt-trait-or);
	border-radius: var(--lt-r-md);
	background: #fffdf6;
	color: var(--lt-encre);
}

html body.lt-body .lt-vocal__tete {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin-bottom: 0.9rem;
}

html body.lt-body .lt-vocal__tete svg { width: 22px; height: 22px; fill: var(--lt-rouge); flex: 0 0 auto; margin-top: 2px; }
html body.lt-body .lt-vocal__tete strong { display: block; }
html body.lt-body .lt-vocal__tete span { font-size: var(--lt-t-sm); color: var(--lt-texte-doux); }

html body.lt-body .lt-vocal__barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

html body.lt-body .lt-vocal__chrono {
	font-family: var(--lt-ui);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--lt-rouge);
}

html body.lt-body .lt-vocal__effacer {
	background: none;
	border: 0;
	padding: 0.4rem 0.2rem;
	color: var(--lt-texte-doux);
	text-decoration: underline;
	cursor: pointer;
	font-size: var(--lt-t-sm);
	min-height: 44px;
}

html body.lt-body .lt-vocal__lecteur { width: 100%; margin-top: 0.9rem; }

html body.lt-body .lt-vocal__etat {
	margin: 0.7rem 0 0;
	font-size: var(--lt-t-sm);
	color: var(--lt-texte-doux);
}

html body.lt-body .lt-vocal__etat.est-erreur { color: #a31621; font-weight: 600; }

/* Séparateur « ou » entre le champ écrit et l'enregistrement */
html body.lt-body .lt-vocal__ou {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: -0.35rem 0 1.1rem;
	color: var(--lt-texte-doux);
	font-size: var(--lt-t-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

html body.lt-body .lt-vocal__ou::before,
html body.lt-body .lt-vocal__ou::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--lt-trait-or);
}

html body.lt-body .lt-vocal__pastille {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--lt-nuit);
	flex: 0 0 auto;
}

html body.lt-body .lt-vocal__pastille svg { width: 22px; height: 22px; fill: var(--lt-or-clair); }

html body.lt-body .lt-vocal__bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 48px;
}

html body.lt-body .lt-vocal__bouton svg { width: 18px; height: 18px; fill: currentColor; }

html body.lt-body .lt-vocal__point {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ff5252;
	animation: lt-pulse-vocal 1.1s ease-in-out infinite;
}

@keyframes lt-pulse-vocal {
	50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
	html body.lt-body .lt-vocal__point { animation: none; }
}

/* ------------------------------------------------------------------
 * 25. L'attribut `hidden` doit toujours l'emporter
 * La règle du navigateur `[hidden] { display: none }` vient de sa feuille
 * par défaut : n'importe quelle règle de thème qui pose un `display` la
 * bat, et l'élément reste visible. D'où les deux boutons affichés en même
 * temps sur l'enregistreur. On rétablit la priorité une fois pour toutes.
 * ---------------------------------------------------------------- */
html body.lt-body [hidden] {
	display: none !important;
}