/* ============================================================
   styles.css — Le reste du site (hors tokens & base)
   Charger APRÈS tokens.css et base.css.
   Pour l'instant : scaffold partagé (header, navigation, footer)
   + quelques utilitaires. Les pages réelles (accueil, projets,
   à propos, contact, gabarit projet) viendront s'appuyer dessus.
   ============================================================ */

/* ---------- Utilitaires ---------- */
/* Gouttière de scrollbar réservée sur toutes les pages : évite le décalage
   horizontal du menu entre pages qui défilent (Accueil, gabarit projet) et
   pages à hauteur fixe sans scroll (Projets, À propos, Contact). */
html { overflow-y: scroll; }
.u-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-blue   { color: var(--font-blue); }
.u-muted  { color: var(--font-primary-subtle); }

/* ---------- Logo (mark « m ») ---------- */
.logo { display: inline-flex; align-items: center; }
.logo__mark {
  width: 44px; height: 22px;
  display: block;
  background-color: var(--font-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2080%2040%27%3E%3Cpath%20d%3D%27M12%2013.3333H0V0H13.3333L25.5267%2012.1933C25.9467%2012.6133%2026.6667%2012.3133%2026.6667%2011.72V0H40L52.1933%2012.1933C52.6133%2012.6133%2053.3333%2012.3133%2053.3333%2011.72V0H66.6667L80%2013.3333V40H66.6667V14.6667C66.6667%2013.9333%2066.0667%2013.3333%2065.3333%2013.3333H54.6667C53.9333%2013.3333%2053.3333%2013.9333%2053.3333%2014.6667V40H40V14.6667C40%2013.9333%2039.4%2013.3333%2038.6667%2013.3333H28C27.2667%2013.3333%2026.6667%2013.9333%2026.6667%2014.6667V40H13.3333V34.6667C13.3333%2033.9333%2012.7333%2033.3333%2012%2033.3333H6.66666V21.6067C6.66666%2021.0133%207.38666%2020.7133%207.80666%2021.1333L12.2%2025.5267C12.62%2025.9467%2013.34%2025.6467%2013.34%2025.0533V14.66C13.34%2013.9267%2012.74%2013.3267%2012.0067%2013.3267L12%2013.3333Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2080%2040%27%3E%3Cpath%20d%3D%27M12%2013.3333H0V0H13.3333L25.5267%2012.1933C25.9467%2012.6133%2026.6667%2012.3133%2026.6667%2011.72V0H40L52.1933%2012.1933C52.6133%2012.6133%2053.3333%2012.3133%2053.3333%2011.72V0H66.6667L80%2013.3333V40H66.6667V14.6667C66.6667%2013.9333%2066.0667%2013.3333%2065.3333%2013.3333H54.6667C53.9333%2013.3333%2053.3333%2013.9333%2053.3333%2014.6667V40H40V14.6667C40%2013.9333%2039.4%2013.3333%2038.6667%2013.3333H28C27.2667%2013.3333%2026.6667%2013.9333%2026.6667%2014.6667V40H13.3333V34.6667C13.3333%2033.9333%2012.7333%2033.3333%2012%2033.3333H6.66666V21.6067C6.66666%2021.0133%207.38666%2020.7133%207.80666%2021.1333L12.2%2025.5267C12.62%2025.9467%2013.34%2025.6467%2013.34%2025.0533V14.66C13.34%2013.9267%2012.74%2013.3267%2012.0067%2013.3267L12%2013.3333Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.logo__mark--white { background-color: var(--font-white); }

/* ---------- Header / navigation ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-32);
}
.site-nav { display: flex; align-items: center; gap: var(--space-32); }
.site-nav a {
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  color: var(--font-primary);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.site-nav a:hover { color: var(--font-blue); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--font-primary); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--stroke-primary);
  padding-block: var(--space-32);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-24);
}

/* ---------- Stub « page à construire » (temporaire, étape 1) ---------- */
.stub {
  min-height: 52vh;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-16);
  padding-block: var(--space-64);
}
.stub__kicker {
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--font-blue);
}

/* ============================================================
   GABARIT PROJET (projet.html) — piloté par projets.js
   ============================================================ */

/* ---- Hero : header pleine hauteur, panneau en superposition ---- */
.proj-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.proj-no-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.proj-hero {
  --index-w: 56px;
  position: relative;
  height: calc(100svh - var(--topbar-h, 91px));
  min-height: 440px;
  background: var(--surface-inverse);
  overflow: hidden;
  border-bottom: 1px solid var(--stroke-primary); /* stroke séparant le header du reste */
}

/* -- Visuel : plein cadre, FIXE (ne se décale jamais à l'ouverture) -- */
.proj-hero__visual { position: absolute; inset: 0; overflow: hidden; }
.proj-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -- CTAs bas-gauche — toujours visibles, style identique aux autres pages (chanfrein) -- */
.proj-hero__ctas {
  position: absolute; left: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px);
  display: flex; flex-direction: column; gap: var(--space-12); z-index: 2;
}
.hero-cta {
  background: var(--surface-primary); color: var(--font-primary);
  font-weight: 600; font-size: 15px;
  height: 52px; padding-top: 0; padding-bottom: 0;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.26));
}
.hero-cta--name { justify-content: center; width: 100%; }
.hero-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.hero-cta--pager { justify-content: space-between; gap: var(--space-16); }
.hero-pg { display: grid; place-items: center; width: 20px; height: 20px; color: var(--font-primary); transition: color .15s ease; }
.hero-pg:hover { color: var(--font-blue); }
.hero-pg__count { font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: .04em; white-space: nowrap; }
.hero-pg__count small { font-weight: 500; font-size: 15px; color: var(--font-muted); }
.hero-cta--discover { justify-content: space-between; gap: var(--space-16); cursor: pointer; }
/* le CTA blanc reste blanc au survol : seule la flèche (vers le bas) s'anime */
.hero-pg svg, .dl-arrow svg { width: 16px; height: 16px; }
.dl-arrow { position: relative; width: 16px; height: 16px; flex: 0 0 auto; display: inline-flex; overflow: hidden; }
.dl-arrow svg { position: absolute; inset: 0; transition: transform .42s cubic-bezier(.5,0,.2,1), opacity .35s ease; }
.dl-arrow__in { transform: translateY(-130%); opacity: 0; }
.hero-cta--discover:hover .dl-arrow__out { transform: translateY(130%); opacity: 0; }
.hero-cta--discover:hover .dl-arrow__in { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dl-arrow svg { transition: none; } }

/* -- Fil d'Ariane : pastille blanche chanfreinée, en haut à gauche du hero
   (l'index et le panneau sont ancrés à droite → pas de chevauchement). -- */
.proj-breadcrumb {
  position: absolute; top: clamp(18px, 3vh, 36px); left: clamp(20px, 4vw, 64px); z-index: 6;
  display: inline-flex; align-items: center; gap: var(--space-8);
  height: 40px; padding: 0 var(--space-16);
  background: var(--surface-primary); color: var(--font-primary);
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1;
  --btn-chamfer: 8px;
  clip-path: polygon(var(--btn-chamfer) 0, 100% 0, 100% calc(100% - var(--btn-chamfer)), calc(100% - var(--btn-chamfer)) 100%, 0 100%, 0 var(--btn-chamfer));
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.26));
}
.proj-breadcrumb__link { color: var(--font-primary); text-decoration: none; transition: color .15s ease; }
.proj-breadcrumb__link:hover { color: var(--font-blue); }
.proj-breadcrumb__sep { display: inline-flex; color: var(--font-muted); }
.proj-breadcrumb__current { color: var(--font-primary-subtle); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .proj-breadcrumb__current { max-width: 46vw; } }

/* -- Fil d'Ariane des pages de section (Projets / À propos / Contact) --
   Ajout PUREMENT additif pour aider la navigation : n'altère pas le design
   existant. Texte simple en haut à gauche, sous le header. Variante --over :
   texte blanc par-dessus un fond coloré (hero À propos). */
.page-breadcrumb {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1;
  color: var(--font-primary); z-index: 6; white-space: nowrap;
}
.page-breadcrumb__link { color: var(--font-primary); text-decoration: none; transition: color .15s ease; }
.page-breadcrumb__link:hover { color: var(--font-blue); }
.page-breadcrumb__sep { display: inline-flex; color: var(--font-muted); }
.page-breadcrumb__current { color: var(--font-primary-subtle); }
/* Projets : posé au-dessus du titre, aligné avec lui (le titre ne saute pas). */
.page-breadcrumb--projets { padding: var(--space-24) var(--space-80) 0 var(--space-64); }
.frame--fixed .page-main:has(.page-breadcrumb--projets) .page-head { padding-top: var(--space-16); }
/* Contact : en haut de la colonne de gauche. Posé en absolu pour être à la même
   distance du trait (24px) que Projets / À propos, sans décaler la carte. */
.page-breadcrumb--contact { position: absolute; top: var(--space-24); left: var(--space-48); }
/* À propos : par-dessus le hero bleu, en haut à gauche, texte blanc. */
.page-breadcrumb--over { position: absolute; top: var(--space-24); left: var(--space-48); }
.page-breadcrumb--over .page-breadcrumb__link { color: var(--font-white); }
.page-breadcrumb--over .page-breadcrumb__link:hover { color: rgba(255,255,255,.75); }
.page-breadcrumb--over .page-breadcrumb__sep { color: rgba(255,255,255,.6); }
.page-breadcrumb--over .page-breadcrumb__current { color: rgba(255,255,255,.85); }

/* -- Panneau de texte : superposé, glisse depuis la droite AU-DESSUS du visuel -- */
.proj-hero__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 0; min-width: 0; overflow: hidden;
  background: var(--surface-primary); z-index: 3;
}
.proj-hero__panel-inner {
  height: 100%; box-sizing: border-box;
  width: calc(54vw - 2 * clamp(36px, 4.4vw, 80px)); /* largeur fixe : le texte ne reflue pas pendant l'anim */
  display: flex; flex-direction: column; justify-content: flex-start; /* titre toujours en haut */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none; /* barre de scroll masquée (scroll conservé pour la note) */
  padding: clamp(36px, 4.4vw, 80px);
  opacity: 0;
}
.proj-hero__panel-inner::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Tous les panneaux défilent si le contenu dépasse la frame ; sinon le contenu reste calé en haut. */
.proj-hero__panel-inner { padding-bottom: clamp(48px, 5vw, 96px); }
.proj-hero__panel-title { font-family: var(--font-title); font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -.01em; text-wrap: pretty; }
.proj-hero__panel-rule { height: 1px; flex-shrink: 0; background: var(--stroke-primary); margin: var(--space-24) 0 var(--space-32); }
.proj-hero__panel-lead { font-family: var(--font-body); font-weight: 600; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; margin-bottom: var(--space-24); text-wrap: pretty; }
.proj-hero__panel-sub { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--font-blue); margin-bottom: var(--space-32); }
.proj-hero__panel-body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--font-secondary); text-wrap: pretty; }
/* Paragraphes ancrés alternativement à gauche / à droite — bloc large (jusqu'à la marge) */
.proj-hero__panel-body p { width: 74%; margin: 0 0 var(--space-24); }
.proj-hero__panel-body p:last-child { margin-bottom: 0; }
.proj-hero__panel-body p.is-left { margin-right: auto; }
.proj-hero__panel-body p.is-right { margin-left: auto; }
/* Tableau méta (Le brief) : toujours en bas de la frame, label gris à gauche, valeur en gras à droite */
.proj-hero__meta { display: grid; grid-template-columns: 1fr auto; margin-top: auto; padding-top: var(--space-40); border-bottom: 1px solid var(--stroke-primary); }
.proj-hero__meta dt { font-family: var(--font-body); font-size: 15px; color: var(--font-muted); padding: var(--space-16) 0; border-top: 1px solid var(--stroke-primary); }
.proj-hero__meta dd { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--font-primary); text-align: right; padding: var(--space-16) 0; border-top: 1px solid var(--stroke-primary); }

/* -- Index vertical — ancré au bord gauche du panneau, glisse avec lui -- */
.proj-hero__index {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: var(--index-w); z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  border-left: 1px solid var(--stroke-primary);
  border-right: 1px solid var(--stroke-primary); /* trait net entre les onglets et le contenu */
  background: var(--surface-primary);
}
.proj-hero__index-tabs { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(var(--space-40), 8vh, var(--space-96)); }
.proj-hero__tab {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--font-muted); background: none; border: 0; cursor: pointer;
}
.proj-hero__tab:hover { color: var(--font-primary-subtle); }
.proj-hero__tab.is-active { color: var(--font-primary); }
.proj-hero__toggle { margin-bottom: var(--space-24); width: 40px; height: 40px; display: grid; place-items: center; color: var(--font-primary); background: none; border: 0; cursor: pointer; transition: opacity .15s ease; }
.proj-hero__toggle:hover { opacity: .6; }
.proj-hero__toggle svg { display: block; }
.proj-hero__toggle .toggle-ico--open { height: 26px; width: auto; }
.proj-hero__toggle .toggle-ico--close { height: 19px; width: auto; }

/* ---- Titre géant ---- */
.proj-title {
  text-align: center;
  padding-block: clamp(var(--space-64), 12vw, 200px);
}
.proj-title h1 {
  font-family: var(--font-title); font-weight: 800;
  font-size: clamp(64px, 16vw, 240px); line-height: .92; letter-spacing: -.02em;
}

/* ---- Sections texte (Contexte / Problématique / Note) ---- */
.proj-section { padding-block: var(--space-96); scroll-margin-top: var(--space-32); }
.proj-section--dark { background: var(--surface-inverse); color: var(--font-white); }
.proj-section--dark .proj-block__title,
.proj-section--dark .proj-overline { color: var(--font-white); }

.proj-block {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(var(--space-40), 8vw, 160px);
  align-items: start;
}
.proj-overline {
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--font-blue);
  margin-bottom: var(--space-20);
}
.proj-block__title {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.01em;
  text-wrap: balance;
}
.proj-block__body { display: flex; flex-direction: column; gap: var(--space-24); }
.proj-block__lead {
  font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 1.65;
}
.proj-block__corps {
  font-family: var(--font-body); font-size: 16px; line-height: 1.7;
  color: inherit; text-wrap: pretty;
}
.proj-section--dark .proj-block__corps { color: var(--neutral-300); }

/* Méta (client / année / …) */
.proj-meta {
  margin-top: var(--space-40);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-24) var(--space-32);
  border-top: 1px solid var(--stroke-white-subtle); padding-top: var(--space-32);
}
.proj-meta dt {
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--font-menu-2);
  margin-bottom: var(--space-6);
}
.proj-meta dd { font-family: var(--font-body); font-weight: 600; font-size: 15px; }

/* ---- Visuels de l'étude de cas ---- */
/* ---- Déroulé projet : frames pleine largeur de contenu (1440 − 2×80px) ---- */
.proj-deroule {
  max-width: var(--width-desktop); margin-inline: auto;
  padding-inline: var(--space-80);
  padding-block: var(--space-80) var(--space-96);
  display: flex; flex-direction: column; gap: var(--space-40);
}
.proj-frame { margin: 0; position: relative; }
.proj-frame__overlay { position: absolute; object-fit: contain; display: block; }
/* Visuel épinglé ouvert en grand : overlay foncé + image + labels conservés. */
.pin-card__img { cursor: zoom-in; }
.vis-lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-16);
  background: rgba(0,0,0,.86); padding: var(--space-40); cursor: zoom-out;
  animation: visFade .18s ease;
}
@keyframes visFade { from { opacity: 0; } to { opacity: 1; } }
.vis-lightbox__img {
  max-width: min(1100px, 92vw); max-height: 82vh; width: auto; height: auto;
  object-fit: contain; border-radius: 4px; box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.vis-lightbox__labels { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; justify-content: center; cursor: default; }
/* Contexte en vrai texte (remplace l'ancienne image). Taille = corps du site (16px).
   Sombre → texte blanc sur fond noir ; clair → texte noir sur fond clair. */
/* Cadre de contexte : proportions de la maquette (1278×920), contenu centré vertical.
   Titre en haut-gauche · 1er paragraphe à droite (alinéa) · 2e paragraphe pleine largeur dessous. */
.proj-context { aspect-ratio: 1278 / 920; display: flex; align-items: center; padding-block: 0; }
.proj-context.proj-section--dark { background: var(--surface-inverse); color: var(--font-white); }
.proj-context:not(.proj-section--dark) { background: var(--surface-primary); }
.proj-context .container { width: 100%; max-width: none; padding-inline: clamp(40px, 9vw, 120px); }
.proj-context__grid {
  display: grid; grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 80px); row-gap: clamp(40px, 6vw, 80px); align-items: start;
}
.proj-context__title { grid-column: 1; grid-row: 1; font-family: var(--font-title); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.proj-context__p1 { grid-column: 2; grid-row: 1; margin: 0; text-indent: clamp(1.5em, 4vw, 3em); }
.proj-context__rest { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; gap: var(--space-24); }
/* Corps du contexte : BLANC pur sur fond noir (et non le gris --neutral-300 des autres sections). */
.proj-context.proj-section--dark .proj-block__corps { color: var(--font-white); }
.proj-context__cta {
  display: inline-flex; align-items: center; gap: var(--space-8); width: max-content; margin-top: var(--space-16);
  height: 46px; padding: 0 var(--space-24);
  background: var(--font-white); color: #000; border: 1px solid var(--stroke-primary);
  font-family: var(--font-body); font-weight: 600; font-size: 14px; text-decoration: none;
  --btn-chamfer: 10px;
  clip-path: polygon(var(--btn-chamfer) 0, 100% 0, 100% calc(100% - var(--btn-chamfer)), calc(100% - var(--btn-chamfer)) 100%, 0 100%, 0 var(--btn-chamfer));
  transition: background .15s ease, color .15s ease;
}
.proj-context__cta:hover .cta-arrow__out { transform: translate(28px, -28px); opacity: 0; }
.proj-context__cta:hover .cta-arrow__in { transform: translate(0, 0); opacity: 1; }
.proj-context:not(.proj-section--dark) .proj-context__cta { background: #000; color: var(--font-white); border-color: #000; }
.proj-context__cta svg { display: block; }
/* Épingle sur un visuel de projet : apparaît au survol du cadre (comme en Exploration),
   reste visible si le visuel est épinglé. */
.proj-frame__pin {
  position: absolute; top: var(--space-16); right: var(--space-16); z-index: 4;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, background .15s ease, color .15s ease;
}
.proj-frame:hover .proj-frame__pin,
.proj-frame__pin:focus-visible,
.proj-frame__pin.is-pinned { opacity: 1; transform: none; pointer-events: auto; }
/* Handy Bag : à partir de la frame 8 (mockups photo), 64px au-dessus de chaque
   cadre — marge supérieure de la frame 8 + gap inter-cadres. Le déroulé a déjà
   un gap de 40px, on ajoute donc le complément pour atteindre 64px. */
.proj-deroule--handy-bag > .proj-frame:nth-child(n+8) { margin-top: calc(var(--space-64) - var(--space-40)); }
.proj-frame img { width: 100%; height: auto; display: block; }
/* Frame pleine largeur de page : bord à bord, ignore les marges de 80px du déroulé. */
.proj-frame--full { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
/* Contexte UX/UI : vrai bouton CTA cliquable posé sur le bouton dessiné dans l'image. Même style que les boutons du site (fond blanc, coins biseautés, flèche diagonale). Tailles en cqw → suit l'échelle de la frame et respecte les dimensions de l'exemple. */
.proj-frame--contexte { position: relative; container-type: inline-size; }
.proto-cta {
  position: absolute; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 0.95cqw;
  background: #fff; color: var(--font-primary); text-decoration: none;
  font-family: var(--font-body); font-weight: 600;
  font-size: 1.2cqw; line-height: 1; white-space: nowrap; cursor: pointer;
  padding: 1.0cqw 1.9cqw;
  --btn-chamfer: 0.7cqw;
  clip-path: polygon(var(--btn-chamfer) 0, 100% 0, 100% calc(100% - var(--btn-chamfer)), calc(100% - var(--btn-chamfer)) 100%, 0 100%, 0 var(--btn-chamfer));
  transition: background .15s ease;
}
.proto-cta .cta-arrow { width: 1.45cqw; height: 1.45cqw; }
.proto-cta .cta-arrow svg { width: 1.45cqw; height: 1.45cqw; }
.proto-cta:hover .cta-arrow__out { transform: translate(28px, -28px); opacity: 0; }
.proto-cta:hover .cta-arrow__in { transform: translate(0, 0); opacity: 1; }
@media (max-width: 820px) {
  .proto-cta { gap: 8px; padding: 8px 14px; font-size: 12px; --btn-chamfer: 8px; }
  .proto-cta .cta-arrow, .proto-cta .cta-arrow svg { width: 13px; height: 13px; }
}
.proj-frame__video { position: relative; width: 100%; padding-top: 56.25%; }
.proj-frame__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.proj-frame__video video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #000; cursor: pointer; }
/* Bandes transparentes : captent la molette (→ scroll page) sur toute la vidéo, sauf un petit trou central laissé au bouton lecture natif (→ clic + son). */
.proj-frame__wheelcatch { position: absolute; inset: 0; pointer-events: none; }
.proj-frame__wheel { position: absolute; pointer-events: auto; }
.proj-frame__wheel--top { top: 0; left: 0; right: 0; height: 39%; }
.proj-frame__wheel--bottom { bottom: 0; left: 0; right: 0; height: 39%; }
.proj-frame__wheel--left { top: 39%; bottom: 39%; left: 0; width: 42%; }
.proj-frame__wheel--right { top: 39%; bottom: 39%; right: 0; width: 42%; }
/* La vidéo OU le logo d'ouverture (frame pleine largeur) est collé au header : remonte de la marge haute du déroulé. */
.proj-deroule > .proj-frame--video:first-child,
.proj-deroule > .proj-frame--full:first-child {
  margin-top: calc(-1 * var(--space-80));
}
.proj-deroule > .proj-frame--video:first-child {
  width: 100vw; position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
}
@media (max-width: 820px) {
  .proj-deroule > .proj-frame--video:first-child,
  .proj-deroule > .proj-frame--full:first-child { margin-top: calc(-1 * var(--space-40)); }
}
.proj-frame figcaption {
  font-family: var(--font-body); font-style: italic; font-size: 13px;
  color: var(--font-primary-subtle); margin-top: var(--space-12);
}
@media (max-width: 820px) {
  .proj-deroule { padding-inline: var(--space-24); padding-block: var(--space-40); gap: var(--space-24); }
  .proj-deroule--handy-bag > .proj-frame:nth-child(n+8) { margin-top: calc(var(--space-64) - var(--space-24)); }
}
.proj-visual { margin-block: var(--space-40); }
.proj-visual--full img { width: 100%; display: block; }
.proj-visual--center { display: flex; flex-direction: column; align-items: center; }
.proj-visual--center img { max-width: 980px; width: 100%; display: block; }
.proj-visual--center figcaption { width: 100%; max-width: 980px; }
.proj-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24);
  margin-block: var(--space-40);
}
.proj-pair img { width: 100%; display: block; }
.proj-figure figcaption {
  font-family: var(--font-body); font-style: italic; font-size: 13px;
  color: var(--font-primary-subtle); margin-top: var(--space-12);
}

/* ---- Navigation bas de page (prev / haut / next) ---- */
.proj-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-16); padding-block: var(--space-48);
}
.proj-nav a {
  display: inline-flex; align-items: center; gap: var(--space-12);
  background: var(--surface-inverse); color: var(--font-white);
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: var(--space-16) var(--space-24);
  --btn-chamfer: 9px;
  clip-path: polygon(var(--btn-chamfer) 0, 100% 0, 100% calc(100% - var(--btn-chamfer)), calc(100% - var(--btn-chamfer)) 100%, 0 100%, 0 var(--btn-chamfer));
  transition: background .15s ease;
}
/* Survol : pas de bleu — la flèche permute comme le CTA « Découvrir ». */
.proj-nav a:hover { background: var(--surface-inverse); }
.proj-nav .dl-arrow__in { opacity: 0; }
.proj-nav__prev .dl-arrow__in { transform: translateX(130%); }   /* arrive de la droite */
.proj-nav__next .dl-arrow__in { transform: translateX(-130%); }  /* arrive de la gauche */
.proj-nav__top  .dl-arrow__in { transform: translateY(130%); }   /* arrive du bas */
.proj-nav__prev:hover .dl-arrow__out { transform: translateX(-130%); opacity: 0; }
.proj-nav__next:hover .dl-arrow__out { transform: translateX(130%);  opacity: 0; }
.proj-nav__top:hover  .dl-arrow__out { transform: translateY(-130%); opacity: 0; }
.proj-nav a:hover .dl-arrow__in { transform: translate(0, 0); opacity: 1; }
.proj-nav a small { color: var(--neutral-400); font-weight: 500; }
.proj-nav__top { padding-inline: var(--space-20); }

@media (max-width: 820px) {
  .proj-block { grid-template-columns: 1fr; gap: var(--space-24); }
  .proj-pair { grid-template-columns: 1fr; }
  .proj-hero { height: calc(100svh - var(--topbar-h, 78px)); min-height: 420px; }
  .proj-hero__panel-inner { width: calc(100vw - var(--index-w) - 2 * 28px); padding: 28px; }
  .proj-hero__panel[data-kind] .proj-hero__panel-inner { overflow-y: auto; }
  .proj-hero__panel-body p { width: 100%; margin-left: 0; margin-right: 0; }
  .proj-hero__ctas { left: var(--space-16); bottom: var(--space-16); z-index: 2; }
  .hero-cta--name { min-width: 0; }
  .proj-nav a small { display: none; }
}

/* ============================================================
   CHROME PARTAGÉ — frame 1440, topbar sticky, footer bleu
   ============================================================ */
.frame { width: 100%; background: var(--surface-primary); }

/* ---- Topbar (pleine largeur, sticky) ---- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-24) var(--space-80);
  background: var(--surface-primary);
  border-bottom: 1px solid var(--stroke-primary);
}
.topbar .logo__mark { width: 46px; height: 26px; }
.topbar__nav { display: flex; align-items: center; gap: var(--space-32); }
.topbar__nav a {
  position: relative;
  font-family: var(--font-body); font-weight: 600; font-size: 16px; white-space: nowrap;
  color: var(--font-primary); padding-bottom: 4px;
}
/* Soulignement révélé par masque, de gauche à droite */
.topbar__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .3s ease-in;
}
.topbar__nav a:hover::after { transform: scaleX(1); transition: transform .3s ease-out; }
.topbar__nav a[aria-current="page"]::after { transform: scaleX(1); transition: none; }

/* Variante sur fond bleu (accueil, avant scroll) */
.topbar--over-blue {
  background: transparent; border-bottom-color: transparent;
  transition: background .25s ease, border-color .25s ease;
}
.topbar--over-blue .logo__mark { background-color: var(--font-white); }
.topbar--over-blue .topbar__nav a { color: var(--font-white); }
.topbar--over-blue.is-stuck {
  background: var(--surface-primary); border-bottom-color: var(--stroke-primary);
}
.topbar--over-blue.is-stuck .logo__mark { background-color: var(--font-primary); }
.topbar--over-blue.is-stuck .topbar__nav a { color: var(--font-primary); }

/* ---- Texture grain réutilisable ---- */
.grain-layer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Surface bleue texturée (hero À propos, carte, accueil) */
.blue-surface {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 18% 12%, #3550D6 0%, rgba(53,80,214,0) 55%),
    radial-gradient(120% 120% at 88% 92%, #16297F 0%, rgba(22,41,127,0) 60%),
    var(--surface-blue);
}

/* ---- Footer bleu (accueil) ---- */
.footer-blue {
  position: relative; overflow: hidden;
  background: transparent; color: var(--font-white);
  padding: var(--space-64) var(--space-80) var(--space-48);
  display: flex; flex-direction: column; gap: clamp(48px, 7vh, 96px);
}
/* Variante claire (pages projet) : fond blanc, texte noir */
.footer-blue--light { background: var(--surface-primary); color: var(--font-primary); }
.footer-blue--light .footer-blue__logo .logo__mark { background-color: var(--font-primary); }
.footer-blue--light .footer-blue__role,
.footer-blue--light .footer-blue__coords dt,
.footer-blue--light .footer-blue__coords dd,
.footer-blue--light .footer-blue__wordmark,
.footer-blue--light .footer-blue__social a,
.footer-blue--light .footer-blue__menu a { color: var(--font-primary); }
.footer-blue__top {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--space-48);
}
.footer-blue__logo { align-self: center; }
.footer-blue__logo .logo__mark { width: 80px; height: 40px; background-color: var(--font-white); }
.footer-blue__role {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.008em;
  text-align: right; color: var(--font-white); justify-self: end;
}
.footer-blue__coords {
  display: grid; grid-template-columns: auto auto; column-gap: var(--space-24); row-gap: var(--space-2);
  align-items: baseline;
}
.footer-blue__coords dt,
.footer-blue__coords dd {
  font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 30px;
  color: var(--font-white);
}
.footer-blue__coords dt { opacity: .8; }
.footer-blue__coords a { transition: opacity .15s ease; }
.footer-blue__coords a:hover { opacity: .65; }

.footer-blue__wordmark {
  display: flex; flex-direction: column; width: 100%;
  font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; line-height: .89;
  font-size: clamp(44px, 8vw, 110px); color: var(--font-white); text-transform: uppercase;
}
.footer-blue__wm { display: block; }
.footer-blue__wm--1 { align-self: flex-start; }
.footer-blue__wm--2 { align-self: flex-end; }

.footer-blue__bottom {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32);
}
.footer-blue__social a {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  text-decoration: underline; color: #F5F5F5; transition: opacity .15s ease;
}
.footer-blue__social a:hover { opacity: .7; }
.footer-blue__menu { display: flex; gap: var(--space-8); }
.footer-blue__menu a {
  position: relative;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--font-white);
  padding: var(--space-8);
  white-space: nowrap;
}
/* Soulignement révélé par masque, de gauche à droite */
.footer-blue__menu a::after {
  content: ""; position: absolute; left: var(--space-8); right: var(--space-8); bottom: 4px;
  height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .3s ease-in;
}
.footer-blue__menu a:hover::after { transform: scaleX(1); transition: transform .3s ease-out; }
.footer-blue__menu a[aria-current="page"]::after { transform: scaleX(1); transition: none; }

@media (max-width: 860px) {
  .footer-blue__top { grid-template-columns: 1fr; gap: var(--space-24); }
  .footer-blue__role { text-align: left; justify-self: start; }
  .footer-blue__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .footer-blue__menu { flex-wrap: wrap; }
}

/* ============================================================
   ACCUEIL (index.html) — fond bleu + image, séquence d'apparition
   ============================================================ */
/* overflow visible : indispensable pour que le header reste sticky
   (un ancêtre overflow:hidden casserait le position:sticky). */
.home {
  position: relative;
  overflow: visible;
  background-color: var(--surface-blue);
  background-image:
    linear-gradient(180deg, rgba(11,21,64,.20), rgba(11,21,64,.30)),
    url("../img/home-bg.png");
  background-size: cover, auto 100%;
  background-position: center, right center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}


.home-hero {
  position: relative;
  padding: clamp(32px, 4vh, 56px) var(--space-80) var(--space-64);
  color: var(--font-white);
  min-height: calc(100vh - 106px);
  display: flex;
}
.home-hero__grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
}
.hcol { display: flex; flex-direction: column; min-width: 0; }
.hcol--left { justify-content: space-between; gap: var(--space-48); }
.hcol--mid { align-items: center; justify-content: flex-start; position: relative; }
.hcol--right { gap: clamp(18px, 2.4vh, 32px); }

.home-title {
  font-family: var(--font-title); font-weight: 800;
  font-size: clamp(54px, 6.6vw, 96px); line-height: .99;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--font-white);
  white-space: nowrap;
}
.home-role {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(28px, 2.9vw, 40px); line-height: 1.18;
  color: var(--font-white); text-align: center;
  margin-top: clamp(132px, 15.5vw, 240px);
}
.home-accroche { display: flex; flex-direction: column; gap: var(--space-32); max-width: 44ch; }
.home-accroche p {
  font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 30px;
  color: var(--font-white); text-wrap: pretty;
}
.home-cta { align-self: flex-start; color: var(--font-primary); font-weight: 700; }
.home-cta:hover { background: var(--blue-200); color: var(--font-primary); }
.home-cta:active { background: var(--blue-200bis); color: var(--font-primary); }

/* Flèche d'incitation au scroll */
.scroll-cue {
  position: absolute; bottom: 0; left: 0; right: 0; margin-inline: auto;
  width: 48px;
  background: none; border: 0; padding: var(--space-8);
  color: var(--font-white); display: grid; place-items: center;
  animation: cue-bob 1.8s ease-in-out infinite;
  transition: opacity .45s ease;
}
.scroll-cue svg { width: 32px; height: 32px; display: block; }
.scroll-cue.is-done { opacity: 0; pointer-events: none; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* Vignettes projets */
.vignette { display: block; text-decoration: none; }
.vignette__img {
  position: relative; display: block; width: 100%;
  height: clamp(140px, 18vh, 216px); overflow: hidden; container-type: size;
  border-bottom: 2px solid var(--font-white); background: rgba(255,255,255,.1);
}
.vignette__meta { display: block; padding-top: var(--space-12); }
.vignette__name { display: block; font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--font-white); }
.vignette__cat  { display: block; font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 21px; color: var(--font-menu); margin-top: 2px; }
/* survol couleur géré par .revealed (sens unique) en JS */

/* Révélation par masque : la fenêtre ne clippe QUE verticalement (bas).
   Les insets horizontaux sont négatifs pour laisser le titre déborder
   de sa colonne sans jamais être rogné sur les côtés.
   L'animation est pilotée en JS (clip-path inline, image par image)
   car une transition clip-path par changement de classe reste figée
   dans certains moteurs. */
.home.js-anim .reveal { clip-path: inset(-0.16em -100vw 100% -100vw); }

@media (max-width: 860px) {
  .home-hero { min-height: 0; padding-inline: var(--space-24); }
  .home-hero__grid { grid-template-columns: 1fr; gap: var(--space-40); }
  .hcol--left { gap: var(--space-32); }
  .hcol--mid { justify-content: flex-start; }
  .home-title { white-space: normal; }
  .home-role { text-align: left; }
  .scroll-cue { position: static; margin: var(--space-24) 0 0; place-items: start; }
  .topbar { padding-inline: var(--space-24); }
}

/* ============================================================
   PAGES INTÉRIEURES — shell + rail vertical
   ============================================================ */
.page-shell { display: flex; flex-direction: row; align-items: stretch; }
/* Rail vertical de labels (collé au bord gauche) */
.rail {
  flex: 0 0 64px; align-self: stretch;
  border-right: 1px solid var(--stroke-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-block: var(--space-40); gap: var(--space-48);
}
.rail__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-12);
  color: var(--font-muted); transition: color .15s ease; background: none; border: 0;
}
.rail__item svg { width: 22px; height: 22px; }
.rail__item span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
}
.rail__item:hover { color: var(--font-primary-subtle); }
.rail__item.is-active { color: var(--font-primary); }
.rail__item.is-active svg { color: var(--font-primary); }

.page-main { flex: 1 1 auto; min-width: 0; padding: var(--space-64) var(--space-80) var(--space-80) var(--space-64); }

/* Projets : page à hauteur fixe, seule la zone grille scrolle */
.frame--fixed .page-shell { flex: 1 1 auto; min-height: 0; }
.frame--fixed .page-main { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.frame--fixed .page-head { flex: 0 0 auto; padding: var(--space-48) var(--space-80) var(--space-32) var(--space-64); margin-bottom: 0; }
.projets-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--space-80) var(--space-64) var(--space-64); }

/* En-tête de page (titre + intro) */
.page-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-48);
  align-items: start; margin-bottom: var(--space-64);
}
.page-head h1 { font-family: var(--font-title); font-weight: 800; font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -.02em; }
.page-head__intro { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.55; color: var(--font-primary); align-self: center; }

/* ---- Vue GRILLE ---- */
.vue { display: none; }
.vue.is-active { display: block; }
.grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.card {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--neutral-100);
  container-type: size;
}
/* Révélation N&B → couleur : masque (overflow:hidden) dont la HAUTEUR se déroule
   de haut en bas. Sens unique : la classe .revealed (posée en JS au survol) reste,
   la couleur ne disparaît jamais. */
.thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.thumb__bw { filter: grayscale(1); }
/* Recentrage vertical de certaines couvertures (sujet au centre) */
.thumb__img[src*="balenciaga"],
.thumb__img[src*="faros"] { object-position: center; }
/* Totem : entre haut et centre (visage dans le tiers supérieur) */
.thumb__img[src*="totem"] { object-position: 50% 28%; }
.thumb__mask {
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  overflow: hidden; z-index: 1;
}
/* La hauteur est animée en JS (inline) — une transition CSS déclenchée par
   changement de classe reste figée dans ce moteur. */
/* L'image couleur garde la taille du CONTENEUR (unités cq) → aucune déformation */
.thumb__mask .thumb__color { inset: auto; top: 0; left: 0; width: 100cqw; height: 100cqh; }
.card__labels { display: contents; }
/* Catégorie à gauche, nom à droite (bas). Si trop étroit → catégorie en haut-droite. */
.card__name, .card__cat {
  position: absolute; z-index: 2; bottom: var(--space-12);
  background: var(--surface-primary); color: var(--font-primary);
  font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 1;
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-full);
  border: 1px solid var(--stroke-primary);
  white-space: nowrap; max-width: calc(100% - var(--space-24));
}
.card__cat { left: var(--space-12); }
.card__name { right: var(--space-12); }
.card.is-narrow .card__cat { top: var(--space-12); bottom: auto; left: auto; right: var(--space-12); }

