/* ==========================================================================
   TheoBrkr — carnet d'explorateur
   Le froid des photos, une seule couleur chaude : la lave (--accent).
   ========================================================================== */

/* Polices auto-hébergées (aucun appel à Google) ------------------------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/cormorant-garamond-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/cormorant-garamond-latin-ext-500-italic.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/cormorant-garamond-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/caveat-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/caveat-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/caveat-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Couleurs et réglages ------------------------------------------------- */
:root {
	--nuit: #121417;
	--nuit-2: #191c20;
	--nuit-3: #0d0f12;
	--roche: #22262b;
	--ligne: #262b31;
	--ligne-2: #343a41;
	--papier: #f1ece2;
	--papier-ligne: #c9c2b4;
	--glace: #e3eaf2;
	--brume: #a9b0b8;
	--brume-2: #b4bac1;
	--encre: #121417;
	--encre-2: #4f545b;
	--terre: #b4441a;
	--accent: #f0703a;
	--serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
	--main: "Caveat", "Comic Sans MS", cursive;
	--wrap: 1240px;
	--gutter: clamp(16px, 4vw, 24px);
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--nuit);
	color: var(--glace);
	font-family: var(--serif);
	font-size: clamp(19px, 1.2vw + 14px, 21px);
	font-weight: 500;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--glace); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--nuit); }
h1, h2, h3 { font-weight: 500; line-height: 1.05; margin: 0; }
p { margin: 0 0 1em; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tb-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--nuit); padding: 12px 16px; font-family: var(--mono); font-size: 13px; }
.tb-skip:focus { left: 8px; top: 8px; }

.tb-wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.tb-wrap--narrow { max-width: calc(760px + 2 * var(--gutter)); }

