/*
 * GoLink designs — shared structure.
 * Every design (themes/<id>.css) sets the tokens below and may add its own flourishes on top.
 * Loaded as:  global.css → themes/base.css → themes/<id>.css  (never together with dark.css)
 *
 * Link cards and the subscribe box are styled by cards.css (loaded last, only on pages that use them); a design restyles them with the
 * --card-* tokens listed at the top of that file.
 *
 * The glyph images (social icons, verified badge, stars, footer logo) are white on transparent, so a design either
 * puts them on a dark chip (filter: none) or turns them black (filter: invert(1)).
 */
:root {
	--bg: #000;
	--fg: #eee;
	--muted: #8a8a8a;
	--accent: #fff;
	--accent-fg: #000;
	--accent-glyph: invert(1);          /* glyph filter on an --accent coloured chip (set by the page when the accent is customised) */

	--font-head: 'Syne', system-ui, sans-serif;
	--font-body: 'Syne', system-ui, sans-serif;

	--max: 500px;                       /* width of the content column */
	--hero-w: 560px;
	--hero-ratio: 3 / 3.4;
	--hero-max: 62dvh;
	--header-pull: -90px;               /* how far the name overlaps the photo */

	--btn-bg: var(--accent);
	--btn-fg: var(--accent-fg);
	--btn-border: 0 solid transparent;
	--btn-radius: 10px;
	--btn-shadow: none;
	--btn-pad: 18px 22px;

	--chip-bg: rgba(255, 255, 255, .1);
	--chip-border: 1px solid rgba(255, 255, 255, .18);
	--chip-radius: 50%;
	--chip-size: 52px;
	--chip-glyph: none;

	--glyph-page: none;                 /* filter for the verified badge and footer logo on the page background */

	--pop-bg: #161616;                  /* review popup */
	--pop-fg: #f2f2f2;
	--pop-border: rgba(255, 255, 255, .14);
	--pop-shade: rgba(0, 0, 0, .55);
	--field-bg: rgba(255, 255, 255, .07);
	--star-filter: none;

	--bio-fg: var(--muted);
	--share-bg: rgba(0, 0, 0, .38);
	--share-fg: #fff;
	--share-border: 1px solid rgba(255, 255, 255, .3);
	--row-ico-size: 40px;
	--row-ico-gap: 14px;
	--row-ico-radius: 50%;
	--row-ico-glyph: 20px;
	--row-ico-bg: transparent;
}

html { background: var(--bg); color: var(--fg); }

body {
	margin: 0;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 140px;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; }

/* ---- photo ---- */
.bg {
	position: relative;
	width: 100%;
	max-width: var(--hero-w);
	aspect-ratio: var(--hero-ratio);
	max-height: var(--hero-max);
	overflow: hidden;
}
.bg > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 18%;
}
.bg::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 55%;
	background: linear-gradient(0deg, var(--bg), transparent);
	pointer-events: none;
}

/* ---- name + job ---- */
.header {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: var(--max);
	padding: 0 24px;
	margin-top: var(--header-pull);
	text-align: center;
}
.header .title {
	display: block;
	max-width: 100%;
}
.header .title h1 {
	display: inline;                   /* inline, so the badge follows the last word however many lines the name takes */
	font-family: var(--font-head);
	font-size: clamp(1.8rem, 8vw, 2.3rem);
	font-weight: 700;
	line-height: 1.1;
	overflow-wrap: anywhere;
}
.header .title > img {
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-left: 10px;
	vertical-align: .08em;
	filter: var(--glyph-page);
	opacity: .85;
}
.header h2 {
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--muted);
	overflow-wrap: anywhere;
}

/* ---- social icons ---- */
.social-media {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	width: 100%;
	max-width: var(--max);
	padding: 28px 24px 0;
}
.social-media > a {
	display: grid;
	place-items: center;
	width: var(--chip-size);
	height: var(--chip-size);
	border-radius: var(--chip-radius);
	background: var(--chip-bg);
	border: var(--chip-border);
	transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.social-media > a > img {
	width: calc(var(--chip-size) * .5);
	height: calc(var(--chip-size) * .5);
	object-fit: contain;
	filter: var(--chip-glyph);
}
.social-media > a:hover { transform: translateY(-2px); }
.social-media > a:focus-visible, .link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- link buttons (and the Google-review trigger, which is also a .link) ---- */
.links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: var(--max);
	padding: 34px 24px 0;
}
.link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--btn-pad);
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: var(--btn-border);
	border-radius: var(--btn-radius);
	box-shadow: var(--btn-shadow);
	font: 600 1rem/1.3 var(--font-body);
	text-align: center;
	text-decoration: none;
	overflow-wrap: anywhere;
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.link:hover { transform: translateY(-1px); }

/* the icon row and the links sit above the photo's fade when the name overlaps a tall photo */
.social-media, .links { position: relative; z-index: 1; }

/* ---- footer logo ---- */
footer {
	position: fixed;
	left: 0; bottom: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 40px 0 22px;
	background: linear-gradient(0deg, var(--bg), transparent);
	pointer-events: none;
}
footer > img { height: 34px; width: auto; filter: var(--glyph-page); opacity: .9; }

