/* ⚠️ SOURCE MANUELLE — NE PAS RECOMPILER DEPUIS SCSS (ancien custom.scss archivé dans /_legacy).
   Base sombre du thème "caméléon" (variables ci-dessous = source unique).
   redesign.css, chargé après, ajoute la couche caméléon (skins, composants, animations). */
:root {
  --bg: #0a0712;
  --bg-2: #07050d;
  --surface: #120e1f;
  --surface-2: #191327;
  --text: #f1edf7;
  --muted: #a99fc0;
  --line: rgba(180, 158, 235, 0.12);
  --line-strong: rgba(180, 158, 235, 0.26);

  --iris: linear-gradient(115deg, #b15cff 0%, #5b8cff 26%, #2fd6c6 50%, #5ee08a 74%, #f0a35a 100%);
  --iris-soft: linear-gradient(115deg, rgba(177,92,255,.18), rgba(91,140,255,.16), rgba(47,214,198,.16), rgba(94,224,138,.16), rgba(240,163,90,.18));

  --skin: #8b6cff;
  --skin-2: #2fd6c6;
  --skin-ink: #0a0712;
  --accent: #8b6cff;
  --accent-2: #2fd6c6;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.6);

  /* Échelle d'espacement & rayons */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem;
  --radius-sm: 12px; --radius-md: 16px; --radius-lg: 18px; --radius-pill: 999px;

  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

a {
  color: inherit;
}

.portfolio-navbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 7, 18, 0.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.brand-mark img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.nav-link {
  color: var(--muted);
  font-weight: 600;
  font-size: 1.08rem;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--text);
}

.hero-section {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  padding: 64px 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.7fr);
  gap: 56px;
  align-items: center;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-copy h1,
.page-header h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  line-height: 1.02;
  font-weight: 700;
}

.lead {
  margin: 22px 0 0;
  color: var(--accent-2);
  font-size: 1.4rem;
  font-weight: 700;
}

.hero-text,
.page-header p {
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

.hero-actions,
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-media {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface-2);
}

.hero-media img,
.project-card img,
.detail-image {
  width: 100%;
  display: block;
  object-fit: cover;
}

.hero-media img {
  aspect-ratio: 4 / 5;
}

.section-band {
  padding: 72px 0;
}

.section-band.subtle {
  background: var(--surface-2);
}

.section-heading {
  margin-bottom: 26px;
}

.section-heading h2,
.admin-header h1,
.detail-content h2,
.contact-panel h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
}

.section-heading.compact h2 {
  font-size: 2rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.project-card {
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.clickable-card {
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.clickable-card:hover,
.clickable-card:focus {
  border-color: var(--skin);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.11);
  transform: translateY(-2px);
  outline: none;
}

.clickable-card:focus-visible {
  outline: 3px solid var(--line-strong);
  outline-offset: 3px;
}

.project-card img {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
}

.project-card--compact img {
  aspect-ratio: 16 / 7;
}

.project-card > div {
  padding: 22px;
}

.card-meta,
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-meta span,
.tag-row span,
.skill-badge {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.82rem;
  font-weight: 700;
}

.skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.skill-badge:hover,
.skill-badge:focus {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.skill-badge small {
  color: var(--muted);
  font-weight: 600;
}

.skill-badge__icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: none;
}

.project-card h3 {
  margin: 16px 0 10px;
  font-size: 1.35rem;
  font-weight: 700;
}

.project-card p,
.timeline-item p,
.detail-content p {
  color: var(--muted);
  line-height: 1.65;
}

.project-card--compact p {
  display: -webkit-box;
  min-height: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.project-card--compact > div {
  padding: 18px;
}

.card-actions a {
  font-weight: 700;
  text-decoration: none;
  color: var(--accent);
}

.two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px;
}

.timeline-list {
  display: grid;
  gap: 16px;
}

.timeline-item {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.timeline-item--compact {
  padding: 18px;
}

.timeline-item--compact .timeline-card-header {
  margin-bottom: 10px;
}

.timeline-item--compact .timeline-heading {
  gap: 3px;
}

.timeline-item--compact .timeline-logo {
  width: 86px;
  height: 86px;
}

.timeline-item--compact .tag-row {
  margin-top: 12px;
}

.timeline-body {
  min-width: 0;
}

.timeline-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 24px;
  align-items: start;
  margin-bottom: 14px;
}

.timeline-date,
.muted {
  color: var(--muted);
}

.timeline-date {
  margin: 0;
  font-weight: 700;
  line-height: 1.35;
}

.timeline-item h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.timeline-heading {
  display: grid;
  gap: 4px;
}

.entity-line {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 8px 0;
}

.entity-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff; /* tuile-logo : blanc pour la lisibilité des logos d'organisations */
  color: var(--accent);
  font-weight: 700;
}

.timeline-logo {
  width: 112px;
  height: 112px;
  justify-self: end;
  font-size: 1.5rem;
}

.entity-logo.large {
  width: 64px;
  height: 64px;
}

.entity-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.entity-name {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.info-button {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.info-button:hover,
.info-button:focus {
  border-color: var(--accent);
  background: #f7faf8;
}

.skill-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.skill-cloud span,
.skill-cloud .skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-weight: 700;
}

.skill-cloud small {
  color: var(--muted);
  font-weight: 600;
}

.info-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.info-modal.is-open {
  display: flex;
}

.info-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 23, 0.52);
}

.info-modal__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(760px, 90vh);
  overflow: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 26px;
}

.info-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
}

.info-card {
  display: grid;
  gap: 14px;
}

.info-card h2,
.info-card h3 {
  margin: 0;
}

.info-card a {
  color: var(--accent);
  font-weight: 700;
}

.info-list {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 14px;
  margin: 0;
}

.info-list dt {
  color: var(--muted);
  font-weight: 700;
}

.info-list dd {
  margin: 0;
}

.skill-sections {
  display: grid;
  gap: 22px;
}

.skill-sections article,
.contact-panel,
.form-surface,
.admin-panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.page-header {
  padding: 72px 0 48px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}

.detail-layout,
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 34px;
  align-items: start;
}

.detail-image {
  aspect-ratio: 16 / 11;
  border-radius: 8px;
}

.clean-list {
  color: var(--muted);
  line-height: 1.8;
}

.contact-panel {
  display: grid;
  gap: 14px;
}

.contact-panel a {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-weight: 700;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: #fff;
  color: var(--text);
}

input:focus,
textarea:focus,
select:focus {
  outline: 3px solid var(--line-strong);
  border-color: var(--accent);
}

.form-surface,
.admin-form {
  display: grid;
  gap: 18px;
}

/* Page d'authentification (back-office) — au thème caméléon */
.auth-page {
  min-height: 72vh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 3rem) 0;
}

.auth-card {
  width: min(100%, 440px);
  text-align: center;
}

.auth-header h1 {
  margin: 8px 0 8px;
}

.auth-header p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
}

.auth-form {
  margin-top: 22px;
  text-align: left;
}

.auth-form .btn {
  margin-top: 4px;
  width: 100%;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

.auth-visitor {
  width: 100%;
}

.admin-form-group {
  display: grid;
  gap: 14px;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.admin-form-group h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
}

.form-row,
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-grid__full {
  grid-column: 1 / -1;
}

.admin-section-list {
  display: grid;
  gap: 12px;
}

.admin-accordion {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.admin-accordion summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
}

.admin-accordion summary small {
  color: var(--muted);
  font-weight: 700;
}

.admin-inline-form {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-top: 1px solid var(--line);
}

.admin-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-danger-link {
  margin: 0 14px 14px;
  border: 0;
  background: transparent;
  color: var(--accent-2);
  font-weight: 700;
}

.admin-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - 65px);
}

.admin-sidebar {
  position: sticky;
  top: 65px;
  height: calc(100vh - 65px);
  padding: 24px;
  border-right: 1px solid var(--line);
  background: #111;
  color: #fff;
}

.admin-logo {
  display: block;
  margin-bottom: 26px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
}

.admin-sidebar nav {
  display: grid;
  gap: 6px;
}

.admin-sidebar a {
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.admin-sidebar a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.admin-content {
  padding: 34px;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.stats-grid article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.stats-grid strong {
  display: block;
  font-size: 2.3rem;
  line-height: 1;
}

.stats-grid span {
  color: var(--muted);
}

.admin-table {
  display: grid;
  gap: 10px;
}

.admin-note {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf8;
  color: var(--muted);
  font-weight: 600;
}

.admin-note strong {
  color: var(--text);
}

.table-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.row-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.row-actions a,
.row-actions button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.field-help {
  display: block;
  color: var(--muted);
  font-weight: 600;
}

.media-upload-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  align-items: end;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.media-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.media-card img,
.media-card video {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  background: var(--surface-2);
}

.media-card > div {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.media-card code {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--accent);
}

.media-card button {
  border: 0;
  background: transparent;
  color: var(--accent-2);
  font-weight: 700;
  padding: 0;
}

.section-media-preview {
  display: grid;
  gap: 8px;
  max-width: 520px;
}

.section-media-preview img,
.section-media-preview video {
  width: 100%;
  max-height: 300px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  object-fit: cover;
}

.section-media-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.empty-state {
  margin: 0;
  color: var(--muted);
}

.site-footer {
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  padding: 3rem 0 1.5rem;
}

/* Hairline iridescent en haut du footer (signature caméléon, comme la navbar) */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--iris);
  background-size: 220% 100%;
  animation: iris-flow 9s linear infinite;
  opacity: 0.6;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.footer-brand strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text);
}

.footer-brand p {
  margin: 0.6rem 0 0;
  color: var(--muted);
  max-width: 44ch;
  line-height: 1.6;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-col__title {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: var(--skin);
  margin-bottom: 0.2rem;
}

.site-footer a {
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--skin);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.footer-bottom p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.footer-legal a {
  font-size: 0.85rem;
}

.legal-content {
  display: grid;
  gap: 22px;
  max-width: 920px;
}

.legal-content article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.legal-content h2 {
  margin: 0 0 12px;
  font-size: 1.35rem;
  font-weight: 700;
}

.legal-content p,
.legal-content li,
.legal-content dd {
  color: var(--muted);
  line-height: 1.7;
}

.legal-content dl {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 8px 18px;
  margin: 0;
}

.legal-content dt {
  font-weight: 700;
}

.legal-content dd {
  margin: 0;
}

.legal-content a,
.form-note a {
  color: var(--accent);
  font-weight: 700;
}

.legal-warning,
.form-note {
  padding: 12px 14px;
  border-left: 4px solid var(--accent-2);
  background: var(--surface-2);
  color: var(--muted);
}

.form-note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

@media (max-width: 992px) {
  .hero-grid,
  .two-columns,
  .detail-layout,
  .contact-grid,
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .media-grid,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline-card-header {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .timeline-logo {
    width: 88px;
    height: 88px;
  }

  .timeline-item--compact .timeline-logo {
    width: 80px;
    height: 80px;
  }

  .admin-sidebar {
    position: static;
    height: auto;
  }
}

@media (max-width: 640px) {
  .hero-section,
  .section-band,
  .page-header {
    padding: 42px 0;
  }

  .card-grid,
  .media-grid,
  .stats-grid,
  .form-row,
  .form-grid,
  .media-upload-form,
  .table-row {
    grid-template-columns: 1fr;
  }

  .admin-content {
    padding: 20px;
  }

  .timeline-card-header {
    grid-template-columns: 1fr;
  }

  .timeline-logo {
    width: 72px;
    height: 72px;
    justify-self: start;
    order: -1;
  }

  .timeline-item--compact .timeline-logo {
    width: 64px;
    height: 64px;
  }

  .project-card--compact img {
    aspect-ratio: 16 / 9;
  }

  .admin-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem 1.5rem;
  }

  /* La marque occupe toute la largeur ; Navigation et Me joindre côte à côte en dessous */
  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* cibles tactiles confortables sur les liens du footer */
  .site-footer a {
    min-height: 40px;
    padding: 0.35rem 0;
  }

  .legal-content dl {
    grid-template-columns: 1fr;
  }
}

.immersive-page {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.focus-scroll-page {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  background:
    linear-gradient(180deg, rgba(18, 29, 27, 0.18), rgba(251, 250, 247, 0.18)),
    url("/images/background.jpg") center / cover fixed,
    var(--bg);
  position: relative;
  isolation: isolate;
}

.focus-scroll-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: inherit;
  filter: blur(12px) saturate(1.08);
  transform: scale(1.04);
}

.focus-scroll-section {
  min-height: 80svh;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: 4.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: opacity 380ms ease, filter 380ms ease, transform 380ms ease;
}

.focus-scroll-page.has-focus-effect .focus-scroll-section {
  opacity: 0.62;
  filter: blur(1.4px);
  transform: scale(0.955);
}

.focus-scroll-page.has-focus-effect .focus-scroll-section.is-active {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  z-index: 2;
}

.focus-card {
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: clamp(1.35rem, 3vw, 2.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12);
  position: relative;
}

.focus-card-position {
  position: absolute;
  right: clamp(1rem, 2vw, 1.55rem);
  bottom: clamp(0.85rem, 1.7vw, 1.25rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-pill);
  background: rgba(250, 249, 246, 0.92);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.intro-card {
  display: grid;
  gap: 16px;
  min-height: min(460px, 62svh);
  align-content: center;
}

.intro-card h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.04;
  font-weight: 700;
}

.intro-card p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.65;
}

.project-filter-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}

.project-filter-panel label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.project-filter-panel select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0 38px 0 12px;
}

.project-filter-panel .btn {
  min-height: 44px;
  white-space: nowrap;
}

.project-filter-count {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.education-focus-card,
.experience-focus-card {
  width: min(100%, 960px);
}

.project-focus-card {
  width: min(100%, 980px);
}

.home-profile-card {
  width: min(100%, 1060px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.8fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.home-profile-card .hero-media {
  max-width: 360px;
  justify-self: end;
  align-self: center;
}

/* La photo respecte son ratio 4/5 (height:auto bat l'attribut HTML height) au lieu de
   s'étirer sur toute la hauteur de la carte → carte moins haute. */
.home-profile-card .hero-media img {
  height: auto;
}

.home-focus-page .home-summary-card {
  width: min(100%, 1080px);
}

.home-focus-page .cta-panel .slide-header h2 {
  max-width: 680px;
  font-size: clamp(1.45rem, 2.7vw, 2.25rem);
  line-height: 1.12;
}

.contact-focus-card {
  width: min(100%, 1080px);
}

.contact-focus-header,
.technical-intro-card {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
}

.contact-focus-header h1,
.technical-intro-card h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 4.5rem);
  line-height: 0.98;
  font-weight: 700;
}

.contact-focus-header p:not(.eyebrow),
.technical-intro-card p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.technical-domains-card {
  width: min(100%, 940px);
}

.technical-domain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.technical-domain-tile,
.technical-skill-card,
.technical-domain-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.technical-domain-tile {
  padding: 16px;
}

.technical-domain-tile h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
}

.technical-domain-tile p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.focus-card .timeline-list {
  gap: 0;
}

.focus-card .timeline-item {
  padding: 0;
  border: 0;
  background: transparent;
}

.focus-card .timeline-card-header {
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: clamp(1rem, 3vw, 2.25rem);
}

.focus-card .timeline-item h3,
.project-focus-card .project-showcase h2 {
  max-width: 720px;
  font-size: clamp(1.45rem, 2.7vw, 2.25rem);
  line-height: 1.12;
}

.focus-card .timeline-logo {
  width: clamp(68px, 8vw, 92px);
  height: clamp(68px, 8vw, 92px);
}

.project-focus-card .project-showcase {
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.project-focus-card .project-showcase img {
  max-height: 280px;
  aspect-ratio: 16 / 9;
}

.project-focus-card .project-showcase-content {
  gap: 14px;
}

.focus-card .tag-row {
  margin-top: 18px;
}

.focus-card-actions {
  display: flex;
  margin-top: 28px;
}


.immersive-slide {
  min-height: 100svh;
  scroll-snap-align: center;
  scroll-margin-top: 72px;
  padding: 5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.immersive-slide.subtle {
  background: var(--surface-2);
}

.intro-slide {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}

.hero-slide {
  min-height: calc(88svh - 72px);
}

.slide-panel {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.detail-slide-panel {
  width: min(100%, 1040px);
}

.slide-panel.hero-grid {
  display: grid;
}

.slide-header {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}

.slide-header h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(1.7rem, 3.2vw, 3rem);
  line-height: 1.08;
  font-weight: 700;
}

.slide-header p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.65;
}

.slide-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-immersive .timeline-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-immersive .timeline-item--compact {
  min-height: 100%;
}

.home-immersive .timeline-item--compact .timeline-card-header {
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 14px;
}

.home-immersive .timeline-item--compact .timeline-logo {
  width: 58px;
  height: 58px;
}

.home-immersive .timeline-item--compact h3 {
  font-size: 0.96rem;
  line-height: 1.22;
}

.home-immersive .timeline-item--compact p {
  margin: 0;
}

.home-immersive .skill-badge {
  padding: 4px 9px;
  font-size: 0.78rem;
}

.home-immersive .project-card h3 {
  font-size: 1.05rem;
  line-height: 1.22;
}

.home-immersive .project-card--compact img {
  aspect-ratio: 16 / 6;
  max-height: 145px;
  object-fit: cover;
}

.home-immersive .project-card--compact > div,
.home-immersive .timeline-item--compact {
  padding: 14px;
}

.home-summary-card {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: clamp(1.6rem, 3.2vw, 2.6rem);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
}

.home-summary-card:hover,
.home-summary-card:focus {
  border-color: var(--skin);
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.14);
}

.home-summary-card__header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.home-summary-card__header h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.08;
  font-weight: 700;
}

.home-summary-card > p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 1.05rem;
}

.home-summary-list {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.home-summary-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 15px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--text);
  background: #fff;
  font-weight: 700;
  text-decoration: none;
}

.home-summary-media {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.home-summary-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-summary-media--project img {
  object-fit: cover;
}

.home-summary-item > div:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.home-summary-item strong,
.home-summary-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-summary-item strong {
  color: var(--text);
  font-size: 1.1rem;
}

.home-summary-item small {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.technical-domain-page {
  display: grid;
  gap: 22px;
}

.technical-domain-section {
  padding: clamp(1.2rem, 2.4vw, 2rem);
}

.technical-focus-page .technical-domain-section {
  width: min(100%, 1120px);
}

.technical-intro-card {
  min-height: min(460px, 62svh);
  align-content: center;
  margin-bottom: 0;
}

.technical-domain-section__header {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.technical-domain-section__header h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 700;
}

.technical-domain-section__header p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.technical-skill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.technical-skill-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.technical-skill-card > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.skill-relations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.skill-relations div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.skill-relations dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.skill-relations dd {
  margin: 2px 0 0;
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 700;
}

.relation-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.relation-preview span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.78rem;
  font-weight: 700;
}

.section-link {
  width: fit-content;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.section-link:hover,
.section-link:focus {
  text-decoration: underline;
}

.public-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.public-admin-panel {
  border-color: rgba(184, 92, 56, 0.28);
  background: var(--surface-2);
}

.public-section-upload-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.public-section-upload {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.public-section-upload summary {
  padding: 11px 12px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}

.public-section-upload form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.public-section-upload label {
  gap: 5px;
  font-size: 0.86rem;
}

.public-section-upload input,
.public-section-upload select {
  min-height: 38px;
  padding: 8px 9px;
  font-size: 0.9rem;
}

.detail-hero {
  padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(2rem, 5vw, 4rem);
  background:
    linear-gradient(180deg, rgba(251, 250, 247, 0.96), rgba(244, 241, 234, 0.88)),
    url("/images/background.jpg") center / cover;
}

.detail-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

.detail-hero__content {
  display: grid;
  gap: 18px;
}

.detail-hero__content h1 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  font-weight: 700;
}

.detail-hero__content p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.8vw, 1.22rem);
  line-height: 1.7;
}

.detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.detail-meta-row span {
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.detail-hero__media,
.detail-hero__entity {
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.14);
}

.detail-hero__media {
  overflow: hidden;
}

.detail-hero__media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: contain;
  background: var(--surface-2);
  padding: clamp(0.75rem, 2.5vw, 1.75rem);
  display: block;
}

.detail-hero__entity {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: clamp(1.3rem, 3vw, 2rem);
}

.detail-hero__entity strong {
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
}

.detail-hero__entity > span {
  color: var(--muted);
  font-weight: 700;
}

.detail-page {
  background: var(--bg);
}

.detail-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.detail-main {
  display: grid;
  gap: 18px;
}

.detail-section,
.detail-side-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.08);
}

.detail-section {
  padding: clamp(1.25rem, 3vw, 2.15rem);
}

.detail-section h2,
.detail-side-card h2 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
}

.detail-section p:not(.eyebrow),
.detail-side-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  line-height: 1.65;
}

.detail-list li::marker {
  color: var(--accent);
}

.detail-list--spaced {
  margin-top: 16px;
}

.detail-section--timeline {
  overflow: hidden;
}

.experience-year-list {
  display: grid;
  gap: 22px;
  margin-top: 18px;
  position: relative;
}

.experience-year-list::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line-strong);
}

.experience-year {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  position: relative;
}