/* Petits éléments typographiques --------------------------------------- */
.tb-label, .tb-num, .tb-fig__meta, .tb-legend, .tb-states-key, .tb-stats dt, .tb-small {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brume);
	line-height: 1.5;
}
.tb-num { font-size: 13px; letter-spacing: .14em; color: var(--accent); }
.tb-num--ink { color: var(--terre); }
.tb-accent { color: var(--accent); }
.tb-hand { font-family: var(--main); font-weight: 500; line-height: 1.15; }
.tb-big { font-family: var(--mono); font-weight: 500; font-size: clamp(36px, 4vw, 48px); line-height: 1; letter-spacing: -.02em; color: var(--glace); }
.tb-big--xl { font-size: clamp(48px, 6vw, 64px); }
.tb-h1 { font-size: clamp(48px, 7vw, 84px); line-height: .98; letter-spacing: -.01em; }
.tb-h1--md { font-size: clamp(40px, 5vw, 64px); margin: 8px 0 16px; }
.tb-h2 { font-size: clamp(40px, 5vw, 60px); line-height: 1; }
.tb-h2--sm { font-size: clamp(32px, 3.5vw, 40px); margin-bottom: 24px; }
.tb-lead { color: var(--brume-2); font-size: clamp(20px, 1.6vw + 12px, 23px); max-width: 560px; margin: 0; }
.tb-hello { --rot: -2deg; margin: 0 0 4px; font-family: var(--main); font-weight: 700; font-size: clamp(56px, 7.5vw, 104px); line-height: .95; color: var(--accent); transform: rotate(var(--rot)); transform-origin: left center; }
.tb-fig__ph { aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; border: 1px dashed #5a626b; color: var(--brume); }
.tb-fig__ph .tb-hand { font-size: 40px; color: var(--glace); }
.tb-fig__ph a { text-decoration: none; }
.tb-style-polaroid .tb-fig__ph { border: 0; background: repeating-linear-gradient(-45deg, #e4ddd0 0 12px, #ddd5c6 12px 24px); color: var(--encre-2); }
.tb-style-polaroid .tb-fig__ph .tb-hand { color: var(--encre); }
.tb-style-polaroid .tb-fig__ph a { color: var(--encre); }
.tb-kicker { --rot: -2deg; font-family: var(--main); font-weight: 700; font-size: clamp(30px, 2.4vw + 14px, 36px); line-height: 1; color: var(--accent); transform: rotate(var(--rot)); transform-origin: left center; align-self: flex-start; }
.tb-more { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: 8px; padding: 10px 0; }
.tb-more span { transition: transform .25s var(--ease); }
.tb-more:hover span { transform: translateX(4px); }
.tb-more--ink { color: var(--encre); }
.tb-back { text-decoration: none; display: inline-block; padding: 8px 0; }
.tb-empty { font-style: italic; color: var(--brume); }
.tb-small { font-size: 11px; text-transform: none; letter-spacing: .02em; }

.tb-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 0 24px; border: 0; border-radius: 0;
	background: var(--accent); color: var(--nuit);
	font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
	text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), filter .2s;
}
.tb-btn:hover { color: var(--nuit); filter: brightness(1.08); transform: translateY(-1px); }
.tb-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* En-tête ---------------------------------------------------------------- */
.tb-header { position: relative; z-index: 20; }
.tb-header__in { display: flex; align-items: center; justify-content: space-between; gap: 12px 40px; padding-top: 22px; padding-bottom: 22px; flex-wrap: wrap; }
.tb-logo { font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: .32em; text-transform: uppercase; text-decoration: none; color: var(--glace); }
.tb-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.tb-nav__list a { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; display: inline-block; padding: 12px 0; position: relative; }
.tb-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.tb-nav__list a:hover::after, .tb-nav__list .current-menu-item a::after { transform: scaleX(1); }
.tb-nav-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; background: none; border: 0; color: var(--glace); font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.tb-nav-toggle__bars, .tb-nav-toggle__bars::before { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; transition: transform .25s; }
.tb-nav-toggle__bars::before { content: ""; position: absolute; top: 6px; }
.tb-nav-toggle[aria-expanded="true"] .tb-nav-toggle__bars { transform: translateY(3px) rotate(45deg); }
.tb-nav-toggle[aria-expanded="true"] .tb-nav-toggle__bars::before { transform: translateY(-6px) rotate(-90deg); }

@media (max-width: 860px) {
	.js .tb-nav-toggle { display: inline-flex; }
	.js .tb-nav { flex-basis: 100%; display: none; }
	.js .tb-nav.is-open { display: block; }
	.js .tb-nav__list { flex-direction: column; gap: 0; padding: 8px 0 16px; border-top: 1px solid var(--ligne); }
	.js .tb-nav__list a { padding: 14px 0; font-size: 14px; }
}

/* Sections --------------------------------------------------------------- */
.tb-section { padding: clamp(72px, 9vw, 104px) 0; border-top: 1px solid var(--ligne); }
.tb-section--top { border-top: 0; padding-top: clamp(32px, 5vw, 56px); }
.tb-section--alt { background: var(--nuit-2); }
.tb-section--paper { background: var(--papier); color: var(--encre); border-top: 0; }
.tb-section--paper a { color: var(--encre); }
.tb-section--paper a:hover { color: var(--terre); }
.tb-section--paper .tb-num { color: var(--terre); }
.tb-section--paper .tb-label, .tb-section--paper .tb-states-key, .tb-section--paper .tb-head__intro p { color: var(--encre-2); }
.tb-section--letters { overflow: hidden; }

.tb-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; margin-bottom: clamp(32px, 4vw, 48px); }
.tb-head__titles { display: flex; flex-direction: column; gap: 12px; }
.tb-head__intro { max-width: 470px; }
.tb-head__intro p { color: var(--brume-2); margin: 0; }