/* ---- Google review popup (its markup is added by the page's script; display is toggled by that script) ---- */
#rating {
	position: fixed;
	inset: 0;
	z-index: 50;
	padding: 20px;
	background: var(--pop-shade);
	backdrop-filter: blur(3px);
	justify-content: center;
	align-items: center;
	color: var(--pop-fg);
}
#rating-form {
	width: 100%;
	max-width: 360px;
	padding: 28px;
	background: var(--pop-bg);
	color: var(--pop-fg);
	border: 1px solid var(--pop-border);
	border-radius: min(var(--btn-radius), 22px);
	box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .55);
}
#rating-form h4 { font: 600 1.1rem/1.3 var(--font-head); color: var(--pop-fg); text-wrap: balance; }
#review { background: var(--field-bg); color: var(--pop-fg); border: 1px solid var(--pop-border); font-family: var(--font-body); }
#review::placeholder { color: color-mix(in srgb, var(--pop-fg) 55%, transparent); }
#rate-prog > img { filter: var(--star-filter); }
#rating .button {
	background: var(--accent);
	color: var(--accent-fg);
	border-radius: min(var(--btn-radius), 14px);
	font-family: var(--font-body);
}

/* ---- icons for link rows (a design opts in with --row-ico: ""). White set by default; a light design points --g-* at the --gd-* (dark) set. ---- */
:root {
	--gw-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
	--gw-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--gw-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--gw-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");
	--gw-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
	--gw-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' x2='19' y1='8' y2='14'/%3E%3Cline x1='22' x2='16' y1='11' y2='11'/%3E%3C/svg%3E");
	--gw-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
	--gw-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	--gd-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
	--gd-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--gd-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--gd-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");
	--gd-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
	--gd-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' x2='19' y1='8' y2='14'/%3E%3Cline x1='22' x2='16' y1='11' y2='11'/%3E%3C/svg%3E");
	--gd-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
	--gd-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	--g-link: var(--gw-link);
	--g-pin: var(--gw-pin);
	--g-phone: var(--gw-phone);
	--g-chat: var(--gw-chat);
	--g-mail: var(--gw-mail);
	--g-user: var(--gw-user);
	--g-arrow: var(--gw-arrow);
	--g-chev: var(--gw-chev);
}

/* ---- intro line, share button, save-contact button (all optional: the page only contains them when switched on) ---- */
.bio {
	width: 100%;
	max-width: var(--max);
	padding: 0 28px;
	margin: 14px 0 0;
	color: var(--bio-fg);
	font-size: .98rem;
	line-height: 1.55;
	text-align: center;
	text-wrap: pretty;
	overflow-wrap: anywhere;
	position: relative;
	z-index: 1;
}
.share-btn {
	position: absolute;
	top: max(16px, env(safe-area-inset-top));
	right: 16px;
	z-index: 10;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: var(--share-border);
	border-radius: 50%;
	background: var(--share-bg);
	color: var(--share-fg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	cursor: pointer;
	transition: transform .15s ease, background .15s ease;
}
.share-btn svg { width: 20px; height: 20px; }
.share-btn:hover { transform: scale(1.06); }
.share-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.share-btn.done::after {
	content: 'Lien copié';
	position: absolute;
	top: 52px;
	right: 0;
	padding: 6px 10px;
	border-radius: 8px;
	background: #111;
	color: #fff;
	font: 600 .75rem/1 var(--font-body);
	white-space: nowrap;
}

/* link rows with a leading icon (opt-in per design) */
.link::before {
	content: var(--row-ico, none);
	flex: none;
	width: var(--row-ico-size);
	height: var(--row-ico-size);
	margin-right: var(--row-ico-gap);
	border-radius: var(--row-ico-radius);
	background: var(--row-ico-bg) var(--row-g, var(--g-link)) center / var(--row-ico-glyph) no-repeat;
}
.link[href^='tel:'] { --row-g: var(--g-phone); }
.link[href^='mailto:'] { --row-g: var(--g-mail); }
.link[href*='wa.me'], .link[href*='whatsapp.com'] { --row-g: var(--g-chat); }
.link[href*='maps'], .link[href*='goo.gl'], .link[href*='g.co/kgs'], .link[href*='waze.com'] { --row-g: var(--g-pin); }
.save-contact { --row-g: var(--g-user); }

/* ---- motion: a gentle staggered entrance. Only the starting state is animated, so a design's own transforms are untouched ---- */
@keyframes gl-rise { from { opacity: 0; translate: 0 16px; } }
@keyframes gl-pop { from { opacity: 0; scale: .8; } }
@keyframes gl-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
	.bg { animation: gl-fade .8s ease backwards; }
	.header, .bio { animation: gl-rise .7s .08s cubic-bezier(.2, .7, .2, 1) backwards; }
	.bio { animation-delay: .16s; }
	.social-media > a { animation: gl-pop .5s cubic-bezier(.2, .8, .3, 1.2) backwards; }
	.social-media > a:nth-child(1) { animation-delay: .22s; } .social-media > a:nth-child(2) { animation-delay: .27s; }
	.social-media > a:nth-child(3) { animation-delay: .32s; } .social-media > a:nth-child(4) { animation-delay: .37s; }
	.social-media > a:nth-child(5) { animation-delay: .42s; } .social-media > a:nth-child(n+6) { animation-delay: .47s; }
	.links > .link { animation: gl-rise .6s cubic-bezier(.2, .7, .2, 1) backwards; }
	.links > .link:nth-child(1) { animation-delay: .3s; } .links > .link:nth-child(2) { animation-delay: .36s; }
	.links > .link:nth-child(3) { animation-delay: .42s; } .links > .link:nth-child(4) { animation-delay: .48s; }
	.links > .link:nth-child(n+5) { animation-delay: .54s; }
	.link:active, .social-media > a:active { scale: .97; }
}
footer { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }