Outiref

Code source de l'URL : https://lylousimon.com

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description" content="Portfolio de Lylou Simon, community manager en alternance dans le Territoire de Belfort : vidéos, photos, réseaux sociaux et supports print.">
<link rel="canonical" href="https://lylousimon.com/">
<meta property="og:type" content="website">
<meta property="og:locale" content="fr_FR">
<meta property="og:url" content="https://lylousimon.com/">
<meta property="og:title" content="Lylou Simon · Community manager">
<meta property="og:description" content="Portfolio de Lylou Simon, community manager en alternance dans le Territoire de Belfort : vidéos, photos, réseaux sociaux et supports print.">
<meta property="og:image" content="https://lylousimon.com/apercu-partage.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<style>
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
img { max-width: 100%; }
</style>
<title>Lylou Simon · Community manager</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;1,500&family=Caveat:wght@500;600&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,500;12..96,800&family=Hanken+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
<style>
/* Layout : une colonne aérée. Nom XXL, showreel, puis sections en titres minuscules ; le portfolio est rangé par catégorie, une rangée de cartes par catégorie. */
:root {
  --paper: #F7F8FA;
  --surface: #FFFFFF;
  --ink: #0D1A2B;
  --muted: #6A7483;
  --line: #E1E5EB;
  --accent: #2550F0;
  --stone: #626A74;
  --todo-bg: #FFF3D6;
  --todo-fg: #8A5300;
  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius: 12px;
  --wrap: 1120px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; }