/* Accueil ----------------------------------------------------------------- */
.tb-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px 72px; padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(80px, 10vw, 120px); }
.tb-hero__text { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.tb-hero__fig { flex: 1 1 320px; max-width: 440px; }
.tb-hero.no-image .tb-hero__text { max-width: 860px; }
.tb-countdown { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 44px; padding-top: 28px; border-top: 1px solid var(--ligne); margin-top: 6px; }
.tb-countdown__num { display: flex; flex-direction: column; gap: 10px; }
.tb-countdown__info { display: flex; flex-direction: column; gap: 6px; }
.tb-countdown__info a { color: var(--glace); text-decoration: none; margin-top: 8px; }

/* Photo en fiche de terrain ---------------------------------------------- */
.tb-fig { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.tb-fig__img { position: relative; }
.tb-fig__img img { width: 100%; height: auto; }
.tb-fig__img.has-corners { margin: 10px; }
.tb-fig__img.has-corners::before, .tb-fig__img.has-corners::after {
	content: ""; position: absolute; inset: -10px; pointer-events: none;
	background:
		linear-gradient(#6a717a, #6a717a) top left / 16px 1px no-repeat,
		linear-gradient(#6a717a, #6a717a) top left / 1px 16px no-repeat,
		linear-gradient(#6a717a, #6a717a) top right / 16px 1px no-repeat,
		linear-gradient(#6a717a, #6a717a) top right / 1px 16px no-repeat,
		linear-gradient(#6a717a, #6a717a) bottom left / 16px 1px no-repeat,
		linear-gradient(#6a717a, #6a717a) bottom left / 1px 16px no-repeat,
		linear-gradient(#6a717a, #6a717a) bottom right / 16px 1px no-repeat,
		linear-gradient(#6a717a, #6a717a) bottom right / 1px 16px no-repeat;
}
.tb-fig__img.has-corners::after { display: none; }
.tb-fig__cap { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.tb-fig__meta { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.tb-fig__meta span:empty { display: none; }
.tb-fig__legend { font-style: italic; font-size: 20px; color: var(--glace); }

/* Boîte noire ----------------------------------------------------------- */
.tb-boite { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.tb-boite > .tb-polaroid { flex: 0 1 300px; min-width: 260px; }
.tb-mosaic-wrap { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.tb-mosaic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); gap: 5px; }
.tb-cell { aspect-ratio: 1; position: relative; }
.tb-cell.is-futur { border: 1px solid var(--ligne-2); }
.tb-cell.is-missed { border: 1px dashed #2c3238; }
.tb-cell.is-tonight { border: 2px solid var(--accent); animation: tb-pulse 2.4s ease-in-out infinite; }
.tb-cell.is-archive a { display: block; width: 100%; height: 100%; background: #5a626b; overflow: hidden; }
.tb-cell.is-archive img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s var(--ease), filter .25s; }
.tb-cell.is-archive a:hover img, .tb-cell.is-archive a:focus-visible img { transform: scale(1.18); filter: brightness(1.15); }
.tb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.tb-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tb-legend__total { color: var(--glace); }
.tb-key { display: inline-block; width: 12px; height: 12px; }
.tb-key.is-archive { background: #5a626b; }
.tb-key.is-tonight { border: 2px solid var(--accent); }
.tb-key.is-futur { border: 1px solid #5a626b; }
@keyframes tb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 112, 58, 0); } 50% { box-shadow: 0 0 0 4px rgba(240, 112, 58, .18); } }

/* Infobulle de la mosaïque */
.tb-tip { position: fixed; z-index: 50; width: 220px; background: var(--papier); color: var(--encre); padding: 10px 10px 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); pointer-events: none; opacity: 0; transform: translateY(6px) rotate(-1.5deg); transition: opacity .18s, transform .18s var(--ease); }
.tb-tip.is-on { opacity: 1; transform: translateY(0) rotate(-1.5deg); }
.tb-tip img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 8px; }
.tb-tip__t { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); display: flex; justify-content: space-between; gap: 8px; }
.tb-tip__p { font-family: var(--main); font-size: 22px; line-height: 1.1; margin-top: 4px; }

/* Polaroïd (la journée) -------------------------------------------------- */
.tb-polaroid { display: flex; flex-direction: column; gap: 10px; background: var(--papier); color: var(--encre); padding: 14px 14px 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, .4); --rot: -2deg; transform: rotate(var(--rot)); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s, opacity .8s var(--ease); }
a.tb-polaroid:hover { color: var(--encre); --rot: -.5deg; transform: rotate(var(--rot)) translateY(-4px); box-shadow: 0 28px 50px rgba(0, 0, 0, .5); }
.tb-polaroid__img { aspect-ratio: 1; overflow: hidden; background: #d8d1c3; }
.tb-polaroid__img img { width: 100%; height: 100%; object-fit: cover; }
.tb-polaroid__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--encre-2); background: repeating-linear-gradient(-45deg, #e4ddd0 0 10px, #ddd5c6 10px 20px); }
.tb-polaroid__meta { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.tb-polaroid__phrase { margin: 0; font-family: var(--main); font-size: 29px; line-height: 1.1; }
.tb-polaroid.is-large { max-width: 520px; --rot: -1.5deg; }
.tb-polaroid.is-large .tb-polaroid__phrase { font-size: 32px; }
.tb-polaroids { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 48px 36px; }
.tb-polaroids .tb-polaroid:nth-child(3n+2) { --rot: 1.5deg; }
.tb-polaroids .tb-polaroid:nth-child(3n) { --rot: -.8deg; }

.tb-jour__in { display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: flex-start; }
.tb-jour__photo { flex: 1 1 340px; max-width: 520px; padding: 12px; }
.tb-jour__text { flex: 999 1 420px; min-width: 0; }
.tb-jour__phrase { font-size: clamp(30px, 3vw, 40px); color: var(--glace); margin: 24px 0; }

/* Le fil ------------------------------------------------------------------ */
.tb-fil { display: flex; flex-wrap: wrap; background: var(--nuit-3); border: 1px solid #22272d; }
.tb-fil__map { flex: 999 1 560px; min-width: 0; position: relative; }
.tb-fil__card { flex: 1 1 300px; border-left: 1px solid #22272d; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.tb-fil__title { font-size: 30px; line-height: 1.1; text-decoration: none; }
.tb-map { height: clamp(360px, 52vw, 520px); width: 100%; background: var(--nuit-3); }
.tb-map.is-tall { height: clamp(420px, 62vw, 640px); }
.tb-map--small { height: 280px; margin-top: 24px; }
.tb-map--paper { margin-bottom: 32px; border: 1px solid var(--papier-ligne); }
.tb-map__empty { position: absolute; left: 56px; top: 16px; right: 16px; width: max-content; max-width: calc(100% - 72px); z-index: 500; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--brume); background: var(--nuit); padding: 6px 10px; border: 1px solid var(--ligne); }
.tb-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding: 18px 0; border-top: 1px solid #22272d; border-bottom: 1px solid #22272d; }
.tb-stats div { display: flex; flex-direction: column-reverse; }
.tb-stats dd { margin: 0; font-family: var(--mono); font-size: 24px; line-height: 1.15; color: var(--glace); }
.tb-stats--row { display: flex; flex-wrap: wrap; gap: 16px 40px; border: 0; padding: 0; margin: 8px 0 28px; }
.tb-stats--row dd { font-size: 18px; }
.tb-section--paper .tb-stats dd { color: var(--encre); }
.tb-gauge { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 48px; margin-top: 40px; }
.tb-gauge__num { display: flex; flex-direction: column; gap: 8px; }
.tb-gauge__bar-wrap { flex: 999 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tb-gauge__bar { height: 6px; background: #22272d; position: relative; overflow: hidden; }
.tb-gauge__bar span { position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--accent); }
.tb-gauge__ends { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

.tb-profile { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; }
.tb-profile svg { width: 100%; height: auto; display: block; overflow: visible; }
.tb-profile__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) { .tb-profile svg { min-width: 680px; } }
.tb-profile__grid line { stroke: #1d2228; stroke-width: 1; }
.tb-profile__grid text, .tb-profile__txt, .tb-profile__txt text { fill: #7a828b; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; }
.tb-profile__area { fill: var(--accent); opacity: .14; }
.tb-profile__line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.tb-profile__split { stroke: #5a626b; stroke-dasharray: 3 4; }

/* Carte Leaflet aux couleurs du site */
.leaflet-container { background: var(--nuit-3); font-family: var(--mono); }
/* Carte claire assombrie : le relief reste lisible, dans les couleurs du site. */
.tb-map.is-dimmed .leaflet-tile-pane { filter: grayscale(.85) brightness(.5) contrast(1.2); }
.tb-map.is-inverted .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(var(--map-light, .95)) contrast(.98) saturate(.55); }
.leaflet-control-attribution { background: rgba(18, 20, 23, .8) !important; color: var(--brume) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--glace) !important; }
.leaflet-bar a { background: var(--nuit) !important; color: var(--glace) !important; border-color: var(--ligne) !important; }
.leaflet-tooltip.tb-tooltip { background: var(--nuit); color: var(--glace); border: 1px solid var(--ligne-2); border-radius: 0; box-shadow: none; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; }
.leaflet-tooltip.tb-tooltip::before { display: none; }
.tb-trace { stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0); }
.tb-trace.is-drawn { transition: stroke-dashoffset 2.2s var(--ease); stroke-dashoffset: 0; }

.tb-table-wrap { overflow-x: auto; }
.tb-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 14px; min-width: 560px; }
.tb-table th { text-align: left; font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brume); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ligne-2); }
.tb-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--ligne); }
.tb-table td a { font-family: var(--serif); font-size: 20px; text-decoration: none; }

/* Lointains ---------------------------------------------------------------- */
.tb-states-key { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-bottom: 20px; }
.tb-states-key span { display: inline-flex; align-items: center; gap: 10px; }
.tb-lrows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); border-bottom: 1px solid var(--encre); }
.tb-lrow + .tb-lrow { border-top: 1px solid var(--papier-ligne); }
.tb-lrow a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 32px; padding: 22px 0; text-decoration: none; }
.tb-lrow a:hover { color: var(--encre); }
.tb-lrow a:hover .tb-lrow__name { color: var(--terre); }
.tb-lrow__name { transition: color .25s; }
.tb-lrow__icon { flex: 0 0 auto; align-self: baseline; display: inline-flex; position: relative; top: 1px; transition: transform .3s var(--ease); }
.tb-lrow a:hover .tb-lrow__icon { transform: scale(1.25); }
.tb-lrow__name { flex: 1 1 240px; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; }
.tb-lrow__place { flex: 1 1 180px; color: var(--encre-2); }
.tb-lrow__coords { flex: 1 1 170px; font-family: var(--mono); font-size: 13px; color: var(--encre-2); }
.tb-lrow__note { flex: 2 1 260px; font-style: italic; color: #2e3237; }
.tb-lrow__place:empty, .tb-lrow__coords:empty, .tb-lrow__note:empty { display: none; }
.tb-lrow.is-atteint .tb-state circle { transition: r .4s var(--ease); }
.tb-hover-img { position: fixed; z-index: 50; width: 180px; aspect-ratio: 1; object-fit: cover; pointer-events: none; opacity: 0; transform: scale(.92) rotate(2deg); transition: opacity .2s, transform .25s var(--ease); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); border: 8px solid #fff; }
.tb-hover-img.is-on { opacity: 1; transform: scale(1) rotate(2deg); }
.tb-place { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: flex-start; }
.tb-place__text { flex: 999 1 420px; min-width: 0; }
.tb-place__side { flex: 1 1 340px; max-width: 520px; }
.tb-place__side--big { flex: 2 1 520px; max-width: 760px; }
.tb-state-label { display: inline-flex; align-items: center; gap: 8px; }
.tb-note { font-style: italic; font-size: 24px; color: var(--brume-2); }

/* Lettres : la carte postale ------------------------------------------- */
.tb-postcard { max-width: 980px; margin: 0 auto; background: var(--papier); color: var(--encre); padding: clamp(24px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 32px 40px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); --rot: -1deg; transform: rotate(var(--rot)); transition: transform .5s var(--ease), opacity .8s var(--ease); }
.tb-postcard:hover { --rot: 0deg; }
.tb-postcard a { color: var(--encre); }
.tb-postcard__text { flex: 1 1 340px; display: flex; flex-direction: column; gap: 16px; }
.tb-postcard__text .tb-hand { font-size: 30px; margin: 0; }
.tb-postcard__sign { align-self: flex-end; font-size: 28px; }
.tb-postcard__sep { width: 1px; background: var(--papier-ligne); align-self: stretch; }
.tb-postcard__form { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.tb-stamp { align-self: flex-end; width: 92px; height: 108px; border: 2px dashed var(--encre); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transform: rotate(4deg); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; transition: transform .4s var(--ease); }
.tb-stamp__big { font-family: var(--serif); font-weight: 600; font-size: 32px; letter-spacing: 0; color: var(--terre); line-height: 1; }
.tb-postcard:hover .tb-stamp { transform: rotate(-2deg) scale(1.04); }
.tb-signup { display: flex; flex-direction: column; gap: 12px; }
.tb-signup label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); }
.tb-signup input, .tb-postcard__embed input[type="email"], .tb-postcard__embed input[type="text"] {
	height: 52px; padding: 0 4px; background: transparent; border: 0; border-bottom: 1px solid var(--encre); border-radius: 0;
	color: var(--encre); font-family: var(--main); font-size: 28px; width: 100%;
}
.tb-signup .tb-btn { align-self: flex-start; }
.tb-postcard__embed input[type="submit"], .tb-postcard__embed button { background: var(--accent); color: var(--nuit); border: 0; border-radius: 0; min-height: 52px; padding: 0 24px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.tb-letters { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne-2); }
.tb-letters li { border-bottom: 1px solid var(--ligne); }
.tb-letters a { display: flex; flex-direction: column; gap: 6px; padding: 24px 0; text-decoration: none; }
.tb-letters__title { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
.tb-letters__excerpt { color: var(--brume-2); }
.tb-signature { font-size: 34px; text-align: right; color: var(--glace); }

/* Tirages ----------------------------------------------------------------- */
.tb-tirages { --g: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 2 * var(--g)) / 3)), 1fr)); gap: 48px var(--g); }
.tb-tirage { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.tb-tirage__img { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--roche); }
.tb-tirage__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.tb-tirage:hover .tb-tirage__img img { transform: scale(1.05); }
.tb-tirage .tb-fig__meta { padding-top: 12px; border-top: 1px solid var(--ligne-2); }
.tb-tirage__title { font-size: 28px; line-height: 1.1; }