.experience-year__marker {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.experience-year__body {
  display: grid;
  gap: 14px;
  padding: clamp(1rem, 2.5vw, 1.45rem);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.experience-year__body h3,
.experience-year__body h4 {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  line-height: 1.2;
}

.experience-year__body h3 {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.experience-year__body h4 {
  font-size: 0.94rem;
  text-transform: uppercase;
}

.experience-year__body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.challenge-list {
  display: grid;
  gap: 10px;
}

.challenge-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
}

.challenge-item summary {
  padding: 13px 14px;
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.challenge-item summary::-webkit-details-marker {
  display: none;
}

.challenge-item summary::after {
  content: "+";
  float: right;
  color: var(--muted);
}

.challenge-item[open] summary::after {
  content: "-";
}

.challenge-item p {
  margin: 0;
  padding: 0 14px 12px;
  color: var(--muted);
  line-height: 1.65;
}

.detail-sidebar {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 92px;
}

.detail-side-card {
  padding: clamp(1rem, 2.3vw, 1.45rem);
}

.detail-kv {
  display: grid;
  gap: 10px;
  margin: 0;
}

.detail-kv div {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.detail-kv div:last-child {
  border-bottom: 0;
}

.detail-kv dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.detail-kv dd {
  margin: 0;
  color: var(--text);
  font-weight: 700;
}

.detail-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.detail-gallery img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  cursor: zoom-in;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.detail-gallery img:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
}

.detail-gallery__video {
  grid-column: 1 / -1;
  width: 100%;
  max-height: 520px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Lightbox : visionneuse plein écran avec navigation */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 16, 14, 0.92);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.lightbox__img {
  max-width: min(92vw, 1200px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a1a;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.lightbox__btn:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.lightbox__btn--prev { left: clamp(0.75rem, 3vw, 2.5rem); }
.lightbox__btn--next { right: clamp(0.75rem, 3vw, 2.5rem); }

.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.75rem);
  right: clamp(0.75rem, 3vw, 1.75rem);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a1a;
  font-size: 1.5rem;
  cursor: pointer;
}

.lightbox__counter {
  position: absolute;
  bottom: clamp(0.75rem, 3vw, 1.75rem);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.lightbox__btn--prev,
.lightbox__btn--next { display: none; }
.lightbox.has-multiple .lightbox__btn--prev,
.lightbox.has-multiple .lightbox__btn--next { display: flex; }

@media (max-width: 640px) {
  .lightbox__btn { width: 44px; height: 44px; font-size: 1.4rem; }
}

.project-section-list {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.project-rich-section {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.4rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.07);
}

.project-rich-section--has-media {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.82fr);
  align-items: center;
}

.project-rich-section--media-left {
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1fr);
}

.project-rich-section--media-left .project-rich-section__media {
  order: -1;
}

.project-rich-section--media-top,
.project-rich-section--media-bottom,
.project-rich-section--media-full {
  grid-template-columns: 1fr;
}

.project-rich-section--media-top .project-rich-section__media,
.project-rich-section--media-full .project-rich-section__media {
  order: -1;
}

.project-rich-section__text {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.project-rich-section__text h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.35rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.12;
}

.project-rich-section__text p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.project-rich-section__subtitle {
  color: var(--accent) !important;
  font-weight: 700;
}

.project-rich-section__media {
  margin: 0;
  min-width: 0;
}

.project-rich-section__media img,
.project-rich-section__media video {
  width: 100%;
  max-height: 420px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  object-fit: cover;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
}

.project-rich-section__media video {
  aspect-ratio: 16 / 9;
}

.project-rich-section__media figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.program-category-list {
  display: grid;
  gap: 18px;
}

.program-distribution {
  display: grid;
  gap: 8px;
  margin: 18px 0 22px;
}

.program-distribution div {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.program-distribution span {
  color: var(--muted);
  font-weight: 700;
}

.program-distribution strong {
  color: var(--accent);
  font-weight: 700;
}

.program-category {
  display: grid;
  gap: 14px;
  padding: clamp(1rem, 2.4vw, 1.45rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.program-category__header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.program-category__header h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.15;
}

.program-category__header > span {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.program-course-list {
  display: grid;
  gap: 9px;
}

.program-course {
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.program-course summary {
  display: grid;
  grid-template-columns: minmax(86px, max-content) minmax(0, 1fr) auto;
  column-gap: 18px;
  row-gap: 8px;
  align-items: center;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}

.program-course__summary--no-code {
  grid-template-columns: minmax(0, 1fr) auto;
}

.program-course summary::-webkit-details-marker {
  display: none;
}

.program-course summary span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.program-course summary strong {
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.25;
}

.program-course summary::after {
  content: "+";
  grid-column: 3;
  color: var(--muted);
  font-weight: 700;
}

.program-course__summary--no-code::after {
  grid-column: 2;
}

.program-course[open] summary::after {
  content: "-";
}

.program-course p,
.program-course .tag-row {
  margin: 0;
  padding: 0 14px 14px;
}

.program-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 12px;
}

.program-course-meta span {
  padding: 5px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.relation-preview a,
.relation-preview span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.relation-preview a:hover,
.relation-preview a:focus {
  border-color: var(--skin);
  color: var(--accent);
}

.page-header-content h1,
.project-showcase h2,
.cta-panel h2 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.05;
  font-weight: 700;
}

.page-header-content p,
.cta-panel p {
  max-width: 720px;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.7;
}

.project-showcase {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1fr);
  gap: 42px;
  align-items: center;
}

.project-showcase img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.project-showcase-content {
  display: grid;
  gap: 18px;
}

.project-showcase-content p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.7;
}

.timeline-slide .timeline-list {
  max-width: 100%;
  margin: 0 auto;
}

.slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.cta-panel {
  display: grid;
  gap: 18px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.reveal-on-scroll {
  animation: slideReveal 0.55s ease both;
}

@keyframes slideReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 992px) {
  .project-showcase,
  .hero-grid,
  .home-profile-card {
    grid-template-columns: 1fr;
  }

  .home-profile-card .hero-media {
    justify-self: start;
  }

  .immersive-slide {
    min-height: 100svh;
    padding: 5rem 1.25rem;
  }

  .slide-grid,
  .home-immersive .timeline-list,
  .technical-domain-grid,
  .technical-skill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .focus-scroll-page {
    scroll-snap-type: y proximity;
  }

  .focus-scroll-section {
    min-height: auto;
    scroll-snap-align: start;
    align-items: flex-start;
    padding: 4rem 1rem;
  }

  .focus-scroll-page.has-focus-effect .focus-scroll-section {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .focus-card {
    width: 100%;
    padding: 1.2rem;
    border-radius: 14px;
  }

  .intro-card {
    min-height: auto;
  }

  .focus-card .timeline-card-header {
    grid-template-columns: minmax(0, 1fr) 68px;
  }

  .focus-card .timeline-logo {
    width: 68px;
    height: 68px;
  }

  .focus-card .timeline-item h3,
  .project-focus-card .project-showcase h2 {
    font-size: 1.45rem;
  }

  .project-focus-card .project-showcase img {
    max-height: 220px;
  }

  .project-filter-panel {
    grid-template-columns: 1fr;
  }

  .immersive-page {
    scroll-snap-type: y proximity;
  }

  .immersive-slide {
    min-height: auto;
    align-items: flex-start;
    scroll-snap-align: start;
    padding: 4rem 1rem;
  }

  .slide-panel,
  .detail-slide-panel {
    width: 100%;
  }

  .slide-grid,
  .home-immersive .timeline-list,
  .technical-domain-grid,
  .technical-skill-grid {
    grid-template-columns: 1fr;
  }

  .technical-domain-section__header {
    display: grid;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .detail-hero__grid,
  .detail-page__grid {
    grid-template-columns: 1fr;
  }

  .experience-year {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
  }

  .experience-year-list::before {
    left: 15px;
  }

  .experience-year__marker {
    width: 32px;
    height: 32px;
  }

  .detail-sidebar {
    position: static;
  }

  .contact-focus-header h1,
  .technical-intro-card h1 {
    font-size: 2.35rem;
  }

  .home-immersive .timeline-item--compact .timeline-card-header {
    grid-template-columns: minmax(0, 1fr) 56px;
  }

  .home-immersive .timeline-item--compact .timeline-logo {
    width: 56px;
    height: 56px;
  }

  .home-summary-card {
    width: 100%;
  }

  .home-summary-card__header {
    align-items: center;
  }

  .home-summary-card__header h2 {
    font-size: 1.8rem;
  }
}

@media (max-width: 640px) {
  .cta-panel {
    padding: 24px;
  }

  .page-header-content h1,
  .project-showcase h2 {
    font-size: 2rem;
  }

  .slide-header h2,
  .cta-panel h2 {
    font-size: 1.75rem;
  }
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  .focus-scroll-page,
  .immersive-page {
    scroll-snap-type: none;
    background-attachment: scroll;
  }

  .focus-scroll-page::before {
    display: none;
  }

  .focus-scroll-section,
  .immersive-slide {
    display: block;
    min-height: auto;
    padding: 1.25rem 0.85rem;
    scroll-snap-align: none;
  }

  .focus-scroll-section:first-child,
  .immersive-slide:first-child {
    padding-top: 1.5rem;
  }

  .focus-card,
  .home-summary-card,
  .cta-panel,
  .technical-domain-section,
  .contact-focus-card,
  .project-focus-card,
  .education-focus-card,
  .experience-focus-card {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.09);
  }

  .intro-card,
  .technical-intro-card {
    min-height: auto;
    align-content: start;
  }

  .intro-card h1,
  .contact-focus-header h1,
  .technical-intro-card h1,
  .hero-copy h1,
  .page-header h1,
  .detail-hero__content h1 {
    font-size: clamp(1.7rem, 9vw, 2.35rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .intro-card p:not(.eyebrow),
  .contact-focus-header p:not(.eyebrow),
  .technical-intro-card p:not(.eyebrow),
  .hero-text,
  .page-header p,
  .detail-hero__content p:not(.eyebrow),
  .project-showcase-content p,
  .detail-section p:not(.eyebrow),
  .detail-side-card p {
    font-size: 0.98rem;
    line-height: 1.62;
    overflow-wrap: anywhere;
  }

  .home-profile-card,
  .project-showcase,
  .project-focus-card .project-showcase,
  .project-rich-section,
  .project-rich-section--has-media,
  .project-rich-section--media-left,
  .project-rich-section--media-top,
  .project-rich-section--media-bottom,
  .project-rich-section--media-full,
  .detail-hero__grid,
  .detail-page__grid,
  .technical-domain-grid,
  .technical-skill-grid,
  .skill-relations,
  .contact-grid,
  .slide-grid {
    grid-template-columns: 1fr;
  }

  .home-profile-card {
    gap: 1rem;
  }

  .home-profile-card .hero-media {
    width: min(100%, 260px);
    justify-self: start;
  }

  .project-showcase {
    gap: 1rem;
  }

  .project-showcase img,
  .project-focus-card .project-showcase img,
  .project-rich-section__media img,
  .project-rich-section__media video {
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .project-showcase h2,
  .project-rich-section__text h2,
  .focus-card .timeline-item h3,
  .project-focus-card .project-showcase h2,
  .home-summary-card__header h2,
  .detail-section h2,
  .detail-side-card h2 {
    font-size: clamp(1.25rem, 6vw, 1.65rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .project-rich-section {
    padding: 1rem;
  }

  .project-rich-section--media-left .project-rich-section__media,
  .project-rich-section--media-top .project-rich-section__media,
  .project-rich-section--media-full .project-rich-section__media {
    order: 0;
  }

  .focus-card .timeline-card-header,
  .timeline-card-header,
  .home-immersive .timeline-item--compact .timeline-card-header {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .timeline-logo,
  .focus-card .timeline-logo,
  .timeline-item--compact .timeline-logo,
  .home-immersive .timeline-item--compact .timeline-logo {
    width: 58px;
    height: 58px;
    justify-self: start;
    order: -1;
    font-size: 0.9rem;
  }

  .timeline-item,
  .timeline-item--compact {
    padding: 0;
  }

  .focus-card .timeline-item p,
  .timeline-item p,
  .project-card p,
  .home-summary-card > p:not(.eyebrow) {
    font-size: 0.95rem;
    line-height: 1.58;
  }

  .timeline-body,
  .project-showcase-content,
  .home-summary-item > div:last-child,
  .detail-main,
  .detail-sidebar {
    min-width: 0;
  }

  .home-summary-list {
    gap: 0.7rem;
    margin-top: 1rem;
  }

  .home-summary-item {
    align-items: flex-start;
    padding: 0.75rem;
  }

  .home-summary-item strong,
  .home-summary-item small {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .home-summary-media {
    width: 38px;
    height: 38px;
  }

  .hero-actions,
  .card-actions,
  .focus-card-actions,
  .public-admin-toolbar,
  .slide-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-top: 1rem;
  }

  .hero-actions .btn,
  .card-actions a,
  .focus-card-actions .btn,
  .public-admin-toolbar .btn,
  .slide-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .tag-row {
    gap: 0.45rem;
  }

  .skill-badge,
  .detail-meta-row span,
  .card-meta span,
  .program-course-meta span,
  .relation-preview a,
  .relation-preview span {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }

  .detail-hero {
    padding: 1.5rem 0 1rem;
  }

  .detail-page.section-band {
    padding-top: 1rem;
  }

  .detail-section,
  .detail-side-card {
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.07);
  }

  .detail-sidebar {
    position: static;
  }

  .experience-year {
    grid-template-columns: 1fr;
  }

  .experience-year-list::before {
    display: none;
  }

  .experience-year__marker {
    width: 28px;
    height: 28px;
  }

  .experience-year__body {
    padding: 0.9rem;
  }

  .program-category__header {
    display: grid;
    gap: 0.75rem;
  }

  .program-course summary,
  .program-course__summary--no-code {
    grid-template-columns: 1fr auto;
    column-gap: 0.75rem;
  }

  .program-course summary span {
    grid-column: 1 / -1;
  }

  .program-course summary::after,
  .program-course__summary--no-code::after {
    grid-column: 2;
    grid-row: 1;
  }

  .focus-card-position {
    position: static;
    width: fit-content;
    margin-bottom: 0.9rem;
  }

  .project-filter-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .focus-scroll-section,
  .immersive-slide {
    padding-inline: 0.65rem;
  }

  .focus-card,
  .home-summary-card,
  .detail-section,
  .detail-side-card,
  .cta-panel {
    padding: 0.85rem;
  }

  .intro-card h1,
  .detail-hero__content h1 {
    font-size: clamp(1.55rem, 10vw, 2.05rem);
  }

  .home-summary-item {
    gap: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }

  .focus-scroll-section {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}


/* ============================================================
   COUCHE CAMÉLÉON (ex-redesign.css) — fusionnée ici pour une
   seule feuille applicative. Chargée après le reste de custom.css :
   l ordre de cascade est identique au double chargement precedent.
   ============================================================ */

/* ============================================================
   CAMÉLÉON — système de design
   Identité : une couleur iridescente vivante (la peau du caméléon)
   qui glisse violet→bleu→cyan→vert→cuivre, une palette qui s'adapte
   au contexte, un substrat d'ingénieur (grille + traces), animations.
   Les variables de base (couleurs, tokens, polices) vivent dans custom.css.
   ============================================================ */

/* Skins par contexte — le site change de peau */
.skin-robotics, .skin-electronique { --skin: #e2904a; --skin-2: #ffce8a; }
.skin-ai { --skin: #b15cff; --skin-2: #e3a8ff; }
.skin-mobile { --skin: #2fd6c6; --skin-2: #82f0e6; }
.skin-web { --skin: #5ee08a; --skin-2: #b4f0c6; }
.skin-robotics, .skin-electronique, .skin-ai, .skin-mobile, .skin-web { --accent: var(--skin); --accent-2: var(--skin-2); }

@keyframes iris-flow { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
@keyframes float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pulse-ring { 0% { opacity: .55; transform: scale(1); } 70% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- Base ---------- */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(42rem 32rem at 86% -12%, rgba(177, 92, 255, 0.12), transparent 60%),
    radial-gradient(38rem 30rem at -6% 6%, rgba(47, 214, 198, 0.09), transparent 55%),
    linear-gradient(rgba(180, 158, 235, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 158, 235, 0.045) 1px, transparent 1px);
  background-size: auto, auto, 36px 36px, 36px 36px;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px;
  background-attachment: fixed;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Pas de fausse graisse/italique synthétisée : on n'utilise que les fichiers réellement chargés */
  font-synthesis: none;
}

h1, h2, h3, .hero-copy h1, .slide-header h2, .detail-hero__content h1, .admin-header h1 {
  font-family: var(--font-display);
  letter-spacing: -0.022em;
  color: var(--text);
  font-weight: 600;
}

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--skin);
}

a { color: inherit; }
::selection { background: rgba(139, 108, 255, 0.32); color: #fff; }

/* Icônes SVG inline (remplacent la police bootstrap-icons CDN) */
.bi { display: inline-block; vertical-align: -0.125em; flex: none; }

/* Corps de texte long : justifié (bords nets à gauche ET à droite) + césure pour éviter les gros trous */
.detail-section p, .detail-lead-text {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Texte iridescent (la signature caméléon) */
.iris-text {
  background: var(--iris);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: iris-flow 9s linear infinite;
}

/* ---------- Animations d'apparition (armées par JS : visibles si pas de JS) ---------- */
[data-reveal].reveal-armed { opacity: 0; transform: translateY(26px); }
[data-reveal].reveal-armed.is-in { animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.hero-copy > * { animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-copy .eyebrow { animation-delay: 0.02s; }
.hero-copy h1 { animation-delay: 0.08s; }
.hero-copy .lead { animation-delay: 0.16s; }
.hero-copy .hero-actions { animation-delay: 0.24s; }

/* ---------- Navbar ---------- */
.portfolio-navbar {
  background: rgba(8, 6, 14, 0.74);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  /* Bootstrap colore le lien actif en quasi-noir via cette variable → on la passe en clair */
  --bs-navbar-active-color: var(--text);
  --bs-navbar-color: var(--muted);
  --bs-navbar-hover-color: var(--text);
}
.portfolio-navbar::after {
  content: ""; display: block; height: 1px;
  background: var(--iris); background-size: 220% 100%;
  animation: iris-flow 9s linear infinite; opacity: 0.65;
}
.brand-mark { font-family: var(--font-display); color: var(--text); }
.brand-mark img { filter: drop-shadow(0 0 10px rgba(139, 108, 255, 0.35)); }
.nav-link { color: var(--muted); font-weight: 500; }
.nav-link:hover, .nav-link:focus { color: var(--text); }
/* Spécificité .navbar-nav … pour battre la couleur active sombre de Bootstrap (--bs-navbar-active-color) */
.portfolio-navbar .navbar-nav .nav-link.active { color: var(--text); font-weight: 600; }

/* ---------- Boutons ---------- */
.btn-dark {
  position: relative;
  background: var(--surface);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 600;
  background-image: linear-gradient(var(--surface), var(--surface)), var(--iris);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-dark:hover, .btn-dark:focus { color: var(--text); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(139, 108, 255, 0.3); }
.btn-outline-dark {
  background: transparent; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-weight: 500;
}
.btn-outline-dark:hover, .btn-outline-dark:focus { border-color: var(--skin); color: var(--skin); background: rgba(139, 108, 255, 0.08); }

/* ---------- Cartes & surfaces ---------- */
.focus-card, .detail-side-card, .detail-section, .project-card,
.home-summary-card, .cta-panel, .admin-panel, .message-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}
.focus-card { box-shadow: var(--shadow); position: relative; }
.detail-section { border-radius: var(--radius-md); }

/* Liste projets : liseré coloré par catégorie (le caméléon visible en navigation) */
.project-focus-card { position: relative; overflow: hidden; }
.project-focus-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--skin), var(--skin-2), transparent);
}

/* coin « composant » : petits crochets d'ingénieur sur les cartes clés */
.home-profile-card::after, .detail-side-card::after {
  content: ""; position: absolute; right: 14px; top: 14px; width: 14px; height: 14px;
  border-top: 1px solid var(--skin); border-right: 1px solid var(--skin); opacity: 0.5;
}
.detail-side-card { position: relative; }

/* ---------- Hero accueil ---------- */
.home-profile-card { overflow: hidden; position: relative; }
.home-profile-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--iris); background-size: 220% 100%; animation: iris-flow 9s linear infinite;
}
.hero-copy h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: 1.02; margin: 0.4rem 0 0.85rem; font-weight: 700; }
.hero-copy .lead { color: var(--muted); font-size: clamp(0.98rem, 1.35vw, 1.08rem); line-height: 1.58; max-width: 56ch; }
.hero-media { position: relative; }
.hero-media img { border-radius: var(--radius-lg); border: 1px solid var(--line-strong); }
.hero-media::before {
  content: ""; position: absolute; inset: -2px; border-radius: 20px; z-index: -1;
  background: var(--iris); background-size: 220% 100%; animation: iris-flow 9s linear infinite; filter: blur(14px); opacity: 0.35;
}


/* ---------- Cartes résumé ---------- */
.home-summary-item strong { color: var(--text); }
.home-summary-item small { color: var(--muted); }
.section-link { color: var(--skin); }
.section-link:hover { color: var(--skin-2); }

/* ---------- CTA ---------- */
.cta-panel { position: relative; overflow: hidden; }
.cta-panel::after {
  content: ""; position: absolute; inset: auto -25% -70% auto; width: 70%; height: 140%;
  background: var(--iris-soft); filter: blur(30px);
}

/* ---------- Tags techno (logos) ---------- */
.skill-badge { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-pill); }
.skill-badge:hover, .skill-badge:focus { border-color: var(--skin); color: var(--skin); }

/* ---------- Pages projet (peau adaptative via --skin) ---------- */
.detail-hero {
  position: relative;
  background:
    radial-gradient(46rem 28rem at 82% -25%, color-mix(in srgb, var(--skin) 14%, transparent), transparent 60%),
    var(--bg) !important;
  border-bottom: 1px solid var(--line);
}
.detail-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--skin), var(--skin-2), transparent);
}
.detail-hero__content .eyebrow { color: var(--skin); }
.detail-hero__media { background: var(--surface-2); border: 1px solid var(--line-strong); }
.detail-meta-row span { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.detail-section .eyebrow { color: var(--skin); }
.detail-kv dt { color: var(--muted); }
.detail-kv dd { color: var(--text); }
.detail-gallery img, .detail-gallery__video { background: var(--surface-2); border: 1px solid var(--line); }
.section-band { background: transparent; }

/* ---------- Formulaires ---------- */
input, textarea, select { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
input:focus, textarea:focus, select:focus { border-color: var(--skin); box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18); }
::placeholder { color: var(--muted); opacity: 0.65; }
.form-note { background: var(--surface-2); border: 1px solid var(--line); border-left: 2px solid var(--skin); color: var(--muted); }
.form-note a { color: var(--skin); }
.alert-success { background: rgba(94, 224, 138, 0.12); color: #7be8a2; border: 1px solid rgba(94, 224, 138, 0.4); }
.alert-danger { background: rgba(244, 63, 94, 0.12); color: #fb7185; border: 1px solid rgba(244, 63, 94, 0.4); }

/* ---------- Footer ---------- */
footer, .site-footer { border-top: 1px solid var(--line); color: var(--muted); }

/* ---------- Fonds : retirer l'ancien paysage ---------- */
.focus-scroll-page { background: transparent !important; }
.focus-scroll-page::before { display: none !important; }

/* ---------- Scroll accueil : centrage conservé (snap), focus allégé ---------- */
.focus-scroll-page { scroll-snap-type: y mandatory !important; }
.focus-scroll-page.has-focus-effect .focus-scroll-section { opacity: 0.78; filter: none; transform: scale(0.99); }
.focus-scroll-page.has-focus-effect .focus-scroll-section.is-active { opacity: 1; filter: none; transform: none; }

/* Navigation inter-sections : navigateur à points latéral (.focus-dots) */
.focus-dots {
  position: fixed; right: 1.5rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.95rem; z-index: 50;
}
.focus-dot {
  display: flex; align-items: center; gap: 0.6rem;
  background: none; border: 0; cursor: pointer;
  /* cible cliquable ≥24px (WCAG 2.5.8) sans agrandir le rond visuel */
  min-height: 24px; padding: 0;
}
.focus-dot__label {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); background: rgba(8, 6, 14, 0.78); border: 1px solid var(--line);
  padding: 0.28rem 0.55rem; border-radius: 7px; max-width: 190px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(8px); transition: opacity 0.18s ease, transform 0.18s ease;
}
.focus-dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--line-strong); background: transparent;
  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.focus-dot:hover::after, .focus-dot:focus-visible::after { border-color: var(--skin); }
.focus-dot:hover .focus-dot__label, .focus-dot:focus-visible .focus-dot__label { opacity: 1; transform: none; }
.focus-dot.is-active::after {
  width: 11px; height: 11px; border-color: transparent;
  background: var(--iris); background-size: 220% 100%; animation: iris-flow 9s linear infinite;
  box-shadow: 0 0 12px rgba(139, 108, 255, 0.55);
}
.focus-dot.is-active .focus-dot__label { opacity: 1; transform: none; color: var(--text); }
/* Points masqués dès que la nav passe en hamburger (évite le chevauchement tablette) */
@media (max-width: 991px) {
  .focus-dots { display: none; }
}

@media (max-width: 768px) {
  /* fond non-fixe sur mobile (évite le jank de scroll iOS) */
  body { background-attachment: scroll; }
  /* pas d'atténuation des sections hors focus sur mobile (le snap desktop n'y est plus) */
  .focus-scroll-page.has-focus-effect .focus-scroll-section { opacity: 1; transform: none; }
  /* cibles tactiles : pastilles techniques et boutons ≥ 44px */
  .skill-badge { min-height: 44px; }
  .navbar-toggler { min-height: 44px; }
  .navbar-collapse .nav-link { min-height: 44px; display: flex; align-items: center; }
}

/* ---------- Fix contraste : lignes projets / écoles / entreprises ---------- */
.home-summary-item { background: var(--surface-2); border-color: var(--line); color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease; }
.home-summary-item:hover { border-color: var(--skin); transform: translateX(2px); }
.home-summary-item strong { color: var(--text); }
.home-summary-item small { color: var(--muted); }
.home-summary-media { background: #ffffff; border-color: var(--line); }

/* ============================================================
   Pages projet — mise en page « étude de cas »
   ============================================================ */

/* Hero : visuel plus présent */
.detail-hero__lead { color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.55; max-width: 46ch; margin-top: 0.4rem; }
.detail-hero__media { align-self: stretch; }
.detail-hero__media img { width: 100%; height: 100%; min-height: 260px; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-2); border-radius: var(--radius-md); padding: 0.6rem; }

/* Stack d'outils visible dès le hero */
.detail-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.3rem 0 0.4rem; }
.detail-stack__chip {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.detail-stack__chip:hover { transform: translateY(-2px); border-color: var(--skin); }
.detail-stack__chip img { width: 22px; height: 22px; }

/* Showcase : la galerie remontée, en grand */
.detail-showcase { padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(1rem, 2vw, 2rem); }
.detail-showcase .eyebrow { color: var(--skin); margin-bottom: 1.1rem; }
.detail-gallery--showcase {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.detail-gallery--showcase > * {
  width: 100%; border-radius: 14px; object-fit: cover;
  aspect-ratio: 16 / 10; background: var(--surface-2); border: 1px solid var(--line);
  cursor: zoom-in; transition: transform 0.2s ease, border-color 0.2s ease;
}
.detail-gallery--showcase > *:hover { transform: translateY(-3px); border-color: var(--skin); }
.detail-gallery--showcase > *:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.detail-gallery--showcase .detail-gallery__video { cursor: default; }
@media (max-width: 720px) { .detail-gallery--showcase { grid-template-columns: 1fr; } }

/* Lead du récit (le « pourquoi », en plus gros) */
.detail-main .detail-section--lead p.detail-lead-text { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; color: var(--text); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
.detail-section--lead { border-left: 2px solid var(--skin); padding-left: 1.4rem; background: transparent; }
.detail-main .detail-section p { color: #d2ccdf; }

/* « Ce que j'ai construit » : grille au lieu d'une liste à puces */
.detail-feature-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.detail-feature-grid li {
  position: relative; padding: 0.85rem 1rem 0.85rem 2.2rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); line-height: 1.45;
}
.detail-feature-grid li::before { content: "▹"; position: absolute; left: 0.9rem; top: 0.8rem; color: var(--skin); font-weight: 700; }
@media (max-width: 720px) { .detail-feature-grid { grid-template-columns: 1fr; } }

/* Section résultats : mise en avant */
.detail-section--result { background: linear-gradient(180deg, color-mix(in srgb, var(--skin) 9%, transparent), transparent); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.6rem 1.7rem; }

/* Images tissées dans le récit (apparaissent au fil des explications) */
.story-media { margin: 1.5rem 0 1.9rem; text-align: center; }
.story-media img, .story-media video {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 72vh; margin-inline: auto;
  border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2);
}
.story-media img { cursor: zoom-in; transition: border-color 0.2s ease, transform 0.2s ease; }
.story-media img:hover { border-color: var(--skin); transform: translateY(-2px); }

/* Groupe d'images d'une section : portraits (téléphone) côte à côte ≤3, paysages pleine largeur */
.story-shots { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: flex-start; margin: 1.5rem 0 1.9rem; }
.story-shots .story-media { margin: 0; flex: 1 1 100%; }
.story-shots .story-media.is-portrait { flex: 0 1 calc(33.333% - 0.7rem); }
.story-shots .story-media.is-portrait img { width: 100%; max-height: none; }
@media (max-width: 760px) { .story-shots .story-media.is-portrait { flex-basis: calc(50% - 0.5rem); } }
@media (max-width: 460px) { .story-shots .story-media.is-portrait { flex-basis: 100%; } }

/* Sidebar sticky + sous-blocs */
.detail-side-card--sticky { position: sticky; top: 92px; }
.detail-side-tech, .detail-side-links { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.detail-side-tech h3 { font-family: var(--font-display); font-size: 0.95rem; margin: 0 0 0.7rem; color: var(--muted); font-weight: 600; }
.detail-side-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.detail-side-links a { color: var(--skin); font-weight: 500; font-family: var(--font-mono); font-size: 0.85rem; }
.detail-side-links a:hover { color: var(--skin-2); }

/* ============================================================
   Audit contraste — fonds clairs hérités (custom.css) repassés en sombre
   (les tuiles de logos restent claires : lisibilité des logos)
   ============================================================ */

/* Badges méta (statut/catégorie) + compteurs de position */
.card-meta span, .tag-row span { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.focus-card-position { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }

/* Chips de relations (écoles / entreprises / projets liés) */
.relation-preview a, .relation-preview span { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.relation-preview a:hover, .relation-preview a:focus { border-color: var(--skin); color: var(--skin); }

/* Liens d'action (cartes, fiches, modale, contact, légal) — couleur via --accent remappé, on soigne le hover */
.card-actions a:hover, .card-actions a:focus,
.info-card a:hover, .info-card a:focus,
.contact-panel a:hover, .contact-panel a:focus,
.legal-content a:hover, .legal-content a:focus { color: var(--skin-2); }

/* Bouton info « i » au survol */
.info-button:hover, .info-button:focus { background: rgba(139, 108, 255, 0.12); border-color: var(--skin); color: var(--skin); }

/* En-têtes de pages légales (Cookies / Mentions / Confidentialité) + encart d'avertissement */
.page-header { background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); }
.legal-warning { background: var(--surface-2); color: var(--muted); border-left: 4px solid var(--skin); }

/* Pages parcours détaillées (blocs hérités blancs) */
.experience-year__body, .challenge-item, .program-category,
.program-distribution div, .skill-relations div { background: var(--surface-2); border-color: var(--line); }
.program-course summary span { background: var(--surface-2); border: 1px solid var(--line); color: var(--skin); }
.program-course-meta span { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.experience-year-list::before { background: var(--line-strong); }
.experience-year__marker { border-color: var(--line-strong); }
.project-rich-section { box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); }

/* Modale info : bouton de fermeture (croix blanche sur blanc) */
.info-modal__close { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }
.info-modal__close:hover, .info-modal__close:focus { background: var(--surface); border-color: var(--skin); color: var(--skin); }

/* Panneaux admin (upload de médias) */
.public-admin-panel { background: var(--surface-2); border: 1px solid var(--line-strong); }
.public-section-upload { background: var(--surface); border: 1px solid var(--line); }
.public-section-upload summary { color: var(--text); }
.public-section-upload form { border-top: 1px solid var(--line); }

/* Navbar : hamburger mobile (trait sombre invisible) */
.portfolio-navbar .navbar-toggler { border-color: var(--line-strong); }
.portfolio-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18); }
.portfolio-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f1edf7' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

/* ============================================================
   Études / Expériences — étude de cas
   ============================================================ */
.detail-subhead { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--text); margin: 1.5rem 0 0.8rem; }

/* Bloc entité (logo organisation) dans le hero */
.detail-hero__entity { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; align-self: center; }
.detail-hero__entity .entity-logo.large {
  width: 104px; height: 104px; border-radius: var(--radius-lg); background: #fff;
  border: 1px solid var(--line-strong); display: grid; place-items: center; overflow: hidden;
}
.detail-hero__entity .entity-logo.large img { width: 100%; height: 100%; object-fit: contain; padding: 0.55rem; }
.detail-hero__entity .entity-logo.large span { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--skin); }
.detail-hero__entity strong { font-family: var(--font-display); color: var(--text); font-size: 1.05rem; }
.detail-hero__entity > span { color: var(--muted); font-size: 0.9rem; }

/* Graphe de répartition du programme (barres) */
.program-bars { display: grid; gap: 0.95rem; margin: 1.4rem 0 1.9rem; }
.program-bar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.42rem; }
.program-bar__head span { color: var(--text); font-size: 0.95rem; }
.program-bar__head strong { color: var(--skin); font-family: var(--font-mono); font-size: 0.88rem; }
.program-bar__track { height: 9px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.program-bar__fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--skin), var(--skin-2)); box-shadow: 0 0 14px color-mix(in srgb, var(--skin) 45%, transparent); }

/* Frise d'alternance (2 ans) */
.experience-year-list { display: grid; gap: 1.2rem; position: relative; }
.experience-year-list::before {
  content: ""; position: absolute; left: 19px; top: 26px; bottom: 26px; width: 2px;
  background: linear-gradient(var(--skin), color-mix(in srgb, var(--skin) 10%, transparent)); display: block;
}
.experience-year { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start; position: relative; }
.experience-year__marker {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; color: var(--skin-ink); border: 0; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--skin), var(--skin-2));
  box-shadow: 0 0 0 5px var(--bg), 0 6px 18px color-mix(in srgb, var(--skin) 40%, transparent);
}
.experience-year__body { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.35rem; }
.experience-year__body h3 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.experience-year__body h4 { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.68rem; color: var(--muted); margin: 1.1rem 0 0.5rem; }

/* Accordéon "Détail de l'année" — replie le détail pour casser le mur de texte */
.year-detail { margin-top: 0.7rem; }
.year-detail > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.68rem; color: var(--skin); padding: 0.35rem 0;
}
.year-detail > summary::-webkit-details-marker { display: none; }
.year-detail > summary::before { content: "+"; font-weight: 700; font-size: 0.95rem; line-height: 1; }
.year-detail[open] > summary::before { content: "–"; }
.year-detail > summary:hover { color: var(--skin-2); }
.year-detail[open] > summary { margin-bottom: 0.2rem; }

/* Accordéon de section : replie un bloc long (progression, difficultés) en gardant le rythme de cartes */
.detail-accordion { padding: 0; }
.detail-accordion > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 1.6rem;
}
.detail-accordion > summary::-webkit-details-marker { display: none; }
.detail-accordion > summary::after {
  content: "+"; font-family: var(--font-mono); font-weight: 700;
  font-size: 1.35rem; line-height: 1; color: var(--skin); flex: none;
}
.detail-accordion[open] > summary::after { content: "–"; }
.detail-accordion__label { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.detail-accordion__eyebrow {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.7rem; color: var(--skin);
}
.detail-accordion__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.25; color: var(--text);
}
.detail-accordion > summary:hover .detail-accordion__title { color: var(--skin); }
.detail-accordion[open] > summary { padding-bottom: 1.05rem; }
.detail-accordion__body { padding: 0 1.6rem 1.6rem; }