/* ---- Vue LISTE ---- */
.liste { display: flex; flex-direction: column; }
.ligne {
  display: grid; grid-template-columns: 280px minmax(160px, 220px) 1fr auto;
  gap: var(--space-32); align-items: stretch; min-height: 232px;
  padding: 0 var(--space-16) 0 0;
  border-bottom: 1px solid var(--neutral-100); transition: background .15s ease;
}
.ligne:hover { background: #F6F6F7; }
.ligne__thumb { position: relative; width: 280px; height: 100%; overflow: hidden; flex: 0 0 auto; align-self: stretch; background: var(--neutral-100); container-type: size; }
.ligne__name { align-self: center; padding-block: var(--space-32); font-family: var(--font-body); font-weight: 700; font-size: 18px; }
.ligne__body { align-self: center; display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; padding-block: var(--space-32); }
.ligne .tag { align-self: center; }
.ligne__sous { font-family: var(--font-body); font-weight: 500; font-size: 18px; }
.ligne__accroche { font-family: var(--font-body); font-weight: 400; font-size: 18px; color: var(--font-primary-subtle); text-wrap: pretty; max-width: 52ch; }

/* ---- Vue EXPLORATION (galerie horizontale, cards à 3 états) ----
   OFF (repos)  : hauteur commune, largeur étroite, photo N&B recadrée.
   HOVER        : la card grandit VERS LE HAUT (bord bas fixe), photo plus grande, N&B.
   ACTIF (clic) : la FRAME s'élargit aux proportions de la photo (photo entière),
                  révélation couleur haut→bas, labels visibles. Persiste au mouseleave.
   La couleur n'est PAS conservée : retour en N&B dès qu'on désactive. */
/* La rangée est calée TOUT EN BAS de la zone (marge basse seule en dessous) ;
   les cards ancrées en bas grandissent vers le haut. */
/* Vue Exploration : pas de scroll vertical de la page (seul le scroll horizontal
   de la galerie est permis). padding-bottom retiré : sinon les 64px de marge basse
   rognent la galerie et masquent le nom+épingle ancrés en bas des cards actives. */
.projets-scroll.is-exploration { overflow-y: hidden; padding-bottom: 0; }
.vue[data-vue="exploration"].is-active { display: flex; flex-direction: column; height: 100%; }
.exploration { overflow-x: auto; overflow-y: hidden; flex: 1 1 auto; min-height: 0; }
.exploration__track {
  display: flex; align-items: flex-end; gap: var(--space-12); width: max-content;
  height: 100%; min-height: 0; box-sizing: border-box;
  padding: var(--space-32) var(--space-16) var(--space-24);
}
.explo-item {
  --h-off: 280px; --h-big: 430px; --ar: 1.4; --w-off: 260px;
  position: relative; flex: 0 0 auto; overflow: hidden; cursor: pointer;
  height: var(--h-off); width: var(--w-off); background: var(--neutral-100);
}
/* Tailles (off / hover / actif) animées en JS (rAF) — ce moteur fige les
   transitions CSS, comme la révélation couleur. .is-active ne porte que le
   visuel (labels) ; la largeur/hauteur sont posées en inline par le JS. */

/* Photo : toujours aux proportions naturelles (largeur = hauteur × ratio),
   ancrée en bas et centrée → la frame étroite la recadre à gauche/droite. */
.explo-photo {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; aspect-ratio: var(--ar); container-type: size;
}
.explo-photo .thumb__img { object-position: center; }

/* Labels (catégorie / nom / épingle) — n'apparaissent qu'à l'état ACTIF.
   Positionnés indépendamment pour ne jamais se chevaucher :
   - card large  : catégorie en bas-gauche, nom+épingle en bas-droite.
   - card étroite (.is-narrow) : catégorie remonte en HAUT-gauche. */
.explo-cat, .explo-actions {
  position: absolute; z-index: 3; max-width: calc(100% - 2 * var(--space-12));
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease .12s, transform .35s ease .12s;
}
.explo-cat { right: var(--space-12); top: var(--space-12); transform: translateY(-8px); }
.explo-actions { right: var(--space-12); bottom: var(--space-12); transform: translateY(8px); display: flex; align-items: center; gap: var(--space-8); }
.explo-item.is-active .explo-cat,
.explo-item.is-active .explo-actions { opacity: 1; transform: none; pointer-events: auto; }
.explo-pill {
  display: inline-flex; align-items: center; gap: var(--space-6);
  height: 36px; padding: 0 var(--space-12);
  background: var(--surface-primary); color: var(--font-primary);
  font-family: var(--font-body); font-weight: 600; font-size: 13px; line-height: 1;
  border-radius: var(--radius-full); border: 1px solid var(--stroke-primary);
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.explo-pill--cat { max-width: 100%; overflow: hidden; }
.explo-pill--cat span, .explo-pill--cat { white-space: nowrap; }
.explo-pill--name { padding-inline: var(--space-16); transition: background .15s ease, color .15s ease; }
.explo-pill--name:hover { background: var(--surface-inverse); color: var(--font-white); }
.explo-pill--name svg { display: block; }
/* Épingle : pastille blanche fixe ; seul le glyphe se remplit en noir à l'état
   épinglé (aucun fond de couleur sur le label). */
.explo-pill--pin { width: 44px; padding: 0; justify-content: center; flex: 0 0 auto; transition: background .15s ease, color .15s ease; }
.explo-pill--pin svg { display: block; }
/* État de survol de l'épingle (ajout / retrait) : inversion comme le bouton nom. */
.explo-pill--pin:hover { background: var(--surface-inverse); color: var(--font-white); }

/* ---- Vue ÉPINGLES ---- */
.epingles__bar {
  position: sticky; top: 0; z-index: 5; background: var(--surface-primary);
  display: flex; align-items: center; gap: var(--space-24);
  padding-bottom: var(--space-40); margin-bottom: 0;
}
.epingles__search {
  flex: 1; display: flex; align-items: center; gap: var(--space-12);
  background: var(--neutral-100); padding: var(--space-16) var(--space-24); color: var(--font-primary-subtle);
  --sc: 10px;
  clip-path: polygon(var(--sc) 0, 100% 0, 100% calc(100% - var(--sc)), calc(100% - var(--sc)) 100%, 0 100%, 0 var(--sc));
}
.epingles__search input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: 16px; color: var(--font-primary); outline: none; }
.epingles__count { font-family: var(--font-title); font-weight: 700; font-size: 18px; white-space: nowrap; }
.epingles__add {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  background: var(--neutral-100); border: 0; color: var(--font-primary); cursor: pointer;
  width: 48px; height: 47px;
  --sc: 9px;
  clip-path: polygon(var(--sc) 0, 100% 0, 100% calc(100% - var(--sc)), calc(100% - var(--sc)) 100%, 0 100%, 0 var(--sc));
}
.epingles__add svg { width: 24px; height: 24px; display: block; }
/* État vide — tient sur une page (pas de scroll), panneau bleu 50% | pistes 50% */
.projets-scroll.is-epingles-empty { overflow-y: hidden; display: flex; flex-direction: column; }
.vue[data-vue="epingles"].is-active.is-empty { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.epingles__empty { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.epingles__empty-left { display: flex; align-items: stretch; min-height: 0; }
.epingles__empty-card {
  position: relative; overflow: hidden; flex: 1 1 auto; color: var(--font-white);
  background-color: var(--surface-blue);
  background-image: linear-gradient(180deg, rgba(11,21,64,.20), rgba(11,21,64,.30)), url("../img/home-bg.png");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: clamp(var(--space-24), 3.5vw, var(--space-48)); gap: var(--space-12); min-height: 0;
}
.epingles__empty-card .pin-badge { width: clamp(48px, 4.5vw, 64px); height: clamp(48px, 4.5vw, 64px); background: #fff; display: grid; place-items: center; margin-bottom: var(--space-8);
  --btn-chamfer: 10px; clip-path: polygon(var(--btn-chamfer) 0,100% 0,100% calc(100% - var(--btn-chamfer)),calc(100% - var(--btn-chamfer)) 100%,0 100%,0 var(--btn-chamfer)); }
.epingles__empty-card .pin-badge svg { width: 60%; height: auto; }
.epingles__empty-card h3 { font-family: var(--font-title); font-weight: 700; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.05; color: var(--font-white); }
.epingles__empty-card p { font-family: var(--font-body); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; color: var(--font-menu); max-width: 32ch; }
/* Séparateur : deux traits verticaux (bords du canal) + astérisque en bas */
.epingles__sep { position: relative; flex: 0 0 49px; align-self: stretch; }
.epingles__sep::before, .epingles__sep::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--neutral-300);
}
.epingles__sep::before { left: 0; }
.epingles__sep::after  { right: 0; }
.epingles__aster { position: absolute; bottom: var(--space-24); left: 50%; transform: translateX(-50%); width: 33px; height: 33px; display: block; }
/* Pistes — comme la vue Liste : 3 lignes occupant toute la hauteur, vignette
   pleine hauteur ferrée à gauche, filet en bas seulement, révélation couleur au
   survol de la photo + fond au survol de la card. */
.epingles__pistes { display: flex; flex-direction: column; height: 100%; min-height: 0; padding-left: var(--space-40); align-self: stretch; }
.epingles__pistes h3 { flex: 0 0 auto; font-family: var(--font-title); font-weight: 700; font-size: 22px; margin-bottom: var(--space-8); white-space: nowrap; }
.piste {
  flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--space-24); align-items: center; border-bottom: 1px solid var(--neutral-100);
  transition: background .15s ease;
}
.piste:hover { background: #F6F6F7; }
.piste__thumb { position: relative; height: 100%; aspect-ratio: 1; width: auto; align-self: stretch; overflow: hidden; background: var(--neutral-100); container-type: size; }
.piste__name { font-family: var(--font-title); font-weight: 700; font-size: 16px; }
.piste .tag { font-size: 12px; padding: var(--space-6) var(--space-12); }
/* Mur d'épingles */
.epingles__wall { columns: 300px; column-gap: var(--space-12); }
.epingles__wall .pin-card { break-inside: avoid; margin-bottom: var(--space-12); position: relative; }
/* Hauteur mini : garantit que le visuel a toujours la place d'accueillir, sans
   chevauchement, la catégorie (haut-droite) et l'épingle + nom (bas-droite).
   object-fit: cover recadre proprement les visuels trop bas (bannières larges). */
.epingles__wall .pin-card img { width: 100%; display: block; min-height: 160px; object-fit: cover; }
.epingles__wall .pin-card__img { display: block; }
/* Au survol d'un visuel épinglé : labels (catégorie / nom / épingle pleine),
   comme une card active de l'Exploration. */
.pin-card:hover .explo-cat, .pin-card:hover .explo-actions { opacity: 1; transform: none; pointer-events: auto; }
.pin-card.is-narrow .explo-cat { top: var(--space-12); bottom: auto; right: var(--space-12); left: auto; }
.pin-remove {
  position: absolute; top: var(--space-8); right: var(--space-8); width: 32px; height: 32px;
  display: grid; place-items: center; background: var(--surface-primary); color: var(--font-primary); opacity: 0; transition: opacity .15s ease;
}
.pin-card:hover .pin-remove { opacity: 1; }

@media (max-width: 980px) {
  .grille { grid-template-columns: repeat(2, 1fr); }
  .page-head, .epingles__empty { grid-template-columns: 1fr; }
  /* Le mur garde une largeur de colonne minimale (≥ épingle + nom) à toutes les tailles. */
  .epingles__wall { columns: 280px; }
  /* Épingles vide : sur mobile, on défile et les 3 cards reprennent une taille normale */
  .projets-scroll.is-epingles-empty { overflow-y: auto; display: block; }
  .vue[data-vue="epingles"].is-active.is-empty { display: block; flex: none; }
  .epingles__empty { display: block; flex: none; }
  .epingles__empty-left { display: block; }
  .epingles__empty-card { min-height: 360px; }
  .epingles__sep { display: none; }
  .epingles__pistes { display: block; height: auto; padding-left: 0; margin-top: var(--space-40); }
  .epingles__pistes h3 { white-space: normal; }
  .epingles__bar { flex-wrap: wrap; }
  .epingles__search { flex: 1 1 240px; min-width: 0; }
  .piste { flex: none; min-height: 96px; }
  .ligne { grid-template-columns: 140px 1fr; min-height: 140px; column-gap: var(--space-24); }
  .ligne__thumb { width: 140px; grid-row: 1 / span 2; }
  .ligne__name { grid-column: 2; grid-row: 1; align-self: end; padding-block: var(--space-16) 0; }
  .ligne__body { grid-column: 2; grid-row: 2; align-self: start; padding-block: var(--space-8) var(--space-16); }
  .ligne .tag { display: none; }
  .page-main { padding-inline: var(--space-24); }
}

/* ============================================================
   PAGES À HAUTEUR FIXE (À propos, Contact) — pas de scroll page
   ============================================================ */
.frame--fixed { min-height: 100vh; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.frame--fixed .topbar { flex: 0 0 auto; }

/* ---- À PROPOS ---- */
.about { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; }
.about__hero {
  flex: 0 0 43%; position: relative; color: var(--font-white);
  display: flex; align-items: flex-end; padding: var(--space-48);
  background-color: var(--surface-blue);
  background-image: linear-gradient(180deg, rgba(11,21,64,.18), rgba(11,21,64,.28)), url("../img/home-bg.png");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.about__wordmark {
  font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; line-height: .95;
  font-size: 40px; color: var(--font-white);
}
.about__rail {
  flex: 0 0 49px; position: relative; border-left: 1px solid var(--stroke-primary); border-right: 1px solid var(--stroke-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(var(--space-48), 9vh, var(--space-96));
}
.about-tab {
  position: relative;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--font-muted);
  background: none; border: 0; transition: color .15s ease;
}
.about-tab:hover { color: var(--font-primary-subtle); }
.about-tab.is-active { color: var(--font-primary); }
.about__star {
  position: absolute; left: -52px; top: 50%; width: 33px; height: 33px; color: var(--font-white);
  transform: translateY(-50%); transition: top .4s cubic-bezier(.22,.61,.36,1);
}
.about__panel { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: var(--space-48) var(--space-80) var(--space-48) var(--space-64); }
.about__panel h2 { font-family: var(--font-title); font-weight: 700; font-size: 30px; margin-bottom: var(--space-32); }

/* Profil */
.about-profil { display: flex; flex-direction: column; min-height: 100%; }
.about-profil__lead { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 1.65; margin-bottom: var(--space-24); }
.about-profil p.body { font-size: 16px; line-height: 1.7; margin-bottom: var(--space-16); max-width: 62ch; }
.about-profil .btn { margin-top: var(--space-16); align-self: flex-start; background: var(--blue-300); color: var(--font-white); }
.about-coords { display: flex; align-items: flex-start; gap: clamp(var(--space-24), 4vw, var(--space-48)) clamp(var(--space-32), 5vw, var(--space-64)); margin-top: auto; padding-top: var(--space-48); flex-wrap: wrap; }
.about-coords dt { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--font-muted); margin-bottom: var(--space-6); }
.about-coords dd { font-family: var(--font-body); font-weight: 500; font-size: 15px; white-space: nowrap; }
.about-coords a { color: var(--font-primary); border-bottom: 0; }

/* Timeline (Formations / Expériences) */
.tl { display: flex; flex-direction: column; }
.tl__row { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-24); padding: var(--space-16) 0; border-top: 1px solid var(--neutral-100); }
.tl__when { font-family: var(--font-body); font-size: 14px; color: var(--font-primary-subtle); }
.tl__what h3 { font-family: var(--font-title); font-weight: 700; font-size: 20px; margin-bottom: var(--space-4); }
.tl__what p.tl__where { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--font-blue); margin-bottom: var(--space-8); }
.tl__what p { font-family: var(--font-body); font-size: 15px; color: var(--font-secondary); }
.tl__what ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-8); }
.tl__what li { position: relative; padding-left: var(--space-16); font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--font-secondary); }
.tl__what li::before { content: "•"; position: absolute; left: 0; color: var(--font-primary); }