/* Texte long (lettres, pages) ------------------------------------------ */
.tb-prose { font-size: clamp(20px, 1.3vw + 14px, 22px); line-height: 1.6; color: var(--glace); }
.tb-prose--narrow { max-width: 760px; margin-top: 40px; }
.tb-prose > * + * { margin-top: 1em; }
.tb-prose h2 { font-size: 36px; margin-top: 1.6em; }
.tb-prose h3 { font-size: 28px; margin-top: 1.4em; }
.tb-prose blockquote { margin: 1.5em 0; padding-left: 24px; border-left: 2px solid var(--accent); font-style: italic; color: var(--brume-2); }
.tb-prose img { margin: 1.5em 0; }
.tb-prose figcaption { font-family: var(--mono); font-size: 12px; color: var(--brume); letter-spacing: .06em; margin-top: 8px; }
.tb-prose a { color: var(--accent); }
.tb-prose--letter > p:first-of-type::first-letter { float: left; font-size: 4.2em; line-height: .8; padding: 6px 10px 0 0; color: var(--accent); }
.tb-embed { margin: 32px 0; }
.tb-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.tb-pager, .post-navigation .nav-links { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--ligne); }
.tb-pager a, .post-navigation a { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 8px 0; }
.post-navigation a { display: flex; flex-direction: column; gap: 4px; font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 22px; }
.post-navigation .nav-next { text-align: right; margin-left: auto; }
.pagination, .nav-links { font-family: var(--mono); font-size: 13px; }
.pagination .page-numbers { display: inline-block; padding: 10px 12px; text-decoration: none; }
.pagination .current { color: var(--accent); }
.tb-404 { min-height: 50vh; }
.tb-404 .tb-lead { margin: 24px 0 32px; }

