@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700;900&display=swap');

/* Body colors */
body{
	background-color: #fff; /* bluish tone from screenshot */
	color: #003F6A;
	font-family: 'Poppins', Arial, sans-serif;
}

/* Non-index colors for header, nav, lines and toggles */
body:not(.page-home) .site-nav { background:#ffffff; }
body:not(.page-home) .nav-item a { color: rgba(0,63,106,0.95); }
body:not(.page-home) .nav-item.active a { text-decoration:underline; text-underline-offset:6px; font-weight:700; }
body:not(.page-home) .line { border-top-color: rgba(0,63,106,0.95); }
body:not(.page-home) .site-nav.open .nav-list { background:#ffffff; }
body:not(.page-home) .site-nav .lang::before{ background:#003F6A; box-shadow: 0 8px 0 #003F6A, 0 16px 0 #003F6A; }
body:not(.page-home) .lang-link { color: rgba(0,63,106,0.95); }

/* Header / Navigation */
header { position: relative; }
.site-nav { background:#003F6A; box-shadow: 0 6px 0 rgba(0,0,0,0.12); height:80px; display:flex; align-items:center; justify-content:center; position:relative; }
.nav-list { list-style:none; display:flex; gap:64px; margin:0; padding:0; }
.nav-item a { color: rgba(255,255,255,0.95); text-decoration:none; font-weight:400; }
.nav-item.active a { text-decoration:underline; text-underline-offset:6px; font-weight:700; }
.site-nav .lang { position:absolute; right:36px; color:rgba(255,255,255,0.95); text-decoration:none; background:transparent; border:0; padding:0; cursor:pointer; font:inherit; -webkit-appearance:none; appearance:none; }

/* Layout for hero */
html, body { height: 100%; margin: 0; }
.hero { min-height: calc(100vh - 80px); display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; text-align:center; padding:40px 20px; }
.hero h1 { font-weight:300; font-size:clamp(48px, 8vw, 112px); margin:0; letter-spacing:1px; position:relative; z-index:1; }
.hero .lead { font-size: clamp(20px, 3.5vw, 32px); margin-top:18px; margin-bottom:5px; opacity:0.95; font-weight:300; }
.hero .sub { font-size: clamp(16px, 2.6vw, 22px); margin-top:0; opacity:0.9; font-weight:300; }

/* Decorative double horizontal lines on each side of the hero */
.line { position:absolute; top:50%; height:0; border-top:2px solid rgba(255,255,255,0.95); width:440px; transform:translateY(-50%); z-index:2; }
.line.thin { border-top-width:2px; top: calc(50% + 12px); z-index:2; }
.line.left { left:2vw; }
.line.left.thin { left:2vw; }
.line.right { right:2vw; }
.line.right.thin { right:2vw; }

/* Responsive tweaks */
@media (max-width:900px){
	.nav-list { gap:28px; }
	.line { width:300px; }
}

/* Desktop / mobile language toggle behavior */
.lang-link { position:absolute; right:36px; color:rgba(255,255,255,0.95); text-decoration:none; font-weight:400; display:none; z-index:60; top:50%; transform:translateY(-50%); }

/* Ensure mobile language item is hidden on desktop and hamburger hidden on desktop */
@media (min-width:521px){
	.nav-list .lang-item { display:none; }
	.lang-link { display:block; }
	.site-nav .lang { display:none; }
}

/* Tablet-specific layout (approx. 600px - 900px) */
@media (min-width:600px) and (max-width:900px){
	/* slightly larger hero text and spacing for tablet */
	.hero { padding:60px 20px; }
	.hero h1 { font-size:clamp(56px, 9.5vw, 96px); line-height:1.02; }
	.hero .lead { font-size: clamp(20px, 3.2vw, 28px); margin-top:12px; margin-bottom:5px; }
	.hero .sub { font-size: clamp(16px, 2.4vw, 20px); margin-top:0; }

	/* lines: kept fixed and shortened for tablet (170px width) */
	.line { width:170px; }
	.line.left { left:3vw; right:auto; }
	.line.left.thin { left:3vw; right:auto; }
	.line.right { right:3vw; left:auto; }
	.line.right.thin { right:3vw; left:auto; }
	.line.thin { top: calc(50% + 14px); }

	/* page-specific tablet override */
	.page-projects .line { width:170px; }
} 

/* Exact 600px viewport: make lines 120px shorter */
@media (width:600px){
	.line { width:170px; }
}

@media (max-width:520px){
	/* mobile: hide full nav and show hamburger-style icon */
	.nav-list { display:none; }
	.site-nav { height:64px; }
	.site-nav .lang { position:absolute; top:10px; right:18px; display:inline-flex; width:40px; height:34px; color:transparent; z-index:60; align-items:center; justify-content:center; background:transparent; border:0; padding:6px; border-radius:6px; }
	.site-nav .lang::before{ content: ''; display:block; width:24px; height:3px; background:#fff; border-radius:2px; box-shadow: 0 8px 0 #fff, 0 16px 0 #fff; position:relative; z-index:61; }
	/* Show visible focus ring only for keyboard users */
	.site-nav .lang:focus { outline: none; }
	.site-nav .lang:focus-visible { outline:2px solid rgba(255,255,255,0.75); outline-offset:4px; border-radius:6px; }
	/* hide text on mobile while keeping pseudo-element visible */
	.site-nav .lang { font-size:0; }
	.site-nav .lang[aria-expanded="true"] { background:rgba(255,255,255,0.04); }

	/* mobile open nav */
	.site-nav.open { align-items:flex-start; }
	.site-nav.open .nav-list { display:flex; flex-direction:column; gap:20px; position:absolute; left:0; right:0; top:64px; padding:20px; background:#073e54; justify-content:center; align-items:center; z-index:9; }
	.site-nav.open .nav-item a { font-size:18px; }

	/* hero adjustments for phone */
	.hero { padding:80px 20px; }
	.hero h1{ font-size:clamp(48px,10vw,80px); line-height:1.02; }
	.hero .lead { font-size:18px; margin-top:10px; margin-bottom:5px; }
	.hero .sub { font-size:16px; margin-top:3px; }

	/* show decorative lines and make them shorter on phone */
	.line { display:block; width:140px; z-index:5; }
	.line.left { left:4vw; right:auto; }
	.line.left.thin { left:4vw; right:auto; }
	.line.right { right:4vw; left:auto; }
	.line.right.thin { right:4vw; left:auto; }
	.line.thin { top: calc(50% + 12px); }
}

/* Projects page overrides */
.page-projects .site-nav {
	background: #ffffff;
	box-shadow: none;
	border-bottom: 1px solid #ddd;
}
.page-projects .nav-item a { color: rgba(0,63,106,0.95); }
.page-projects .nav-item.active a { text-decoration:underline; font-weight:700; text-underline-offset:6px; }
.page-projects .line { border-top-color: rgba(0,63,106,0.95); }
.page-projects .hero { padding: 28px 20px; min-height: 120px; }
.page-projects .hero h1 { font-weight:700; font-size:36px; margin:0; color:#003F6A; }

@media (min-width:901px) {
	/* desktop-specific .page-projects override */
	.page-projects .line { width:400px; }
}

/* Projects grid */
.projects { max-width:1200px; margin:0 auto; padding: 0 20px 40px; }
.projects-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:28px; list-style:none; margin:40px auto 60px; padding:0; }
.project-card { display:block; border:3px solid rgba(0,63,106,0.09); background:#fff; padding:8px; position:relative; overflow:hidden; --overlay-bg: rgba(150,205,140,0.85); --overlay-fg: #012; }
.project-card img { display:block; width:100%; height:auto; background:#f5f6f7; box-shadow:none; transition: transform .28s ease; }

/* Hover/focus overlay title */
.project-title {
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:24px;
	font-weight:700;
	font-size:clamp(18px,2.2vw,28px);
	line-height:1.05;
	color:var(--overlay-fg);
	background: transparent;
	opacity:0;
	transform: translateY(8px);
	transition: opacity .22s ease, background .22s ease, transform .22s ease;
	z-index:6;
}
.project-card:hover .project-title,
.project-card:focus-within .project-title {
	opacity:1;
	background: var(--overlay-bg);
	color: var(--overlay-fg);
	transform: translateY(0);
}
.project-card:hover img,
.project-card:focus-within img { transform: scale(1.03); }

/* Per-card overlay colors */
.project-card.p1 { --overlay-bg: rgba(3,5,92,0.7); --overlay-fg: #fff; }
.project-card.p2 { --overlay-bg: rgba(218,26,9,0.7); --overlay-fg: #fff; }
.project-card.p3 { --overlay-bg: rgba(102,44,145,0.7); --overlay-fg: #fff; }
.project-card.p4 { --overlay-bg: rgba(125,183,163,0.7); --overlay-fg: #fff; }
.project-card.p5 { --overlay-bg: rgba(231,36,73,0.7); --overlay-fg: #fff; }
.project-card.p6 { --overlay-bg: rgba(113,127,133,0.7); --overlay-fg: #fff; }
.project-card.p7 { --overlay-bg: rgba(33,146,155,0.7); --overlay-fg: #fff; }
.project-card.p8 { --overlay-bg: rgba(146,65,73,0.7); --overlay-fg: #fff; }
.project-card.p9 { --overlay-bg: rgba(203,173,65,0.7); --overlay-fg: #fff; }
.project-card.p10 { --overlay-bg: rgba(175,211,139,0.7); --overlay-fg: #fff; }
.project-card.p11 { --overlay-bg: rgba(195,29,117,0.7); --overlay-fg: #fff; }
.project-card.p12 { --overlay-bg: rgba(244,165,157,0.7); --overlay-fg: #fff; }

/* Footer */
.site-footer { text-align:center; color:#003F6A; font-size:13px; padding:28px 20px 48px; border-top:1px solid #eee; }

/* Responsive */
@media (max-width:1000px){
	.projects-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width:700px){
	.projects-grid { grid-template-columns: repeat(2,1fr); gap:18px; }
	.page-projects .hero h1 { font-size:28px; }
}
@media (max-width:520px){
	.projects-grid { grid-template-columns: 1fr; padding:0; }
	.page-projects .hero { padding-top:36px; padding-bottom:20px; }
	.page-projects .line { width:140px; }
}

/* Project detail */
.project-detail { padding: 32px 72px; margin: 35px 0; }
.detail-layout { max-width: 1220px; margin: 0 auto; display:grid; grid-template-columns: 560px 1fr 340px; grid-template-areas: "mockup title title" "mockup info info"; gap:0 48px; align-items:start; }
.mockup-frame { grid-area: mockup; border:0; padding:0; background:transparent; box-sizing:border-box; }
.mockup-img { display:block; width:100%; height:auto; background:#f6f6f8; box-shadow:0 8px 18px rgba(0,0,0,0.08); }

.automate { color:#03055C; }
.decor-line.automate { background:#03055C; }
.decor-line.automate::after { background:#03055C; }

.mario { color:#DA1A09; }
.decor-line.mario { background:#DA1A09; }
.decor-line.mario::after { background:#DA1A09; }

.fleurs { color:#662C91; }
.decor-line.fleurs { background:#662C91; }
.decor-line.fleurs::after { background:#662C91; }

.musee { color:#7DB7A3; }
.decor-line.musee { background:#7DB7A3; }
.decor-line.musee::after { background:#7DB7A3; }

.magog { color:#E72449; }
.decor-line.magog { background:#E72449; }
.decor-line.magog::after { background:#E72449; }

.talmen { color:#717F85; }
.decor-line.talmen { background:#717F85; }
.decor-line.talmen::after { background:#717F85; }

.eye { color:#21929B; }
.decor-line.eye { background:#21929B; }
.decor-line.eye::after { background:#21929B; }

.leches { color:#924149; }
.decor-line.leches { background:#924149; }
.decor-line.leches::after { background:#924149; }

.vignoble { color:#CBAD41; }
.decor-line.vignoble { background:#CBAD41; }
.decor-line.vignoble::after { background:#CBAD41; }

.nature { color:#9bcf98; }
.decor-line.nature { background:#9bcf98; }
.decor-line.nature::after { background:#9bcf98; }

.lumifest { color:#C31D75; }
.decor-line.lumifest { background:#C31D75; }
.decor-line.lumifest::after { background:#C31D75; }

.mariage { color:#F4A59D;}
.decor-line.mariage { background:#F4A59D; }
.decor-line.mariage::after { background:#F4A59D; }

.title-block { grid-area: title; display:flex; align-items:center; justify-content:center; gap:16px; text-align:center; width:100%; align-self:end; margin-bottom:50px; }
.title-text h1 { margin:0; font-size:46px; font-weight:700; line-height:1; }
.title-text h2 { margin:6px 0 0; font-size:38px; font-weight:700; line-height:1; }
.decor-line { display:inline-block; flex:1 1 auto; height:3px; min-height:3px; position:relative; width:auto; }
.decor-line::after { content:""; position:absolute; left:0; right:0; height:3px; top:10px; }

.info-panel { grid-area: info; display:grid; grid-template-columns: 1fr 1fr; gap:18px 28px; align-items:flex-start; color:#111; }
.info-text h3 { margin:0; font-size:22px; font-weight:700; }
.subtitle { margin:6px 0 10px; font-size:12px; letter-spacing:0.6px; color:#555; font-weight:700; }
.description { margin:0 0 16px; line-height:1.6; color:#111; max-width:320px; }
.badge-row { display:flex; gap:10px; }
.badge { display:inline-flex; align-items:center; justify-content:center; border:2px solid #003F6A; color:#003F6A; width:40px; height:40px; padding:0; border-radius:10px; font-weight:700; background:#fff; box-sizing:border-box; }
.badge-row img { width:42px; height:42px; display:block; }

.qr-block { text-align:center; }
.qr-block h4 { margin:0; font-size:20px; font-weight:700; }
.arrow { display:block; margin:6px 0 12px; color:#5f5f5f; font-size:18px; }
.qr-pair { display:flex; gap:16px; justify-content:center; }
.qr-pair figure { margin:0; }
.qr-pair img { width:118px; height:118px; display:block; background:#fff; border:3px solid #003F6A; padding:8px; box-sizing:border-box; }
.qr-pair figcaption { margin-top:8px; color:#555; font-size:13px; text-align:center; }

@media (max-width:1100px){
	.detail-layout { grid-template-columns: 1fr; grid-template-areas: "title" "mockup" "info"; gap:32px; }
	.title-block { order:initial; }
	.info-panel { order:initial; gap:28px 28px; }
	.mockup-frame { order:initial; max-width:720px; margin:0 auto; }
	.info-panel { justify-items:center; }
	.info-text { text-align:center; }
	.badge-row { justify-content:center; }
}

@media (max-width:640px){
	.title-text h1 { font-size:40px; }
	.title-text h2 { font-size:32px; }
	.decor-line { width:auto; }
	.mockup-frame { padding:18px; }
	.qr-pair { gap:12px; }
	.info-panel { grid-template-columns: 1fr; }
}