.menu-text-btn,
.mn-btn { position: relative; }

*:focus-visible { outline: 2px solid var(--mn-accent); outline-offset: 2px; }

/*
 * Public CSS (SimpleSL-friendly)
 * - Politique: aucune balise <script> côté public; CSS uniquement
 * - Objectif: base globale stable pour la landing et les pages publiques
 * - Cette feuille sert de « canon » minimal; toute évolution doit rester incrémentale
 */
:root {
	color-scheme: light dark;
	/* Palette de base */
	--bg2: #060a15;           /* slate-900 */
	--fg2: #e2e8f0;           /* slate-200 */
	--muted2: #94a3b8;        /* slate-400 */
	--surface2: #111827;      /* gray-900 */


	--bg: #010a0f;           /* slate-900 */
	--fg: #e2e8f0;           /* slate-200 */
	--muted: #94a3b8;        /* slate-400 */
	--surface: #111827;      /* gray-900 */

	/* Marque */
	--brand: #ff8a00;        /* joyz.pro brand */
	--accent: var(--brand);
	--accent-2: #ff9f33;     /* brand hover/alt */

	/* Tokens (hérités du legacy – base P1, safe) */
	--border: rgba(148,163,184,.22);
	--card: #15171a;
	/* Menu (mn) */
	--mn-gap: 1rem;
	--nav-pad-y: 6px;
	--nav-pad-x: 10px;
	--nav-radius: 10px;
	--mn-radius: 12px;
	--mn-bg-hover: rgba(15,18,26,0.92);
	--mn-accent: var(--accent);
	--mn-fg: #cbd5e1;
	--mn-transition: 0.18s cubic-bezier(.4,.2,.2,1);
	--mn-popup-bg: rgba(20,22,30,0.97);
	--mn-shadow: 0 6px 24px rgba(0,0,0,0.35);
	--logo-size-desktop: 40px;
	--logo-size-mobile: 32px;
	--header-height: 96px;
}
@media (prefers-color-scheme: light) {
		:root {
			--bg: #ffffff;
			--fg: #0f172a;
			--muted: #475569;
			--surface: #f1f5f9;
			/* Marque conservée */
			--brand: #ff8a00;
			--accent: var(--brand);
			--accent-2: #cc6e00; /* hover plus sombre sur fond clair */
			/* Tokens complémentaires */
			--border: rgba(100,116,139,.35);
			--card: #ffffff;
		}
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; line-height: 1.5; background: var(--bg); color: var(--fg); }

header.hd, nav.mn, main.ct, footer.ft { display: block; }

body { padding-top: var(--header-height); }