/* Fold "nu" inline : replie un sous-bloc dans une section (catalogue d'UV) sans casser la carte */
.detail-fold { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.3rem; }
.detail-fold > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: baseline; gap: 0.5rem 0.7rem;
  flex-wrap: wrap;
}
.detail-fold > summary::-webkit-details-marker { display: none; }
.detail-fold__eyebrow {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.7rem; color: var(--skin);
}
.detail-fold__eyebrow::before { content: "+ "; font-weight: 700; }
.detail-fold[open] .detail-fold__eyebrow::before { content: "– "; }
.detail-fold__hint { color: var(--muted); font-size: 0.9rem; }
.detail-fold > summary:hover .detail-fold__eyebrow { color: var(--skin-2); }
.detail-fold[open] > summary { margin-bottom: 1.3rem; }

/* ============================================================
   Accessibilité, conversion & À propos
   ============================================================ */

/* Lien d'évitement clavier */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--surface); color: var(--text); border: 1px solid var(--skin);
  padding: 0.6rem 1rem; border-radius: 10px; font-family: var(--font-mono); font-size: 0.8rem;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 1rem; }

/* Focus clavier visible (manquait sur tout le thème sombre) */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible,
.focus-dot:focus-visible, .clickable-card:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--skin);
  outline-offset: 2px;
}

