body.to-core {
	margin: 0;
	background: #fafaf9;
	color: #1c1917;
	font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.to-core h1, .to-core h2, .to-core h3 {
	font-family: 'Fraunces', Georgia, "Times New Roman", serif;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
}

/* Nav publique */
.to-nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 4px 40px;
	background: rgba(255,255,255,0.92);
	backdrop-filter: saturate(180%) blur(10px);
	box-shadow: 0 1px 0 rgba(0,0,0,0.02);
	position: sticky;
	top: 0;
	z-index: 10;
}
.to-nav::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 3px;
	background: linear-gradient(90deg, transparent 0%, #065f46 20%, #0a6b4d 50%, #065f46 80%, transparent 100%);
}
.to-nav-logo { display: flex; align-items: center; text-decoration: none; }
.to-nav-logo img { height: 136px; width: auto; max-width: 100%; display: block; }

.to-nav-quote { text-align: center; margin-left: 28px; margin-right: auto; }
.to-nav-quote-stars { color: #f59e0b; font-size: 12px; letter-spacing: 2px; display: block; }
.to-nav-quote-text {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-size: 13px;
	line-height: 1.35;
	color: #064e3b;
	margin: 2px 0 0;
}

.to-nav-links { display: flex; align-items: center; gap: 22px; font-size: 13px; margin-left: auto; }
.to-nav-links .to-btn { display: inline-flex; align-items: center; gap: 6px; }
.to-nav-links .to-btn .to-nav-icon { color: currentColor; }
.to-nav-links > a:not(.to-btn):not(.to-nav-booking-btn):not(.to-nav-space-btn) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #44403c;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 12.5px;
	padding: 6px 4px;
	position: relative;
	transition: color .15s ease;
	white-space: nowrap;
}
.to-nav-links > a:not(.to-btn):not(.to-nav-booking-btn):not(.to-nav-space-btn)::after {
	content: '';
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: -2px;
	height: 2px;
	background: #065f46;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}
.to-nav-links > a:not(.to-btn):not(.to-nav-booking-btn):not(.to-nav-space-btn):hover { color: #065f46; }
.to-nav-links > a:not(.to-btn):not(.to-nav-booking-btn):not(.to-nav-space-btn):hover::after { transform: scaleX(1); }
.to-nav-icon { flex: 0 0 auto; color: #059669; }

.to-nav-space-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #065f46;
	color: #fff !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: 8px;
	border: 1px solid transparent;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	white-space: nowrap;
}
.to-nav-space-btn .to-nav-icon { color: #fff; }
.to-nav-space-btn:hover { background: #fff; color: #065f46 !important; border: 1px solid #065f46; }
.to-nav-space-btn:hover .to-nav-icon { color: #065f46; }

.to-nav-logout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: transparent;
	transition: opacity .15s ease;
}
.to-nav-logout svg { width: 19px; height: 19px; stroke: #065f46; }
.to-nav-logout:hover { opacity: 0.7; }

.to-nav-booking-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #b45309;
	color: #fff !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 12.5px;
	padding: 9px 16px;
	border-radius: 8px;
	border: 1.5px solid #b45309;
	transition: background .15s ease, color .15s ease;
	white-space: nowrap;
}
.to-nav-booking-btn:hover { background: #fff; color: #b45309 !important; }

.to-nav-links .to-btn--primary { border-radius: 8px; }

.to-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	padding: 0;
	margin-left: auto;
	background: none;
	border: none;
	cursor: pointer;
}
.to-nav-toggle span { display: block; width: 100%; height: 2px; background: #064e3b; border-radius: 2px; }
.to-nav-backdrop { display: none; }

@media (max-width: 1100px) {
	.to-nav-quote { display: none; }}

@media (max-width: 1100px) {
	.to-nav-toggle { display: flex; }
	.to-nav-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.4);
		z-index: 999;
	}
	.to-nav-links.is-open + .to-nav-backdrop { display: block; }
	.to-nav-links {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		position: fixed;
		top: 0;
		right: 0;
		width: 82vw;
		max-width: 320px;
		height: 100vh;
		margin: 0;
		padding: 76px 20px 24px;
		background: #fff;
		box-shadow: -10px 0 30px rgba(0,0,0,0.25);
		z-index: 1000;
		overflow-y: auto;
	}
	.to-nav-links.is-open { display: flex; }
	.to-nav-links > a:not(.to-btn):not(.to-nav-booking-btn):not(.to-nav-space-btn) {
		padding: 10px 6px;
		font-size: 13px;
	}
	.to-nav-links > a:not(.to-btn):not(.to-nav-booking-btn):not(.to-nav-space-btn)::after { display: none; }
	.to-nav-space-btn, .to-nav-booking-btn, .to-nav-links .to-btn { justify-content: center; width: 100%; box-sizing: border-box; }
	.to-nav-logout { align-self: flex-start; }}

/* Boutons partagés */
.to-btn {
	display: inline-block;
	text-align: center;
	border-radius: 999px;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.to-btn--primary {
	background: linear-gradient(180deg, #0a7355 0%, #065f46 100%);
	color: #fff;
	box-shadow: 0 2px 8px rgba(6,95,70,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
}
.to-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(6,95,70,0.34); color: #fff; }
/* Vrai bug trouvé le 18/08 : aucun style :disabled n'existait — un
   bouton "disabled" avait donc exactement la même apparence qu'actif
   (juste non cliquable), ce qui rendait invisible tout état "grisé en
   attendant une étape précédente" ailleurs sur le site. */
.to-btn:disabled, .to-btn[disabled] {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
	transform: none;
}
.to-btn--outline-invert { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.to-btn--outline-invert:hover { background: rgba(255,255,255,0.12); }
.to-btn--outline { background: #fff; color: #065f46; border-color: #065f46; }
.to-btn--outline:hover { background: #ecfdf5; }
.to-btn--danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.to-btn--danger:hover { background: #fee2e2; }
.to-btn--ghost { background: transparent; color: #064e3b; border-color: #d1e7dc; }
.to-btn--ghost:hover { background: #ecfdf5; color: #064e3b; }
.to-btn--soft { background: #ecfdf5; color: #065f46; border-color: #ecfdf5; }
.to-btn--soft:hover { background: #d7f2e4; color: #065f46; }
.to-btn--small { padding: 6px 16px; font-size: 12.5px; }
.to-btn--lg { padding: 15px 30px; font-size: 15px; }
.to-btn--full { display: block; width: 100%; box-sizing: border-box; }

/* Hero */
.to-hero {
	position: relative;
	text-align: center;
	padding: 110px 24px 72px;
	background:
		radial-gradient(60% 80% at 50% -10%, rgba(6,95,70,0.14), transparent 60%),
		linear-gradient(180deg, #ecfdf5 0%, #fafaf9 100%);
	overflow: hidden;
}
.to-hero h1 { font-size: 44px; line-height: 1.12; max-width: 760px; margin: 0 auto 18px; color: #0b3d2e; }
.to-hero p { max-width: 560px; margin: 0 auto 32px; color: #57534e; font-size: 17px; }

.to-hero--split { padding: 0; }
.to-hero-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: 48px;
	text-align: left;
	max-width: 1200px;
	margin: 0 auto;
	padding: 72px 24px;
}
.to-hero--split h1 { text-align: left; margin: 0 0 16px; max-width: none; }
.to-hero--split p { text-align: left; margin: 0 0 28px; max-width: none; }
.to-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.to-hero-photos { position: relative; min-height: 360px; }
.to-hero-photo {
	position: absolute;
	border-radius: 18px;
	object-fit: cover;
	box-shadow: 0 24px 48px -16px rgba(6,32,24,0.35);
	cursor: pointer;
	transition: top .25s ease, left .25s ease, right .25s ease, bottom .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.to-hero-photo--back { top: 0; left: 40px; width: 78%; height: 260px; opacity: 0.9; z-index: 1; }
.to-hero-photo--front { bottom: 0; right: 0; width: 78%; height: 280px; border: 4px solid #fff; z-index: 2; box-shadow: 0 30px 60px -16px rgba(6,32,24,0.45); }

@media (max-width: 900px) {
	.to-hero-inner { grid-template-columns: 1fr; padding: 48px 20px; }
	.to-hero-photos { min-height: 300px; margin-top: 24px; }}

/* Césure entre le hero et "Comment ça marche" — même largeur/alignement
   que .to-hero-inner (démarre au "V" du H1, finit au bord droit des
   photos), même effet de fondu que la césure menu/hero (.to-nav::after),
   cercle logo premium au centre (repris du pattern .to-choice-divider). */
.to-section-divider {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	height: 64px;
}
.to-section-divider-line {
	position: absolute;
	top: 50%;
	left: 24px;
	right: 24px;
	height: 2px;
	transform: translateY(-50%);
	background: linear-gradient(90deg, transparent 0%, #065f46 15%, #0a6b4d 50%, #065f46 85%, transparent 100%);
}
.to-section-divider-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 10px 26px -8px rgba(6,32,24,0.28), 0 2px 8px rgba(0,0,0,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}
.to-section-divider-circle img { width: 100%; height: auto; display: block; }

@media (max-width: 640px) {
	.to-section-divider { padding: 0 20px; height: 48px; }
	.to-section-divider-line { left: 20px; right: 20px; }
	.to-section-divider-circle { width: 48px; height: 48px; padding: 9px; }}

/* Sections publiques */
.to-section { max-width: 1120px; margin: 0 auto; padding: 56px 24px; }
.to-section--compact { padding: 32px 24px; }
.to-section--muted { background: #f5f5f4; max-width: none; }
.to-section--muted > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.to-section h2 { font-size: 24px; margin-bottom: 24px; }

.to-section-title-premium {
	display: flex;
	align-items: center;
	gap: 14px;
	white-space: normal;
}
.to-section-title-ornament {
	font-size: 19px;
	color: #b45309;
	flex-shrink: 0;
	line-height: 1;
}
.to-section-title-premium span:not(.to-section-title-ornament):not(.to-section-title-rule) {
	white-space: nowrap;
	color: #064e3b;
}
.to-section-title-rule {
	flex: 1 1 auto;
	height: 1px;
	background: #d6d3d1;
	min-width: 24px;
}
.to-section-title-premium--centered {
	justify-content: center;
	gap: 10px;
}
.to-section-title-premium--centered .to-section-title-ornament { font-size: 17px; }
@media (max-width: 640px) {
	.to-section-title-premium span:not(.to-section-title-ornament):not(.to-section-title-rule) {
		white-space: normal;
	}}

/* Grille annonces */
.to-listing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}
.to-listing-grid--catalog { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .to-listing-grid--catalog { grid-template-columns: repeat(3, 1fr); }}
@media (max-width: 780px)  { .to-listing-grid--catalog { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 520px)  { .to-listing-grid--catalog { grid-template-columns: 1fr; }}

/* Page Hébergements */
.to-catalog-hero {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	min-height: calc(100vh - 140px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 56px 24px 32px;
}
.to-catalog-hero-content { width: 100%; max-width: 1000px; text-align: center; }
.to-catalog-hero-title {
	font-family: 'Fraunces', Georgia, serif;
	color: #fff;
	font-size: 32px;
	margin: 0 0 8px;
	text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.to-catalog-hero-subtitle {
	color: #fff;
	font-size: 15px;
	margin: 0 0 26px;
	text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.to-catalog-search {
	background: rgba(255,255,255,0.97);
	backdrop-filter: blur(4px);
	border-radius: 18px;
	border: 3px solid #fbbf24;
	padding: 24px 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	box-shadow: 0 24px 60px -20px rgba(0,0,0,0.45), 0 0 0 6px rgba(251,191,36,0.15);
}
.to-catalog-search label {
	font-size: 12px;
	font-weight: 600;
	color: #57534e;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 120px;
	min-width: 0;
}
.to-catalog-search select {
	padding: 9px 10px;
	border: 1px solid #e7e5e4;
	border-radius: 8px;
	font-size: 13.5px;
	width: 100%;
	background: #fff;
}
.to-catalog-search-dept { flex: 1 1 240px; position: relative; }
/* Alerte "choisissez un département" (22/08, demande de Vincent) — même
   animation pulse que .to-account-feedback--pulse, réutilisée ici pour
   rester cohérent avec le reste du site. */
.to-catalog-search-dept--urgent select {
	border: 1.5px solid #dc2626;
	box-shadow: 0 0 0 3px rgba(220,38,38,0.15);
	animation: to-account-pulse 1.4s ease-in-out infinite;
}
.to-catalog-dept-popup {
	position: absolute;
	top: -38px;
	left: 0;
	background: #dc2626;
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	padding: 7px 12px;
	border-radius: 8px;
	white-space: nowrap;
	z-index: 20;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.to-catalog-dept-popup::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 20px;
	width: 10px;
	height: 10px;
	background: #dc2626;
	transform: rotate(45deg);
}
.to-catalog-search .to-btn { align-self: flex-end; flex-shrink: 0; white-space: nowrap; }
.to-catalog-search-subtitle {
	flex-basis: 100%; margin: 0 0 2px;
	font-family: 'Fraunces', Georgia, serif; font-size: 15px; font-weight: 700; color: #064e3b;
}
.to-catalog-search-hint { display: block; font-size: 10.5px; font-weight: 400; color: #a8a29e; text-transform: none; letter-spacing: 0; margin-top: 1px; }

.to-catalog-more-wrap { text-align: center; margin-top: 32px; }

.to-catalog-dept-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.to-catalog-dept-head h2 { font-size: 24px; margin: 0 0 6px; }
.to-catalog-dept-head p { font-size: 14.5px; color: #57534e; margin: 0; }
.to-catalog-dept-cta {
	flex-shrink: 0;
	font-size: 14px;
	padding: 13px 30px;
	box-shadow: 0 8px 20px -6px rgba(6,95,70,.45);
	transition: transform .18s, box-shadow .18s;
}
.to-catalog-dept-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -6px rgba(6,95,70,.55); }
.to-catalog-more-wrap .to-catalog-dept-cta { display: inline-flex; }

.to-trust-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	background: #ecfdf5;
	border-bottom: 1px solid #a7f3d0;
	padding: 14px 24px;
	font-size: 13px;
	color: #065f46;
	font-weight: 600;
}
.to-trust-bar span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.to-trust-icon { font-style: normal; color: #059669; }

/* Pages département — même hauteur pour toutes les photos (cohérence
   visuelle, quel que soit le ratio du fichier source), overlay dégradé
   pour la lisibilité du texte (contrairement aux dégradés de couleur unis
   des pages mer/montagne/campagne, ce sont de vraies photos). */
.to-dept-hero {
	position: relative;
	height: 640px;
	background-size: cover;
	background-position: center;
	background-color: #064e3b;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 24px 48px;
}
.to-dept-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6,78,59,.15) 0%, rgba(6,78,59,.35) 55%, rgba(6,78,59,.85) 100%);
}
.to-dept-hero-content { position: relative; width: 100%; max-width: 1000px; text-align: center; }
.to-dept-hero-content h1 {
	font-family: 'Fraunces', Georgia, serif;
	color: #fff;
	font-size: 34px;
	margin: 0 0 8px;
	text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.to-dept-hero-content .to-catalog-hero-subtitle { text-shadow: 0 1px 8px rgba(0,0,0,.4); }

@media (max-width: 900px) {
	.to-dept-hero { height: 560px; }}
@media (max-width: 640px) {
	.to-dept-hero { height: 480px; padding-bottom: 32px; }
	.to-dept-hero-content h1 { font-size: 24px; }}

/* Présentation du département : intro + 3 colonnes (spécialité + 2 curiosités) */
.to-dept-intro h2 { margin: 0 0 12px; }
.to-dept-intro-text { max-width: 760px; margin: 0 auto 36px; text-align: center; font-size: 15px; color: #44403c; line-height: 1.7; }
.to-dept-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.to-dept-highlight { background: #fff; border: 1px solid #e7e5e4; border-radius: 16px; padding: 26px 24px; text-align: center; transition: transform .18s, box-shadow .18s; }
.to-dept-highlight:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(6,95,70,.12); }
.to-dept-highlight-icon { width: 52px; height: 52px; margin: 0 auto 16px; }
.to-dept-highlight-icon svg { width: 22px; height: 22px; }
.to-dept-highlight h3 { font-family: 'Fraunces', Georgia, serif; font-size: 16px; color: #1c1917; margin: 0 0 8px; }
.to-dept-highlight p { font-size: 13.5px; color: #57534e; line-height: 1.55; margin: 0; }

@media (max-width: 900px) {
	.to-dept-highlights { grid-template-columns: 1fr; }}

/* Pages de destination (mer/montagne/campagne) */
.to-tag-hero {
	background: linear-gradient(180deg, #065f46 0%, #059669 60%, #ecfdf5 100%);
	padding: 40px 24px 50px;
	text-align: center;
}
.to-tag-hero--mer {
	background: linear-gradient(180deg, #f59e0b 0%, #38bdf8 55%, #ecfdf5 100%);
}
.to-tag-hero--montagne {
	background: linear-gradient(180deg, #334155 0%, #64748b 55%, #ecfdf5 100%);
}
.to-tag-hero--nature {
	background: linear-gradient(180deg, #065f46 0%, #059669 60%, #ecfdf5 100%);
}
.to-tag-hero h1 {
	font-family: 'Fraunces', Georgia, serif;
	color: #fff;
	font-size: 30px;
	margin: 0 0 8px;
	text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.to-tag-hero .to-catalog-hero-subtitle { margin: 0 0 26px; }
.to-tag-hero .to-catalog-search { max-width: 900px; margin: 0 auto; }

/* Page "Nos hébergements à la une" (templates/featured.php) — hero dédié,
   dégradé ciel → soleil → prairie plutôt qu'une photo, pour se distinguer
   visuellement du catalogue général. Le padding-bottom de 50px garantit
   que le vert se prolonge exactement 50px sous le moteur de recherche,
   quelle que soit la hauteur du contenu au-dessus. */
.to-featured-hero {
	width: 100%;
	background: linear-gradient(180deg, #4a90d9 0%, #7fc0e8 20%, #f6d35c 46%, #efb84a 60%, #4caf50 78%, #4caf50 100%);
	padding: 72px 24px 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.to-featured-hero-content { width: 100%; max-width: 900px; text-align: center; }
/* Hero "Les Incontournables" (22/08, demande de Vincent) — le dégradé
   "coucher de soleil" hérité de .to-featured-hero (Mise à la une) ne
   convenait pas ici : reprend exactement le même dégradé bleu que le
   bloc "Affichage privilège" en page d'accueil, pour une cohérence
   visuelle entre les 2 produits de mise en avant. */
.to-featured-hero--incontournables {
	background: linear-gradient(180deg, #0f2847 0%, #4a6fa5 55%, #dbe7f3 100%);
}
.to-featured-hero-title {
	font-family: 'Fraunces', Georgia, serif;
	color: #fff;
	font-size: 32px;
	margin: 0 0 8px;
	text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.to-featured-hero-subtitle {
	color: #fff;
	font-size: 15px;
	margin: 0 0 26px;
	text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
.to-featured-hero-search { max-width: 520px; margin: 0 auto; justify-content: center; }
@media (max-width: 640px) {
	.to-featured-hero { padding: 52px 18px 50px; }
	.to-featured-hero-title { font-size: 25px; }}

.to-listing-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border: 1px solid #e7e5e4;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.to-listing-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px -12px rgba(6,95,70,0.28);
	border-color: #a7f3d0;
}
.to-listing-card-photo {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #064e3b, #059669);
	display: flex;
	align-items: flex-end;
	padding: 12px;
	overflow: hidden;
}
.to-listing-card-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.to-listing-card:hover .to-listing-card-photo img { transform: scale(1.09); }
.to-listing-card-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.32) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.to-listing-card:hover .to-listing-card-photo::after { opacity: 1; }
.to-listing-card-photo > span {
	position: relative;
	background: rgba(255,255,255,0.92);
	color: #065f46;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
}
.to-listing-card-badges-row {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

/* Badge classement sur cartouche (22/08, 2ᵉ passage, demande de
   Vincent) — badge texte façon "À la une" (même forme pilule, mêmes
   dimensions que .to-listing-card-badge), centré en bas de la carte au
   lieu d'un rond en haut à gauche. Couleurs reprises de l'étiquette
   officielle "Logement classé" : fond bleu marine, chiffre et étoile
   en or, texte en blanc. */
/* Badge classement sur cartouche (22/08, 3ᵉ passage, demande de
   Vincent) — déplacé dans la zone photo, centré en bas entre le badge
   Super Hôte (bas gauche) et la photo de profil (bas droite), même
   hauteur (bottom:10px). Bordure dorée ajoutée, cohérente avec le
   cadre de l'étiquette officielle. */
.to-listing-card-classement-badge {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #1e3a5f !important;
	border: 1.5px solid #f7c65b;
	color: #fff !important;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.to-listing-card-classement-badge strong { color: #f7c65b; font-weight: 800; }

/* Hébergé par [photo hôte] (19/08) — bas gauche du visuel de carte,
   demande explicite de Vincent : mettre l'hôte en avant sur le
   cartouche annonce, pas seulement sur la fiche détaillée. */
/* Photo de profil de l'hôte (19/08, version simplifiée) — plus de nom ni
   de texte "Hébergé par" (retirés, cf. demande de Vincent), juste la
   photo en rond, en bas à droite du visuel. Rendue en background-image
   plutôt qu'en balise <img> : garantit un cadrage carré/rond fiable
   quelles que soient les dimensions réelles de la photo source, sans
   dépendre des attributs width/height que WordPress ajoute
   automatiquement sur <img> (source du rendu déformé constaté). */
.to-listing-card-host {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
}
/* Badge "Super Hôte" (22/08, 2ᵉ passage — vrai bug de spécificité CSS
   corrigé) — .to-listing-card-photo img (classe + élément) a une
   spécificité plus élevée qu'une simple classe et écrasait totalement
   ce positionnement (position:absolute; inset:0; width:100%;
   height:100%), d'où le badge géant repéré par Vincent. Sélecteur
   renforcé pour l'emporter, inset explicitement annulé. Même diamètre
   exact que .to-listing-card-host-avatar (48px) pour un vrai miroir. */
.to-listing-card-photo img.to-listing-card-super-host-badge {
	position: absolute;
	inset: auto;
	left: 10px;
	bottom: 10px;
	top: auto;
	right: auto;
	z-index: 2;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.35);
	background: #fff;
	object-fit: contain;
	padding: 3px;
}
.to-listing-card-host-avatar {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.35);
	background-color: #f5f5f4;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.to-listing-card-host-avatar--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #065f46;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}
.to-listing-card-badge {
	background: #065f46;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.to-listing-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px; }
.to-listing-card-body h3 { font-size: 16px; margin: 0 0 4px; }
.to-listing-card-body p { font-size: 13px; color: #78716c; margin: 0 0 8px; }
.to-listing-card-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #57534e; }
.to-listing-card-capacity { display: inline-flex; align-items: center; gap: 4px; }
.to-listing-card-capacity svg { display: block; flex-shrink: 0; }

.to-listing-card-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
}
.to-listing-card-rating-value {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	font-size: 18px;
	color: #1c1917;
}
.to-listing-card-stars { display: flex; gap: 1px; line-height: 1; }
.to-listing-card-stars .to-listing-card-star { font-size: 14px; color: #e7e5e4; }
.to-listing-card-stars .to-listing-card-star.is-filled { color: #fbbf24; }
.to-listing-card-google-g { display: inline-flex; margin-left: 2px; }
.to-listing-card-google-g svg { display: block; }

.to-listing-card-cta {
	display: block;
	text-align: center;
	margin-top: auto;
	padding: 8px 16px;
	border-radius: 999px;
	background: #065f46;
	color: #fff;
	border: 1px solid #065f46;
	font-size: 12.5px;
	font-weight: 600;
	transition: background .15s ease, color .15s ease;
}
.to-listing-card:hover .to-listing-card-cta { background: #fff; color: #065f46; }

/* Destinations */
.to-destination-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}
/* Carrousel "à la une" */
.to-featured-carousel { display: flex; align-items: center; gap: 12px; }
.to-featured-track {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 24px;
	scrollbar-width: none;
}
.to-featured-track::-webkit-scrollbar { display: none; }
.to-featured-track .to-listing-card {
	flex: 0 0 calc(25% - 18px);
	scroll-snap-align: start;
	min-width: 190px;
}
.to-carousel-arrow {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid #e7e5e4;
	background: #fff;
	font-size: 20px;
	color: #065f46;
	cursor: pointer;
}
.to-carousel-arrow:hover { background: #ecfdf5; }
/* Nombre de cartes visibles par palier — toujours un compte entier
   (4/3/2) plutôt qu'un simple min-width qui, sur certaines largeurs
   intermédiaires (~900-1032px), forçait des cartes plus larges que le
   calc(25%...) prévu et cassait le pavage : la 5ᵉ carte se retrouvait
   alors à moitié visible sur la droite sans équivalent à gauche. */
@media (max-width: 1180px) { .to-featured-track .to-listing-card { flex-basis: calc(33.333% - 16px); }}
@media (max-width: 900px)  { .to-featured-track .to-listing-card { flex-basis: calc(50% - 12px); }}

/* "Derniers établissements notés 5/5" — bloc mis en avant sur la page
   d'accueil, juste après "Comment ça marche". Fond dégradé crème/doré
   pour se détacher visuellement du reste de la page (sections voisines
   toutes sur fond blanc). Les cartes elles-mêmes sont les mêmes
   .to-listing-card que partout ailleurs sur le site (catalogue, "Les
   derniers hébergements", "À la une"…) — c'est le badge 5/5 lui-même
   (ci-dessous) qui les distingue, pas un gabarit de carte à part. */
.to-five-star-section {
	background: linear-gradient(180deg, #fdf6ea 0%, #f8f3e5 100%);
	border: 1px solid #f0dfb8;
	border-radius: 28px;
	padding: 48px 32px 52px;
}
.to-five-star-subtitle {
	text-align: center;
	font-size: 14.5px;
	color: #78716c;
	max-width: 560px;
	margin: -8px auto 32px;
	line-height: 1.6;
}
.to-five-star-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}
@media (max-width: 1100px) { .to-five-star-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 560px)  { .to-five-star-grid { grid-template-columns: 1fr; }}

/* Traitement "fiche 5/5" — appliqué par render_listing_card() dès que la
   note effective (avis site ou, à défaut, note Google) vaut exactement
   5,0/5, où que la carte apparaisse sur le site. */
.to-listing-card-badge-confiance {
	background: linear-gradient(135deg, #f7c65b, #e8a83a);
	color: #7a4a06;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: 4px;
	box-shadow: 0 6px 14px rgba(0,0,0,.18);
	line-height: 1.25;
	white-space: nowrap;
	flex: 0 0 auto;
	margin-left: auto;
}
.to-listing-card-google-badge {
	display: flex;
	align-items: center;
	gap: 9px;
	background: linear-gradient(160deg, #123a68 0%, #0a2547 100%);
	border: 1.5px solid #f0c060;
	border-radius: 999px;
	padding: 6px 12px 6px 6px;
	margin: auto 0 8px;
}
/* La carte pousse déjà .to-listing-card-cta vers le bas via son propre
   margin-top:auto (pour les fiches sans badge 5/5) — quand le badge est
   présent, c'est LUI qui doit absorber tout l'espace restant (ligne
   ci-dessus) pour rester collé juste au-dessus du bouton, quelle que soit
   la longueur du titre. Si le bouton gardait AUSSI son propre auto sur ces
   cartes, les deux se partageraient l'espace et rouvriraient l'effet
   "dent de scie" (déjà vécu, cf. mémoire) : le bouton n'a donc plus le
   sien dès qu'il suit un badge. */
.to-listing-card-google-badge ~ .to-listing-card-cta { margin-top: 0; }
.to-listing-card-google-badge .g-circle { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 1.5px #f0c060; }
.to-listing-card-google-badge .badge-text { display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; white-space: nowrap; }
.to-listing-card-google-badge .num { font-family: 'Fraunces', Georgia, serif; font-weight: 700; color: #f7c65b; font-size: 17px; }
.to-listing-card-google-badge .sur { font-size: 10.5px; font-weight: 700; color: #dbe6f7; letter-spacing: .01em; }
.to-listing-card-google-badge .badge-stars { display: flex; gap: 1px; flex-shrink: 0; margin-left: auto; padding-left: 6px; font-size: 11px; color: #fbbf24; letter-spacing: 1px; }

@media (max-width: 560px) { .to-featured-track .to-listing-card { flex-basis: 85%; }}

/* Destinations */
.to-section-title--centered { text-align: center; }
.to-destination-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}
.to-destination-grid--categories {
	grid-template-columns: repeat(3, 1fr);
	max-width: 1120px;
	margin: 0 auto;
	gap: 24px;
}
.to-destination-cat {
	background-size: cover;
	background-position: center;
	border-radius: 18px;
	min-height: 220px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	box-shadow: 0 12px 30px -12px rgba(0,0,0,0.25);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.to-destination-cat:hover {
	transform: scale(1.035);
	box-shadow: 0 24px 48px -16px rgba(6,95,70,0.4);
}
.to-destination-cat-inner {
	width: 100%;
	padding: 20px;
	background: linear-gradient(0deg, rgba(6,32,24,0.75) 0%, rgba(6,32,24,0.1) 80%);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.to-destination-cat-inner h3 { color: #fff; font-family: 'Fraunces', Georgia, serif; font-size: 22px; margin: 0; }
/* (22/08, demande de Vincent) — doré plutôt que le vert primary
   générique du reste du site, pour se distinguer sur fond photo
   sombre ; même doré que la bordure des badges "Nos 3 gages de
   confiance" plus haut sur la page, pour rester cohérent. Le survol
   (blanc) était déjà correct, inchangé. */
.to-destination-cat-inner .to-btn--primary {
	background: linear-gradient(180deg, #d99a3d 0%, #b45309 100%);
	box-shadow: 0 2px 8px rgba(180,83,9,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
.to-destination-cat-inner .to-btn--primary:hover { background: #fff; color: #065f46; box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
@media (max-width: 780px) { .to-destination-grid--categories { grid-template-columns: 1fr; }}

.to-destination-card {
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 12px;
	padding: 16px;
	text-align: center;
}
.to-destination-card h3 { font-size: 15px; margin: 0; }
.to-destination-card p { font-size: 12px; color: #78716c; margin: 2px 0 8px; }
.to-destination-card span { font-size: 11px; color: #059669; font-weight: 600; }

/* Newsletter (page d'accueil) */
.to-newsletter-section { text-align: center; }
.to-newsletter-section p { color: #57534e; margin: 0 0 20px; }
.to-newsletter-form-inline { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; max-width: 480px; margin: 0 auto; }
.to-newsletter-form-inline input {
	flex: 1 1 240px;
	padding: 11px 14px;
	border: 1px solid #e7e5e4;
	border-radius: 999px;
	font-size: 14px;
}
.to-newsletter-note { font-size: 11px; color: #a8a29e; margin-top: 10px !important; }
.to-cta-band--newsletter .to-newsletter-note { color: #d1fae5; }

/* Bandeau CTA hôte */
.to-cta-band {
	background: #064e3b;
	color: #fff;
	text-align: center;
	padding: 56px 24px;
}
.to-cta-band h2 { color: #fff; font-size: 24px; }
.to-cta-band p { color: #d1fae5; max-width: 480px; margin: 0 auto 24px; }

.to-empty-state { color: #78716c; font-size: 14px; }
.to-simple-divider { display: flex; justify-content: center; margin: 8px 0 40px; }
.to-simple-divider span {
	display: block;
	width: 64px;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, #065f46, transparent);
}
.to-section-see-all { text-align: center; margin: 18px 0 0; }
.to-section-see-all a { color: #047857; font-weight: 600; font-size: 14px; text-decoration: none; }
.to-section-see-all a:hover { text-decoration: underline; }
.to-preview-banner {
	max-width: 1200px;
	margin: 16px auto 0;
	padding: 10px 16px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
	border-radius: 8px;
	font-size: 13px;
	text-align: center;
}

/* Auth (connexion / inscription) */
.to-auth-wrap {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 16px;
}
.to-auth-hero {
	min-height: calc(100vh - 68px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 16px;
	background-size: cover;
	background-position: center;
}
.to-auth-card--floating {
	box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 30px 60px -20px rgba(6,32,24,0.35);
}
.to-auth-forgot { text-align: right; font-size: 12.5px; margin: -8px 0 16px; }
.to-auth-forgot a { color: #065f46; font-weight: 600; }
.to-auth-card {
	width: 100%;
	max-width: 380px;
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 16px;
	padding: 32px;
}
.to-auth-card h1 { font-size: 22px; text-align: center; margin-bottom: 20px; }
.to-auth-title--alert { color: #b91c1c; }
.to-auth-form label { display: block; font-size: 12px; color: #57534e; margin-bottom: 14px; }
.to-auth-form input {
	width: 100%;
	margin-top: 4px;
	padding: 10px 12px;
	border: 1px solid #e7e5e4;
	border-radius: 8px;
	font-size: 14px;
	box-sizing: border-box;
}
.to-captcha { max-width: 160px; }
.to-auth-switch { text-align: center; font-size: 13px; color: #78716c; margin-top: 16px; }
.to-auth-switch a { color: #065f46; }
.to-auth-help { font-size: 13px; color: #78716c; text-align: center; margin: 0 0 20px; line-height: 1.5; }
.to-auth-help a { color: #065f46; font-weight: 600; }

.to-role-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 18px;
}
.to-role-toggle label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid #e7e5e4;
	border-radius: 999px;
	padding: 8px 12px;
	font-size: 13px;
	cursor: pointer;
	margin: 0;
}
.to-role-toggle label.is-active { border-color: #065f46; color: #065f46; background: #ecfdf5; }
.to-role-toggle input { width: auto; margin: 0; }

.to-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.to-optional { font-weight: 400; color: #a8a29e; font-size: 11px; }

.to-feedback { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.to-feedback--success { background: #ecfdf5; color: #065f46; }
.to-feedback--error { background: #fef2f2; color: #991b1b; }

/* Footer public */
.to-footer {
	background: linear-gradient(180deg, #f7ead0 0%, #fdf3d9 100%);
	border-top: 1px solid #e9d9ab;
	padding: 56px 24px 0;
	margin-top: 40px;
}
.to-footer-main {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding-bottom: 40px;
}
.to-footer-brand { flex: 1.6 1 260px; text-align: center; }
.to-footer-brand .to-footer-logo,
.to-footer-brand p { text-align: left; }
.to-footer-col { flex: 1 1 160px; }
.to-footer-brand p { font-size: 13px; color: #57534e; line-height: 1.6; margin: 12px 0 0; max-width: 320px; }
.to-footer-network-logo-wrap { display: flex; justify-content: center; width: 100%; margin-top: 20px; }
.to-footer-network-logo { display: block; max-width: 80px; height: auto; }
.to-footer-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	font-size: 18px;
	color: #064e3b;
}
.to-footer-col h4 {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #b45309;
	margin: 0 0 14px;
	text-align: left;
}
.to-footer-col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-align: left; }
.to-footer-col a { display: inline-flex; align-items: center; gap: 10px; color: #44403c; text-decoration: none; font-size: 13.5px; }
.to-footer-col a:hover { color: #065f46; }
.to-footer-col a:hover .to-footer-arrow { transform: translateX(3px); }
.to-footer-arrow {
	flex-shrink: 0;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: linear-gradient(135deg,#4ade80,#16a34a);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: transform .18s;
	box-shadow: 0 2px 6px rgba(22,163,74,.35);
}
.to-footer-arrow svg { width: 11px; height: 11px; }
.to-footer-listing { flex-direction: row; align-items: center; gap: 12px; }
.to-footer-listing-thumb {
	width: 48px; height: 48px;
	border-radius: 8px;
	background-color: #ecebe9;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}
.to-footer-listing-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.to-footer-listing-title {
	font-size: 12.5px;
	font-weight: 600;
	color: #292524;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.to-footer-listing-more { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #065f46; font-weight: 700; }
.to-footer-listing-more .to-footer-arrow { width: 16px; height: 16px; }
.to-footer-listing-more .to-footer-arrow svg { width: 9px; height: 9px; }
.to-footer-bottom {
	max-width: 1200px;
	margin: 0 auto;
	border-top: 1px solid rgba(180,140,40,.25);
	padding: 18px 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px;
	color: #78716c;
}
.to-footer-bottom a { color: #78716c; text-decoration: none; }
.to-footer-bottom a:hover { color: #065f46; }
@media (max-width: 560px) {
	.to-footer-main { flex-direction: column; }
	.to-footer-col, .to-footer-brand { flex-basis: auto; }}

/* Espace interne (sidebar app) */
.to-app { display: flex; min-height: calc(100vh - 37px); }
.to-nav-icon { flex: 0 0 17px; opacity: 0.8; }

/* Menu horizontal : déjà clair, mais un cadre net + fond blanc franc
   demandés explicitement. */
.to-topnav.is-highlighted { background: #fff; box-shadow: 0 10px 26px rgba(180,140,40,.3); }

/* Widget Emma : fond doré avec texte blanc — contrairement au menu
   vertical il a besoin d'un cadre AUTOUR (pas d'un fond blanc à la place,
   qui rendrait son propre texte illisible). */
.to-emma-widget.is-highlighted {
	box-shadow: 0 0 0 3px #fff, 0 10px 26px rgba(0,0,0,.3);
}

/* Bandeau vert explicatif en tête de page (to_core_page_intro()) — présent
   sur toutes les pages admin/hôte/voyageur de l'application. */
.to-page-intro {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 12px;
	padding: 14px 20px;
	margin: 0 0 22px;
}
.to-page-intro p {
	margin: 0;
	color: #053b28;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.6;
}

@media (max-width: 760px) {
	.to-app { flex-direction: column; }
	body .to-topnav { display: none; }}

/* Tableau de bord voyageur */
.to-guest-dashboard h2 { font-size: 22px; }
.to-guest-intro { color: #57534e; font-size: 14px; margin: 0 0 20px; }
.to-guest-stats { display: flex; gap: 16px; margin-bottom: 28px; }
.to-guest-stat {
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 12px;
	padding: 16px 20px;
	min-width: 140px;
}
.to-guest-stat strong { display: block; font-size: 24px; font-family: Georgia, serif; color: #065f46; }
.to-guest-stat span { font-size: 12px; color: #78716c; }
.to-guest-empty { color: #78716c; font-size: 14px; }
.to-guest-bookings { display: flex; flex-direction: column; gap: 10px; }
.to-guest-booking {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 12px;
	padding: 14px 16px;
}
.to-guest-booking p { margin: 4px 0 0; font-size: 13px; color: #78716c; }
.to-guest-booking-status {
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f5f5f4;
	color: #57534e;
	white-space: nowrap;
}
.to-guest-booking-status--pending { background: #fffbeb; color: #92400e; }
.to-guest-booking-status--confirmed { background: #ecfdf5; color: #065f46; }
.to-guest-booking-status--declined, .to-guest-booking-status--cancelled { background: #fef2f2; color: #991b1b; }

/* Blocs stat cliquables (Messages / Support / Trafic / Ajouter une annonce) */
a.to-guest-stat--link { text-decoration: none; display: block; transition: transform .15s ease, box-shadow .15s ease; }
a.to-guest-stat--link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(0,0,0,0.12); border-color: #a7f3d0; }

/* Carte "+ Ajouter une annonce" (vert clair, effet pulse) */
a.to-guest-stat--add {
	background: #ecfdf5;
	border-color: #a7f3d0;
	animation: to-host-add-listing-pulse 1.8s ease-in-out infinite;
}
a.to-guest-stat--add strong { color: #065f46; }
a.to-guest-stat--add span { color: #065f46; font-weight: 600; }
@keyframes to-host-add-listing-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(6,95,70,0.35); }
	50% { box-shadow: 0 0 0 8px rgba(6,95,70,0); }
}

/* Vignette photo + actions icônes sur le bloc "Mes annonces" */
.to-guest-booking--with-thumb { gap: 14px; }
.to-guest-booking-thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
	background: #f5f5f4;
}
.to-guest-booking-thumb--empty { display: inline-block; }
.to-guest-booking-main { flex: 1 1 auto; }
.to-guest-booking-icon-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: 8px; }
.to-guest-booking-icon-actions form { margin: 0; }
.to-guest-row-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid #e7e5e4;
	background: #fff;
	color: #57534e;
	text-decoration: none;
}
.to-guest-row-icon-btn:hover { background: #f5f5f4; }
.to-guest-row-icon-btn--danger { color: #b91c1c; }
.to-guest-row-icon-btn--danger:hover { background: #fef2f2; border-color: #fca5a5; }

a.to-guest-booking--link { text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.to-guest-booking--link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(0,0,0,0.12); border-color: #a7f3d0; }

/* Tableau de bord hôte sur mobile — les cartes stat et la ligne "Mes
   annonces" (vignette + titre + badge statut + actions icônes) tenaient
   toutes sur une seule ligne non wrappable, forçant tout le contenu de la
   page à défiler horizontalement. Les stats passent en grille 2 colonnes,
   et la ligne annonce passe sur 2 lignes (vignette+titre, puis statut +
   actions alignées à droite) plutôt que de s'écraser. */
@media (max-width: 640px) {
	.to-guest-stats { flex-wrap: wrap; }
	.to-guest-stat { flex: 1 1 calc(50% - 8px); min-width: 0; }
	.to-guest-booking--with-thumb { flex-wrap: wrap; row-gap: 10px; }
	.to-guest-booking-main { min-width: 0; }
	.to-guest-booking--with-thumb .to-guest-booking-status { flex-basis: 100%; margin-left: 70px; width: fit-content; }
	.to-guest-booking--with-thumb .to-guest-booking-icon-actions { margin-left: auto; }}

/* Page Trafic — grille des établissements */
.to-traffic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .to-traffic-grid { grid-template-columns: repeat(2, 1fr); }}
.to-traffic-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease;
}
.to-traffic-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(0,0,0,0.12); border-color: #a7f3d0; }
.to-traffic-card-photo { display: block; width: 100%; aspect-ratio: 4/3; background: #f5f5f4; }
.to-traffic-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.to-traffic-card strong { font-family: 'Fraunces', Georgia, serif; font-size: 14px; padding: 10px 12px 2px; }
.to-traffic-card-count { font-size: 12px; color: #065f46; font-weight: 600; padding: 0 12px 12px; }

/* Page Trafic — retour / graphique jour par jour */
.to-traffic-back { display: inline-block; margin-bottom: 12px; font-size: 13px; color: #57534e; text-decoration: none; }
.to-traffic-back:hover { color: #065f46; }
.to-traffic-chart-wrap {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 12px 0 28px;
}
.to-traffic-yaxis-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #78716c;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 4px 0;
}
.to-traffic-chart {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 160px;
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 12px;
	padding: 24px 12px 8px;
	margin: 0;
	overflow-x: auto;
	flex: 1 1 auto;
}
.to-traffic-bar-col { flex: 1 1 0; min-width: 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.to-traffic-bar { width: 100%; max-width: 14px; background: #6ee7b7; border-radius: 3px 3px 0 0; min-height: 2px; }
.to-traffic-bar-col:hover .to-traffic-bar { background: #065f46; }
.to-traffic-bar-value { font-size: 10px; font-weight: 700; color: #065f46; margin-bottom: 3px; white-space: nowrap; }
.to-traffic-bar-label { display: block; font-size: 9.5px; color: #a8a29e; margin-top: 4px; }

/* Page Trafic — classement année/mois (même habillage que l'archive Support) */
.to-traffic-archive-year {
	border: 1px solid #e7e5e4;
	border-radius: 12px;
	padding: 4px 14px;
	margin-bottom: 10px;
	background: #fff;
}
.to-traffic-archive-year summary {
	cursor: pointer;
	padding: 10px 0;
	font-family: 'Fraunces', Georgia, serif;
	font-size: 15px;
	color: #064e3b;
	font-weight: 600;
	list-style: none;
}
.to-traffic-archive-year summary::-webkit-details-marker { display: none; }
.to-traffic-archive-year summary::before { content: "▸"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.to-traffic-archive-year[open] summary::before { transform: rotate(90deg); }
.to-traffic-archive-year table { margin-bottom: 14px; }


.to-guest-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.to-guest-section-header h3 { margin: 0; }
.to-guest-see-all { font-size: 12.5px; font-weight: 600; color: #065f46; text-decoration: none; white-space: nowrap; }
.to-guest-see-all:hover { text-decoration: underline; }
.to-guest-see-all--block { display: inline-block; margin-top: 12px; }
.to-guest-reservations h2 { font-family: 'Fraunces', Georgia, serif; }

/* Mon compte */
.to-account { max-width: 1080px; }
.to-account h2 { font-family: 'Fraunces', Georgia, serif; font-size: 24px; color: #064e3b; margin: 0 0 20px; }

/* Vignette de document (21/08) — miniature réelle pour une image,
   icône générique pour un PDF. Partagée entre "Mon compte", "Mes
   justificatifs" et la page hôte admin. */
.to-doc-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	border: 1px solid #e7e5e4;
	overflow: hidden;
	background: #fafaf9;
}
.to-doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.to-doc-thumb--pdf { flex-direction: column; gap: 2px; color: #78716c; }
.to-doc-thumb--pdf span { font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.to-required-mark { color: #b91c1c; }
@keyframes to-account-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(153,27,27,.35); }
	50%      { box-shadow: 0 0 0 8px rgba(153,27,27,0); }
}

/* Auth card — polish général */
.to-auth-card {
	box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 20px 40px -20px rgba(6,95,70,0.15);
}
.to-auth-card--wide { max-width: 480px; }

/* Choix du profil (page /inscription/ sans intent) — 2 colonnes séparées
   par un trait vertical, cercle logo au centre, cadres photo avec ombre. */
.to-choice {
	min-height: calc(100vh - 68px);
	padding: 88px 24px 88px;
	background: #fafaf9;
}
.to-choice-title {
	text-align: center;
	font-family: 'Fraunces', Georgia, serif;
	font-size: 32px;
	color: #064e3b;
	margin: 0 0 88px;
}
.to-choice-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
}
.to-choice-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.to-choice-frame {
	display: block;
	width: 100%;
	max-width: 380px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 48px -20px rgba(6,32,24,0.35), 0 4px 12px rgba(0,0,0,0.06);
	margin-bottom: 20px;
	transition: transform 0.15s ease;
}
.to-choice-frame:hover { transform: translateY(-3px); }
.to-choice-frame img { width: 100%; height: 260px; object-fit: cover; display: block; }
.to-choice-caption {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	font-size: 26px;
	color: #064e3b;
	margin: 0;
	text-shadow: 1px 1px 0 rgba(6,95,70,0.22), 2px 2px 0 rgba(6,95,70,0.14), 3px 3px 4px rgba(6,95,70,0.10);
}
.to-choice-sub { font-size: 14px; color: #78716c; margin: 2px 0 14px; }
.to-choice-col .to-btn { display: inline-block; }

.to-choice-divider {
	position: relative;
	width: 1px;
	background: linear-gradient(to bottom, transparent 0%, #e7e5e4 12%, #e7e5e4 88%, transparent 100%);
}
.to-choice-divider-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120px;
	height: 120px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(6,32,24,0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
}
.to-choice-divider-circle img { width: 100%; height: auto; display: block; }

/* Inscription en écran partagé (panneau de marque photo à gauche, séparateur
   central avec logo, formulaire à droite) */
.to-split {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	min-height: calc(100vh - 68px);
}
.to-split-brand {
	position: sticky;
	top: 68px;
	height: calc(100vh - 68px);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}
.to-split-brand-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 22px;
	max-width: 400px;
}
.to-split-brand-title {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 28px;
	color: #fff;
	margin: 0;
	line-height: 1.2;
}

.to-split-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; text-align: left; width: 100%; }
.to-split-highlights li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: #fff; line-height: 1.5; }
.to-split-highlight-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(255,255,255,0.95);
	color: #059669;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(6,95,70,0.08);
}
.to-split-highlight-icon svg { width: 17px; height: 17px; }

.to-split-testimonial {
	background: #fff;
	border-radius: 16px;
	padding: 22px 24px;
	width: 100%;
	text-align: left;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 20px 40px -24px rgba(0,0,0,0.4);
}
.to-split-testimonial-stars { color: #f59e0b; font-size: 14px; letter-spacing: 2px; }
.to-split-testimonial-text { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 15px; color: #292524; margin: 10px 0 16px; line-height: 1.5; }
.to-split-testimonial-author { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #78716c; }
.to-split-testimonial-author strong { display: block; font-size: 13.5px; color: #1c1917; }
.to-split-testimonial-meta { display: block; }
.to-split-testimonial-avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: #065f46;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	font-size: 16px;
	object-fit: cover;
}

/* Séparateur central (même traitement que le chooser) entre le panneau de
   marque et le formulaire. */
.to-split-divider {
	position: sticky;
	top: 68px;
	height: calc(100vh - 68px);
	width: 1px;
	background: linear-gradient(to bottom, transparent 0%, #e7e5e4 12%, #e7e5e4 88%, transparent 100%);
}
.to-split-divider-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100px;
	height: 100px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(6,32,24,0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	z-index: 2;
}
.to-split-divider-circle img { width: 100%; height: auto; display: block; }

.to-split-form {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	background: #fafaf9;
}

.to-auth-switch-role { text-align: center; font-size: 13px; color: #78716c; margin: -8px 0 20px; }
.to-auth-switch-role a { color: #065f46; font-weight: 600; }

/* Upload photo de profil en avatar rond (au lieu du bouton "Parcourir" natif) */
.to-photo-field--round { text-align: center; }
.to-photo-field-label { display: block; font-size: 12px; color: #78716c; margin-top: 8px; }
.to-photo-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin: 0 auto;
	border-radius: 999px;
	background: #ecfdf5;
	border: 2px dashed #a7c4b6;
	cursor: pointer;
	overflow: hidden;
	position: relative;
}
.to-photo-circle:hover { background: #d1fae5; }
.to-photo-circle-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: #059669;
	font-size: 11px;
	font-weight: 600;
}
.to-photo-circle-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.to-checkbox-field {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	color: #57534e;
	line-height: 1.5;
}
.to-checkbox-field input { width: auto; margin: 3px 0 0; flex-shrink: 0; }
.to-checkbox-field a { color: #065f46; }

@media (max-width: 860px) {
	.to-split { grid-template-columns: 1fr; }
	.to-split-brand { position: static; height: auto; padding: 40px 28px; }
	.to-split-divider { display: none; }
	.to-choice-row { grid-template-columns: 1fr; gap: 56px; }
	.to-choice-divider { display: none; }}

/* Point vert "en ligne" — réutilisable partout où une photo de profil est
   affichée. Wrapper SANS overflow:hidden (contrairement à l'avatar
   lui-même, circulaire) : le point doit rester visible même quand il
   déborde légèrement du cercle de la photo. */
.to-online-avatar-wrap { position: relative; display: inline-flex; }
.to-online-dot {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 13px;
	height: 13px;
	border-radius: 999px;
	background: #22c55e;
	border: 2px solid #fff;
	z-index: 1;
}
@keyframes to-admin-card-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(251,146,60,0.45); }
	50% { box-shadow: 0 0 0 8px rgba(251,146,60,0); }
}

.to-ca-actions { display: flex; gap: 8px; }

@media print {
	.to-app-topbar, .to-app-sidebar, .to-impersonate-banner, .to-ca-actions { display: none !important; }}

/* Comment ça marche (accueil) */
.to-how-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}
.to-how-step { text-align: center; }
.to-how-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #ecfdf5;
	color: #065f46;
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	margin-bottom: 12px;
}
.to-how-step h3 { font-size: 16px; margin: 0 0 6px; }
.to-how-step p { font-size: 13px; color: #78716c; margin: 0; }

/* "Nos 3 gages de confiance" (22/08) — 3 cartes premium côte à côte,
   images strictement identiques en dimensions (aspect-ratio + object-fit
   cover, peu importe le ratio des fichiers sources fournis). */
.to-trust-subtitle {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 40px;
	font-size: 15px;
	color: #57534e;
	line-height: 1.6;
}
/* Bloc "Réserver un hébergement..." (22/08, 4ᵉ passage) — HTML et
   classes entièrement recréés depuis zéro (ancienne classe
   .to-seo-block-title abandonnée), placés ici plutôt qu'en fin de
   fichier par précaution — au cas où une portion du fichier plus loin
   aurait été altérée lors du transfert/dézippage côté serveur (un
   souci d'encodage a été repéré sur ce fichier, cause exacte non
   confirmée). Structure la plus simple possible : un <h2> classique,
   text-align:center, sans aucun flex — même technique que
   .to-trust-subtitle juste au-dessus, qui se centre correctement. */
.to-reserve-heading { text-align: center; margin-bottom: 24px; }
.to-reserve-heading-title {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 22px;
	font-weight: 700;
	color: #064e3b;
	margin: 0 0 10px;
}
.to-reserve-heading-subtitle {
	max-width: 620px;
	margin: 0 auto;
	font-size: 15px;
	color: #57534e;
	line-height: 1.6;
}
.to-trust-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.to-trust-card {
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(28,25,23,0.06);
	border: 1px solid var(--to-stone-200);
	transition: transform .2s ease, box-shadow .2s ease;
	display: flex;
	flex-direction: column;
}
.to-trust-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px -20px rgba(6,95,70,0.28);
}
/* (22/08, vrai bug corrigé) — .to-trust-card-image-link { display:block }
   déclarée après écrasait le display:flex de .to-trust-card-image sur
   ce même élément (les deux classes cohabitent sur le lien <a> dans
   homepage.php) — plus aucun centrage n'agissait, d'où les images
   collées en haut à gauche au lieu d'être centrées. Fond blanc, bordure
   dorée, image agrandie de 20% (50% → 60%). Détachée des bords de la
   carte (marge + coins arrondis propres + ombre dédiée) pour un effet
   de cadre flottant plutôt qu'un bloc plaqué contre le bord. */
/* (22/08) Devenu <button> plutôt que <a> (clic = agrandir l'image dans
   une visionneuse, plus une redirection) — quelques réinitialisations
   propres aux boutons natifs (padding, largeur, curseur) que le <a>
   d'origine n'avait pas besoin de neutraliser. */
.to-trust-card-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
	background: #fff;
	border: 2px solid #d99a3d;
	border-radius: 14px;
	margin: 18px 18px 0;
	box-shadow: 0 10px 24px -8px rgba(28,25,23,0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 36px);
	padding: 0;
	cursor: pointer;
	font: inherit;
}
.to-trust-card-image img {
	width: 60%;
	height: 60%;
	object-fit: contain;
	transition: transform .35s ease;
}
.to-trust-card:hover .to-trust-card-image img { transform: scale(1.08); }
.to-trust-card-body { padding: 20px 26px 28px; }

/* Visionneuse plein écran des badges (22/08) — fond sombre, image
   centrée à taille lisible, croix de fermeture bien visible en haut à
   droite. */
.to-trust-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: rgba(20,18,16,0.88);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}
.to-trust-lightbox[hidden] { display: none; }
.to-trust-lightbox img {
	max-width: min(90vw, 560px);
	max-height: 80vh;
	border-radius: 16px;
	box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.to-trust-lightbox-close {
	position: absolute;
	top: 24px;
	right: 28px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: none;
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.to-trust-lightbox-close:hover { background: rgba(255,255,255,0.22); }

/* Maillage "13 départements" (22/08) — grille de tuiles avec dégradé et
   texte en surimpression, même codes visuels que .to-trust-card pour
   rester cohérent (Fraunces, radius, ombre). */
.to-dept-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 1100px;
	margin: 0 auto;
}
.to-dept-tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--to-stone-200);
	box-shadow: 0 1px 3px rgba(28,25,23,0.06);
	transition: transform .2s ease, box-shadow .2s ease;
}
/* (22/08, vrai bug corrigé) — remplace le fond CSS background-image
   (invisible pour Google Images, aucun attribut alt possible) par une
   vraie balise <img alt="...">, positionnée pour remplir le cadre
   exactement comme le faisait le fond CSS. */
.to-dept-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.to-dept-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px -14px rgba(6,95,70,0.3);
}
.to-dept-tile-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.68) 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 12px 14px;
}
.to-dept-tile-overlay h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	font-size: 15px;
	color: #fff;
	margin: 0;
}
.to-dept-tile-overlay p {
	font-size: 11px;
	color: #f5f5f4;
	margin: 2px 0 0;
	line-height: 1.4;
}
/* Bloc de texte SEO "Réserver un hébergement..." (22/08) — colonne
   étroite pour un confort de lecture, liens internes soulignés en vert
   sapin cohérents avec le reste du site. */
/* (22/08, demande de Vincent) — élargi de 760px à 1100px pour aligner
   exactement les bords gauche/droite avec .to-dept-grid juste au-dessus
   (module "Explorez l'Occitanie, département par département"). */
.to-seo-text {
	max-width: 1100px;
	margin: 0 auto;
	color: #44403c;
	font-size: 15px;
	line-height: 1.75;
}
.to-seo-text p { margin: 0 0 16px; }
.to-seo-text p:last-child { margin-bottom: 0; }
.to-seo-text a { color: #047857; font-weight: 600; text-decoration: underline; text-decoration-color: #a7f3d0; text-underline-offset: 2px; }
.to-seo-text a:hover { text-decoration-color: #047857; }

/* Image d'en-tête du bloc SEO (22/08) — pleine largeur du bloc (même
   1100px que le texte et la grille des départements), effet d'ombre
   porté pour la détacher du fond, placée sous le sous-titre. */
.to-seo-hero-image {
	max-width: 1100px;
	margin: 0 auto 28px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 20px 45px -18px rgba(28,25,23,0.3);
}
.to-seo-hero-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Comble les 3 cases vides de la 4ᵉ ligne (22/08) — 13 départements sur
   4 colonnes laissent 1 seule tuile sur la dernière ligne ; celle-ci en
   occupe la largeur restante exacte, fond plein plutôt qu'une photo
   pour bien la distinguer des tuiles département. */
.to-dept-tile--cta {
	grid-column: span 3;
	/* (22/08, vrai bug corrigé) — l'aspect-ratio 4/3 hérité de
	   .to-dept-tile calcule la hauteur par rapport à SA PROPRE largeur ;
	   comme cette tuile fait 3 colonnes de large, sa hauteur explosait
	   proportionnellement (3x plus haute qu'une tuile normale — le
	   "bloc vert énorme" repéré par Vincent). Hauteur fixe et modeste à
	   la place, indépendante de la largeur. */
	aspect-ratio: auto;
	min-height: 130px;
	background: linear-gradient(135deg, #0a7355 0%, #065f46 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.to-dept-tile--cta .to-dept-tile-overlay {
	position: static;
	background: none;
	align-items: center;
	text-align: center;
	padding: 20px;
}
.to-dept-tile--cta .to-dept-tile-overlay h3 { font-size: 17px; }
.to-dept-tile--cta .to-dept-tile-overlay p { font-size: 12.5px; color: #d1fae5; }
@media (max-width: 900px) {
	.to-dept-grid { grid-template-columns: repeat(2, 1fr); }
	.to-dept-tile--cta { grid-column: span 2; }}
@media (max-width: 560px) {
	.to-dept-grid { grid-template-columns: 1fr; }
	.to-dept-tile--cta { grid-column: span 1; }}
.to-trust-card-body h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 20px;
	color: #1c1917;
	margin: 0 0 6px;
}
.to-trust-card-subtitle {
	font-size: 13.5px;
	font-weight: 700;
	color: #047857;
	margin: 0 0 10px;
}
.to-trust-card-body p:not(.to-trust-card-subtitle) {
	font-size: 13.5px;
	color: #78716c;
	line-height: 1.65;
	margin: 0;
}
@media (max-width: 900px) {
	.to-trust-grid { grid-template-columns: 1fr; }}

/* Recherche promos/catalogue */
.to-promo-search {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 14px;
	padding: 18px;
}
.to-promo-search label { font-size: 12px; color: #57534e; display: flex; flex-direction: column; gap: 4px; }
.to-promo-search select {
	padding: 8px 10px;
	border: 1px solid #e7e5e4;
	border-radius: 8px;
	font-size: 14px;
	min-width: 140px;
}

.to-newsletter-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	max-width: 1120px;
	margin: 0 auto;
}
.to-newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.to-newsletter-form input {
	padding: 10px 14px;
	border: 1px solid #e7e5e4;
	border-radius: 999px;
	font-size: 14px;
	min-width: 220px;
}

/* Pages légales (politique de confidentialité, CGU/CGV, mentions légales) */
/* Page 404 premium */
.to-404 {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px 24px;
	background: radial-gradient(ellipse at top, #fdf3d9 0%, #fafaf9 60%);
}
.to-404-card {
	max-width: 620px;
	text-align: center;
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 24px;
	padding: 56px 48px;
	box-shadow: 0 24px 60px rgba(6,95,70,.1);
	position: relative;
	overflow: hidden;
}
.to-404-card::before {
	content: '';
	position: absolute;
	top: -80px; left: -80px;
	width: 240px; height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212,175,55,.16), transparent 70%);
}
.to-404-ornament { display: block; font-size: 26px; color: #b45309; margin-bottom: 6px; }
.to-404-code {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 88px;
	font-weight: 700;
	line-height: 1;
	margin: 0;
	background: linear-gradient(135deg, #064e3b, #b45309);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.to-404-card h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 24px;
	color: #1c1917;
	margin: 12px 0 16px;
}
.to-404-text { font-size: 15px; color: #57534e; line-height: 1.7; margin: 0 0 32px; }
.to-404-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 560px) {
	.to-404-card { padding: 36px 24px; }
	.to-404-code { font-size: 64px; }}

.to-legal-page { max-width: 1032px; margin: 0 auto; padding: 64px 24px 90px; }
.to-legal-card {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 22px;
	padding: 48px 56px;
	box-shadow: 0 20px 50px rgba(6,95,70,.08);
}
.to-legal-card::before {
	content: '';
	position: absolute;
	top: -70px;
	right: -70px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212,175,55,.14), transparent 70%);
	pointer-events: none;
}
.to-legal-card h1 { position: relative; margin: 0 0 36px; }
.to-legal-card .to-section-title-rule { flex: 1 1 60px; }
.to-legal-content { position: relative; color: #44403c; font-size: 14.5px; line-height: 1.8; }
.to-legal-content p { margin: 0 0 16px; }
.to-legal-content h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 19px;
	color: #064e3b;
	margin: 36px 0 14px;
	padding-top: 20px;
	border-top: 1px solid #ecebe9;
}
.to-legal-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.to-legal-content h3 { font-family: 'Fraunces', Georgia, serif; font-size: 15.5px; color: #b45309; margin: 22px 0 10px; }
.to-legal-content strong { color: #1c1917; }

/* Grille département "À propos" — titre vert + croix occitane sur la même
   ligne, photo déjà en base, 3 par ligne. La grille principale ne contient
   que 12 départements (toujours 4 lignes complètes, zéro ambiguïté
   d'agencement) ; le 13e + la carte "bilan" forment une ligne séparée en
   flex, à côté plutôt que dans la grille (l'agencement automatique CSS
   Grid plaçait la carte "bilan" de façon peu fiable selon les navigateurs
   quand elle faisait partie de la même grille que le reste). */
.to-about-dept-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 28px 0 20px;
}
.to-about-dept-lastrow {
	display: flex;
	gap: 20px;
	margin: 0 0 20px;
}
.to-about-dept-lastrow .to-about-dept-card { flex: 1 1 0; }
.to-about-dept-lastrow .to-about-dept-balance { flex: 2 1 0; margin: 0; }
.to-about-dept-card {
	display: block;
	text-decoration: none;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e7e5e4;
	box-shadow: 0 10px 26px rgba(6,95,70,.08);
	transition: transform .18s, box-shadow .18s;
}
.to-about-dept-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(6,95,70,.16); }
.to-about-dept-photo {
	display: block;
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	background-color: #ecfdf5;
}
.to-about-dept-title {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	font-size: 16px;
	color: #065f46;
}
.to-about-dept-cross { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; }
.to-about-dept-balance {
	background: linear-gradient(135deg,#fdf3d9,#fff);
	border: 1px solid #e9d9ab;
	border-radius: 16px;
	padding: 24px 26px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.to-about-dept-balance h3 { font-family: 'Fraunces', Georgia, serif; font-size: 17px; color: #b45309; margin: 0 0 10px; }
.to-about-dept-balance p { font-size: 13.5px; color: #57534e; margin: 0; }
.to-about-dept-balance a { color: #065f46; font-weight: 700; }

@media (max-width: 760px) {
	.to-about-dept-grid { grid-template-columns: repeat(2, 1fr); }
	.to-about-dept-lastrow { flex-direction: column; }}
@media (max-width: 480px) {
	.to-about-dept-grid { grid-template-columns: 1fr; }}
@media (max-width: 640px) {
	.to-legal-card { padding: 32px 24px; }
	.to-legal-content h2 { font-size: 17px; margin-top: 28px; }
	.to-nav-logo img { height: 72px; }
	.to-nav { padding: 4px 16px; }}

/* Spinner de chargement sur les boutons "Enregistrer" / "Envoyer" du site */
.to-btn--loading { opacity: 0.85; cursor: wait; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.to-btn-spinner {
	display: inline-block;
	width: 13px;
	height: 13px;
	border: 2px solid rgba(0,0,0,0.15);
	border-top-color: currentColor;
	border-radius: 999px;
	animation: to-btn-spin .7s linear infinite;
	flex-shrink: 0;
}
@keyframes to-btn-spin { to { transform: rotate(360deg); } }
.to-btn-spinner {
	display: inline-block;
	width: 13px;
	height: 13px;
	border: 2px solid rgba(255,255,255,0.5);
	border-top-color: #fff;
	border-radius: 999px;
	vertical-align: -2px;
	animation: to-btn-spin 0.7s linear infinite;
}
.to-btn--outline .to-btn-spinner,
.to-btn--ghost .to-btn-spinner,
.to-admin-btn--outline .to-btn-spinner,
.to-admin-btn .to-btn-spinner {
	border-color: rgba(6,95,70,0.3);
	border-top-color: #065f46;
}
@keyframes to-btn-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------
 * Page publique "Revendiquer"
 * ------------------------------------------------------------------ */
.to-claim-page { max-width: 780px; margin: 0 auto; padding: 56px 24px 80px; }
.to-claim-card {
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 20px;
	padding: 48px 52px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.to-claim-eyebrow {
	display: inline-block;
	background: #ecfdf5;
	color: #065f46;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	border-radius: 999px;
	padding: 5px 14px;
	margin: 0 0 16px;
}
.to-claim-card h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 30px;
	line-height: 1.25;
	color: #1c1917;
	margin: 0 0 18px;
}
.to-claim-intro { font-size: 15px; color: #57534e; line-height: 1.7; margin: 0 0 28px; }

.to-claim-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 32px; }
.to-claim-choice {
	display: flex;
	gap: 12px;
	background: #fafaf9;
	border: 1px solid #f0efed;
	border-radius: 14px;
	padding: 18px 20px;
}
.to-claim-choice-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #065f46;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}
.to-claim-choice strong { display: block; font-size: 14.5px; margin-bottom: 4px; }
.to-claim-choice p { margin: 0; font-size: 13px; color: #78716c; line-height: 1.5; }

.to-claim-listing-recap {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 14px;
	padding: 14px 18px;
	margin: 0 0 28px;
}
.to-claim-listing-recap img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.to-claim-listing-recap strong { display: block; font-size: 15px; }
.to-claim-listing-recap p { margin: 2px 0 0; font-size: 13px; color: #57534e; }

.to-claim-step { display: flex; gap: 16px; padding-top: 24px; border-top: 1px solid #f0efed; }
.to-claim-step-num {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #065f46;
	color: #fff;
	font-weight: 700;
	font-family: 'Fraunces', Georgia, serif;
	display: flex;
	align-items: center;
	justify-content: center;
}
.to-claim-step h2 { font-size: 18px; margin: 2px 0 8px; }
.to-claim-actions { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

.to-claim-howto { padding: 24px 0; border-top: 1px solid #f0efed; border-bottom: 1px solid #f0efed; margin-bottom: 28px; }
.to-claim-howto h2 { font-size: 17px; margin: 0 0 18px; }
.to-claim-howto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.to-claim-howto-step { display: flex; gap: 14px; }
.to-claim-howto-step strong { display: block; font-size: 14.5px; margin-bottom: 4px; }
.to-claim-howto-step p { margin: 0; font-size: 13px; color: #78716c; line-height: 1.55; }
@media (max-width: 640px) {
	.to-claim-howto-grid { grid-template-columns: 1fr; }}

@media (max-width: 640px) {
	.to-claim-card { padding: 32px 24px; }
	.to-claim-choices { grid-template-columns: 1fr; }}

/* Menu horizontal "Mon espace" (admin + hôte) — Prise en main / Guide
   annonce / Support & aide / Vendre votre bien. Fond doré chaleureux,
   volontairement distinct du vert de la sidebar et du bandeau supérieur
   sombre, pour bien le détacher comme une zone de navigation à part. */
.to-topnav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	background: linear-gradient(90deg, #fdf3d9, #f7ead0);
	border-bottom: 1px solid #e9d9ab;
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), 0 2px 8px rgba(180,140,40,.08);
	padding: 0 20px;
	overflow-x: auto;
}
.to-topnav-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	margin: 8px 0;
	border-radius: 999px;
	color: #57430f;
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}
.to-topnav-item:hover { background: rgba(255,255,255,.65); color: #422f00; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(180,140,40,.18); }
.to-topnav-item:hover .to-topnav-icon { transform: scale(1.08); }
.to-topnav-item.is-active { background: #fff; color: #064e3b; box-shadow: 0 6px 16px rgba(6,95,70,.16); }

.to-topnav-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 2px 5px rgba(0,0,0,0.18);
	transition: transform .2s;
}
.to-topnav-icon--blue   { background: linear-gradient(135deg,#3b82f6,#1d4ed8); }
.to-topnav-icon--orange { background: linear-gradient(135deg,#fb923c,#ea580c); }
.to-topnav-icon--teal   { background: linear-gradient(135deg,#2dd4bf,#0d9488); }
.to-topnav-icon--gold   { background: linear-gradient(135deg,#d99a3d,#b45309); }
.to-topnav-icon--purple { background: linear-gradient(135deg,#a78bfa,#7c3aed); }

@media (max-width: 640px) {
	.to-topnav { padding: 0 8px; }
	.to-topnav-item { padding: 10px 10px; font-size: 12.5px; gap: 7px; }
	.to-topnav-icon { width: 22px; height: 22px; }}

/* "Prise en main" — placeholder */
.to-topnav-placeholder {
	position: relative;
	overflow: hidden;
	max-width: 1040px;
	margin: 24px 0;
	text-align: left;
	padding: 44px 40px;
	background: linear-gradient(135deg,#ecfdf5,#fff 55%);
	border: 1px solid #e7e5e4;
	border-radius: 20px;
}
.to-topnav-placeholder::after,
.to-guide-hero::after,
.to-sell-hero::after,
.to-faq-hero::after {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212,175,55,.16), transparent 70%);
	pointer-events: none;
}
.to-topnav-placeholder-icon { position: relative; width: 60px; height: 60px; margin: 0 0 20px; }
.to-topnav-placeholder-icon svg { width: 26px; height: 26px; }
.to-topnav-placeholder h2 { position: relative; font-family: 'Fraunces', Georgia, serif; font-size: 24px; color: #064e3b; margin: 0 0 10px; }
.to-topnav-placeholder p { position: relative; font-size: 14.5px; color: #57534e; line-height: 1.6; margin: 0; max-width: 640px; }

/* "Guide annonce" */
.to-guide-hero {
	position: relative;
	overflow: hidden;
	max-width: 1040px;
	margin: 0 0 36px;
	text-align: left;
	padding: 32px 36px;
	background: linear-gradient(135deg,#ecfdf5,#fff 60%);
	border: 1px solid #d6e9de;
	border-radius: 20px;
}
.to-guide-hero-icon { position: relative; width: 60px; height: 60px; margin: 0 0 16px; }
.to-guide-hero-icon svg { width: 26px; height: 26px; }
.to-guide-hero h2 { position: relative; font-family: 'Fraunces', Georgia, serif; font-size: 26px; color: #064e3b; margin: 0 0 10px; }
.to-guide-hero p { position: relative; font-size: 14.5px; color: #57534e; line-height: 1.6; margin: 0; max-width: 640px; }

.to-guide-steps { max-width: 860px; margin: 0; display: flex; flex-direction: column; }
.to-guide-step { display: flex; gap: 20px; }
.to-guide-step-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.to-guide-step-num {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg,#0a7355,#065f46);
	color: #fff;
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	font-size: 15px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(6,95,70,0.3);
}
.to-guide-step-line { flex: 1 1 auto; width: 2px; background: #d6e9de; margin: 4px 0; min-height: 24px; }
.to-guide-step-body { padding-bottom: 32px; }
.to-guide-step-body h3 { font-family: 'Fraunces', Georgia, serif; font-size: 17px; color: #1c1917; margin: 4px 0 6px; }
.to-guide-step-body p { font-size: 14px; color: #57534e; line-height: 1.6; margin: 0; max-width: 560px; }

/* "Vendre votre bien" */
.to-sell-hero {
	position: relative;
	overflow: hidden;
	max-width: 1040px;
	margin: 0 0 28px;
	text-align: left;
	background: linear-gradient(135deg,#fdf3d9,#fff 60%);
	border: 1px solid #e9d9ab;
	border-radius: 20px;
	padding: 36px 40px;
}
.to-sell-hero-icon { position: relative; width: 60px; height: 60px; margin: 0 0 16px; }
.to-sell-hero-icon svg { width: 26px; height: 26px; }
.to-sell-hero h2 { position: relative; font-family: 'Fraunces', Georgia, serif; font-size: 26px; color: #064e3b; margin: 0 0 12px; max-width: 700px; }
.to-sell-hero p { position: relative; font-size: 14.5px; color: #44403c; line-height: 1.7; margin: 0; max-width: 700px; }

.to-sell-form { max-width: 1040px; margin: 0; background: #fff; border: 1px solid #e7e5e4; border-radius: 16px; padding: 32px; }
.to-sell-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
.to-sell-form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #44403c; }
.to-sell-form-grid input, .to-sell-form-grid select {
	padding: 9px 10px; border: 1px solid #d6d3d1; border-radius: 8px; font-size: 14px; font-family: inherit;
}
.to-sell-form-full { grid-column: 1 / -1; }
.to-sell-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #44403c; line-height: 1.5; margin: 0 0 12px; max-width: 760px; }
.to-sell-checkbox input { margin-top: 3px; flex-shrink: 0; }
.to-sell-checkbox a { color: #065f46; }
.to-sell-form-note { font-size: 12px; color: #a8a29e; margin: 14px 0 0; }

/* Arguments de vente (4 cartes) + "Comment ça marche" (3 étapes) */
.to-sell-advantages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1040px; margin: 0 0 32px; }
.to-sell-advantage { padding: 18px 20px; background: #fff; border: 1px solid #e7e5e4; border-radius: 12px; }
.to-sell-advantage h4 { font-family: 'Fraunces', Georgia, serif; font-size: 15px; color: #064e3b; margin: 0 0 6px; }
.to-sell-advantage p { font-size: 13px; color: #57534e; line-height: 1.55; margin: 0; }
.to-sell-steps { max-width: 1040px; margin: 0 0 32px; }
.to-sell-steps h3 { font-family: 'Fraunces', Georgia, serif; font-size: 17px; color: #1c1917; margin: 0 0 16px; }
.to-sell-steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.to-sell-step { text-align: center; padding: 16px 12px; background: linear-gradient(180deg,#fdf3d9,#fff); border: 1px solid #e9d9ab; border-radius: 12px; }
.to-sell-step-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: linear-gradient(135deg,#d99a3d,#b45309); color: #fff;
	font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 14px;
	margin-bottom: 10px;
}
.to-sell-step p { font-size: 13px; color: #57430f; margin: 0; font-weight: 600; }

@media (max-width: 900px) {
	.to-sell-advantages { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 640px) {
	.to-sell-advantages { grid-template-columns: 1fr; }
	.to-sell-steps-row { grid-template-columns: 1fr; }}

/* "Questions fréquentes" (FAQ) */
.to-faq-hero {
	position: relative;
	overflow: hidden;
	max-width: 1040px;
	margin: 0 0 32px;
	text-align: left;
	padding: 32px 36px;
	background: linear-gradient(135deg,#f3e8ff,#fff 60%);
	border: 1px solid #e2d3f5;
	border-radius: 20px;
}
.to-faq-hero-icon { position: relative; width: 60px; height: 60px; margin: 0 0 16px; }
.to-faq-hero h2 { position: relative; font-family: 'Fraunces', Georgia, serif; font-size: 26px; color: #064e3b; margin: 0 0 10px; }
.to-faq-hero p { position: relative; font-size: 14.5px; color: #57534e; line-height: 1.6; margin: 0; max-width: 640px; }

/* Séparateur de section sur la FAQ admin (vue fusionnée admin+hôtes+
   voyageurs, cf. TO_Core_Faq::render_page()) — jamais affiché sur les
   pages FAQ hôte/voyageur elles-mêmes, qui restent mono-audience. */
.to-faq-group-heading {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 20px;
	color: #064e3b;
	margin: 36px 0 16px;
	padding-top: 20px;
	border-top: 1px solid #e7e5e4;
}
.to-faq-group-heading:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

.to-faq-block { max-width: 1040px; margin: 0 0 32px; }
.to-faq-block h3 { font-family: 'Fraunces', Georgia, serif; font-size: 18px; color: #1c1917; margin: 0 0 14px; }
.to-faq-item { border: 1px solid #e9d9ab; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.to-faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	background: linear-gradient(90deg, #fdf3d9, #f7ead0);
	border: none;
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	color: #57430f;
	cursor: pointer;
}
.to-faq-chevron { flex-shrink: 0; transition: transform .2s; }
.to-faq-item.is-open .to-faq-chevron { transform: rotate(180deg); }
.to-faq-answer { max-height: 0; overflow: hidden; transition: max-height .25s ease; background: #fff; }
.to-faq-item.is-open .to-faq-answer { max-height: 3000px; }
.to-faq-answer p { margin: 0; padding: 14px 18px; font-size: 13.5px; line-height: 1.6; color: #44403c; }
.to-faq-answer ul { margin: 0; padding: 0 18px 14px 38px; font-size: 13.5px; line-height: 1.7; color: #44403c; }
.to-faq-answer li { margin-bottom: 6px; }
.to-faq-answer img + p { padding-top: 14px; }

/* Images des blocs du guide d'annonce — taille naturelle, jamais étirées ;
   se réduisent seulement si elles dépassent la largeur disponible. */
.to-guide-block-img { display: block; max-width: min(100%, 640px); width: auto; height: auto; margin: 16px 18px 0; border-radius: 10px; border: 1px solid #e7e5e4; }
.to-guide-block-plan { font-size: 10.5px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 480px) { .to-guide-block-plan { font-size: 9px; padding: 3px 7px; }}

/* Widget "Découvrir Emma" (remplace l'intitulé "Options" du menu vertical hôte) */
.to-emma-widget { position: relative; margin: 10px 12px 6px; padding: 10px; border-radius: 12px; background: linear-gradient(135deg, #fdf3d9, #f0dba8); }
.to-emma-widget-main { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.to-emma-widget-photo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); flex-shrink: 0; }
.to-emma-widget-title { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 13.5px; color: #57430f; flex: 1 1 auto; }
.to-emma-widget-toggle {
	position: absolute;
	top: 8px; right: 8px;
	z-index: 2;
	width: 22px; height: 22px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.6);
	color: #57430f;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.to-emma-widget-menu { display: none; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(87,67,15,.15); }
.to-emma-widget.is-open .to-emma-widget-menu { display: flex; }
.to-emma-widget-menu a { font-size: 12.5px; font-weight: 600; color: #57430f; text-decoration: none; padding: 5px 6px; border-radius: 6px; }
/* Sans "color" explicite ici, la règle générique ".to-app-nav a:hover"
   (texte blanc, prévue pour les liens sur fond vert de la sidebar)
   s'appliquait aussi à ces liens-ci — sur le fond doré clair du widget,
   du texte blanc au survol devient invisible. */
.to-emma-widget-menu a:hover, .to-emma-widget-menu a.is-active { background: rgba(255,255,255,.6); color: #422f00; }

/* Pages thématiques Emma — cartes cliquables sous la page "Découvrir" */
.to-emma-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1040px; }
.to-emma-topic-card {
	display: block;
	padding: 20px;
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 14px;
	text-decoration: none;
	transition: transform .18s, box-shadow .18s;
}
.to-emma-topic-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(180,140,40,.16); border-color: #e9d9ab; }
.to-emma-topic-card h3 { font-family: 'Fraunces', Georgia, serif; font-size: 16px; color: #064e3b; margin: 0 0 8px; }
.to-emma-topic-card p { font-size: 13px; color: #57534e; line-height: 1.5; margin: 0 0 10px; }
.to-emma-topic-more { font-size: 12.5px; font-weight: 700; color: #b45309; }
.to-emma-topic-card--premium { display: flex; flex-direction: column; }
.to-emma-topic-icon {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: linear-gradient(135deg, #d99a3d, #b45309);
	margin-bottom: 14px;
}
.to-emma-topic-card--premium p { flex: 1 1 auto; margin-bottom: 16px; }
.to-emma-topic-cta { align-self: flex-start; font-size: 13px; padding: 9px 18px; }

/* "Découvrir Emma" (section=emma-decouvrir) — vitrine repensée le 17/08 :
   intro + liste à puces dans le hero, puis 4 blocs empilés (un par
   fonction), chacun avec bannière titrée orangée + grand visuel. */
.to-emma-decouvrir-hero { max-width: 900px; margin: 0 auto 36px; }
.to-emma-hero-video-wrap { max-width: 1280px; margin: 0 auto; }
.to-emma-decouvrir-list { position: relative; list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.to-emma-decouvrir-list li {
	font-size: 14px;
	color: #44403c;
	line-height: 1.6;
	padding-left: 22px;
	position: relative;
}
.to-emma-decouvrir-list li::before {
	content: '';
	position: absolute;
	left: 0; top: 8px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, #d99a3d, #b45309);
}
.to-emma-decouvrir-list li strong { color: #064e3b; }
.to-emma-beta-note {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 20px 0 0;
	padding: 10px 14px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 10px;
	color: #92400e;
	font-size: 12.5px;
	line-height: 1.55;
	max-width: 640px;
}
.to-emma-beta-note svg { flex: 0 0 auto; margin-top: 1px; }

.to-emma-showcase { display: flex; flex-direction: column; gap: 26px; max-width: 1280px; margin: 32px 0 10px; }
.to-emma-showcase-block {
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 14px 34px -22px rgba(28,25,23,0.28);
}
.to-emma-showcase-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	background: linear-gradient(120deg, #d99a3d, #b45309);
}
.to-emma-showcase-banner-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255,255,255,0.22);
}
.to-emma-showcase-banner h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 17px;
	color: #fff;
	margin: 0;
}
.to-emma-showcase-body { padding: 28px 30px; }

/* Ligne vidéo + texte (20/08) — alternée gauche/droite d'un bloc à
   l'autre (cf. --reverse) pour casser la monotonie sur une page à 4
   sections. La plaquette (image) reste affichée plus bas dans le flux,
   inchangée — la vidéo s'ajoute, elle ne la remplace pas. */
.to-emma-showcase-video-row { display: grid; grid-template-columns: 480px 1fr; gap: 32px; align-items: center; }
.to-emma-showcase-video-row--reverse { grid-template-columns: 1fr 480px; }
.to-emma-showcase-video-row--reverse .to-emma-video-frame { order: 2; }
.to-emma-showcase-video-row--reverse .to-emma-showcase-text { order: 1; }

/* Cadre vidéo portrait (HeyGen) avec arrière-plan flouté (20/08) — évite
   l'écran noir qui apparaît autour d'une vidéo verticale posée dans un
   cadre plus large. L'image de fond est floutée + assombrie ; la vidéo
   elle-même reste nette, centrée par-dessus. */
.to-emma-video-frame {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	overflow: hidden;
	background-size: cover;
	background-position: center 20%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.to-emma-video-frame::before {
	content: "";
	position: absolute;
	inset: -10px;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}
.to-emma-video-frame-tint { position: absolute; inset: 0; background: rgba(11,61,46,.4); }
.to-emma-video-portrait {
	position: relative;
	z-index: 1;
	width: auto;
	height: 92%;
	max-width: 92%;
	aspect-ratio: 9 / 16;
	border-radius: 10px;
	border: 2px solid #fff;
	box-shadow: 0 10px 26px -10px rgba(0,0,0,.5);
	background: #072b20;
}
.to-emma-video-frame--hero {
	max-width: 1280px;
	aspect-ratio: 21 / 9;
	margin: 28px 0;
	border-radius: 20px;
}
.to-emma-video-frame--hero .to-emma-video-portrait { height: 88%; }

.to-emma-download-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; }

.to-emma-showcase-text p { font-size: 14.5px; color: #44403c; line-height: 1.75; margin: 0 0 14px; }
.to-emma-showcase-text p:last-child { margin-bottom: 14px; }
.to-emma-showcase-media { margin-top: 22px; }
.to-emma-showcase-media-zoom {
	display: block;
	width: 55%;
	margin: 0 auto;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
	text-align: left;
}
.to-emma-showcase-media-zoom img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.to-emma-showcase-media-zoom:hover img { transform: scale(1.015); box-shadow: 0 12px 28px rgba(28,25,23,.2); }
.to-emma-showcase-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@media (max-width: 780px) {
	.to-emma-showcase-video-row,
	.to-emma-showcase-video-row--reverse { grid-template-columns: 1fr; }
	.to-emma-showcase-video-row--reverse .to-emma-video-frame,
	.to-emma-showcase-video-row--reverse .to-emma-showcase-text { order: unset; }
	.to-emma-video-frame { aspect-ratio: 16 / 10; }
	.to-emma-video-frame--hero { aspect-ratio: 4 / 3; }}
@media (max-width: 640px) {
	.to-emma-showcase-body { padding: 22px; }
	.to-emma-showcase-media-zoom { width: 100%; }}

/* Lightbox partagée des visuels "Découvrir Emma" — piège CSS déjà
   documenté sur ce projet : [hidden] et une classe ont la même
   spécificité et [hidden] charge avant, donc une règle plus tardive de
   même spécificité peut le faire perdre — d'où la règle explicite
   ".to-emma-lightbox[hidden]" ci-dessous plutôt que de compter sur
   l'attribut seul. */
.to-emma-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.to-emma-lightbox[hidden] { display: none; }
.to-emma-lightbox-backdrop { position: absolute; inset: 0; background: rgba(28,25,23,0.8); }
.to-emma-lightbox img { position: relative; max-width: 100%; max-height: 90vh; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.to-emma-lightbox-close {
	position: absolute;
	top: 18px; right: 22px;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	color: #fff;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.to-emma-lightbox-close:hover { background: rgba(255,255,255,0.28); }

/* "Emma — Gestion des avis Google" (section=emma-avis-google) — page qui
   réunit vitrine commerciale + partie technique Premium+, cf.
   TO_Core_Emma_Pages::render_emma_avis_google(). */
.to-emma-sell { margin: 28px 0 40px; }
.to-emma-sell-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 32px; }
.to-emma-sell-card { background: #fffbf0; border: 1px solid #f0dfb8; border-radius: 14px; padding: 20px 18px; }
.to-emma-sell-icon {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: linear-gradient(135deg, #d99a3d, #b45309);
	margin-bottom: 12px;
}
.to-emma-sell-card h3 { font-family: 'Fraunces', Georgia, serif; font-size: 15px; color: #064e3b; margin: 0 0 8px; }
.to-emma-sell-card p { font-size: 12.5px; color: #57534e; line-height: 1.55; margin: 0; }

.to-emma-steps { background: #f7f5f0; border-radius: 14px; padding: 22px 24px; margin: 0 0 28px; }
.to-emma-steps h3 { font-family: 'Fraunces', Georgia, serif; font-size: 15px; color: #064e3b; margin: 0 0 14px; }
.to-emma-steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.to-emma-step { font-size: 12.5px; color: #44403c; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; }
.to-emma-step span { width: 26px; height: 26px; border-radius: 50%; background: #b45309; color: #fff; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center; }

.to-emma-cta-band {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	background: linear-gradient(120deg,#064e3b,#065f46); border-radius: 16px; padding: 22px 26px; color: #fff;
}
.to-emma-cta-band strong { font-family: 'Fraunces', Georgia, serif; font-size: 16px; }
.to-emma-cta-band p { font-size: 13px; color: #d1fae5; margin: 4px 0 0; }
.to-emma-included-band { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; border-radius: 12px; padding: 14px 18px; font-weight: 600; font-size: 13.5px; text-align: center; }

.to-emma-tech { border-top: 1px solid #e7e5e4; padding-top: 28px; }
.to-emma-tech-title { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', Georgia, serif; font-size: 19px; color: #064e3b; margin: 0 0 18px; }
.to-emma-step2-title {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 16px;
	color: #064e3b;
	margin: 26px 0 14px;
	padding-top: 22px;
	border-top: 1px solid #e7e5e4;
}
.to-emma-step2-hint { display: block; font-family: inherit; font-size: 12px; font-weight: 400; color: #a8a29e; margin-top: 2px; }
.to-emma-lock-badge { background: #b45309; color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: 3px 10px; }
.to-emma-tech-body { position: relative; display: flex; flex-direction: column; gap: 16px; }
.to-emma-lock-overlay {
	position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	background: rgba(250,249,245,.7); border-radius: 14px; text-align: center;
}
.to-emma-lock-icon {
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: linear-gradient(135deg, #d99a3d, #b45309);
	box-shadow: 0 6px 16px rgba(180,83,9,.25);
}
.to-emma-lock-overlay p { font-size: 14px; font-weight: 600; color: #1c1917; margin: 0; }
.to-emma-help { font-size: 13px; color: #78716c; margin: 0 0 14px; }
.to-emma-soon { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #a8a29e; margin-left: 8px; }
.to-emma-connected-badge { font-size: 13.5px; font-weight: 600; color: #065f46; margin: 0 0 6px; }
.to-emma-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.to-emma-activity-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #1c1917; padding: 8px 0; border-bottom: 1px solid #f0efe9; }
.to-emma-activity-date { color: #a8a29e; font-size: 12px; white-space: nowrap; }
.to-emma-watch-result { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.to-emma-watch-result p { margin: 0 0 4px; font-size: 14px; color: #1c1917; }
.to-emma-watch-result p:last-child { margin-bottom: 0; }

/* Aperçu de marché local et événements (page "Veille événementielle") */
.to-emma-occupancy, .to-emma-events { margin-top: 18px; }
.to-emma-occupancy h4, .to-emma-events h4 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 14.5px;
	color: #064e3b;
	margin: 0 0 10px;
}
.to-emma-occupancy-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.to-emma-occupancy-table th, .to-emma-occupancy-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e7e5e4; }
.to-emma-occupancy-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #78716c; font-weight: 700; }
.to-emma-occupancy-table td:not(:first-child), .to-emma-occupancy-table th:not(:first-child) { text-align: right; }
.to-emma-occupancy-note { font-size: 12px; color: #78716c; margin: 10px 0 0; line-height: 1.5; }
.to-emma-events-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.to-emma-events-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13.5px;
}
.to-emma-events-list li span { color: #78716c; font-size: 12.5px; white-space: nowrap; }
.to-emma-events-list li a { color: #1c1917; font-weight: 600; text-decoration: none; }
.to-emma-events-list li a:hover { color: #b45309; text-decoration: underline; }

/* Bloc global "Vérifier les événements locaux" + filtre + vignette annonce */
.to-emma-global-events { margin-bottom: 18px; }
.to-emma-events-filter { margin: 14px 0 10px; }
.to-emma-events-filter label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #57534e; max-width: 260px; }
.to-emma-events-filter select { padding: 8px 10px; border: 1px solid #e7e5e4; border-radius: 8px; font-size: 13px; }

/* Chenillard affiché pendant le rechargement de page déclenché par le
   changement de département (le filtre est géré côté serveur). */
.to-emma-dept-loader { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #78716c; padding: 8px 0; }
.to-emma-dept-loader[hidden] { display: none; }
.to-emma-dept-loader span:not(:last-child) {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #d99a3d;
	animation: to-emma-dept-loader-bounce 1s infinite ease-in-out both;
}
.to-emma-dept-loader span:nth-child(1) { animation-delay: -0.28s; }
.to-emma-dept-loader span:nth-child(2) { animation-delay: -0.14s; }
@keyframes to-emma-dept-loader-bounce {
	0%, 80%, 100% { transform: scale(0.4); opacity: .5; }
	40% { transform: scale(1); opacity: 1; }
}
.to-emma-listing-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

/* Cartes événement "premium" (vignette + titre cliquable + ville/date) —
   remplace l'ancienne liste texte du bloc "Vérifier les événements
   locaux" (design plus soigné, demandé le 18/08). */
.to-emma-event-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.to-emma-event-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 12px;
	padding: 10px 16px;
	transition: box-shadow .15s ease, border-color .15s ease;
}
/* Piège déjà rencontré sur ce projet : une règle de classe avec
   "display:flex" a la même spécificité que le [hidden] du navigateur,
   et l'emporte toujours puisque ce dernier vit dans la feuille de style
   par défaut (priorité la plus basse) — d'où cette règle explicite,
   sans quoi les cartes au-delà de la 5e restaient visibles malgré
   l'attribut hidden posé côté PHP. */
.to-emma-event-card[hidden] { display: none; }
.to-emma-event-card:hover { box-shadow: 0 8px 20px -12px rgba(28,25,23,.18); border-color: #d99a3d; }
.to-emma-event-card-thumb {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	object-fit: cover;
	background: #f5f5f4;
}
.to-emma-event-card-thumb--empty { display: flex; align-items: center; justify-content: center; }
.to-emma-event-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.to-emma-event-card-body a, .to-emma-event-card-body strong { font-size: 14px; font-weight: 600; color: #1c1917; text-decoration: none; }
.to-emma-event-card-body a:hover { color: #b45309; text-decoration: underline; }
.to-emma-event-card-meta { font-size: 12.5px; color: #78716c; }
.to-emma-listing-thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #f5f5f4; }
.to-emma-listing-thumb--empty { display: inline-block; }

@media (max-width: 900px) {
	.to-emma-sell-grid { grid-template-columns: repeat(2, 1fr); }
	.to-emma-steps-row { grid-template-columns: 1fr; }}
@media (max-width: 640px) {
	.to-emma-sell-grid { grid-template-columns: 1fr; }}

@media (max-width: 640px) {
	.to-emma-topics { grid-template-columns: 1fr; }
	.to-sell-form-grid { grid-template-columns: 1fr; }
	.to-guide-step { gap: 14px; }}

/* Icône image (menu horizontal) — logo réel plutôt qu'un pictogramme
   coloré, utilisé pour "Les sites du réseau" (identité visuelle propre au
   réseau, pas une simple icône fonctionnelle). */
.to-topnav-icon--img { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); padding: 3px; box-sizing: border-box; }
.to-topnav-icon--img img { width: 100%; height: 100%; object-fit: contain; }

/* "Les sites du réseau" */
.to-network-hero-icon { width: 64px; height: 64px; object-fit: contain; margin: 0 0 16px; display: block; position: relative; }
.to-network-subscribe { max-width: 1040px; margin: 0 0 32px; }
.to-network-subscribe h3 { font-family: 'Fraunces', Georgia, serif; font-size: 17px; color: #1c1917; margin: 0 0 8px; }
.to-network-subscribe p { font-size: 13.5px; color: #57534e; margin: 0 0 16px; }
.to-network-subscribe-form { display: flex; gap: 10px; flex-wrap: wrap; }
.to-network-subscribe-form input[type="email"] {
	flex: 1 1 260px;
	padding: 10px 14px;
	border: 1px solid #d6d3d1;
	border-radius: 999px;
	font-size: 14px;
	font-family: inherit;
}

.to-network-sites { display: flex; flex-direction: column; gap: 16px; max-width: 1040px; }
.to-network-site-row {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 22px 26px;
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 16px;
	transition: box-shadow .18s, transform .18s;
}
.to-network-site-row:hover { box-shadow: 0 10px 24px rgba(6,95,70,.1); transform: translateY(-2px); }
.to-network-site-logo {
	width: 168px; height: 168px; object-fit: contain; flex-shrink: 0;
	border-radius: 14px; background: #faf9f5; border: 1px solid #f0efe9; padding: 10px;
}
.to-network-site-text { flex: 1 1 auto; }
.to-network-site-text h4 { font-family: 'Fraunces', Georgia, serif; font-size: 19px; color: #064e3b; margin: 0 0 8px; }
.to-network-site-text p { font-size: 14.5px; color: #57534e; line-height: 1.6; margin: 0; }
.to-network-site-cta { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 640px) {
	.to-network-site-row { flex-direction: column; align-items: flex-start; text-align: left; }
	.to-network-site-logo { width: 120px; height: 120px; align-self: center; }
	.to-network-site-cta { align-self: stretch; text-align: center; }}

/* Vitrine "Emailing" (MailRun) — palette reprise du site MailRun lui-même
   (teal/orange), volontairement distincte du vert/doré du reste du site
   pour bien identifier cette page comme la mise en avant d'un outil
   séparé plutôt qu'une fonctionnalité native de Tourisme Occitanie. */
.to-mailrun-promo { --mr-teal: #3a8fa3; --mr-teal-dark: #2a6f80; --mr-orange: #f7941d; --mr-orange-dark: #d97a0f; --mr-dark: #1b2a38; }
.to-mailrun-hero {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 36px;
	align-items: center;
	background: linear-gradient(145deg, var(--mr-dark), #1e3d52 100%);
	border-radius: 20px;
	padding: 44px 40px;
	margin-bottom: 32px;
}
.to-mailrun-hero-topline { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.to-mailrun-eyebrow {
	display: inline-flex;
	white-space: nowrap;
	background: rgba(247,148,29,.15);
	border: 1px solid rgba(247,148,29,.35);
	color: #fdb44b;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
}
.to-mailrun-logo-frame {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 14px;
	padding: 18px 28px;
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.to-mailrun-logo-frame img { display: block; height: 68px; width: auto; }
.to-mailrun-hero-text h2 { font-family: 'Fraunces', Georgia, serif; font-size: 26px; color: #fff; margin: 0 0 14px; line-height: 1.25; }
.to-mailrun-hero-text p { color: rgba(255,255,255,.75); font-size: 14.5px; line-height: 1.7; margin: 0 0 24px; }
.to-mailrun-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--mr-orange), var(--mr-orange-dark));
	color: #fff;
	font-weight: 700;
	font-size: 14.5px;
	padding: 13px 26px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(247,148,29,.4);
	transition: transform .15s, box-shadow .15s;
}
.to-mailrun-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(247,148,29,.5); }
.to-mailrun-hero-text p.to-mailrun-micro { color: rgba(255,255,255,.5); font-size: 12px; margin: 12px 0 0; }
.to-mailrun-hero-video { border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.35); background: #000; }
.to-mailrun-hero-video video { display: block; width: 100%; aspect-ratio: 16/9; }
.to-mailrun-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 32px; }
.to-mailrun-feature { background: #fff; border: 1.5px solid #e7e5e4; border-radius: 14px; padding: 22px 20px; transition: border-color .15s, transform .15s; }
.to-mailrun-feature:hover { border-color: var(--mr-teal); transform: translateY(-3px); }
.to-mailrun-feature-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--mr-teal), var(--mr-teal-dark));
	margin-bottom: 14px;
	box-shadow: 0 4px 12px rgba(58,143,163,.3);
}
.to-mailrun-feature h3 { font-family: 'Fraunces', Georgia, serif; font-size: 15px; color: var(--mr-dark); margin: 0 0 8px; }
.to-mailrun-feature p { font-size: 13px; color: #57534e; line-height: 1.6; margin: 0; }
.to-mailrun-footer-cta {
	text-align: center;
	background: linear-gradient(135deg, var(--mr-teal-dark), var(--mr-teal));
	border-radius: 16px;
	padding: 36px 24px;
}
.to-mailrun-footer-cta h3 { font-family: 'Fraunces', Georgia, serif; color: #fff; font-size: 19px; margin: 0 0 18px; }
@media (max-width: 900px) {
	.to-mailrun-hero { grid-template-columns: 1fr; }
	.to-mailrun-features { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 560px) {
	.to-mailrun-features { grid-template-columns: 1fr; }}


/* Labels/textarea en pleine largeur directement dans .to-sell-form (hors
   grille 2 colonnes) — utilisé par le formulaire d'invitation par e-mail. */
.to-sell-form > label:not(.to-sell-checkbox) { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #44403c; margin: 0 0 16px; }
.to-sell-form textarea {
	padding: 9px 10px; border: 1px solid #d6d3d1; border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical;
}

/* "Les Incontournables de la semaine" — bloc page d'accueil (22/08,
   demande de Vincent) — fond dégradé bleu marine + touches dorées,
   cohérent avec le style déjà établi pour Super Hôte / Classement,
   juste après le hero pour un maximum de visibilité. Scroll horizontal
   plutôt qu'une grille classique : effet "vitrine" plus marqué. Aucun
   chiffre de disponibilité n'apparaît ici (jamais côté public). */
/* "Affichage privilège" — page d'accueil (22/08, 2ᵉ passage, demande de
   Vincent) — nom clarifié (ne dit plus "Les Incontournables", pour ne
   plus mélanger les 2 produits aux yeux des hôtes) + design revu : le
   bleu marine plein format faisait trop "pavé" et tranchait avec le
   reste du site. Dégradé pastel du même bleu, et pleine largeur de
   l'écran (technique "full bleed" : la section déborde volontairement de
   son conteneur centré pour couvrir tout le viewport), plutôt qu'un
   rectangle contenu dans la largeur habituelle des sections. */
.to-privilege-home {
	background: linear-gradient(180deg, #0f2847 0%, #4a6fa5 55%, #dbe7f3 100%);
	padding: 48px 0;
	width: 100vw;
	max-width: none;
	margin-left: calc(-50vw + 50%);
}
.to-privilege-home-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; text-align: center; }
.to-privilege-eyebrow { color: #f7c65b; }
.to-privilege-home-title {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	font-size: 28px;
	color: #fff;
	margin: 4px 0 8px;
}
.to-privilege-home-subtitle { color: #e2e8f4; font-size: 14px; margin: 0 0 28px; max-width: 560px; margin-left: auto; margin-right: auto; }
.to-privilege-carousel .to-carousel-arrow { background: #fff; }
/* (22/08, 4ᵉ passage, vrai bug corrigé) — .to-section impose déjà
   max-width:1120px à TOUTE section (y compris celle-ci) ; max-width
   plafonne toujours width quelle que soit la cascade, donc mon
   width:100vw était bien appliqué mais silencieusement plafonné à
   1120px — d'où ce bloc qui démarrait à gauche (à cause du margin-left
   négatif) sans jamais atteindre le bord droit de l'écran. Même
   principe que .to-section--muted, qui annule déjà ce plafond pour son
   propre cas d'usage. */
/* Cartes centrées plutôt qu'alignées à gauche quand il y en a moins que
   la capacité d'affichage du carrousel (ex. 2 annonces sur un espace qui
   pourrait en montrer 4) — comportement par défaut de flex
   (justify-content: flex-start) non voulu ici, sans toucher au
   carrousel "À la une" qui garde le sien. */
.to-privilege-carousel .to-featured-track { justify-content: center; }

/* "Nos Super Hôtes" — page d'accueil (22/08, demande de Vincent) — met en
   avant les PROFILS (avatar + nom) plutôt que les annonces, contrairement
   au reste de la page. */
.to-super-hosts-section {
	background: linear-gradient(180deg, #f6f4e6 0%, #eef3ea 100%);
	border: 1px solid #dbe6d5;
	border-radius: 28px;
	padding: 48px 32px 52px;
}
/* Carrousel (défilement 2 par 2 sur mobile) — .to-super-hosts-row porte
   aussi .to-featured-track (mécanique de scroll/snap + flèches déjà
   définie plus haut) : ne PAS remettre flex-wrap/overflow ici, seulement
   les réglages propres à ce bloc (gap, centrage quand tout tient sur une
   ligne). */
.to-super-hosts-carousel { margin-top: 32px; }
/* Bug trouvé sur le retour de Vincent (profils collés à gauche près de la
   flèche « précédent » au lieu d'être centrés) : .to-featured-carousel est
   un flex container sans flex-grow défini sur ses enfants, donc le track
   ne prenait que la largeur de son contenu (3 profils ≈ 450px) au lieu de
   remplir l'espace entre les deux flèches — justify-content:center n'avait
   alors plus rien à centrer DANS. flex:1 + min-width:0 force le track à
   occuper toute la largeur disponible, pour que le centrage s'applique
   réellement à l'échelle de la section. */
.to-super-hosts-row.to-featured-track { flex: 1 1 auto; min-width: 0; gap: 28px; justify-content: center; }
.to-super-host-profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: inherit;
	flex: 0 0 130px;
	scroll-snap-align: start;
}
/* En dessous de 640px : exactement 2 profils visibles par écran, quel que
   soit le nombre total de Super Hôtes (demande explicite de Vincent) —
   calc(50% - 14px)sur la largeur du track, gap 28px réparti en 2. Ici on
   repasse volontairement en flex-start : dès qu'il y a plus de 2 hôtes,
   le track dépasse la largeur de l'écran (scroll nécessaire) et centrer
   décalerait le premier profil hors champ à l'ouverture de la page. */
@media (max-width: 640px) {
	.to-super-hosts-row.to-featured-track { justify-content: flex-start; gap: 16px; }
	.to-super-host-profile { flex-basis: calc(50% - 8px); }
	.to-super-host-profile-avatar { width: 64px; height: 64px; }}
.to-super-host-profile-avatar {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	border: 2.5px solid #f7c65b;
	background-color: #f5f5f4;
	background-size: cover;
	background-position: center;
	margin-bottom: 10px;
	box-shadow: 0 6px 16px -6px rgba(0,0,0,0.3);
}
.to-super-host-profile-avatar--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #065f46;
	color: #fff;
	font-weight: 700;
	font-size: 22px;
}
.to-super-host-profile-name { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 14px; color: #1c1917; text-align: center; }

/* Filtre département sur la page "Les Incontournables" (22/08, demande de
   Vincent). */
.to-incontournables-dept-filter { max-width: 420px; margin: 0 auto 32px; display: flex; align-items: flex-end; gap: 10px; }
.to-incontournables-dept-filter label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #44403c; flex: 1; }
.to-incontournables-dept-filter select { padding: 10px 12px; border: 1px solid #d6d3d1; border-radius: 8px; font-size: 14px; background: #fff; width: 100%; }
/* Variante dans le hero (22/08, demande de Vincent) — label en blanc
   pour rester lisible sur le fond dégradé coloré du hero, plutôt que le
   gris foncé de la variante par défaut (utilisée, elle, sur fond clair
   quand le filtre est ailleurs sur la page). */
.to-incontournables-dept-filter--hero { margin: 24px auto 0; }
.to-incontournables-dept-filter--hero label { color: #fff; }
.to-catalog-empty { text-align: center; color: #78716c; font-size: 15px; padding: 40px 20px; }
.to-nav .to-nav-add-host{white-space:nowrap;flex-wrap:nowrap;flex-shrink:0}.to-nav .to-nav-add-host-label{white-space:nowrap;display:inline-block;line-height:1.2}