/* Pied de page ------------------------------------------------------------- */
.tb-footer { border-top: 1px solid var(--ligne); }
.tb-footer__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; padding-top: 56px; padding-bottom: 32px; }
.tb-footer__brand { display: flex; flex-direction: column; gap: 8px; }
.tb-footer__motto { font-family: var(--main); font-size: 28px; line-height: 1.1; color: var(--brume); }
.tb-footer__links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.tb-footer__links a { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 12px 0; }
.tb-footer__links .tb-footer__mail { text-transform: none; }
.tb-footer__small { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 32px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6a717a; }

/* Petits écrans ------------------------------------------------------------ */
@media (max-width: 860px) {
	.tb-fil__card { border-left: 0; border-top: 1px solid #22272d; }
	.tb-postcard__sep { display: none; }
	.tb-postcard { --rot: -.6deg; }
	.tb-polaroid { --rot: -1deg; }
	.tb-hero__fig { max-width: none; }
}
@media (max-width: 520px) {
	.tb-mosaic { grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)); gap: 4px; }
	.tb-stats dd { font-size: 20px; }
	.tb-fig__meta { flex-wrap: wrap; }
}

/* Apparition douce au défilement ---------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px) rotate(var(--rot, 0deg)); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: rotate(var(--rot, 0deg)); }
.js a.tb-polaroid[data-reveal].is-in:hover { transform: rotate(var(--rot)) translateY(-4px); }
.js .tb-mosaic .tb-cell { opacity: 0; transform: scale(.6); }
.js .tb-mosaic.is-in .tb-cell { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s var(--ease); transition-delay: calc(var(--i, 0) * 6ms); }
.js .tb-gauge__bar span { width: 0; transition: width 1.6s var(--ease) .2s; }
.js .tb-gauge.is-in .tb-gauge__bar span { width: var(--pct); }
.js .tb-profile__line { stroke-dasharray: 4000; stroke-dashoffset: 4000; }
.js .tb-profile.is-in .tb-profile__line { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js [data-reveal] { opacity: 1 !important; transform: rotate(var(--rot, 0deg)) !important; }
	.js .tb-mosaic .tb-cell { opacity: 1 !important; transform: none !important; }
	.js .tb-gauge__bar span { width: var(--pct); }
	.js .tb-profile__line { stroke-dashoffset: 0; }
}

/* ==========================================================================
   Style « polaroïd » (par défaut) : les photos du monde aussi deviennent
   des polaroïds scotchés. Apparence > Personnaliser > TheoBrkr > Style.
   ========================================================================== */