/* Badge de disponibilité */
.availability-badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text);
  background: rgba(94, 224, 138, 0.10); border: 1px solid rgba(94, 224, 138, 0.4);
  border-radius: var(--radius-pill); padding: 0.42rem 0.9rem; margin: 0 0 1.3rem;
}
.availability-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #5ee08a; flex: 0 0 auto;
  animation: avail-pulse 2s infinite;
}
@keyframes avail-pulse {
  0% { box-shadow: 0 0 0 0 rgba(94, 224, 138, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(94, 224, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(94, 224, 138, 0); }
}

/* Page À propos — liens "Me joindre" */
.about-links { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.about-links a {
  display: flex; align-items: center; gap: 0.7rem; color: var(--text);
  padding: 0.62rem 0.8rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); transition: border-color 0.15s ease, color 0.15s ease;
}
.about-links a:hover { border-color: var(--skin); color: var(--skin); }
.about-links i { color: var(--skin); font-size: 1.05rem; }

/* Liens inline dans le texte */
.text-link { color: var(--skin); text-decoration: underline; text-underline-offset: 2px; }
.text-link:hover { color: var(--skin-2); }

/* CTA en bas des pages projet */
.detail-cta { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); }

/* Pages d'erreur (404 / 500 / 403) au thème */
.error-page { min-height: 68vh; display: grid; place-items: center; text-align: center; padding: 4rem 1.5rem; }
.error-page .eyebrow { color: var(--skin); justify-content: center; }
.error-page h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; margin: 0.6rem 0 1rem; }
.error-page__lead { color: var(--muted); max-width: 46ch; margin: 0 auto 1.7rem; font-size: 1.05rem; line-height: 1.55; }
.error-page .hero-actions { justify-content: center; }

/* Champ honeypot anti-spam : hors écran (pas display:none, que certains bots ignorent) */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.label-hint { color: var(--muted); font-weight: 400; font-size: 0.82em; }

/* Confort tactile : cibles ≥ 44px et eyebrow moins serré sur petits écrans */
@media (max-width: 768px) {
  .btn, .btn-sm { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 480px) {
  .eyebrow { letter-spacing: 0.12em; }
}

/* Reduced-motion : un seul bloc (l'emporte car en fin de feuille) */
@media (prefers-reduced-motion: reduce) {
  .iris-text, .portfolio-navbar::after, .home-profile-card::before, .hero-media::before,
  .availability-dot, .focus-dot.is-active::after { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}