/* Header fusion */
header.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(26,26,31,0.92); border-bottom: 1px solid rgba(46,48,62,0.75); backdrop-filter: blur(12px); padding: 0 2rem; }
.hd-content { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0.4rem 0; position: relative; }
.logo { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.logo-icon { display: flex; align-items: center; justify-content: center; width: var(--logo-size-desktop); height: var(--logo-size-desktop); transition: transform var(--mn-transition); color: var(--mn-accent); }
.logo-icon svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 0 rgba(106,160,255,0)); transition: filter var(--mn-transition); }
.logo-text { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.02em; color: var(--mn-accent); transition: color var(--mn-transition), text-shadow var(--mn-transition); }
.logo:hover .logo-text, .logo:focus-visible .logo-text { color: #ffffff; text-shadow: 0 0 10px rgba(106,160,255,0.6); }
.logo:hover .logo-icon svg, .logo:focus-visible .logo-icon svg { filter: drop-shadow(0 0 10px rgba(106,160,255,0.55)); }
.logo:active .logo-icon { transform: scale(0.94); }

.menu-container { display: flex; align-items: center; gap: 1rem; justify-content: flex-end; }
.mn { display: flex; align-items: center; justify-content: flex-end; width: 100%; }
.main-menu-list { display: flex; align-items: center; gap: clamp(.85rem, 2vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
.mn-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0.25em 0.65em; border-radius: var(--nav-radius); text-decoration: none; font-weight: 600; font-size: 1rem; letter-spacing: .01em; color: var(--mn-fg); border: 1px solid transparent; background: transparent; transition: background var(--mn-transition), color var(--mn-transition), border-color var(--mn-transition), box-shadow var(--mn-transition); }
.mn-btn::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -.25em; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: center; opacity: 0; transition: transform var(--mn-transition), opacity var(--mn-transition); border-radius: 999px; }
.mn-btn:hover,
.mn-btn:focus-visible { text-decoration:none; background: rgba(148,163,184,0.12); color: var(--fg); border-color: rgba(148,163,184,0.22); box-shadow: 0 4px 14px rgba(8,12,20,0.25); }
.mn-btn:hover::after,
.mn-btn:focus-visible::after { transform: scaleX(1); opacity: 1; }
.mn-btn.active { color: var(--accent); border-color: rgba(148,163,184,0.3); background: rgba(148,163,184,0.08); }
.mn-btn.active::after { transform: scaleX(1); opacity: 1; }
.menu-text-btn { display: none; align-items: center; justify-content: center; padding: 0.55em 1em; border: 1px solid rgba(46,49,68,0.6); border-radius: 10px; background: rgba(32,33,48,0.85); color: var(--mn-accent); font-weight: 600; font-size: 0.98rem; box-shadow: none; cursor: pointer; transition: background var(--mn-transition), color var(--mn-transition), border-color var(--mn-transition); }
.menu-text-btn:hover,
.menu-text-btn:focus-visible { background: rgba(42,45,63,0.9); color: #fff; border-color: var(--mn-accent); }
.menu-text-btn[aria-expanded="true"] { background: var(--mn-accent); color: #fff; border-color: var(--mn-accent); }

.mobile-menu-popup { position: absolute; top: 100%; right: 1.5rem; margin-top: 0.75rem; background: var(--mn-popup-bg); border-radius: 16px; border: 1px solid rgba(62,64,78,0.85); box-shadow: var(--mn-shadow); padding: 0.8rem 0.7rem; min-width: 210px; display: none; flex-direction: column; gap: 0.4rem; }
.mobile-menu-popup[hidden] { display: none; }
.mobile-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.mobile-menu-list .mn-btn { width: 100%; justify-content: flex-end; padding: 0.65em 1.1em; font-size: 1rem; }

@media (max-width: 1024px) {
.menu-text-btn {
display:inline-flex;
}
.main-menu-list {
display:none;
}
.menu-container {
justify-content: flex-end;
}
/* Affichage du mobile menu pur CSS */
.mobile-menu-popup {display: none;}
.mobile-menu-toggle:checked + .menu-text-btn + .mobile-menu-popup {display: flex;}
}

@media (max-width: 900px) {
header.hd { padding: 0 1.25rem; }
.logo-icon { width: var(--logo-size-mobile); height: var(--logo-size-mobile); }
.logo-text { font-size: 1.2rem; }
.hd-content { padding: 0.9rem 0; }
}

/* Contenu (ct) */
main.ct {
width:100%;
max-width:100%;
margin:2rem auto;
padding:0 1rem;
}
@media (min-width: 768px) {
main.ct {
max-width:92vw;
}
}
@media (min-width: 1024px) {
main.ct {
max-width:1200px;
min-width:800px;
padding:0 2rem;
}
}
@media (min-width: 1440px) {
main.ct {
max-width:1600px;
}
}
section { margin-block: 3rem; }
section h1, section h2 { line-height: 1.2; }

.links-layout {
display:flex;
gap:2rem;
align-items:flex-start;
flex-wrap:nowrap;
}

.links-cards-grid {
display:grid;
gap:1.5rem;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
margin-top:2rem;
}

.links-card {
display:flex;
flex-direction:column;
gap:1rem;
background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,#000) 0%,color-mix(in srgb,var(--surface) 85%,#000) 100%);
border:1px solid var(--border);
border-radius:16px;
padding:1.5rem;
box-shadow:0 10px 30px rgba(0,0,0,.25);
transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
min-height:220px;
}

.links-card:hover {
border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
transform:translateY(-4px);
box-shadow:0 16px 36px rgba(0,0,0,.32);
}

.links-card-header {
display:flex;
flex-direction:column;
gap:.35rem;
}

.links-card-title {
margin:0;
font-size:1.15rem;
font-weight:700;
}

.links-card-title a {
color:#fff;
text-decoration:none;
}

.links-card-title a:hover,
.links-card-title a:focus-visible {
color:var(--accent);
text-decoration:underline;
}

.links-card-url {
font-size:.85rem;
color:var(--muted);
letter-spacing:.02em;
text-transform:uppercase;
}

.links-card-desc {
margin:0;
font-size:.98rem;
line-height:1.5;
color:color-mix(in srgb,var(--fg) 85%,var(--muted));
}

.links-card-footer {
margin-top:auto;
display:flex;
gap:1rem;
align-items:center;
flex-wrap:wrap;
}

.links-card-badges {
display:flex;
gap:.5rem;
flex-wrap:wrap;
}

.links-card-badges .badge {
background:color-mix(in srgb,var(--accent) 8%,#0b0b0b);
border-color:color-mix(in srgb,var(--accent) 38%,var(--border));
}

.links-card-link {
margin-left:auto;
display:inline-flex;
align-items:center;
gap:.4rem;
font-weight:600;
color:var(--accent);
text-decoration:none;
letter-spacing:.01em;
}

.links-card-link::after {
content:"↗";
font-size:.9rem;
}

.links-card-link:hover,
.links-card-link:focus-visible {
text-decoration:underline;
}

.news-featured {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:2rem;
margin-top:3rem;
padding:2.5rem;
background:linear-gradient(140deg,color-mix(in srgb,var(--surface) 96%,#000) 0%,color-mix(in srgb,var(--surface) 80%,#000) 100%);
border:1px solid var(--border);
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,.32);
}

.news-featured-media {
position:relative;
}

.news-featured-media img {
width:100%;
height:100%;
object-fit:cover;
border-radius:16px;
box-shadow:0 12px 24px rgba(0,0,0,.28);
}

.news-featured-placeholder {
width:100%;
aspect-ratio:4/3;
display:grid;
place-items:center;
font-size:3rem;
font-weight:700;
color:var(--fg);
background:color-mix(in srgb,var(--accent) 18%,#0b0b0b);
border-radius:16px;
border:1px solid color-mix(in srgb,var(--accent) 32%,var(--border));
}

.news-featured-body {
display:flex;
flex-direction:column;
gap:1.5rem;
}

.news-featured-meta {
display:flex;
flex-wrap:wrap;
gap:1rem;
align-items:center;
}

.news-featured-tags {
display:flex;
gap:.5rem;
flex-wrap:wrap;
}

.news-featured-date {
font-size:.95rem;
color:var(--muted);
letter-spacing:.02em;
text-transform:uppercase;
}

.news-featured-title {
margin:0;
font-size:2rem;
line-height:1.2;
font-weight:800;
}

.news-featured-title a {
color:#fff;
text-decoration:none;
}

.news-featured-title a:hover,
.news-featured-title a:focus-visible {
color:var(--accent);
text-decoration:underline;
}

.news-featured-desc {
font-size:1.05rem;
line-height:1.6;
color:color-mix(in srgb,var(--fg) 88%,var(--muted));
}

.news-featured-link {
display:inline-flex;
align-items:center;
gap:.5rem;
font-weight:700;
color:var(--accent);
text-decoration:none;
letter-spacing:.01em;
}

.news-featured-link::after {
content:"→";
font-size:1.1rem;
}

.news-featured-link:hover,
.news-featured-link:focus-visible {
text-decoration:underline;
}

.news-cards-grid {
margin-top:3rem;
display:grid;
gap:2rem;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}

.news-card {
display:grid;
grid-template-columns:120px 1fr;
gap:1.5rem;
align-items:flex-start;
padding:1.75rem;
background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 95%,#000) 0%,color-mix(in srgb,var(--surface) 82%,#000) 100%);
border:1px solid var(--border);
border-radius:18px;
box-shadow:0 12px 28px rgba(0,0,0,.28);
transition:border-color .2s ease,transform .2s ease;
}

.news-card:hover {
border-color:color-mix(in srgb,var(--accent) 40%,var(--border));
transform:translateY(-3px);
}

.news-card-media img {
width:100%;
height:100%;
object-fit:cover;
border-radius:14px;
box-shadow:0 8px 18px rgba(0,0,0,.28);
}

.news-card-placeholder {
width:100%;
aspect-ratio:1;
display:grid;
place-items:center;
font-size:2rem;
font-weight:700;
color:var(--fg);
background:color-mix(in srgb,var(--accent) 12%,#0b0b0b);
border-radius:14px;
border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));
}

.news-card-body {
display:flex;
flex-direction:column;
gap:1rem;
}

.news-card-title {
margin:0;
font-size:1.3rem;
font-weight:700;
}

.news-card-title a {
color:#fff;
text-decoration:none;
}

.news-card-title a:hover,
.news-card-title a:focus-visible {
color:var(--accent);
text-decoration:underline;
}

.news-card-desc {
font-size:.98rem;
line-height:1.55;
color:color-mix(in srgb,var(--fg) 82%,var(--muted));
}

.news-card-meta {
display:flex;
gap:1rem;
flex-wrap:wrap;
align-items:center;
}

.news-card-date {
font-size:.9rem;
color:var(--muted);
letter-spacing:.015em;
text-transform:uppercase;
}

.news-card-tags {
display:flex;
gap:.5rem;
flex-wrap:wrap;
}

.news-card-link {
margin-top:auto;
display:inline-flex;
align-items:center;
gap:.4rem;
font-weight:600;
color:var(--accent);
text-decoration:none;
letter-spacing:.01em;
}

.news-card-link::after {
content:"→";
font-size:1rem;
}

.news-card-link:hover,
.news-card-link:focus-visible {
text-decoration:underline;
}

#links-aside,
.links-aside {
flex:0 0 220px;
background:var(--surface);
border:1px solid var(--border);
border-radius:12px;
padding:1.25rem 1.5rem;
position:sticky;
top:calc(4.5rem + 16px);
}

.links-aside h2 {
margin:0 0 1rem;
font-size:1.1rem;
font-weight:700;
}

.links-aside nav {
display:block;
}

#links-category-tree,
.links-category-tree {
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:.4rem;
}

.links-category-tree li {
margin:0;
padding:0;
}

.links-category-main > a,
.links-category-sub > a {
display:flex;
align-items:center;
gap:.5rem;
text-decoration:none;
color:var(--muted);
font-weight:600;
transition:color .15s ease;
}

.links-category-main > a {
font-size:1rem;
}

.links-category-sub {
padding-left:1.5rem;
}

.links-category-sub > a {
font-size:.95rem;
font-weight:500;
}

.links-category-tree li.active > a,
.links-category-tree li > a:hover,
.links-category-tree li > a:focus-visible {
color:var(--accent);
}

.links-aside-empty {
margin:0;
font-size:.95rem;
}

.links-layout #links-cards {
flex:1 1 auto;
min-width:0;
}

@media (max-width: 960px) {
.links-layout {
flex-direction:column;
gap:1.5rem;
}

.links-cards-grid {
margin-top:1rem;
}

#links-aside,
.links-aside {
position:static;
width:100%;
flex:1 1 auto;
}
}

@media (max-width: 900px) {
.news-featured {
padding:2rem;
}
.news-card {
grid-template-columns:1fr;
}
.news-card-media {
order:-1;
}
}

@media (max-width: 640px) {
.news-featured {
grid-template-columns:1fr;
padding:1.75rem;
gap:1.5rem;
}
.news-featured-title {
font-size:1.6rem;
}
.news-featured-desc {
font-size:.98rem;
}
.news-cards-grid {
grid-template-columns:1fr;
gap:1.5rem;
margin-top:2.5rem;
}
.news-card {
padding:1.5rem;
}
}

/* Liens */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Micro‑composants */
.ok { display: inline-block; padding: .25rem .5rem; border-radius: .25rem; background: #e6ffed; color: #065f46; font-weight: 600; }
@media (prefers-color-scheme: dark) { .ok { background: #0a2; color: #c4f5cf; } }
.muted { color: var(--muted); }
.lead { font-size: 1.125rem; color: var(--muted); }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* Footer (ft) */
footer.ft { display: flex; gap: .5rem; align-items: center; justify-content: center; padding: 1rem; border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); }
footer.ft a { color: var(--accent); text-decoration: none; }
footer.ft a:hover { text-decoration: underline; }

/* Pagination (public) — agnostique Tailwind */
.pagination { display: flex; justify-content: center; margin-top: 1.5rem; }
.pagination .pg-nav { display: inline-flex; gap: .25rem; }
.pagination .pg-item { display: inline-flex; align-items: center; gap: .25rem; padding: .45rem .7rem; border: 1px solid var(--border); border-radius: 8px; color: var(--mn-fg); text-decoration: none; line-height: 1; background: transparent; font-size: .85rem; }
.pagination .pg-item:hover,
.pagination .pg-item:focus-visible { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); color: var(--accent); background: var(--mn-bg-hover); }
.pagination .pg-item.active { background: var(--accent); color: #fff; border-color: var(--accent); cursor: default; }
.pagination .pg-item.disabled { opacity: .42; cursor: not-allowed; }
.pagination .pg-item svg { width: 1em; height: 1em; flex: 0 0 auto; }

/* Landing hero (index) — sobre, sombre, accent orange */
#hero { display: grid; place-items: center; text-align: center; padding: clamp(2rem, 6vw, 4rem) 1rem; border-radius: 12px; background:
	linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #000) 0%, color-mix(in srgb, var(--surface) 85%, #000) 100%),
	radial-gradient(1200px 500px at 20% -10%, rgba(255,255,255,0.06), transparent);
	box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
#hero .hero-title { font-size: clamp(1.8rem, 4.6vw, 3rem); font-weight: 800; letter-spacing: .2px; margin: 0 0 .75rem; color: #fff; }
#hero .hero-subtitle { max-width: 70ch; margin: 0 auto 1.25rem; color: var(--muted); font-size: clamp(1rem, 2.5vw, 1.25rem); }
.actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* Boutons (public) */
.btn { display: inline-block; padding: .6rem 1rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: #0b0b0b; color: #fff; text-decoration: none; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.btn:hover { background: color-mix(in srgb, var(--accent) 14%, #0b0b0b); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-outline { background: transparent; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.btn-outline:hover { background: color-mix(in srgb, var(--accent) 10%, #0b0b0b); color: #fff; }

/* About section */
#about { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 900px){ #about { grid-template-columns: 2fr 1fr; align-items: start; } }
#about .about-content p { margin: 0 0 .5rem; }
#about .about-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

.about-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem; /* Space below image on small screens */
}

@media (min-width: 900px) {
  .about-image {
    grid-column: 2 / 3; /* Position on the right column */
    grid-row: 1 / 3; /* Span multiple rows if needed */
    margin-bottom: 0; /* No bottom margin on large screens */
  }
}

.about-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border: 1px solid var(--border);
  object-fit: cover;
}

@media (max-width: 640px) {
  .about-image img {
    max-width: 80%; /* Smaller on very small screens */
  }
}

/* Badge */
.badge { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .5rem; font-size: .8rem; border-radius: 999px; background: #0b0b0b; color: #e5e7eb; border: 1px solid var(--border); }
.badge-primary { background: color-mix(in srgb, var(--accent) 16%, #1f2937); color: #fee2b7; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* Generic Grid Helpers */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

@media (min-width: 768px) {
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Section Skills */
#skills .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; }
.skill-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; text-align: center; transition: border-color .2s ease, transform .2s ease; }
.skill-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.skill-title { font-weight: 700; margin: .5rem 0; }
.skill-tags { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.skill-tags .badge { background: #1f2937; color: #cbd5e1; }

/* Section Portfolio */
#portfolio .portfolio-grid {
display: grid;
gap: 2rem;
margin-top: 2rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adaptative width, minimum 300px, aiming for 2-3 columns */
}

@media (min-width: 768px) {
#portfolio .portfolio-grid { grid-template-columns: repeat(2, 1fr); } /* 2 columns on medium screens */
}

@media (min-width: 1024px) {
#portfolio .portfolio-grid { grid-template-columns: repeat(3, 1fr); } /* 3 columns on large screens */
}

/* @media (min-width: 1440px) {
#portfolio .portfolio-grid { grid-template-columns: repeat(4, 1fr); } */ /* Removed explicit 4-column setting */
/* } */

.project-card {
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #000) 0%, color-mix(in srgb, var(--surface) 85%, #000) 100%);
border: 1px solid var(--border);
border-radius: 16px;
/* overflow: hidden; */ /* Removing for consistency, handled by cover */
display: flex;
flex-direction: column;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
padding: 1.5rem; /* Consistent padding with other cards */
min-height: 220px; /* Consistent min-height with other cards */
}
.project-card:hover {
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(0,0,0,.32);
}
.project-cover {
aspect-ratio: 16/9;
background: var(--bg);
display: grid;
place-items: center;
color: var(--muted);
overflow: hidden; /* Keep overflow hidden here */
margin: -1.5rem -1.5rem 1.5rem -1.5rem; /* Adjust margin to 'pull' it out of padding */
border-radius: 15px 15px 0 0; /* Match card radius top */
}
.project-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.project-placeholder {
width: 100%;
height: 100%;
display: grid;
place-items: center;
font-size: 3rem;
font-weight: 700;
color: var(--fg);
background: color-mix(in srgb,var(--accent) 18%,#0b0b0b);
border-bottom: 1px solid color-mix(in srgb,var(--accent) 32%,var(--border));
}
.project-content {
/* padding: 1.5rem; */ /* Moved to .project-card */
display: flex;
flex-direction: column;
/* flex-grow: 1; */ /* Not strictly needed, handled by flex-direction on card */
gap: 1rem;
}
.project-title {
margin: 0 0 .5rem;
font-size: 1.25rem;
font-weight: 700;
}
.project-title a {
color: #fff;
text-decoration: none;
}
.project-title a:hover,
.project-title a:focus-visible {
color: var(--accent);
text-decoration: underline;
}
.project-desc {
margin: 0 0 1rem;
font-size: .95rem;
line-height: 1.5;
color: color-mix(in srgb,var(--fg) 85%,var(--muted));
}
.project-tags {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: auto;
}
.project-tags .badge {
background: rgba(148,163,184,0.1);
border-color: rgba(148,163,184,0.25);
color: var(--muted);
}

.project-card-footer {
margin-top:auto;
display:flex;
gap:1rem;
align-items:center;
flex-wrap:wrap;
}

.project-card-link {
margin-left:auto;
display:inline-flex;
align-items:center;
gap:.4rem;
font-weight:600;
color:var(--accent);
text-decoration:none;
letter-spacing:.01em;
}

.project-card-link::after {
content:"→";
font-size:1rem;
}

.project-card-link:hover,
.project-card-link:focus-visible {
text-decoration:underline;
}

/* Sections Latest Links / News */
#latest-links .links-cards-grid,
#latest-news .news-cards-grid {
margin-top: 2rem;
}

/* Section Contact */
#contact .contact-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
line-height: 1.8;
margin-top: 2rem;
}

#contact .contact-card p {
margin: 0;
}
.contact-card a {
font-weight: 600;
}

@media (max-width: 640px) {
#skills .skills-grid,
#portfolio .portfolio-grid {
gap: 1rem;
margin-top: 1.5rem;
}

.skill-card {
padding: 1.25rem;
}
.skill-title {
font-size: 1rem;
}

.project-card {
padding: 0;
}
.project-content {
padding: 1.25rem;
}
.project-title {
font-size: 1.1rem;
}
.project-desc {
font-size: .9rem;
}

#latest-links .links-cards-grid,
#latest-news .news-cards-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
margin-top: 1.5rem;
}
.text-right {
text-align: center;
margin-top: 1rem;
}
}

/* =====================================
   Header de section universel (news/links)
======================================= */
section > header, .section-header {
border:solid 1px var(--border);
padding:1.25rem 1rem 1.25rem 1.5rem;
border-radius:7px;
margin-bottom:2.2rem;
}
section > header h1, section > header .h2 {
margin:0 0 .25rem 0;
font-size:1.45rem;
font-weight:800;
letter-spacing:.01em;
color:var(--accent);
display:flex;
align-items:center;
}
.breadcrumb{margin:0 0 0.5rem 0}

/* =====================================
   Formulaire de recherche moderne
======================================= */
.frm-search{display:flex;align-items:center;gap:0.75rem;background:color-mix(in srgb,var(--surface)96%,#000);padding:0.4rem 0.75rem;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.045);border:1px solid var(--border);margin-top:.5rem}
.frm-search input[type="search"]{flex:1 1 160px;font-size:1rem;padding:.48em 2.15em .48em 1em;border:none;background:transparent;color:var(--fg);outline:none;border-radius:8px;transition:box-shadow .2s}
.frm-search input[type="search"]:focus{box-shadow:0 0 0 2px var(--accent)}
.frm-search button.btn{margin:0;padding-left:1.1em;padding-right:1.1em;border-radius:8px;font-size:1rem}
.frm-search input[type="search"]::placeholder{color:var(--muted)}

/* Icône de loupe dans le champ (simple fallback, mobile-friendly)
   Pour une vraie icône SVG, il faudrait une balise supplémentaire. */
.frm-search input[type="search"] {border:none;background:transparent;color:var(--fg);outline:none;border-radius:8px;transition:box-shadow .2s}