.label { font: 500 0.72rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.todo { background: var(--todo-bg); color: var(--todo-fg); border-radius: 4px; padding: 0.05em 0.35em; font-style: normal; }

/* En-tête */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.brand { font: 800 1.2rem/1 var(--display); text-decoration: none; letter-spacing: -0.02em; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { text-decoration: none; font-size: 0.92rem; color: var(--muted); }
.nav a:hover { color: var(--ink); }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font: 600 0.82rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; background: var(--ink); color: var(--surface);
  transition: background .2s;
}
.btn:hover { background: var(--accent); }
.nav .btn { padding: 10px 16px; color: var(--surface); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.menu-toggle { display: none; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font: 600 0.82rem/1 var(--body); color: var(--ink); cursor: pointer; }
.menu-toggle::after { content: ""; width: 12px; height: 8px; background: linear-gradient(var(--ink) 0 0) top/100% 1.5px no-repeat, linear-gradient(var(--ink) 0 0) bottom/100% 1.5px no-repeat; transition: transform .2s; }
.top.open .menu-toggle::after { background: linear-gradient(45deg, transparent 45%, var(--ink) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--ink) 45% 55%, transparent 55%); width: 10px; height: 10px; }
.brand, .nav .btn { white-space: nowrap; }
@media (max-width: 420px) {
  .brand { font-size: 1.02rem; }
  .top .wrap { gap: 8px; }
  .nav { gap: 6px; }
  .nav .btn { padding: 9px 11px; font-size: 0.7rem; letter-spacing: .05em; }
  .menu-toggle { padding: 8px 11px; }
}
@media (max-width: 760px) {
  .nav { gap: 10px; }
  .menu-toggle { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px max(20px, env(safe-area-inset-right, 0px)) 16px max(20px, env(safe-area-inset-left, 0px));
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .top.open .nav-links { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 1.1rem; color: var(--ink); border-top: 1px solid var(--line); }
  .nav-links a:first-child { border-top: 0; }
  .nav .btn { padding: 9px 14px; }
}

/* Ouverture */
.hero { position: relative; min-height: calc(100svh - 72px); display: flex; align-items: center; padding-block: 48px 96px; text-align: center; }
.hero > .wrap { width: 100%; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font: 500 0.72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  animation: fade 1s ease 1.2s both;
}
.scroll-cue i { display: block; width: 1px; height: 40px; background: linear-gradient(var(--stone), transparent); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue i { animation: none; } }
.hero h1 {
  font-weight: 800;
  font-size: clamp(4.4rem, 19vw, 14rem);
  line-height: .82;
  letter-spacing: -0.05em;
}
.hero .role {
  margin-top: 0.9em;
  font: 300 clamp(1.4rem, 3.4vw, 2.2rem)/1.1 var(--display);
  letter-spacing: -0.02em;
  color: var(--muted);
}
.hero .role b { font-weight: 500; color: var(--stone); }
.hero .lede { margin: 26px auto 0; max-width: 32rem; font: italic 500 clamp(1.1rem, 2vw, 1.35rem)/1.45 "Playfair Display", Georgia, serif; color: var(--stone); text-wrap: balance; }
.hero .btn { margin-top: 32px; }
.reel {
  position: relative; margin-bottom: 28px;
  border-radius: calc(var(--radius) + 4px); overflow: hidden;
  aspect-ratio: 16 / 9; max-width: 100%; background: var(--ink);
}
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bandeau */
.ticker { overflow: hidden; padding-block: 26px; border-bottom: 1px solid var(--line); margin-top: 56px; }
.ticker-track { display: flex; width: max-content; animation: slide 40s linear infinite; }
.ticker ul { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker li {
  font: 300 clamp(1.1rem, 2vw, 1.4rem)/1 var(--display); white-space: nowrap; color: var(--muted);
  padding-inline: 20px; display: flex; align-items: center; gap: 40px;
}
.ticker li::after { content: "·"; color: var(--accent); font-weight: 800; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* Sections */
section { scroll-margin-top: 72px; }
.section { padding-block: 112px 0; }
.title {
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: .9;
  letter-spacing: -0.045em;
  text-align: center;
}
.title span { font-weight: 300; color: var(--muted); }

/* Portfolio */
.cat { margin-top: 72px; }
.cat-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 36px; }
.cat-head h3 { font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.03em; text-transform: uppercase; }
.cat-head p { max-width: 32rem; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.card {
  display: flex; flex-direction: column; gap: 12px;
  background: none; border: 0; padding: 0; margin: 0;
  text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.thumb {
  position: relative; display: block; width: 100%;
  aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--ink);
}
.thumb img, .thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease, opacity .3s; }
.thumb video { opacity: 0; }
.card:hover .thumb img { transform: scale(1.04); }
.card.playing .thumb video { opacity: 1; }
.badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.94); color: var(--ink);
  font: 500 0.7rem/1 var(--mono); letter-spacing: .05em;
  padding: 7px 10px; border-radius: 999px;
}
.badge svg { width: 9px; height: 9px; fill: currentColor; }
.card-name { font: 800 1.05rem/1.2 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card-tags span { font-size: 0.82rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
@media (max-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } }
@media (max-width: 420px) { .card-name { font-size: .92rem; } }

/* Descriptions et compétences des réalisations */
.cards { align-items: start; }
.item { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card-desc { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.pills { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pills li { font: 500 0.76rem/1 var(--body); color: var(--ink); padding: 7px 11px; border-radius: 999px; background: color-mix(in srgb, var(--line) 55%, var(--paper)); }
.gallery-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gallery-info { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; max-width: 46rem; }
@media (max-width: 760px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mini-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 56px 0 16px; }
.mini-head.first { margin-top: 0; }

/* Sous-catégories */
.cat + .cat { margin-top: 128px; }
.sub {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--ink); padding-bottom: 12px; margin: 48px 0 24px;
}
.sub:first-of-type { margin-top: 0; }
.sub h4 { margin: 0; font: 500 clamp(1.3rem, 2.4vw, 1.6rem)/1 var(--display); letter-spacing: -0.02em; }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.thumb.top img { object-position: 50% 0; }
.ticker.inline { margin: 0 0 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 22px; }
.ticker.inline li { color: var(--ink); font: 500 clamp(1rem, 1.8vw, 1.2rem)/1 var(--display); }
.ticker.inline li b { font-weight: 800; font-size: 1.55em; letter-spacing: -0.03em; margin-right: .3em; font-variant-numeric: tabular-nums; }
.ticker.inline li em { font-style: normal; color: #1D7F46; font-weight: 600; font-size: .85em; margin-left: .4em; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.stat b { font: 800 clamp(1.9rem, 3.6vw, 2.7rem)/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.stat .what { font-weight: 600; font-size: 0.95rem; }
.stat .up { color: #1D7F46; font-weight: 600; font-size: 0.88rem; }
.stat .ctx { color: var(--muted); font-size: 0.88rem; }
@media (max-width: 860px) {
  .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Présentation courte (accueil) */
.intro .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.intro-photo { width: 190px; height: 190px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; transform-origin: 50% 100%; scale: .5; will-change: scale; }
@media (max-width: 640px) { .intro-photo { width: 160px; height: 160px; } }
.intro-lead { margin-top: 28px; max-width: 40rem; font: 500 clamp(1.25rem, 2.4vw, 1.7rem)/1.4 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.intro-facts { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 28px; margin: 40px 0 0; }
@media (max-width: 640px) {
  .intro-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 360px; }
  .intro-facts > div, .intro-facts > div:first-child { border-left: 0; padding: 0 8px; }
  .intro-facts > div:last-child { grid-column: 1 / -1; }
}
.intro-facts > div { padding: 0 clamp(18px, 4vw, 44px); border-left: 1px solid var(--line); }
.intro-facts > div:first-child { border-left: 0; }
.intro-facts dt { font: 800 clamp(1.8rem, 4.5vw, 3rem)/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.intro-facts > div { min-width: 0; }
.intro-facts dd { margin: 8px 0 0; color: var(--muted); font-size: 0.9rem; }
.more { margin-top: 36px; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.more-btn { margin-top: 40px; }
.more span { display: inline-block; transition: transform .2s; }
.more:hover span { transform: translateX(4px); }

.about-facts { margin: 96px auto 0; }
.intro-facts { text-align: center; }
@media (max-width: 640px) {
  .intro-facts.intro-facts > div { border-left: 0; padding: 0 8px; }
}

/* Aperçu des réalisations (accueil) */
.teasers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin-top: 56px; }
@media (max-width: 900px) { .teasers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.teaser { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.teaser-img { display: block; aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--ink); margin-bottom: 8px; }
.teaser-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.teaser:hover .teaser-img img { transform: scale(1.04); }
.teaser-plain { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--stone); }
.teaser-word { color: #FFFFFF; text-align: center; font: 500 clamp(1.6rem, 3.4vw, 2.5rem)/1.05 "Playfair Display", Georgia, serif; text-transform: uppercase; letter-spacing: .01em; transition: transform .6s ease; }
.teaser:hover .teaser-word { transform: scale(1.04); }
.teaser .teaser-meta { color: var(--ink); font-weight: 500; }
.teaser-name { font: 800 clamp(1.5rem, 3vw, 2.1rem)/1.05 var(--display); letter-spacing: -0.025em; text-transform: uppercase; }
.teaser-meta { color: var(--muted); }
.center { display: flex; justify-content: center; margin-top: 48px; }
@media (max-width: 640px) { .teasers { grid-template-columns: 1fr; } }

/* Page Mes réalisations */
.page-real { padding-block: 40px 0; }
.back { display: inline-flex; text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--muted); }
.back:hover { color: var(--ink); }
.page-title {
  margin-top: 40px; text-align: center;
  font-weight: 800; font-size: clamp(3.4rem, 12vw, 9rem); line-height: .86; letter-spacing: -0.05em;
}
.page-title span { font-weight: 300; color: var(--muted); }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.jump a {
  text-decoration: none; font-weight: 600; font-size: 0.92rem;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
}
.jump a:hover { border-color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }

/* Mon parcours */
.parcours { margin-top: 120px; }
.parcours-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.parcours-brand { min-width: 0; }
.parcours-title {
  position: relative; display: inline-block;
  font: 500 clamp(2.8rem, 8vw, 5.4rem)/0.95 "Playfair Display", Georgia, serif;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink);
}
.parcours-title .brush { position: absolute; left: -0.18em; top: -0.32em; width: 2.75em; height: 1.6em; z-index: 0; overflow: visible; }
.parcours-title .on-brush { position: relative; z-index: 1; color: #FFFFFF; }
.parcours-sub { margin-top: 16px; padding-left: 2.6em; font: italic 500 clamp(1.05rem, 1.8vw, 1.25rem)/1.3 "Playfair Display", Georgia, serif; color: var(--ink); }
.parcours-quote { max-width: 19rem; text-align: right; font: italic 500 1.1rem/1.4 "Playfair Display", Georgia, serif; color: var(--muted); }
.timeline-h {
  list-style: none; margin: 72px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto 12px auto; column-gap: 24px;
}
.timeline-h .axis { grid-column: 1 / -1; grid-row: 2; }
.timeline-h .axis svg { display: block; width: 100%; height: 12px; overflow: visible; }
.step { position: relative; min-width: 0; padding-left: 16px; border-left: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; }
.step.up { grid-row: 1; align-self: end; padding-bottom: 30px; }
.step.down { grid-row: 3; align-self: start; padding-top: 30px; }
.step::after { content: ""; position: absolute; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--stone); box-shadow: 0 0 0 3px var(--paper); }
.step.up::after { bottom: -10.5px; }
.step.down::after { top: -10.5px; }
.step-when { font: 600 1.55rem/1 "Caveat", "Segoe Print", cursive; color: var(--ink); }
.step-title { font: italic 500 1.4rem/1.15 "Playfair Display", Georgia, serif; color: var(--stone); }
.step-text { color: var(--muted); font-size: 0.93rem; line-height: 1.55; }
@media (max-width: 860px) {
  .parcours-quote { text-align: left; }
  .parcours-sub { padding-left: 0; }
  .timeline-h { display: flex; flex-direction: column; gap: 30px; margin-top: 48px; border-left: 2px solid var(--ink); }
  .timeline-h .axis { display: none; }
  .step, .step.up, .step.down { border-left: 0; padding: 0 0 0 22px; }
  .step::after, .step.up::after, .step.down::after { top: .45em; bottom: auto; left: -6px; }
}

/* Mes valeurs */
.valeurs { margin-top: 128px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.valeurs-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.valeurs-text .parcours-title { margin-bottom: 16px; align-self: flex-start; font-size: clamp(2.6rem, 5.6vw, 4.4rem); }
.valeurs-lede { color: var(--ink); line-height: 1.65; max-width: 34rem; }
.values-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.values-list li { position: relative; padding-left: 30px; }
.values-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 50%; background: var(--stone); }
.value-name { font: italic 500 1.4rem/1.15 "Playfair Display", Georgia, serif; color: var(--ink); }
.value-text { margin-top: 4px; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 860px) { .valeurs { grid-template-columns: 1fr; margin-top: 96px; } }

/* Compétences */
.skills { list-style: none; margin: 56px auto 0; padding: 0; max-width: 820px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.skills li {
  font: 500 clamp(1rem, 1.8vw, 1.2rem)/1 var(--display);
  padding: 14px 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}

.tools-label { text-align: center; margin-top: 56px; }
.toolgroups { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 48px; margin-top: 24px; }
.tg { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tg-name { font: 500 0.95rem/1 var(--display); color: var(--ink); }
.logos { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.logos li { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 64px; }
.logos img { width: 40px; height: 40px; object-fit: contain; display: block; }
.logos span { font-size: 0.72rem; color: var(--muted); text-align: center; line-height: 1.2; }
@media (max-width: 520px) { .toolgroups { gap: 28px 24px; } .logos { gap: 10px; } }
.tools { list-style: none; margin: 14px auto 0; padding: 0; max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tools li { font: 500 0.85rem/1 var(--body); color: var(--muted); padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--line) 55%, var(--paper)); }

/* À propos */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; margin-top: 64px; }
.portrait {
  aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--radius);
  background: var(--surface); border: 1px dashed var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted);
}
.portrait strong { font: 800 5rem/1 var(--display); color: var(--ink); letter-spacing: -0.05em; }
.portrait-photo { aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--line); }
.portrait-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
@media (max-width: 760px) { .portrait-photo { max-width: 320px; width: 100%; margin: 0 auto; } }
.about-text { display: flex; flex-direction: column; gap: 18px; max-width: 36rem; }
.about-text .intro { font: 500 clamp(1.15rem, 2vw, 1.3rem)/1.4 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.about-text p:not(.intro) { color: var(--muted); }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; gap: 32px; } .portrait { max-width: 300px; margin: 0 auto; } }

/* Contact */
.contact { padding-block: 128px 64px; text-align: center; }
.contact .title { font-size: clamp(3.4rem, 12vw, 9rem); }
.contact .btn { margin-top: 40px; }
.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 32px; color: var(--muted); }
.mail { display: inline-flex; align-items: center; gap: 10px; }
.mail a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.mail a:hover { border-color: var(--ink); }
.copy { font: 600 0.78rem/1 var(--body); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.copy:hover { border-color: var(--ink); }
footer { border-top: 1px solid var(--line); padding-block: 24px; color: var(--muted); font-size: 0.88rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

/* Apparitions au défilement */
@keyframes rise { from { opacity: 0; transform: translateY(60px); } }
@keyframes fade { from { opacity: 0; } }
.hero .label { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 { animation: rise 1.2s cubic-bezier(.2,.7,.2,1) .15s both; }
.hero .role { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) .4s both; }
.hero .lede { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) .55s both; }
.hero .btn { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) .7s both; }
.reveal-on .reveal {
  opacity: 0; transform: translateY(80px) scale(.96);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16,.84,.3,1);
  transition-delay: var(--d, 0ms);
}
.reveal-on .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero .label, .hero h1, .hero .role, .hero .lede, .hero .btn { animation: fade 1.2s ease both; }
  .reveal-on .reveal { transform: none; transition: opacity 1.2s ease; transition-delay: var(--d, 0ms); }
}

/* Fiche contact */
.cc-wrap {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 26, 43, .32); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.cc {
  position: relative; width: min(100%, 380px); max-height: 100%; overflow-y: auto;
  background: var(--surface); border-radius: 26px; padding: 44px 18px 18px; text-align: center;
  box-shadow: 0 40px 90px -30px rgba(13, 26, 43, .55);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", var(--body);
  animation: ccIn .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ccIn { from { opacity: 0; transform: translateY(28px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .cc { animation: none; } }
.cc-close { position: absolute; top: 14px; right: 16px; background: none; border: 0; padding: 4px 6px; font: 600 1rem/1 inherit; color: var(--ink); cursor: pointer; }
.cc-photo { display: block; width: 116px; height: 116px; margin: 0 auto; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.cc-name { margin-top: 14px; font: 600 1.75rem/1.1 inherit; letter-spacing: -0.02em; }
.cc-sub { margin-top: 4px; color: var(--muted); font-size: 0.95rem; }
.cc-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.cc-actions a {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 11px 4px 9px;
  border-radius: 14px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: 0.74rem;
  transition: background .2s;
}
.cc-actions a:hover { background: var(--line); }
.cc-actions svg { width: 22px; height: 22px; fill: none; stroke: var(--stone); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.cc-list { margin: 16px 0 0; padding: 0 14px; text-align: left; background: var(--paper); border-radius: 16px; }
.cc-list > div { padding: 11px 0; border-bottom: 1px solid var(--line); }
.cc-list > div:last-child { border-bottom: 0; }
.cc-list dt { font-size: 0.78rem; color: var(--muted); }
.cc-list dd { margin: 2px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.cc-v { font-size: 1rem; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; user-select: all; }
a.cc-v { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a.cc-v:hover { text-decoration-color: var(--ink); }
.cc-toast { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: var(--surface); font-size: 0.82rem; text-align: left; }
.cc-toast .cc-copy { background: var(--surface); }
.cc-copy { flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 5px 10px; font: 600 0.72rem/1 inherit; cursor: pointer; }
.cc-copy:hover { border-color: var(--ink); }

/* Titres signature et annotations manuscrites */
.title-pp {
  text-align: center;
  font: 500 clamp(2.6rem, 7.4vw, 5.2rem)/1 "Playfair Display", Georgia, serif;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink);
}
.title-link { color: inherit; text-decoration: none; transition: color .25s; }
.title-link:hover { color: var(--stone); }
.title-contact { font-size: clamp(2.8rem, 8.4vw, 6.2rem); line-height: 1.05; }
.bw { position: relative; display: inline-block; padding: 0 .08em; }
.bw .brush-x { position: absolute; left: -.16em; right: -.16em; top: .02em; bottom: -.04em; width: calc(100% + .32em); height: 100%; z-index: 0; overflow: visible; }
.bw-t { position: relative; z-index: 1; color: #FFFFFF; }
.hand { position: absolute; font: 600 1.5rem/1 "Caveat", "Segoe Print", cursive; color: var(--stone); white-space: nowrap; pointer-events: none; }
.btn-wrap { position: relative; display: inline-block; }
.hand-btn { left: calc(100% + 12px); top: 46px; display: flex; align-items: flex-start; gap: 4px; transform: rotate(-6deg); animation: fade 1s ease 1.4s both; }
.hand-btn svg { width: 44px; height: 26px; margin-top: -10px; }
.has-hand { position: relative; }
.hand-fact { position: static; display: block; margin-top: 8px; font-size: 1.3rem; transform: rotate(-4deg); }
@media (max-width: 640px) {
  .hand-btn { left: 50%; top: calc(100% + 10px); transform: translateX(-50%) rotate(-4deg); }
  .hand-btn svg { display: none; }
  .hand-fact { position: static; display: block; margin-top: 6px; transform: rotate(-4deg); }
}

/* Visionneuse */
.details[hidden] { display: none !important; }
.gallery-name { margin-top: 14px; }
.viewer {
  position: fixed; inset: 0; z-index: 20;
  background: var(--paper);
  overflow-y: auto;
  padding: calc(64px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.viewer-body {
  max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 36px;
}
.viewer-left { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.viewer-media { display: flex; justify-content: center; width: 100%; }
.viewer-media img, .viewer-media video { max-width: 100%; max-height: 62vh; object-fit: contain; border-radius: 12px; background: var(--ink); display: block; }
.viewer-info { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 36rem; padding-bottom: 24px; }
.viewer-info h4 { margin: 0 0 6px; font: 800 clamp(1.8rem, 4vw, 2.6rem)/1 var(--display); letter-spacing: -0.03em; text-transform: uppercase; }
#v-text { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.d-text { color: var(--muted); line-height: 1.65; }
.d-skills-title { margin-top: 22px; font: 800 clamp(1.7rem, 3.6vw, 2.3rem)/1 var(--display); letter-spacing: -0.045em; color: var(--ink); }
#v-text .pills { justify-content: center; }
.viewer-nav { display: flex; align-items: center; gap: 12px; font: 500 0.8rem/1 var(--mono); color: var(--muted); }
.viewer button {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 16px; font: 600 0.9rem/1 var(--body); cursor: pointer;
}
.viewer button:hover { border-color: var(--ink); }
.viewer .close { position: fixed; z-index: 1; top: calc(16px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
@media (max-width: 860px) {
  .viewer-body { gap: 24px; }
  .viewer-media img, .viewer-media video { max-height: 56vh; }
}
</style>
</head>
<body>


<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false"><defs><filter id="rough-h" x="-10%" y="-20%" width="120%" height="140%"><feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="3" seed="11"/><feDisplacementMap in="SourceGraphic" scale="10"/></filter></defs></svg>
<header class="top">
  <div class="wrap">
    <a class="brand" href="#accueil">Lylou Simon</a>
    <nav class="nav" aria-label="Navigation principale">
      <div class="nav-links" id="nav-links">
        <a href="#accueil" data-view="home">Accueil</a>
        <a href="#realisations" data-view="real">Mes réalisations</a>
        <a href="#a-propos" data-view="about">À propos</a>
      </div>
      <button class="menu-toggle" id="menu-toggle" type="button" aria-expanded="false" aria-controls="nav-links">Menu</button>
      <a class="btn" href="#contact" data-contact>Contactez-moi</a>
    </nav>
  </div>
</header>

<main>
  <section class="hero home-only" id="accueil">
    <div class="wrap">
      <p class="label" style="margin-bottom: 28px">Alternante en communication · Territoire de Belfort</p>
      <h1>Lylou<br>Simon</h1>
      <p class="role">Community <b>manager</b></p>
      <p class="lede">« On ne rassemble pas les gens autour d'une marque, mais autour d'une histoire qui leur ressemble. »</p>
      <span class="btn-wrap"><a class="btn" href="#realisations">Voir mes réalisations</a><span class="hand hand-btn" aria-hidden="true"><svg viewBox="0 0 54 30"><path d="M50 22 C 38 26, 22 24, 8 12" fill="none" stroke-width="2" stroke-linecap="round" style="stroke: var(--stone)"/><path d="M6 22 L 7 11 L 17 13" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="stroke: var(--stone)"/></svg>c'est par ici</span></span>
    </div>
    <button class="scroll-cue" id="scroll-cue" type="button">Défiler<i></i></button>
  </section>

  <div class="ticker home-only" aria-label="Ce que je fais">
    <div class="ticker-track">
      <ul><li>Motion design</li><li>Montage vidéo</li><li>Formats courts</li><li>Supports print</li><li>LinkedIn</li><li>Facebook</li><li>Veille concurrentielle</li><li>IA générative</li></ul>
      <ul aria-hidden="true"><li>Motion design</li><li>Montage vidéo</li><li>Formats courts</li><li>Supports print</li><li>LinkedIn</li><li>Facebook</li><li>Veille concurrentielle</li><li>IA générative</li></ul>
    </div>
  </div>

  <section class="section home-only intro" id="intro">
    <div class="wrap">
      <img class="intro-photo" src="media/portrait.jpg" alt="Portrait de Lylou Simon">
      <p class="intro-lead">Je m'appelle Lylou, j'ai 20 ans. Étudiante en BUT Techniques de commercialisation, je fais toutes mes études en alternance et je crée des contenus qui font vivre les marques sur les réseaux sociaux.</p>
      <dl class="intro-facts">
        <div><dt>3</dt><dd>ans d'alternance</dd></div>
        <div><dt>3</dt><dd>entreprises</dd></div>
        <div class="has-hand"><dt>5,9 M</dt><dd>vues sur TikTok</dd><span class="hand hand-fact" aria-hidden="true">et ça continue…</span></div>
        <div><dt>450 K</dt><dd>vues sur Instagram</dd></div>
        <div><dt>1,1 M</dt><dd>vues sur Facebook</dd></div>
      </dl>
      <a class="btn more-btn" href="#a-propos">En savoir plus sur moi</a>
    </div>
  </section>

  <section class="section home-only" id="portfolio">
    <div class="wrap">
      <h2 class="title-pp"><a class="title-link" href="#realisations"><span class="bw"><svg class="brush-x" viewBox="0 0 220 100" preserveAspectRatio="none" aria-hidden="true"><g filter="url(#rough-h)" fill="none" stroke-linecap="round" style="stroke: var(--stone)"><path d="M14 30 C 70 22, 150 18, 206 14" stroke-width="30"/><path d="M8 62 C 80 54, 160 48, 212 42" stroke-width="36" opacity=".92"/><path d="M20 88 C 80 82, 140 78, 196 74" stroke-width="22" opacity=".85"/></g></svg><span class="bw-t">Mes</span></span> réalisations</a></h2>
      <div class="teasers">
        <a class="teaser" href="#infra-nfc">
          <span class="teaser-img teaser-plain"><span class="teaser-word">INFRA NFC</span></span>
          <span class="label">Alternance en communication</span>
          <span class="teaser-name">INFRA NFC</span>
          <span class="teaser-meta">Vidéos, formats courts et supports print</span>
        </a>
        <a class="teaser" href="#escorneil">
          <span class="teaser-img teaser-plain"><span class="teaser-word">Restaurant<br>l'Escorneil</span></span>
          <span class="label">Alternance en communication</span>
          <span class="teaser-name">Restaurant l'Escorneil</span>
          <span class="teaser-meta">Photos et résultats : 1,1 M de vues sur Facebook</span>
        </a>
        <a class="teaser" href="#perso">
          <span class="teaser-img teaser-plain"><span class="teaser-word">Réalisations<br>personnelles</span></span>
          <span class="label">Création de contenu</span>
          <span class="teaser-name">Réalisations personnelles</span>
          <span class="teaser-meta">Vidéos courtes pour les réseaux sociaux</span>
        </a>
        <a class="teaser" href="#ecole">
          <span class="teaser-img teaser-plain"><span class="teaser-word">Projets<br>scolaires</span></span>
          <span class="label">BUT Techniques de commercialisation</span>
          <span class="teaser-name">Projets scolaires</span>
          <span class="teaser-meta">Supports de vente, fiches produit et affiches</span>
        </a>
      </div>
      <div class="center"><a class="btn" href="#realisations">Voir toutes mes réalisations</a></div>
    </div>
  </section>

  <section class="page-real" id="realisations" hidden>
    <div class="wrap">
      <a class="back" href="#accueil">← Retour à l'accueil</a>
      <h1 class="page-title">Mes réalisations</h1>
      <nav class="jump" aria-label="Catégories">
        <a href="#infra-nfc">INFRA NFC</a>
        <a href="#escorneil">Restaurant l'Escorneil</a>
        <a href="#perso">Réalisations personnelles</a>
        <a href="#ecole">Projets scolaires</a>
      </nav>

      <div class="cat" id="infra-nfc">
        <div class="cat-head">
          <p class="label">Alternance en communication</p>
          <h3>INFRA NFC</h3>
          <p>Vidéos, formats courts et supports imprimés pour une ESN du Territoire de Belfort qui accompagne plus de 250 TPE et PME.</p>
        </div>
        <div class="sub"><h4>Réalisations</h4><span class="label">3 vidéos · 3 visuels</span></div>
        <div class="mini-head first"><span class="card-name">Vidéos pour les réseaux sociaux</span><span class="label">3 vidéos</span></div>
        <div class="cards">
          <article class="item">
            <button class="card" type="button" data-type="video" data-src="media/motion-services.mp4" data-title="Vidéo de présentation">
              <span class="thumb"><img src="media/poster-motion.jpg" alt="" loading="lazy"><video data-preview="media/motion-services.mp4" muted loop playsinline preload="none"></video><span class="badge"><svg viewBox="0 0 10 10"><path d="M1 0l9 5-9 5z"/></svg>0:58</span></span>
              <span class="card-name">Vidéo de présentation</span>
            </button>
            <div class="details" hidden data-meta="Vidéo · 58 s"><p class="d-text">INFRA NFC propose quatre métiers : l'infogérance, la téléphonie VoIP, la cybersécurité et le développement sur mesure. Pour un dirigeant de TPE ou de PME, ces services sont souvent difficiles à distinguer. Le but de cette vidéo : les présenter clairement, en moins d'une minute.</p><p class="d-text">Je l'ai réalisée en motion design avec Claude, une intelligence artificielle. Chaque service a son propre chapitre, avec une interface animée et un message court. Ce format m'a permis de produire une vidéo professionnelle sans tournage, en apprenant à guider une IA pour obtenir un rendu précis.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Motion design</li><li>IA générative</li><li>Prompting</li><li>Storytelling</li></ul></div>
          </article>
          <article class="item">
            <button class="card" type="button" data-type="video" data-src="media/interview-cyber.mp4" data-title="Interview cybersécurité">
              <span class="thumb"><img src="media/poster-cyber.jpg" alt="" loading="lazy"><video data-preview="media/interview-cyber.mp4" muted loop playsinline preload="none"></video><span class="badge"><svg viewBox="0 0 10 10"><path d="M1 0l9 5-9 5z"/></svg>0:56</span></span>
              <span class="card-name">Interview cybersécurité</span>
            </button>
            <div class="details" hidden data-meta="Reel · 56 s"><p class="d-text">La cybersécurité inquiète les entreprises, mais un discours commercial a du mal à la rendre concrète. L'idée : donner la parole à un technicien d'INFRA NFC, qui répond face caméra aux questions que se posent les dirigeants.</p><p class="d-text">J'ai écrit le script et les questions, tourné la vidéo en interne, puis réalisé le montage. Les questions s'affichent à l'écran pour que la vidéo se comprenne même sans le son, comme c'est souvent le cas sur les réseaux sociaux.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Écriture de script</li><li>Tournage</li><li>Montage vidéo</li><li>Sous-titrage</li></ul></div>
          </article>
          <article class="item">
            <button class="card" type="button" data-type="video" data-src="media/teaser-vehicule.mp4" data-title="Teaser véhicule">
              <span class="thumb"><img src="media/poster-vehicule.jpg" alt="" loading="lazy" style="object-position: 58% 50%"><video data-preview="media/teaser-vehicule.mp4" muted loop playsinline preload="none"></video><span class="badge"><svg viewBox="0 0 10 10"><path d="M1 0l9 5-9 5z"/></svg>0:12</span></span>
              <span class="card-name">Teaser véhicule</span>
            </button>
            <div class="details" hidden data-meta="Teaser · 12 s"><p class="d-text">INFRA NFC a fait floquer un véhicule aux couleurs de l'entreprise, avec ses services et ses coordonnées. J'ai suivi ce projet du début à la fin.</p><p class="d-text">J'ai conçu le visuel du flocage, échangé avec le prestataire et organisé le rendez-vous avec lui. J'ai ensuite tourné et monté ce teaser pour dévoiler le véhicule en vidéo.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Conception graphique</li><li>Relation prestataire</li><li>Organisation</li><li>Tournage</li><li>Montage vidéo</li></ul></div>
          </article>
        </div>

        <div class="mini-head"><span class="card-name">Visuels</span><span class="label">3 supports print</span></div>
        <div class="cards">
          <article class="item">
            <button class="card" type="button" data-type="image" data-src="media/depliant-exterieur.jpg|media/depliant-interieur.jpg" data-title="Dépliant commercial">
              <span class="thumb"><img src="media/depliant-exterieur.jpg" alt="" loading="lazy" style="object-position: 100% 50%"><span class="badge">2 vues</span></span>
              <span class="card-name">Dépliant commercial</span>
            </button>
            <div class="details" hidden data-meta="Print · 100 envois"><p class="d-text">Pour aller chercher de nouveaux clients, INFRA NFC avait besoin d'un support de prospection à envoyer par courrier. J'ai créé ce dépliant de A à Z : il part des problèmes du quotidien des dirigeants, présente les quatre solutions de l'entreprise et se termine par une preuve de confiance, plus de 250 entreprises accompagnées.</p><p class="d-text">J'ai aussi géré tout l'envoi : un tableau Excel pour suivre les 100 plaquettes envoyées, le contrat avec La Poste, puis la mise sous enveloppe et l'expédition.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Conception graphique</li><li>Prospection</li><li>Excel</li><li>Gestion de projet</li><li>Logistique</li></ul></div>
          </article>
          <article class="item">
            <button class="card" type="button" data-type="image" data-src="media/affiche-forteresse.jpg" data-title="Affiche Forteresse">
              <span class="thumb"><img src="media/affiche-forteresse.jpg" alt="" loading="lazy" style="object-position: 50% 30%"></span>
              <span class="card-name">Affiche Forteresse</span>
            </button>
            <div class="details" hidden data-meta="Print · Lancement"><p class="d-text">Forteresse est une plateforme en ligne qui permet à une entreprise de tester son niveau de cybersécurité en quelques minutes. Je l'ai créée en binôme avec mon tuteur.</p><p class="d-text">J'ai ensuite assuré la promotion de son lancement. Cette affiche pose une question directe aux dirigeants et les amène sur la plateforme grâce à deux QR codes : l'un pour faire le test, l'autre pour découvrir la présentation de Forteresse.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Gestion de projet</li><li>Lancement de produit</li><li>Marketing digital</li><li>Travail en binôme</li></ul></div>
          </article>
          <article class="item">
            <button class="card" type="button" data-type="image" data-src="media/banniere-reseaux.jpg" data-title="Encart réseaux sociaux">
              <span class="thumb"><img src="media/banniere-reseaux.jpg" alt="" loading="lazy" style="object-position: 0% 50%"></span>
              <span class="card-name">Encart réseaux sociaux</span>
            </button>
            <div class="details" hidden data-meta="Print · Encart"><p class="d-text">Lors des envois de la plaquette commerciale, j'ai glissé cet encart à l'intérieur pour mettre en avant les réseaux sociaux d'INFRA NFC.</p><p class="d-text">Avec ses deux QR codes, LinkedIn et Facebook, il permet au prospect de suivre l'entreprise en un geste. L'objectif : prolonger le premier contact créé par le courrier et faire grandir la communauté en ligne.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Stratégie social media</li><li>Conception graphique</li><li>Acquisition d'abonnés</li></ul></div>
          </article>
        </div>
      </div>

      <div class="cat" id="escorneil">
        <div class="cat-head">
          <p class="label">Alternance en communication</p>
          <h3>Restaurant l'Escorneil</h3>
          <p>« La tradition revisitée » : photos, vidéos courtes et animation des réseaux sociaux d'un restaurant et de sa cheffe pâtissière.</p>
        </div>

        <div class="sub"><h4>Réalisations</h4><span class="label">10 photos · 3 vidéos</span></div>
        <div class="gallery">
          <div class="gallery-grid">
            <button class="card" type="button" data-type="image" data-src="media/esc-coupe-1.jpg|media/esc-dome.jpg|media/esc-assiette.jpg|media/esc-coupe-2.jpg|media/esc-saint-valentin.jpg|media/esc-vin-rouge.jpg|media/esc-vin-blanc.jpg|media/esc-deco-automne.jpg|media/esc-portrait-cheffe-1.jpg|media/esc-portrait-cheffe-2.jpg" data-start="0" data-title="Shooting photo" aria-label="Agrandir la photo 1"><span class="thumb"><img src="media/esc-coupe-1.jpg" alt="" loading="lazy"></span></button>
            <button class="card" type="button" data-type="image" data-src="media/esc-coupe-1.jpg|media/esc-dome.jpg|media/esc-assiette.jpg|media/esc-coupe-2.jpg|media/esc-saint-valentin.jpg|media/esc-vin-rouge.jpg|media/esc-vin-blanc.jpg|media/esc-deco-automne.jpg|media/esc-portrait-cheffe-1.jpg|media/esc-portrait-cheffe-2.jpg" data-start="1" data-title="Shooting photo" aria-label="Agrandir la photo 2"><span class="thumb"><img src="media/esc-dome.jpg" alt="" loading="lazy"></span></button>
            <button class="card" type="button" data-type="image" data-src="media/esc-coupe-1.jpg|media/esc-dome.jpg|media/esc-assiette.jpg|media/esc-coupe-2.jpg|media/esc-saint-valentin.jpg|media/esc-vin-rouge.jpg|media/esc-vin-blanc.jpg|media/esc-deco-automne.jpg|media/esc-portrait-cheffe-1.jpg|media/esc-portrait-cheffe-2.jpg" data-start="2" data-title="Shooting photo" aria-label="Agrandir la photo 3"><span class="thumb"><img src="media/esc-assiette.jpg" alt="" loading="lazy"></span></button>
            <button class="card" type="button" data-type="image" data-src="media/esc-coupe-1.jpg|media/esc-dome.jpg|media/esc-assiette.jpg|media/esc-coupe-2.jpg|media/esc-saint-valentin.jpg|media/esc-vin-rouge.jpg|media/esc-vin-blanc.jpg|media/esc-deco-automne.jpg|media/esc-portrait-cheffe-1.jpg|media/esc-portrait-cheffe-2.jpg" data-start="3" data-title="Shooting photo" aria-label="Agrandir la photo 4"><span class="thumb"><img src="media/esc-coupe-2.jpg" alt="" loading="lazy"></span></button>
            <button class="card" type="button" data-type="image" data-src="media/esc-coupe-1.jpg|media/esc-dome.jpg|media/esc-assiette.jpg|media/esc-coupe-2.jpg|media/esc-saint-valentin.jpg|media/esc-vin-rouge.jpg|media/esc-vin-blanc.jpg|media/esc-deco-automne.jpg|media/esc-portrait-cheffe-1.jpg|media/esc-portrait-cheffe-2.jpg" data-start="4" data-title="Shooting photo" aria-label="Agrandir la photo 5"><span class="thumb"><img src="media/esc-saint-valentin.jpg" alt="" loading="lazy"></span></button>
            <button class="card" type="button" data-type="image" data-src="media/esc-coupe-1.jpg|media/esc-dome.jpg|media/esc-assiette.jpg|media/esc-coupe-2.jpg|media/esc-saint-valentin.jpg|media/esc-vin-rouge.jpg|media/esc-vin-blanc.jpg|media/esc-deco-automne.jpg|media/esc-portrait-cheffe-1.jpg|media/esc-portrait-cheffe-2.jpg" data-start="5" data-title="Shooting photo" aria-label="Agrandir la photo 6"><span class="thumb"><img src="media/esc-vin-rouge.jpg" alt="" loading="lazy"></span></button>
            <button class="card" type="button" data-type="image" data-src="media/esc-coupe-1.jpg|media/esc-dome.jpg|media/esc-assiette.jpg|media/esc-coupe-2.jpg|media/esc-saint-valentin.jpg|media/esc-vin-rouge.jpg|media/esc-vin-blanc.jpg|media/esc-deco-automne.jpg|media/esc-portrait-cheffe-1.jpg|media/esc-portrait-cheffe-2.jpg" data-start="6" data-title="Shooting photo" aria-label="Agrandir la photo 7"><span class="thumb"><img src="media/esc-vin-blanc.jpg" alt="" loading="lazy"></span></button>
            <button class="card" type="button" data-type="image" data-src="media/esc-coupe-1.jpg|media/esc-dome.jpg|media/esc-assiette.jpg|media/esc-coupe-2.jpg|media/esc-saint-valentin.jpg|media/esc-vin-rouge.jpg|media/esc-vin-blanc.jpg|media/esc-deco-automne.jpg|media/esc-portrait-cheffe-1.jpg|media/esc-portrait-cheffe-2.jpg" data-start="7" data-title="Shooting photo" aria-label="Agrandir la photo 8"><span class="thumb"><img src="media/esc-deco-automne.jpg" alt="" loading="lazy"></span></button>
            <button class="card" type="button" data-type="image" data-src="media/esc-coupe-1.jpg|media/esc-dome.jpg|media/esc-assiette.jpg|media/esc-coupe-2.jpg|media/esc-saint-valentin.jpg|media/esc-vin-rouge.jpg|media/esc-vin-blanc.jpg|media/esc-deco-automne.jpg|media/esc-portrait-cheffe-1.jpg|media/esc-portrait-cheffe-2.jpg" data-start="8" data-title="Shooting photo" aria-label="Agrandir la photo 9"><span class="thumb"><img src="media/esc-portrait-cheffe-1.jpg" alt="" loading="lazy" style="object-position: 50% 20%"></span></button>
            <button class="card" type="button" data-type="image" data-src="media/esc-coupe-1.jpg|media/esc-dome.jpg|media/esc-assiette.jpg|media/esc-coupe-2.jpg|media/esc-saint-valentin.jpg|media/esc-vin-rouge.jpg|media/esc-vin-blanc.jpg|media/esc-deco-automne.jpg|media/esc-portrait-cheffe-1.jpg|media/esc-portrait-cheffe-2.jpg" data-start="9" data-title="Shooting photo" aria-label="Agrandir la photo 10"><span class="thumb"><img src="media/esc-portrait-cheffe-2.jpg" alt="" loading="lazy" style="object-position: 50% 20%"></span></button>
          </div>
          <p class="card-name gallery-name">Shooting photo</p>
          <div class="details" hidden data-meta="Photo · 10 visuels"><p class="d-text">Pour faire vivre ses réseaux sociaux, le restaurant l'Escorneil avait besoin de visuels qui donnent envie : les nouveaux desserts de la carte, la sélection de vins, le coffret gourmand de la Saint-Valentin, la décoration de saison de la salle, ainsi que des portraits de la cheffe pâtissière.</p><p class="d-text">J'ai réalisé ces shootings photo, de la mise en scène à la prise de vue, en adaptant chaque décor à l'occasion : Pâques, Saint-Valentin ou automne. Les portraits, réalisés au comptoir du restaurant, mettent un visage sur le savoir-faire de la maison. Ces photos sont utilisées sur les réseaux sociaux du restaurant ainsi que sur son site web.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Photographie culinaire</li><li>Photographie produit</li><li>Portrait</li><li>Mise en scène</li><li>Direction artistique</li><li>Création de contenu</li></ul></div>
        </div>
        <div class="mini-head"><span class="card-name">Vidéos pour les réseaux sociaux</span><span class="label">3 exemples</span></div>
        <div class="cards">
          <article class="item">
            <button class="card" type="button" data-type="video" data-src="media/esc-recette-caramel.mp4" data-title="Recette du caramel">
              <span class="thumb"><img src="media/poster-esc-recette.jpg" alt="" loading="lazy" style="object-position: 50% 50%"><video data-preview="media/esc-recette-caramel.mp4" muted loop playsinline preload="none"></video><span class="badge"><svg viewBox="0 0 10 10"><path d="M1 0l9 5-9 5z"/></svg>0:43</span></span>
              <span class="card-name">Recette du caramel</span>
            </button>
            <div class="details" hidden data-meta="Reel · 43 s"><p class="d-text">Exemple de vidéo réalisée pour les réseaux sociaux du restaurant : un format recette qui met en avant le savoir-faire de la cheffe pâtissière. Elle prépare un caramel pas à pas, et la vidéo se termine sur une fiche recette avec les ingrédients, les étapes et le coût de revient.</p><p class="d-text">Ce type de contenu apporte une vraie valeur à l'abonné : il apprend quelque chose, enregistre la vidéo pour la refaire et la partage. Il donne aussi envie de venir goûter les desserts du restaurant. J'ai filmé la préparation et réalisé le montage pour garder un rythme rapide, adapté au format vertical.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Tournage</li><li>Montage vidéo</li><li>Format recette</li><li>Mise en valeur produit</li><li>Contenu à valeur ajoutée</li></ul></div>
          </article>
          <article class="item">
            <button class="card" type="button" data-type="video" data-src="media/esc-backstages.mp4" data-title="Les backstages">
              <span class="thumb"><img src="media/poster-esc-backstages.jpg" alt="" loading="lazy" style="object-position: 50% 50%"><video data-preview="media/esc-backstages.mp4" muted loop playsinline preload="none"></video><span class="badge"><svg viewBox="0 0 10 10"><path d="M1 0l9 5-9 5z"/></svg>0:22</span></span>
              <span class="card-name">Les backstages</span>
            </button>
            <div class="details" hidden data-meta="Reel · 22 s"><p class="d-text">Exemple de vidéo réalisée pour les réseaux sociaux du restaurant : « Les backstages chez l'Escorneil, ça donne quoi ? ». La vidéo enchaîne des moments drôles de l'équipe, en cuisine, en salle et à l'extérieur.</p><p class="d-text">Montrer l'envers du décor rend le restaurant plus humain : on découvre une équipe soudée et pleine d'humour, ce qui crée de la proximité avec les clients. Ces formats humoristiques font partie des vidéos les plus vues du compte TikTok du restaurant.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Storytelling</li><li>Humour</li><li>Tournage</li><li>Montage vidéo</li><li>Marque employeur</li></ul></div>
          </article>
          <article class="item">
            <button class="card" type="button" data-type="video" data-src="media/esc-boss.mp4" data-title="Mon boss m'ajoute sur les réseaux">
              <span class="thumb"><img src="media/poster-esc-boss.jpg" alt="" loading="lazy" style="object-position: 50% 50%"><video data-preview="media/esc-boss.mp4" muted loop playsinline preload="none"></video><span class="badge"><svg viewBox="0 0 10 10"><path d="M1 0l9 5-9 5z"/></svg>0:14</span></span>
              <span class="card-name">Mon boss m'ajoute sur les réseaux</span>
            </button>
            <div class="details" hidden data-meta="Reel · 14 s"><p class="d-text">Exemple de vidéo réalisée pour les réseaux sociaux du restaurant, inspirée d'une tendance : « Mon boss m'ajoute sur les réseaux !! ». Un serveur découvre que son patron l'a ajouté, avec une chute qui se termine sur « le meilleur patron ».</p><p class="d-text">Reprendre une tendance du moment permet de profiter de sa visibilité auprès d'un large public, tout en montrant la bonne ambiance au sein de l'équipe. Le format court, environ quinze secondes, pousse à regarder la vidéo jusqu'au bout et à la revoir.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Veille des tendances</li><li>Humour</li><li>Tournage</li><li>Montage vidéo</li><li>Création de contenu</li></ul></div>
          </article>
        </div>

        <div class="sub"><h4>Résultats</h4><span class="label">Statistiques des comptes</span></div>
        <div class="ticker inline" aria-label="Chiffres clés">
          <div class="ticker-track">
            <ul><li><span><b>1,1 M</b>vues Facebook<em>↑ 103 %</em></span></li><li><span><b>917 728</b>vues Instagram en février</span></li><li><span><b>882,2 K</b>vues sur une vidéo TikTok</span></li><li><span><b>+517</b>abonnés Facebook<em>↑ 257 %</em></span></li><li><span><b>22,1 K</b>interactions Facebook<em>↑ 249 %</em></span></li><li><span><b>585 296</b>comptes touchés sur Instagram</span></li><li><span><b>139,1 K</b>j'aime sur TikTok</span></li></ul>
            <ul aria-hidden="true"><li><span><b>1,1 M</b>vues Facebook<em>↑ 103 %</em></span></li><li><span><b>917 728</b>vues Instagram en février</span></li><li><span><b>882,2 K</b>vues sur une vidéo TikTok</span></li><li><span><b>+517</b>abonnés Facebook<em>↑ 257 %</em></span></li><li><span><b>22,1 K</b>interactions Facebook<em>↑ 249 %</em></span></li><li><span><b>585 296</b>comptes touchés sur Instagram</span></li><li><span><b>139,1 K</b>j'aime sur TikTok</span></li></ul>
          </div>
        </div>
      </div>

      <div class="cat" id="perso">
        <div class="cat-head">
          <p class="label">Création de contenu</p>
          <h3>Réalisations personnelles</h3>
          <p>Des vidéos courtes réalisées de mon côté pour mettre en valeur des produits et explorer de nouveaux formats.</p>
        </div>

        <div class="sub"><h4>Réalisations</h4><span class="label">2 vidéos</span></div>
        <div class="mini-head first"><span class="card-name">Vidéos pour les réseaux sociaux</span><span class="label">2 vidéos</span></div>
        <div class="cards">
          <article class="item">
            <button class="card" type="button" data-type="video" data-src="media/perso-limoncello.mp4" data-title="Cocktail au limoncello">
              <span class="thumb"><img src="media/poster-perso-limoncello.jpg" alt="" loading="lazy" style="object-position: 50% 50%"><video data-preview="media/perso-limoncello.mp4" muted loop playsinline preload="none"></video><span class="badge"><svg viewBox="0 0 10 10"><path d="M1 0l9 5-9 5z"/></svg>0:15</span></span>
              <span class="card-name">Cocktail au limoncello</span>
            </button>
            <div class="details" hidden data-meta="Reel · 15 s"><p class="d-text">Le but de cette vidéo : promouvoir un limoncello en donnant aux abonnés une idée concrète pour s'en servir. Plutôt qu'une simple présentation du produit, je propose une recette de cocktail, étape par étape : les glaçons, le limoncello, le prosecco et la rondelle de citron, jusqu'au verre prêt à déguster.</p><p class="d-text">Montrer comment utiliser le produit le rend plus désirable : l'abonné s'imagine déjà le préparer chez lui, enregistre la recette et la partage. La vidéo se termine par une invitation à venir acheter le limoncello à la brasserie. J'ai réalisé la mise en scène, le tournage et le montage, avec des textes à l'écran pour guider chaque étape.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Promotion produit</li><li>Format recette</li><li>Mise en scène</li><li>Tournage</li><li>Montage vidéo</li></ul></div>
          </article>
          <article class="item">
            <button class="card" type="button" data-type="video" data-src="media/perso-escargots.mp4" data-title="4 apéros aux escargots">
              <span class="thumb"><img src="media/poster-perso-escargots.jpg" alt="" loading="lazy" style="object-position: 50% 50%"><video data-preview="media/perso-escargots.mp4" muted loop playsinline preload="none"></video><span class="badge"><svg viewBox="0 0 10 10"><path d="M1 0l9 5-9 5z"/></svg>0:15</span></span>
              <span class="card-name">4 apéros aux escargots</span>
            </button>
            <div class="details" hidden data-meta="Reel · 15 s"><p class="d-text">Une vidéo au format « top 4 » pour faire découvrir des produits apéritifs à base d'escargots vendus en épicerie fine : moricettes, tartinade, kouglofs et crouskis aux escargots.</p><p class="d-text">La liste numérotée est simple à suivre et donne envie de regarder jusqu'au bout pour découvrir chaque produit. Tournée directement en boutique, la vidéo montre les produits dans leur rayon, ce qui aide le spectateur à les retrouver sur place.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Format liste</li><li>Tournage en boutique</li><li>Montage vidéo</li><li>Mise en valeur produit</li><li>Création de contenu</li></ul></div>
          </article>
        </div>
      </div>

      <div class="cat" id="ecole">
        <div class="cat-head">
          <p class="label">BUT Techniques de commercialisation</p>
          <h3>Projets scolaires</h3>
          <p>Des projets réalisés à l'IUT de Belfort pendant mon BUT : supports de vente, fiches produit et affiches, souvent menés en équipe.</p>
        </div>

        <div class="sub"><h4>Réalisations</h4><span class="label">6 projets</span></div>
        <div class="mini-head first"><span class="card-name">SAE · Les Toiles du Large</span><span class="label">4 visuels</span></div>
        <div class="cards four">
          <article class="item">
            <button class="card" type="button" data-type="image" data-src="media/ecole-sae-1.jpg" data-title="Dossier de négociation">
              <span class="thumb"><img src="media/ecole-sae-1.jpg" alt="" loading="lazy" style="object-position: 50% 30%"></span>
              <span class="card-name">Dossier de négociation</span>
            </button>
            <div class="details" hidden data-meta="SAE 2.02 · Avril 2025"><p class="d-text">Pour la SAE 2.02 de négociation, du 7 au 10 avril 2025, nous avons travaillé à quatre sur Les Toiles du Large, une marque qui fabrique à la main des sacs et des accessoires à partir de voiles de bateaux recyclées.</p><p class="d-text">Cette couverture ouvre notre dossier : la voile et le sac plongent tout de suite dans l'univers marin de la marque, avec le nom de l'équipe et de l'IUT en signature.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Négociation commerciale</li><li>Travail en équipe</li><li>Mise en page</li><li>Univers de marque</li></ul></div>
          </article>
          <article class="item">
            <button class="card" type="button" data-type="image" data-src="media/ecole-maud-1.jpg" data-title="Visuel Maud Mini">
              <span class="thumb"><img src="media/ecole-maud-1.jpg" alt="" loading="lazy" style="object-position: 50% 40%"></span>
              <span class="card-name">Visuel Maud Mini</span>
            </button>
            <div class="details" hidden data-meta="SAE 2.02 · Visuel produit"><p class="d-text">Un visuel pour mettre en avant le sac Maud Mini, vendu 68 €. Le produit est placé au centre, entouré de ses points forts, avec le prix bien visible et l'adresse du site de la marque.</p><p class="d-text">L'objectif : donner envie en un coup d'œil, avec un visuel prêt à être utilisé sur les réseaux sociaux comme en point de vente.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Conception graphique</li><li>Mise en valeur produit</li><li>Communication visuelle</li></ul></div>
          </article>
          <article class="item">
            <button class="card" type="button" data-type="image" data-src="media/ecole-etiquette-1.jpg" data-title="Fiche produit Étiquette bagage">
              <span class="thumb"><img src="media/ecole-etiquette-1.jpg" alt="" loading="lazy" style="object-position: 50% 0%"></span>
              <span class="card-name">Fiche produit Étiquette bagage</span>
            </button>
            <div class="details" hidden data-meta="SAE 2.02 · Fiche produit"><p class="d-text">Une fiche produit pour présenter l'étiquette de bagage Les Toiles du Large aux revendeurs : description, coloris, dimensions, prix de vente conseillé de 10 € et délai de livraison.</p><p class="d-text">Elle reprend les arguments de la marque (artisanat, recyclage des voiles, durabilité et production solidaire en ESAT) pour servir d'aide à la vente pendant la négociation.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Fiche produit</li><li>Argumentaire de vente</li><li>Conception graphique</li></ul></div>
          </article>
          <article class="item">
            <button class="card" type="button" data-type="image" data-src="media/ecole-pouf-1.jpg" data-title="Fiche produit Pouf berlingot">
              <span class="thumb"><img src="media/ecole-pouf-1.jpg" alt="" loading="lazy" style="object-position: 50% 0%"></span>
              <span class="card-name">Fiche produit Pouf berlingot</span>
            </button>
            <div class="details" hidden data-meta="SAE 2.02 · Fiche produit"><p class="d-text">Même principe pour le pouf berlingot, vendu 280 € : une fiche claire, dans la charte de la gamme, qui présente ses deux positions, sa housse amovible, son confort et ses dimensions.</p><p class="d-text">Décliner une même maquette sur plusieurs produits permet de construire une gamme cohérente, facile à comprendre pour un acheteur.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Fiche produit</li><li>Argumentaire de vente</li><li>Déclinaison de gamme</li></ul></div>
          </article>
        </div>

        <div class="mini-head"><span class="card-name">Supports de communication</span><span class="label">2 projets</span></div>
        <div class="cards">
          <article class="item">
            <button class="card" type="button" data-type="image" data-src="media/ecole-weber-1.jpg|media/ecole-weber-2.jpg|media/ecole-weber-3.jpg|media/ecole-weber-4.jpg|media/ecole-weber-5.jpg|media/ecole-weber-6.jpg|media/ecole-weber-7.jpg" data-title="Catalogue Weber">
              <span class="thumb"><img src="media/ecole-weber-1.jpg" alt="" loading="lazy" style="object-position: 50% 0%"><span class="badge">7 pages</span></span>
              <span class="card-name">Catalogue Weber</span>
            </button>
            <div class="details" hidden data-meta="Catalogue · 7 pages"><p class="d-text">Un catalogue produit de 7 pages pour la marque Weber : une couverture, une page par barbecue (charbon, gaz et électrique) avec ses caractéristiques techniques, deux pages d'accessoires et une quatrième de couverture.</p><p class="d-text">J'ai travaillé une mise en page claire, fidèle à l'identité de la marque en rouge et noir, pour que chaque produit soit facile à lire et à comparer.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Mise en page</li><li>Conception graphique</li><li>Respect d'une charte</li><li>Présentation produit</li></ul></div>
          </article>
          <article class="item">
            <button class="card" type="button" data-type="image" data-src="media/ecole-alternance-1.jpg" data-title="Affiche Alternance &amp; stages">
              <span class="thumb"><img src="media/ecole-alternance-1.jpg" alt="" loading="lazy" style="object-position: 50% 0%"></span>
              <span class="card-name">Affiche Alternance &amp; stages</span>
            </button>
            <div class="details" hidden data-meta="Affiche · Format A2"><p class="d-text">Une affiche pour présenter aux futurs étudiants les deux façons de suivre le BUT Techniques de commercialisation à l'IUT de Belfort : en alternance ou avec des stages.</p><p class="d-text">Elle résume en un coup d'œil le rythme de chaque formule, avec la durée des stages : 4 semaines en 1re année, 2 mois en 2e année et 4 mois en 3e année.</p><p class="d-skills-title">Compétences</p><ul class="pills"><li>Conception graphique</li><li>Hiérarchie de l'information</li><li>Communication institutionnelle</li></ul></div>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="section home-only" id="competences">
    <div class="wrap">
      <h2 class="title-pp"><span class="bw"><svg class="brush-x" viewBox="0 0 220 100" preserveAspectRatio="none" aria-hidden="true"><g filter="url(#rough-h)" fill="none" stroke-linecap="round" style="stroke: var(--stone)"><path d="M14 30 C 70 22, 150 18, 206 14" stroke-width="30"/><path d="M8 62 C 80 54, 160 48, 212 42" stroke-width="36" opacity=".92"/><path d="M20 88 C 80 82, 140 78, 196 74" stroke-width="22" opacity=".85"/></g></svg><span class="bw-t">Mes</span></span> compétences</h2>
      <ul class="skills">
        <li>Stratégie social media</li><li>Création de contenu</li><li>Motion design</li><li>Montage vidéo</li><li>Direction artistique</li><li>Supports print</li><li>Analyse des statistiques</li><li>Veille concurrentielle</li>
      </ul>
      <p class="label tools-label">Mes outils</p>
      <div class="toolgroups">
        <div class="tg"><p class="tg-name">Création</p><ul class="logos">
          <li><img src="media/logos/canva.png" alt=""><span>Canva</span></li>
          <li><img src="media/logos/capcut.png" alt=""><span>CapCut</span></li>
        </ul></div>
        <div class="tg"><p class="tg-name">Réseaux sociaux</p><ul class="logos">
          <li><img src="media/logos/meta.png" alt=""><span>Meta Business</span></li>
          <li><img src="media/logos/facebook.png" alt=""><span>Facebook</span></li>
          <li><img src="media/logos/instagram.png" alt=""><span>Instagram</span></li>
          <li><img src="media/logos/tiktok.png" alt=""><span>TikTok</span></li>
        </ul></div>
        <div class="tg"><p class="tg-name">Intelligence artificielle</p><ul class="logos">
          <li><img src="media/logos/claude.png" alt=""><span>Claude</span></li>
          <li><img src="media/logos/chatgpt.png" alt=""><span>ChatGPT</span></li>
          <li><img src="media/logos/hermes.png" alt="" style="width: 60px"><span>Hermes Agent</span></li>
        </ul></div>
        <div class="tg"><p class="tg-name">Organisation</p><ul class="logos">
          <li><img src="media/logos/excel.png" alt=""><span>Excel</span></li>
          <li><img src="media/logos/notion.png" alt=""><span>Notion</span></li>
        </ul></div>
      </div>
    </div>
  </section>

  <section class="page-real" id="a-propos" hidden>
    <div class="wrap">
      <a class="back" href="#accueil">← Retour à l'accueil</a>
      <h1 class="page-title">À propos <span>de moi</span></h1>
      <div class="about">
        <div class="portrait-photo"><img src="media/portrait.jpg" alt="Portrait de Lylou Simon"></div>
        <div class="about-text">
          <p class="intro">Lylou Simon, 20 ans, Territoire de Belfort.</p>
          <p>Je suis étudiante en BUT Techniques de commercialisation, parcours Marketing digital, e-business et entrepreneuriat. La création de contenu me passionne depuis toujours : j'ai lancé ma première chaîne YouTube à 8 ans ! Aujourd'hui, je veux mettre toutes mes connaissances en pratique au service des entreprises.</p>
        </div>
      </div>
      <dl class="intro-facts about-facts">
        <div><dt>3</dt><dd>ans d'alternance</dd></div>
        <div><dt>3</dt><dd>entreprises</dd></div>
        <div><dt>5,9 M</dt><dd>vues sur TikTok</dd></div>
        <div><dt>450 K</dt><dd>vues sur Instagram</dd></div>
        <div><dt>1,1 M</dt><dd>vues sur Facebook</dd></div>
      </dl>
      <div class="parcours">
        <div class="parcours-head">
          <div class="parcours-brand">
            <h2 class="parcours-title"><svg class="brush" viewBox="0 0 220 150" aria-hidden="true"><defs><filter id="rough" x="-10%" y="-10%" width="120%" height="120%"><feTurbulence type="fractalNoise" baseFrequency="0.035" numOctaves="3" seed="7"/><feDisplacementMap in="SourceGraphic" scale="14"/></filter></defs><g filter="url(#rough)" fill="none" stroke-linecap="round" style="stroke: var(--stone)"><path d="M28 38 C 80 26, 130 18, 178 14" stroke-width="36"/><path d="M18 82 C 80 70, 150 58, 200 50" stroke-width="44" opacity=".92"/><path d="M34 122 C 90 112, 140 104, 170 98" stroke-width="30" opacity=".85"/></g></svg><span class="on-brush">Mon</span> parcours</h2>
            <p class="parcours-sub">Les étapes qui m'ont construite</p>
          </div>
          <p class="parcours-quote">Une progression guidée par la créativité et l'envie de communiquer.</p>
        </div>
      <ol class="timeline-h">
        <li class="axis" aria-hidden="true"><svg viewBox="0 0 1000 12" preserveAspectRatio="none"><path d="M0 7 C 90 3, 170 10, 260 6 S 430 2, 520 7 S 700 11, 790 6 S 930 3, 1000 6" fill="none" stroke-width="2" stroke-linecap="round" style="stroke: var(--ink)" vector-effect="non-scaling-stroke"/></svg></li>
        <li class="step down" style="grid-column: 1 / span 2"><p class="step-when">Primaire &amp; collège</p><p class="step-title">Premier intérêt</p><p class="step-text">Ma personnalité et ma créativité m'ont guidée vers de nombreuses activités artistiques, que j'ai eu à cœur d'expérimenter.</p></li>
        <li class="step up" style="grid-column: 2 / span 2"><p class="step-when">Lycée</p><p class="step-title">Bac STMG</p><p class="step-text">J'ai choisi la filière STMG, qui a été pour moi une véritable révélation.</p></li>
        <li class="step down" style="grid-column: 3 / span 2"><p class="step-when">En parallèle</p><p class="step-title">Serveuse en restauration</p><p class="step-text">À côté du lycée, j'ai travaillé comme serveuse. Une expérience formatrice au contact des clients, même si je savais que ce n'était pas le métier de mes rêves.</p></li>
        <li class="step up" style="grid-column: 4 / span 2"><p class="step-when">BUT · 1re année</p><p class="step-title">Ma vraie vocation</p><p class="step-text">En entrant en BUT Techniques de commercialisation, parcours Marketing digital, e-business et entrepreneuriat, j'ai trouvé ma vraie vocation. Je l'ai mise en pratique en alternance dans une jardinerie, principalement sur l'aspect administratif.</p></li>
        <li class="step down" style="grid-column: 5 / span 2"><p class="step-when">BUT · 2e année</p><p class="step-title">Chargée de communication</p><p class="step-text">Deuxième année en alternance au Restaurant l'Escorneil : photos, vidéos et gestion des réseaux sociaux.</p></li>
        <li class="step up" style="grid-column: 6 / span 2"><p class="step-when">BUT · 3e année</p><p class="step-title">Chargée de communication et commerciale</p><p class="step-text">Je poursuis mon alternance chez INFRA NFC, une entreprise informatique, en alliant communication et prospection commerciale.</p></li>
      </ol>
      </div>
      <div class="valeurs">
        <div class="valeurs-text">
          <h2 class="parcours-title"><svg class="brush" viewBox="0 0 220 150" aria-hidden="true"><g filter="url(#rough)" fill="none" stroke-linecap="round" style="stroke: var(--stone)"><path d="M24 40 C 80 30, 130 24, 176 20" stroke-width="34"/><path d="M16 84 C 80 74, 150 64, 198 58" stroke-width="42" opacity=".92"/><path d="M30 124 C 90 116, 140 108, 168 102" stroke-width="28" opacity=".85"/></g></svg><span class="on-brush">Mes</span> valeurs</h2>
          <p class="valeurs-lede">Un contenu réussi attire le regard, mais un contenu qui a du sens marque les esprits. Je cherche à créer des univers qui racontent une histoire, interpellent et laissent une trace, en mêlant créativité, stratégie et personnalité.</p>
          <p class="valeurs-lede">Pour moi, communiquer ne se résume pas à mettre une idée en forme : c'est lui donner une voix, une identité et une émotion.</p>
        </div>
        <ul class="values-list">
            <li><p class="value-name">Authenticité</p><p class="value-text">Un style sincère, qui me ressemble.</p></li>
            <li><p class="value-name">Clarté</p><p class="value-text">Des contenus accessibles, pensés pour être compris par tous.</p></li>
            <li><p class="value-name">Créativité</p><p class="value-text">Des idées originales qui font la différence.</p></li>
            <li><p class="value-name">Fiabilité</p><p class="value-text">Des délais tenus et une qualité constante, à chaque projet.</p></li>
        </ul>
      </div>
    </div>
  </section>

  <section class="contact" id="contact">
    <div class="wrap">
      <h2 class="title-pp title-contact">Travaillons <span class="bw"><svg class="brush-x" viewBox="0 0 220 100" preserveAspectRatio="none" aria-hidden="true"><g filter="url(#rough-h)" fill="none" stroke-linecap="round" style="stroke: var(--stone)"><path d="M14 30 C 70 22, 150 18, 206 14" stroke-width="30"/><path d="M8 62 C 80 54, 160 48, 212 42" stroke-width="36" opacity=".92"/><path d="M20 88 C 80 82, 140 78, 196 74" stroke-width="22" opacity=".85"/></g></svg><span class="bw-t">ensemble</span></span></h2>
      <a class="btn" href="#contact" data-contact>Contactez-moi</a>
      <div class="contact-links">
        <span class="mail"><a href="mailto:simonlylou9@gmail.com?subject=Contact%20depuis%20votre%20portfolio" id="mail-addr">simonlylou9@gmail.com</a><button class="copy" type="button" id="copy-mail">Copier</button></span>
        <span class="mail"><a href="https://www.linkedin.com/in/lylou-simon-91a983302" target="_blank" rel="noopener">LinkedIn ↗</a></span>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="wrap">
    <span>© 2026 Lylou Simon</span>
    <span class="foot-links"><button class="legal-link" id="legal-open" type="button">Mentions légales</button><a href="#" id="to-top">Retourner en haut ↑</a></span>
  </div>
</footer>

<div class="cc-wrap" id="ccard" hidden role="dialog" aria-modal="true" aria-labelledby="cc-name">
  <div class="cc">
    <button class="cc-close" id="cc-close" type="button">OK</button>
    <img class="cc-photo" src="media/portrait.jpg" alt="Portrait de Lylou Simon">
    <h3 class="cc-name" id="cc-name">Lylou Simon</h3>
    <p class="cc-sub">Votre future community manager</p>
    <div class="cc-actions">
      <a href="tel:+33767292873" data-try="0767292873" data-what="le numéro"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>appeler</a>
      <a href="sms:+33767292873" data-try="0767292873" data-what="le numéro"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v11H9l-5 4z"/></svg>message</a>
      <a href="mailto:simonlylou9@gmail.com?subject=Contact%20depuis%20votre%20portfolio" data-try="simonlylou9@gmail.com" data-what="l'adresse e-mail"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18v12H3z"/><path d="M3 7l9 6 9-6"/></svg>e-mail</a>
      <a href="https://www.linkedin.com/in/lylou-simon-91a983302" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg>LinkedIn</a>
    </div>
    <dl class="cc-list">
      <div><dt>mobile</dt><dd><a class="cc-v" href="tel:+33767292873" data-try="0767292873" data-what="le numéro">07 67 29 28 73</a><button class="cc-copy" type="button" data-copy="0767292873">Copier</button></dd></div>
      <div><dt>e-mail</dt><dd><a class="cc-v" href="mailto:simonlylou9@gmail.com?subject=Contact%20depuis%20votre%20portfolio" data-try="simonlylou9@gmail.com" data-what="l'adresse e-mail">simonlylou9@gmail.com</a><button class="cc-copy" type="button" data-copy="simonlylou9@gmail.com">Copier</button></dd></div>
      <div><dt>adresse</dt><dd><span class="cc-v">Belfort, France</span></dd></div>
      <div><dt>LinkedIn</dt><dd><a class="cc-v" href="https://www.linkedin.com/in/lylou-simon-91a983302" target="_blank" rel="noopener">lylou-simon</a></dd></div>
    </dl>
    <a class="btn cc-save" href="lylou-simon.vcf" download="Lylou Simon.vcf">Ajouter à mes contacts</a>
    <div class="cc-toast" id="cc-toast" hidden role="status"><span id="cc-toast-text"></span><button class="cc-copy" type="button" id="cc-toast-copy">Copier</button></div>
  </div>
</div>

<div class="cc-wrap" id="legal" hidden role="dialog" aria-modal="true" aria-labelledby="legal-title">
  <div class="cc legal">
    <button class="cc-close" id="legal-close" type="button">OK</button>
    <h3 class="cc-name" id="legal-title">Mentions légales</h3>
    <dl class="cc-list">
      <div><dt>Éditrice du site</dt><dd><span class="cc-v">Lylou Simon, Belfort (France)<br>simonlylou9@gmail.com</span></dd></div>
      <div><dt>Hébergement</dt><dd><span class="cc-v">OVH SAS, 2 rue Kellermann, 59100 Roubaix, France</span></dd></div>
      <div><dt>Contenus</dt><dd><span class="cc-v">Les réalisations présentées ont été produites dans le cadre de mes alternances et de ma formation. Les marques et logos cités appartiennent à leurs propriétaires respectifs.</span></dd></div>
      <div><dt>Données personnelles</dt><dd><span class="cc-v">Ce site ne collecte aucune donnée personnelle et ne dépose pas de cookies. Les polices de caractères sont chargées depuis Google Fonts.</span></dd></div>
    </dl>
  </div>
</div>

<div class="viewer" id="viewer" hidden role="dialog" aria-modal="true" aria-labelledby="v-title">
  <button class="close" type="button" id="v-close">Fermer ✕</button>
  <div class="viewer-body">
    <div class="viewer-left">
      <div class="viewer-media" id="v-media"></div>
      <div class="viewer-nav" id="v-nav">
        <button type="button" id="v-prev" aria-label="Vue précédente">←</button>
        <span id="v-count"></span>
        <button type="button" id="v-next" aria-label="Vue suivante">→</button>
      </div>
    </div>
    <div class="viewer-info"><p class="label" id="v-cat"></p><h4 id="v-title"></h4><div id="v-text"></div></div>
  </div>
</div>

<script>
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  // Deux pages : accueil et « Mes réalisations »
  var realPage = document.getElementById('realisations');
  var homeParts = document.querySelectorAll('.home-only');
  var aboutPage = document.getElementById('a-propos');
  var realIds = ['realisations', 'infra-nfc', 'escorneil', 'perso', 'ecole'];
  var currentView = null;
  function route() {
    var h = decodeURIComponent(location.hash.replace('#', ''));
    var view = realIds.indexOf(h) !== -1 ? 'real' : (h === 'a-propos' ? 'about' : 'home');
    var changed = view !== currentView;
    currentView = view;
    if (changed && window.__resetReveal) window.__resetReveal();
    realPage.hidden = view !== 'real';
    aboutPage.hidden = view !== 'about';
    homeParts.forEach(function (el) { el.hidden = view !== 'home'; });
    document.querySelectorAll('video').forEach(function (v) { v.pause(); });
    document.querySelectorAll('.nav a[data-view]').forEach(function (a) {
      var cur = a.dataset.view === view && (view !== 'home' || !h || h === 'accueil');
      if (cur) a.setAttribute('aria-current', 'page'); else a.removeAttribute('aria-current');
    });
    var target = h && document.getElementById(h);
    var pageTop = !h || h === 'accueil' || h === 'realisations' || h === 'a-propos';
    if (target && !pageTop) {
      target.scrollIntoView({ behavior: 'instant' });
    } else if (changed || pageTop) {
      window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
    }
  }
  window.addEventListener('hashchange', route);
  route();

  // Menu sur téléphone
  (function () {
    var top = document.querySelector('.top'), t = document.getElementById('menu-toggle');
    function set(open) { top.classList.toggle('open', open); t.setAttribute('aria-expanded', open ? 'true' : 'false'); }
    t.addEventListener('click', function () { set(!top.classList.contains('open')); });
    document.querySelectorAll('#nav-links a').forEach(function (a) { a.addEventListener('click', function () { set(false); }); });
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') set(false); });
  })();

  // Photo de la présentation : grandit quand elle approche du centre de l'écran, rétrécit en s'éloignant
  (function () {
    var img = document.querySelector('.intro-photo');
    if (!img) return;
    if (reduce) { img.style.scale = '.75'; return; }
    var ticking = false;
    function update() {
      ticking = false;
      if (img.offsetParent === null) return;
      var r = img.getBoundingClientRect(), vh = window.innerHeight;
      var center = r.top + r.height / 2;
      var p = 1 - Math.min(1, Math.abs(center - vh / 2) / (vh * 0.55));
      p = p * p * (3 - 2 * p);
      img.style.scale = (0.5 + 0.5 * p).toFixed(3);
    }
    function onScroll() { if (!ticking) { ticking = true; requestAnimationFrame(update); } }
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    window.addEventListener('hashchange', onScroll);
    update();
  })();

  // Fiche contact
  (function () {
    var wrap = document.getElementById('ccard'), opener = null;
    function open(e) {
      e.preventDefault(); opener = e.currentTarget;
      wrap.hidden = false; document.body.style.overflow = 'hidden';
      document.getElementById('cc-close').focus();
    }
    function close() { wrap.hidden = true; document.body.style.overflow = ''; if (opener) opener.focus(); }
    document.querySelectorAll('[data-contact]').forEach(function (a) { a.addEventListener('click', open); });
    document.getElementById('cc-close').addEventListener('click', close);
    wrap.addEventListener('click', function (e) { if (e.target === wrap) close(); });
    document.addEventListener('keydown', function (e) { if (!wrap.hidden && e.key === 'Escape') close(); });
    wrap.querySelectorAll('.cc-copy').forEach(function (b) {
      b.addEventListener('click', function () {
        var v = b.dataset.copy;
        function done() { b.textContent = 'Copié ✓'; setTimeout(function () { b.textContent = 'Copier'; }, 1800); }
        function fallback() {
          var r = document.createRange(); r.selectNodeContents(b.previousElementSibling);
          var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(r); b.textContent = 'Sélectionné';
        }
        try { navigator.clipboard.writeText(v).then(done, fallback); } catch (err) { fallback(); }
      });
    });
  })();

  // Actions de la fiche : si l'appareil n'ouvre pas l'application, on propose de copier
  (function () {
    var toast = document.getElementById('cc-toast'), txt = document.getElementById('cc-toast-text'), btn = document.getElementById('cc-toast-copy');
    var value = '', timer = null;
    document.querySelectorAll('#ccard [data-try]').forEach(function (a) {
      a.addEventListener('click', function () {
        var left = false;
        function onLeave() { left = true; }
        window.addEventListener('blur', onLeave, { once: true });
        document.addEventListener('visibilitychange', onLeave, { once: true });
        clearTimeout(timer);
        timer = setTimeout(function () {
          window.removeEventListener('blur', onLeave);
          if (left) return;
          value = a.dataset.try;
          txt.textContent = "L'application ne s'est pas ouverte ? Copiez " + a.dataset.what + '.';
          btn.textContent = 'Copier'; toast.hidden = false;
        }, 1400);
      });
    });
    btn.addEventListener('click', function () {
      function done() { btn.textContent = 'Copié ✓'; }
      try { navigator.clipboard.writeText(value).then(done, function () { txt.textContent = value; }); } catch (e) { txt.textContent = value; }
    });
    document.getElementById('cc-close').addEventListener('click', function () { toast.hidden = true; });
  })();

  // Apparitions au défilement : rien n'apparaît tant qu'on ne fait pas défiler
  (function () {
    var sel = ['.ticker.home-only', '.intro-photo', '.intro-lead', '.intro-facts > div', '.more-btn', '.title', '.page-title', '.cat-head', '.sub', '.mini-head', '.cards > *', '.teasers > *', '.center',
      '.gallery-grid > *', '.gallery-name', '.ticker.inline', '.jump', '.skills', '.tools-label', '.tg',
      '.about > *', '.parcours-head', '.timeline-h .step', '.valeurs-text', '.values-list li',
      '.contact', '.contact .btn', '.contact-links'];
    var els = Array.prototype.slice.call(document.querySelectorAll(sel.join(',')));
    if (!els.length || !('IntersectionObserver' in window)) return;
    document.documentElement.classList.add('reveal-on');
    els.forEach(function (el) {
      el.classList.add('reveal');
      var i = Array.prototype.indexOf.call(el.parentNode.children, el);
      var grouped = el.parentNode.matches('.cards, .teasers, .gallery-grid, .timeline-h, .values-list, .toolgroups, .about, .intro-facts');
      if (grouped) el.style.setProperty('--d', (Math.min(i, 6) * 150) + 'ms');
    });
    var scrolled = false, ignoreUntil = 0, pending = [];
    function show(el) { el.classList.add('in'); io.unobserve(el); }
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) {
        var el = e.target, k = pending.indexOf(el);
        if (!e.isIntersecting) { if (k !== -1) pending.splice(k, 1); return; }
        // L'en-tête des pages Réalisations et À propos s'affiche tout de suite
        if (scrolled || el.matches('.page-title, .jump')) show(el);
        else if (k === -1) pending.push(el);
      });
    }, { rootMargin: '0px 0px -12% 0px', threshold: 0.15 });
    els.forEach(function (el) { io.observe(el); });
    function userScrolled() {
      if (scrolled || Date.now() < ignoreUntil) return;
      scrolled = true;
      pending.splice(0).forEach(show);
    }
    window.addEventListener('wheel', function (e) { if (e.deltaY > 0) userScrolled(); }, { passive: true });
    window.addEventListener('touchmove', userScrolled, { passive: true });
    window.addEventListener('keydown', function (e) { if (['ArrowDown', 'PageDown', ' ', 'End'].indexOf(e.key) !== -1) userScrolled(); });
    window.addEventListener('scroll', function () { if (window.scrollY > 20) userScrolled(); }, { passive: true });
    // Nouvelle page : on repart de zéro
    window.__resetReveal = function () { scrolled = false; pending.length = 0; ignoreUntil = Date.now() + 400; };
    var cue = document.getElementById('scroll-cue');
    if (cue) cue.addEventListener('click', function () {
      userScrolled();
      window.scrollTo({ top: window.innerHeight * 0.85, behavior: reduce ? 'auto' : 'smooth' });
    });
  })();

  // Copier l'adresse e-mail
  var copyBtn = document.getElementById('copy-mail');
  copyBtn.addEventListener('click', function () {
    var addr = 'simonlylou9@gmail.com';
    function done() { copyBtn.textContent = 'Copié ✓'; setTimeout(function () { copyBtn.textContent = 'Copier'; }, 1800); }
    function fallback() {
      var r = document.createRange(); r.selectNodeContents(document.getElementById('mail-addr'));
      var s = window.getSelection(); s.removeAllRanges(); s.addRange(r);
      copyBtn.textContent = 'Sélectionné';
    }
    try { navigator.clipboard.writeText(addr).then(done, fallback); } catch (e) { fallback(); }
  });
  document.getElementById('to-top').addEventListener('click', function (e) { e.preventDefault(); window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' }); });

  // Aperçu muet au survol des cartes vidéo
  var hover = window.matchMedia('(hover: hover)').matches;
  document.querySelectorAll('.card[data-type="video"]').forEach(function (card) {
    var v = card.querySelector('.thumb video');
    if (!hover || reduce) return;
    card.addEventListener('mouseenter', function () {
      if (!v.src) v.src = v.dataset.preview;
      var p = v.play(); if (p && p.catch) p.catch(function () {});
      card.classList.add('playing');
    });
    card.addEventListener('mouseleave', function () { v.pause(); card.classList.remove('playing'); });
  });

  // Visionneuse
  var viewer = document.getElementById('viewer'), media = document.getElementById('v-media'),
      nav = document.getElementById('v-nav'), count = document.getElementById('v-count'),
      titleEl = document.getElementById('v-title'), textEl = document.getElementById('v-text'), catEl = document.getElementById('v-cat');
  var list = [], idx = 0, opener = null, type = '';
  function render() {
    media.innerHTML = '';
    if (type === 'video') {
      var v = document.createElement('video');
      v.src = list[0]; v.controls = true; v.playsInline = true; v.autoplay = true;
      media.appendChild(v);
      var p = v.play(); if (p && p.catch) p.catch(function () {});
    } else {
      var img = document.createElement('img');
      img.src = list[idx]; img.alt = titleEl.textContent + (list.length > 1 ? ' — vue ' + (idx + 1) : '');
      media.appendChild(img);
    }
    nav.hidden = list.length < 2;
    count.textContent = (idx + 1) + ' / ' + list.length;
  }
  function open(card) {
    opener = card; type = card.dataset.type; list = card.dataset.src.split('|'); idx = parseInt(card.dataset.start || '0', 10);
    titleEl.textContent = card.dataset.title;
    var host = card.closest('.item') || card.closest('.gallery'); var det = host && host.querySelector('.details');
    textEl.innerHTML = det ? det.innerHTML : '';
    var cat = card.closest('.cat'); catEl.textContent = (cat ? cat.querySelector('h3').textContent : '') + (det && det.dataset.meta ? ' · ' + det.dataset.meta : '');
    viewer.scrollTop = 0;
    var pv = card.querySelector('.thumb video'); if (pv) { pv.pause(); card.classList.remove('playing'); }
    render(); viewer.hidden = false; document.body.style.overflow = 'hidden';
    document.getElementById('v-close').focus();
  }
  function close() {
    media.innerHTML = ''; viewer.hidden = true; document.body.style.overflow = '';
    if (opener) opener.focus();
  }
  document.querySelectorAll('.card').forEach(function (c) { c.addEventListener('click', function () { open(c); }); });
  document.getElementById('v-close').addEventListener('click', close);
  document.getElementById('v-prev').addEventListener('click', function () { idx = (idx - 1 + list.length) % list.length; render(); });
  document.getElementById('v-next').addEventListener('click', function () { idx = (idx + 1) % list.length; render(); });
  viewer.addEventListener('click', function (e) { if (e.target === viewer || e.target === media) close(); });
  document.addEventListener('keydown', function (e) {
    if (viewer.hidden) return;
    if (e.key === 'Escape') close();
    if (list.length > 1 && e.key === 'ArrowRight') document.getElementById('v-next').click();
    if (list.length > 1 && e.key === 'ArrowLeft') document.getElementById('v-prev').click();
  });
})();
</script>
<style>
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.legal-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.legal-link:hover { color: var(--ink); }
.legal { text-align: left; padding-top: 52px; }
.legal .cc-name { font-size: 1.4rem; text-align: center; }
.legal .cc-v { font-size: 0.92rem; line-height: 1.5; user-select: text; }
.cc-save { margin-top: 16px; width: 100%; justify-content: center; }
</style>
<script>
(function () {
  var w = document.getElementById('legal');
  document.getElementById('legal-open').addEventListener('click', function () { w.hidden = false; document.body.style.overflow = 'hidden'; });
  function close() { w.hidden = true; document.body.style.overflow = ''; }
  document.getElementById('legal-close').addEventListener('click', close);
  w.addEventListener('click', function (e) { if (e.target === w) close(); });
  document.addEventListener('keydown', function (e) { if (!w.hidden && e.key === 'Escape') close(); });
})();
</script>
</body>
</html>