.tb-style-polaroid .tb-fig { --rot: 2.5deg; position: relative; background: var(--papier); color: var(--encre); padding: 14px 14px 56px; gap: 10px; box-shadow: 0 24px 48px rgba(0, 0, 0, .45); transform: rotate(var(--rot)); }
.tb-style-polaroid .tb-fig.has-cap { padding-bottom: 18px; }
.tb-style-polaroid .tb-fig::before { content: ""; position: absolute; z-index: 1; top: -14px; left: 50%; width: 120px; height: 30px; margin-left: -60px; background: #e9d9b4; opacity: .75; transform: rotate(-4deg); }
.tb-style-polaroid .tb-fig__img.has-corners { margin: 0; }
.tb-style-polaroid .tb-fig__img.has-corners::before { display: none; }
.tb-style-polaroid .tb-fig__meta { color: var(--encre-2); }
.tb-style-polaroid .tb-fig__meta .tb-accent { color: var(--terre); }
.tb-style-polaroid .tb-fig__legend { font-family: var(--main); font-style: normal; font-size: 27px; line-height: 1.1; color: var(--encre); text-align: center; }
.tb-style-polaroid .tb-wrap--narrow .tb-fig, .tb-style-polaroid .tb-place__side .tb-fig { --rot: -.8deg; margin: 24px 0; }

.tb-style-polaroid .tb-tirage { --rot: -2deg; background: var(--papier); color: var(--encre); padding: 14px 14px 18px; gap: 10px; box-shadow: 0 20px 40px rgba(0, 0, 0, .4); transform: rotate(var(--rot)); transition: transform .35s var(--ease), box-shadow .35s, opacity .8s var(--ease); }
.tb-style-polaroid .tb-tirage:nth-child(3n+2) { --rot: 1.5deg; }
.tb-style-polaroid .tb-tirage:nth-child(3n) { --rot: -1deg; }
.tb-style-polaroid .tb-tirage:hover { color: var(--encre); --rot: 0deg; box-shadow: 0 28px 50px rgba(0, 0, 0, .5); }
.tb-style-polaroid .tb-tirage .tb-fig__meta { border-top: 0; padding-top: 4px; color: var(--encre-2); }
.tb-style-polaroid .tb-tirage .tb-accent { color: var(--terre); }
.tb-style-polaroid .tb-tirage__title { font-family: var(--main); font-size: 30px; line-height: 1; }
.tb-style-polaroid .tb-tirages { --g: 40px; row-gap: 56px; }

.tb-style-polaroid .tb-lrow__note { font-family: var(--main); font-style: normal; font-size: 26px; line-height: 1.15; color: var(--encre); }