/* Compétences */
.skills__group { margin-bottom: var(--space-48); }
.skills__group > h3 { font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--font-muted); padding-bottom: var(--space-12); border-bottom: 1px solid var(--neutral-100); margin-bottom: var(--space-24); }
.skills__tags { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.skills__tags .tag { font-size: 15px; font-weight: 500; padding: 12px 18px; }
.skills__langs { display: flex; gap: var(--space-40); flex-wrap: wrap; align-items: baseline; }
.skills__langs b { font-family: var(--font-body); font-weight: 700; font-size: 17px; }
.skills__langs span { font-family: var(--font-body); font-size: 15px; color: var(--font-primary-subtle); margin-left: var(--space-8); }

/* ---- CONTACT ---- */
.contact { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; }
.contact__left { flex: 0 0 42%; position: relative; padding: var(--space-48); display: flex; flex-direction: column; }
.dispo-card {
  position: relative; overflow: visible; align-self: flex-start; color: var(--font-white);
  width: min(320px, 100%); aspect-ratio: 1;
  background-color: var(--surface-blue);
  background-image: linear-gradient(180deg, rgba(11,21,64,.20), rgba(11,21,64,.32)), url("../img/home-bg.png");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: flex; flex-direction: column; justify-content: space-between; padding: 28px;
}
.dispo-arrow { position: absolute; top: 24px; right: 24px; width: 26px; height: 26px; }
.dispo-arrow svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .45s cubic-bezier(.5,0,.2,1), opacity .4s ease; }
.dispo-arrow__in { transform: translate(-34px, 34px); opacity: 0; }
.dispo-card:hover .dispo-arrow__out { transform: translate(34px, -34px); opacity: 0; }
.dispo-card:hover .dispo-arrow__in { transform: translate(0, 0); opacity: 1; }
.dispo-card__main { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1.0; letter-spacing: -.01em; }
.dispo-card__avail { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-16); }
.dispo-card__availL { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.dispo-card__availR { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); }
.dispo-card__lab { font-family: var(--font-body); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: -.01em; }
.dispo-card__num { font-family: var(--font-body); font-weight: 800; font-size: 30px; line-height: 1; }
.dispo-card__sub { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: rgba(255,255,255,.9); }
.dispo-card__year { font-family: var(--font-body); font-weight: 700; font-size: 16px; }
.dispo-sep { display: block; width: 100%; height: 2px; background: rgba(255,255,255,.4); margin: 4px 0 0; position: relative; }
.dispo-sep::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--font-white); transform: scaleX(0); transform-origin: left center; transition: transform .35s ease-in; }
.dispo-card:hover .dispo-sep::after { transform: scaleX(1); transition: transform .4s ease-out; }
.contact__brand { margin-top: auto; }
.contact__role { font-family: var(--font-title); font-weight: 600; font-size: clamp(22px,2.4vw,32px); color: var(--font-primary); margin-bottom: var(--space-12); text-align: right; }
.contact__wordmark { font-family: var(--font-title); font-weight: 800; letter-spacing: -0.8px; line-height: 0.95; font-size: 40px; }
.contact__divider { flex: 0 0 49px; position: relative; background: none; align-self: stretch; }
.contact__divider::before, .contact__divider::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--neutral-300); }
.contact__divider::before { left: 0; }
.contact__divider::after { right: 0; }
.contact__divider .about__star { position: absolute; left: 50%; transform: translateX(-50%); top: auto; bottom: var(--space-24); right: auto; width: 33px; height: 33px; color: var(--font-primary); }
.contact__right { flex: 1 1 auto; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-48) var(--space-80) var(--space-48) var(--space-64); }
.contact__head { display: flex; align-items: center; gap: var(--space-24); margin-bottom: var(--space-32); }
.contact__head h2 { font-family: var(--font-title); font-weight: 700; font-size: 22px; white-space: nowrap; }
.contact__head .rule { flex: 1; height: 1px; background: var(--neutral-100); }
.contact__intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-40); margin-bottom: 0; }
.contact__intro p { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--font-secondary); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-32) var(--space-40); }
.contact-form .field--full { grid-column: 1 / -1; }
.contact-form__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-40); align-items: center; }
.contact-form__actions .btn--submit { justify-self: start; }
.contact-form__note { font-family: var(--font-body); font-size: 12px; color: var(--font-muted); max-width: 28ch; }

/* ---- Flèche CTA réutilisable (swap diagonal, cf. carte « Échangeons ») ---- */
.cta-arrow { position: relative; width: 18px; height: 18px; flex: 0 0 auto; display: inline-flex; }
.cta-arrow svg { position: absolute; top: 0; left: 0; width: 18px; height: 18px; transition: transform .45s cubic-bezier(.5,0,.2,1), opacity .4s ease; }
.cta-arrow__in { transform: translate(-28px, 28px); opacity: 0; }
.btn:hover .cta-arrow__out { transform: translate(28px, -28px); opacity: 0; }
.btn:hover .cta-arrow__in { transform: translate(0, 0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cta-arrow svg { transition: none; } }

/* CTA d'envoi : état désactivé (gris, sans flèche) → prêt (bleu + flèche) */
.btn--submit { background: var(--neutral-100); color: var(--neutral-400); cursor: not-allowed; transition: background-color .3s ease, color .3s ease; }
.btn--submit .cta-arrow { width: 0; opacity: 0; transition: width .3s cubic-bezier(.5,0,.2,1), opacity .3s ease; }
.btn--submit.is-ready { background: var(--blue-300); color: var(--font-white); cursor: pointer; }
.btn--submit.is-ready .cta-arrow { width: 18px; opacity: 1; }
.contact__coords { display: flex; gap: var(--space-64); margin-top: var(--space-40); flex-wrap: wrap; }
.contact__coords dt { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--font-muted); margin-bottom: var(--space-6); }
.contact__coords dd { font-family: var(--font-body); font-weight: 500; font-size: 15px; }
.contact__coords a { color: var(--font-primary); border-bottom: 1px solid currentColor; }
.form-sent { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--font-green); }

@media (max-width: 900px) {
  .frame--fixed { height: auto; min-height: 0; overflow: visible; }
  .about, .contact { flex-direction: column; }
  .about__hero, .contact__left { flex-basis: auto; min-height: 280px; }
  .about__rail { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--stroke-primary); gap: var(--space-32); padding: var(--space-16); justify-content: flex-start; }
  .about-tab { writing-mode: horizontal-tb; transform: none; }
  .about__star { display: none; }
  .about__panel, .contact__right { overflow: visible; padding-inline: var(--space-24); }
  .contact__divider { display: none; }
  .contact__intro, .contact-form { grid-template-columns: 1fr; }
  .contact-form__actions { grid-template-columns: 1fr; row-gap: var(--space-16); }
  /* Plus d'air entre le CTA et les coordonnées quand l'écran rétrécit. */
  .contact__coords { margin-top: var(--space-64); }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .contact__coords { margin-top: clamp(var(--space-40), 7vw, var(--space-80)); }
}

/* ============================================================
   Retour au clic / focus : plus de carré bleu du navigateur.
   → surbrillance grise biseautée (épouse le chanfrein des boutons
   via un liseré intérieur ; carré gris net ailleurs).
   ============================================================ */
* { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--neutral-400); outline-offset: 2px;
}
/* Contrôles biseautés / arrondis : liseré gris intérieur qui suit leur forme,
   au tap (:active) comme au focus clavier (:focus-visible). */
.btn:focus-visible, .hero-cta:focus-visible, .rail__item:focus-visible,
.epingles__add:focus-visible, .explo-pill:focus-visible,
.btn:active, .hero-cta:active, .rail__item:active,
.epingles__add:active, .explo-pill:active {
  outline: none; box-shadow: inset 0 0 0 2px var(--neutral-400);
}
.epingles__search:focus-within { box-shadow: inset 0 0 0 2px var(--neutral-400); }