/* ==========================================================================
   Étude de cas — Pharmalia « Incitation à la commande »
   ========================================================================== */

.section { padding-block: var(--section-y); position: relative; }
.section--lavender { background: var(--lavender); }
.section--ink { background: var(--ink); color: var(--cream); }

/* En-tête de section : grand titre à gauche, étiquette à droite */
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  margin-bottom: 48px;
}
.section-title { font-size: clamp(54px, 7.8vw, 112px); max-width: 900px; }
.section-head .mono { padding-bottom: 14px; flex: none; }
.section-head__meta { width: 320px; flex: none; display: grid; gap: 12px; padding-bottom: 14px; }
.section-head__meta .mono { padding: 0; }
.section-head__meta p { font-size: 16px; line-height: 1.5; opacity: .85; }
.intro { max-width: 760px; margin-bottom: 48px; opacity: .85; }

@media (max-width: 900px) {
  .section-head { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .section-head .mono { padding-bottom: 0; }
  .section-head__meta { width: auto; padding-bottom: 0; }
}

/* Carte standard : bordure encre + ombre pleine */
.card {
  background: var(--white);
  border: var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-s);
  padding: 32px;
}
.card h3 {
  font: 800 28px/1.1 var(--font-display);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 48;
}
.card p, .card li { font-size: 15px; line-height: 1.55; }
.card .mono { font-size: 13px; }

.shot {
  border: var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
}
.shot img { width: 100%; }

/* ===================== HERO ===================== */
.hero { position: relative; overflow: hidden; padding-bottom: 200px; }
.hero__meta-row {
  display: flex; justify-content: space-between; gap: 24px;
  margin-top: 62px;
}
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--violet); }

.hero__title {
  position: relative;
  margin-top: 18px;
  font-size: clamp(64px, 13.9vw, 200px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  margin-left: -0.05em;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__title .line > span { display: inline-block; }
.hero__title .line--1 { color: var(--violet); }
.hero__title .serif { color: var(--ink); font-size: 1.14em; letter-spacing: -0.03em; }

.sticker {
  position: absolute; right: 0; top: 0.12em;
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--yellow); border: var(--line-bold); box-shadow: 0 6px 0 var(--ink);
  display: grid; place-content: center; text-align: center; gap: 2px;
  transform: rotate(-14deg);
  font-size: 16px; letter-spacing: 0;
}
.sticker .mono { font-size: 11px; }
.sticker strong { font: 800 22px/0.9 var(--font-display); letter-spacing: -0.02em; }
.sticker svg { width: 16px; height: 16px; margin: 4px auto 0; }

.hero__intro {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
  margin-top: 56px;
}
.hero__statement { max-width: 560px; font-size: 22px; line-height: 1.45; }
.hero__statement .serif { color: var(--violet); font-size: 1.22em; }
.hero__facts { display: flex; gap: 40px; padding-top: 6px; }
.hero__facts dt { font-size: 11px; opacity: .6; margin-bottom: 8px; }
.hero__facts dd { margin: 0; font: 500 17px/1.3 var(--font-body); }

.hero__visual { position: relative; margin-top: 70px; }
.hero__visual .frame {
  border: var(--line-bold); border-radius: 44px; box-shadow: var(--shadow-l);
  overflow: hidden; aspect-ratio: 1600 / 1256; background: #EEF1F0;
}
.hero__visual .frame video { width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute; right: 40px; top: -50px;
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--yellow); border: var(--line-bold); box-shadow: var(--shadow-s);
  display: grid; place-content: center; justify-items: center; gap: 4px;
}
.badge .mono { font-size: 12px; }
.badge svg { width: 30px; height: 30px; }

/* Bande violette inclinée qui défile */
.band {
  position: absolute; left: -10%; right: -10%; bottom: 40px;
  background: var(--violet); color: var(--cream);
  transform: rotate(-2.2deg);
  padding-block: 18px;
  overflow: hidden;
}
.band__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.band:hover .band__track { animation-play-state: paused; }
.band__group { display: flex; align-items: center; gap: 40px; padding-right: 40px; }
.band__group span {
  font: 800 46px/1.2 var(--font-display); letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap;
}
.band__group svg { width: 30px; height: 30px; flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 1024px) {
  .hero__intro { flex-direction: column; }
  .hero__facts { flex-wrap: wrap; gap: 24px 40px; }
  .sticker { width: 120px; height: 120px; top: -0.3em; }
}
@media (max-width: 640px) {
  .hero { padding-bottom: 110px; }
  .hero__meta-row { flex-direction: column; gap: 8px; margin-top: 40px; }
  .hero__title { font-size: clamp(56px, 18vw, 80px); margin-top: 28px; }
  .sticker { position: relative; display: grid; width: 96px; height: 96px; top: auto; right: auto; margin: 4px 6px -40px auto; border-width: 2.5px; }
  .sticker strong { font-size: 17px; }
  .sticker .mono { font-size: 9px; }
  .sticker svg { width: 12px; height: 12px; }
  .hero__statement { font-size: 19px; }
  .hero__facts { display: grid; grid-template-columns: 1fr 1fr; }
  .hero__visual .frame { border-radius: 24px; }
  .badge { width: 84px; height: 84px; right: 16px; top: -36px; }
  .badge svg { width: 22px; height: 22px; }
  .band { bottom: 28px; padding-block: 10px; }
  .band__group span { font-size: 28px; }
  .band__group svg { width: 20px; height: 20px; }
  .band__group { gap: 24px; padding-right: 24px; }
}

/* ===================== EN BREF ===================== */
.brief__labels { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 64px; }
.brief__labels .mono:last-child { opacity: .6; }
.brief__statement { font-size: clamp(44px, 6.7vw, 96px); max-width: 1180px; margin-bottom: 64px; }
.brief__statement .hl { color: var(--lilac); }
.brief__statement .serif { color: var(--yellow); }
.brief__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.brief-card {
  background: var(--ink-2); border: 1.5px solid var(--cream); border-radius: 36px;
  padding: 36px 32px; display: grid; align-content: start; gap: 14px;
}
.brief-card .mono { font-size: 12px; color: var(--lilac); }
.brief-card p { font-size: 17px; line-height: 1.5; opacity: .85; }
.brief-card .brief-card__num {
  font: 800 104px/1 var(--font-display); letter-spacing: -0.04em; color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1024px) { .brief__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .brief__grid { grid-template-columns: 1fr; }
  .brief__labels { flex-direction: column; gap: 8px; margin-bottom: 40px; }
  .brief-card__num { font-size: 80px; }
}

/* ===================== CONTEXTE ===================== */
.context__head { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.context__head .mono { margin-bottom: 20px; }
.context__head .popart { width: 360px; flex: none; margin-right: 60px; }
.context__body { display: grid; grid-template-columns: 560px 1fr; gap: 80px; margin-top: 24px; }
.context__lead { font: 500 28px/1.35 var(--font-body); }
.context__text { display: grid; gap: 20px; align-content: start; }
.context__text p { opacity: .85; }
.constraint {
  background: var(--yellow); border: var(--line-bold); border-radius: 28px; box-shadow: 0 6px 0 var(--ink);
  padding: 24px 28px; display: grid; gap: 10px;
}
.constraint .mono { font-size: 12px; display: flex; align-items: center; gap: 10px; }
.constraint .mono svg { width: 12px; height: 12px; }
.constraint p { font-weight: 700; opacity: 1; line-height: 1.45; }
@media (max-width: 1024px) {
  .context__body { grid-template-columns: 1fr; gap: 32px; }
  .context__head .popart { width: 260px; margin-right: 0; }
}
@media (max-width: 640px) {
  .context__head { flex-direction: column-reverse; align-items: flex-start; }
  .context__head .popart { width: 200px; align-self: flex-end; margin-bottom: -20px; }
  .context__lead { font-size: 22px; }
}

/* ===================== PROBLÈME ===================== */
.problems { border-top: var(--line); }
.problem {
  display: grid; grid-template-columns: 70px 1fr 340px; align-items: center; gap: 24px;
  padding: 30px 28px;
  border-bottom: var(--line);
  border-radius: 0;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-radius .3s var(--ease);
}
.problem .mono { font-size: 14px; }
.problem h3 { font: 800 54px/1 var(--font-display); letter-spacing: -0.025em; }
.problem p { font-size: 16px; line-height: 1.5; opacity: .85; }
.problem:hover, .problem--key {
  background: var(--violet); color: var(--cream); border-radius: 28px;
}
.problem:hover .mono, .problem--key .mono { color: var(--yellow); }
.problem--key { border: var(--line); }
@media (max-width: 1024px) {
  .problem { grid-template-columns: 50px 1fr; }
  .problem p { grid-column: 2; }
  .problem h3 { font-size: 40px; }
}
@media (max-width: 640px) {
  .problem { grid-template-columns: 1fr; gap: 10px; padding: 24px 20px; }
  .problem p { grid-column: auto; }
  .problem h3 { font-size: 32px; }
}

/* ===================== PROCESS ===================== */
.phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.phase {
  background: var(--cream); border: var(--line); border-radius: 28px;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 16px;
}
.phase h3 { font: 800 28px/1 var(--font-display); letter-spacing: -0.02em; hyphens: auto; }
.phase ul { display: flex; flex-wrap: wrap; gap: 8px; }
.phase li .pill { font-size: 14px; padding: 8px 14px; }
.phase--key { background: var(--violet); color: var(--cream); border: var(--line-bold); box-shadow: var(--shadow-m); }
.phase--key .mono { color: var(--yellow); }
.phase--key .pill { border-color: var(--cream); }
@media (max-width: 1100px) {
  .phases {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 72%);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .phase { scroll-snap-align: start; }
}

/* ===================== BENCHMARK ===================== */
.bench { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bench .card { display: flex; flex-direction: column; gap: 20px; }
.bench .card ul { display: grid; gap: 2px; padding-left: 18px; list-style: disc; }
.bench .card img { margin-top: auto; border-radius: 16px; }
.bench__fnac img { width: 66%; align-self: center; }
.bench__darty img { width: 80%; align-self: center; }
.bench__bank { max-width: calc(50% + 120px); }
.popart--bench {
  position: absolute; z-index: 3;
  width: 451px; right: calc(50% - 640px + 30px); bottom: -292px;
  pointer-events: none;
}
@media (max-width: 1024px) {
  .bench { grid-template-columns: 1fr; }
  .bench__bank { max-width: none; }
  .popart--bench { width: 260px; right: var(--gutter); bottom: -150px; }
}
@media (max-width: 640px) { .popart--bench { width: 180px; bottom: -100px; } }

/* ===================== EMPATHIE ===================== */
.empathy .section-head { margin-bottom: 32px; }
.empathy__label { margin-bottom: 16px; }
.empathy__map { border: var(--line); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-s); }
.empathy__map img { width: 100%; }

/* ===================== PERSONAS ===================== */
.personas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.persona {
  border: var(--line-bold); border-radius: 28px; box-shadow: var(--shadow-m);
  background: var(--white); overflow: hidden;
}
.persona__head {
  background: var(--violet); color: var(--cream);
  padding: 24px 24px 22px; border-bottom: var(--line-bold);
  display: grid; gap: 10px; justify-items: start;
}
.persona__head .pill { border-color: var(--cream); font-size: 14px; padding: 6px 14px; }
.persona__head h3 { font: 800 28px/1 var(--font-display); letter-spacing: -0.02em; }
.persona__head .mono { color: var(--yellow); font-size: 12px; }
.persona__body { padding: 32px 32px 36px; display: grid; gap: 14px; }
.persona__block {
  background: var(--cream); border: 1.5px solid var(--ink); border-radius: 20px;
  padding: 20px 22px;
}
.persona__block h4 {
  font: 800 24px/1.05 var(--font-display); letter-spacing: -0.02em; margin-bottom: 10px;
}
.persona__block ul { display: grid; gap: 6px; padding-left: 16px; list-style: disc; }
.persona__block li, .persona__block p { font-size: 14px; line-height: 1.5; }
.persona__block--need { background: var(--yellow); }
.persona__block--pain { background: var(--orange); }
.persona__scenarios { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1024px) { .personas { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .persona__body { padding: 20px; }
  .persona__scenarios { grid-template-columns: 1fr; }
}

/* ===================== VERBATIM ===================== */
.verbatim { text-align: center; padding-block: 140px; }
.verbatim blockquote { margin: 32px auto; max-width: 1180px; }
.verbatim blockquote p {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(48px, 8.4vw, 120px); line-height: .95; letter-spacing: -0.03em;
}
.verbatim .word { display: inline-block; }
.verbatim .hl { color: var(--yellow); }
.verbatim .mono:first-child { opacity: .6; }
.verbatim figcaption { color: var(--lilac); }

/* ===================== USER STORIES ===================== */
.stories { display: grid; gap: 24px; }
.stories__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.story { padding: 24px; display: grid; align-content: start; gap: 16px; }
.story__top { display: flex; justify-content: space-between; align-items: center; }
.story__who {
  background: var(--violet); color: var(--cream); border-radius: 100px;
  font: 500 11px/1 var(--font-body); letter-spacing: .06em; padding: 7px 12px;
}
.story--marc .story__who { background: #A855F7; }
.story__id { font-size: 12px; opacity: .7; }
.story p { font-size: 15px; line-height: 1.55; }
@media (max-width: 1024px) { .stories__row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stories__row { grid-template-columns: 1fr; } }

/* ===================== INSIGHTS ===================== */
.insights { display: grid; grid-template-columns: 620fr 636fr; gap: 24px; align-items: start; }
.matrix, .legend { background: var(--white); border: var(--line); border-radius: 28px; box-shadow: var(--shadow-s); }
.matrix { position: relative; aspect-ratio: 620 / 540; overflow: hidden; }
.matrix__axis { position: absolute; background: var(--ink); opacity: .35; }
.matrix__axis--y { left: 40.3%; top: 7.4%; bottom: 7.4%; width: 1.5px; transform-origin: top; }
.matrix__axis--x { top: 61.1%; left: 9.7%; right: 4.8%; height: 1.5px; transform-origin: left; }
.matrix__label { position: absolute; font-size: 11px; opacity: .7; }
.matrix__label--x { left: 64.5%; top: 63.9%; }
.matrix__label--y { left: 42%; top: 8%; writing-mode: vertical-rl; transform: rotate(180deg); }
.dot {
  position: absolute; width: 7.1%; aspect-ratio: 1;
  display: grid; place-content: center;
  border-radius: 50%; background: var(--violet); color: var(--cream);
  font: 500 15px/1 var(--font-body);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.dot.is-active { background: var(--yellow); color: var(--ink); box-shadow: 0 3px 0 var(--ink); transform: scale(1.15); }
.legend { padding: 16px; display: grid; gap: 2px; }
.legend li {
  display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 14px;
  font-size: 15px; line-height: 1.35; cursor: default;
  transition: background-color .25s var(--ease);
}
.legend li span {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--violet); color: var(--cream); display: grid; place-content: center;
  font: 500 13px/1 var(--font-body);
}
.legend li.is-active { background: var(--lavender); }
@media (max-width: 1024px) { .insights { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dot { font-size: 11px; } }

/* ===================== USER FLOW ===================== */
.flow-tag {
  display: inline-block; color: var(--white); border-radius: 100px;
  font: 500 14px/1 var(--font-body); padding: 14px 24px; margin-bottom: 40px;
}
.flow-tag--before { background: var(--red); }
.flow-tag--after { background: var(--green); margin-top: 64px; }
/* Desktop : chaque nœud est placé comme dans la maquette (--x, --y, --w en % / px) */
.flow { position: relative; height: var(--h); }
.flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.node {
  position: absolute; z-index: 1;
  left: var(--x); top: var(--y); width: var(--w);
  display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 56px; padding: 8px 12px;
  background: var(--white); border: 1.5px solid var(--violet); border-radius: 100px;
  font: 500 14px/1.25 var(--font-body); color: var(--violet);
}
.flow--before .node { font-size: 13.5px; }
.node svg { width: 12px; height: 12px; flex: none; }
.node--pain { border-color: var(--red); color: var(--red); }
.node--strong { border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.node--decision-before { background: var(--red); color: var(--white); border-color: var(--red); box-shadow: 0 10px 18px rgba(212, 46, 51, .25); }
.node--decision-after { background: #8A38F5; color: var(--white); border-color: #8A38F5; }
.flow--after .node { min-height: 44px; padding: 8px 16px; }
.flow-line { fill: none; stroke: #8B7BAE; stroke-width: 1.5; }
.flow-line--dotted { stroke-dasharray: 2 5; stroke-linecap: round; }
.flow-arrow { fill: none; stroke: #8B7BAE; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1024px) {
  .flow { height: auto; display: grid; row-gap: 28px; max-width: 420px; }
  .flow .node { position: relative; left: auto; top: auto; width: auto; }
  .flow__svg { display: none; }
  .flow .node:not(:last-child)::after {
    content: ""; position: absolute; left: 50%; top: calc(100% + 6px);
    width: 1.5px; height: 16px; background: #8B7BAE;
  }
  .flow--after .node:not(:last-child)::after { background: none; border-left: 2px dotted #8B7BAE; }
}

/* ===================== WIREFRAMES ===================== */
.wireframes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.zoomable { cursor: zoom-in; display: block; width: 100%; text-align: left; }
.zoomable.shot { transition: transform .25s var(--ease), box-shadow .25s var(--ease); box-shadow: 0 0 0 var(--ink); }
.zoomable.shot:hover { transform: translateY(-3px); box-shadow: var(--shadow-s); }
@media (max-width: 760px) { .wireframes { grid-template-columns: 1fr; gap: 24px; } }

/* ===================== ÉVOLUTION ===================== */
.evo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.evo-card { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.evo-card .img { border-radius: 12px; overflow: hidden; border: 1px solid rgba(35, 12, 39, .15); aspect-ratio: 570 / 200; background: var(--lavender); }
.evo-card .img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.evo-card .mono { color: var(--violet); }
.evo-subtitle {
  font: 800 40px/1.1 var(--font-display); letter-spacing: -0.02em;
  margin: 64px 0 32px;
}
.evo-card--dropped .img img { filter: grayscale(.35); transition: filter .3s var(--ease); }
.evo-card--dropped:hover .img img { filter: none; }
@media (max-width: 860px) {
  .evo-grid { grid-template-columns: 1fr; }
  .evo-subtitle { font-size: 30px; margin-top: 48px; }
}

/* ===================== DÉCISIONS ===================== */
.decisions { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.decision { display: grid; gap: 14px; }
.decision .mono:first-child { color: var(--violet); }
.decision__part { display: grid; gap: 4px; padding-top: 6px; }
.decision__part .mono { font-size: 12px; }
.decision--iteration { background: var(--lavender); box-shadow: none; }
@media (max-width: 860px) { .decisions { grid-template-columns: 1fr; } }

/* ===================== UI FINALE ===================== */
.ui-head { display: grid; grid-template-columns: 1fr 403px; gap: 40px; align-items: center; margin-bottom: 40px; }
.ui-head .mono { margin-bottom: 16px; }
.ui-head .section-title { margin-bottom: 40px; }
.ui-head .intro { margin-bottom: 0; }
.ui-shots { display: grid; gap: 40px; }
.ui-shot {
  background: var(--violet); border: var(--line-bold); border-radius: 36px; box-shadow: var(--shadow-l);
  padding: 19px 19px 0; overflow: hidden;
}
.ui-shot .zoomable { border-radius: 22px; overflow: hidden; }
.ui-shot figcaption {
  color: var(--cream); font: 800 54px/1 var(--font-display); letter-spacing: -0.025em;
  padding: 30px 12px 34px;
}
@media (max-width: 860px) {
  .ui-head { grid-template-columns: 1fr; }
  .ui-head .popart { width: 220px; justify-self: end; margin-top: -40px; }
  .ui-shot { border-radius: 24px; padding: 10px 10px 0; }
  .ui-shot .zoomable { border-radius: 16px; }
  .ui-shot figcaption { font-size: 30px; padding: 18px 8px 22px; }
}

/* ===================== PROJET SUIVANT ===================== */
.next { background: var(--violet); color: var(--cream); overflow: hidden; padding-block: 140px; }
.next .wrap { position: relative; }
.next__star {
  position: absolute; width: 520px; right: -60px; top: -80px; z-index: 0;
  animation: spin 60s linear infinite;
}
.next__label { position: relative; margin-bottom: 28px; }
.next__title { position: relative; display: grid; margin-bottom: 40px; }
.next__title .l1 { font: 800 clamp(56px, 10.4vw, 150px)/0.9 var(--font-display); letter-spacing: -0.05em; }
.next__title .l2 { font-family: var(--font-serif); font-style: italic; font-size: clamp(64px, 11.5vw, 165px); line-height: .9; letter-spacing: -0.04em; color: var(--yellow); }
.next__actions { position: relative; display: flex; flex-wrap: wrap; gap: 20px; }
.next__actions .btn { font-size: 22px; padding: 22px 40px; }
.next__actions .btn--yellow { box-shadow: var(--shadow-m); }
.next__actions .btn--yellow:hover { box-shadow: 0 10px 0 var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .next { padding-block: 96px; }
  .next__star { width: 240px; right: -90px; top: -190px; }
  .next__actions .btn { font-size: 18px; padding: 16px 28px; }
}

/* ===================== LIGHTBOX ===================== */
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: none; max-height: none;
  width: 100vw; height: 100vh;
}
.lightbox::backdrop { background: rgba(35, 12, 39, .9); }
.lightbox__inner { width: 100%; height: 100%; display: grid; place-items: center; padding: 64px 24px 24px; }
.lightbox img { max-width: min(1600px, 100%); max-height: calc(100vh - 100px); width: auto; border-radius: 16px; }
.lightbox__close {
  position: fixed; top: 16px; right: 16px;
  background: var(--cream); color: var(--ink); border: var(--line); border-radius: 100px;
  padding: 10px 20px; font: 500 15px/1 var(--font-body);
}

/* ===================== ANIMATIONS ===================== */
/* Chargement du hero : une seule séquence orchestrée */
.js .hero__title .line > span { transform: translateY(105%); }
.js .sticker { opacity: 0; transform: rotate(-30deg) scale(.6); }
.js .hero__visual { opacity: 0; transform: translateY(24px); }
.is-loaded .hero__title .line > span { transform: none; transition: transform .9s var(--ease); }
.is-loaded .hero__title .line--2 > span { transition-delay: .12s; }
.is-loaded .sticker { opacity: 1; transform: rotate(-14deg); transition: opacity .4s var(--ease) .55s, transform .7s var(--ease) .55s; }
.is-loaded .hero__visual { opacity: 1; transform: none; transition: opacity .9s var(--ease) .35s, transform .9s var(--ease) .35s; }

/* Titres de section : le mot en italique arrive en second */
.js .reveal-title .serif { opacity: 0; transform: translateY(.15em); display: inline-block; }
.reveal-title.is-in .serif { opacity: 1; transform: none; transition: opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s; }

/* Verbatim : mot à mot */
.js .verbatim .word { opacity: 0; transform: translateY(.2em); }
.verbatim.is-in .word { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 45ms); }

/* Matrice : axes puis pastilles */
.js .matrix__axis--y { transform: scaleY(0); }
.js .matrix__axis--x { transform: scaleX(0); }
.js .matrix .dot { opacity: 0; transform: scale(.6); }
.matrix.is-in .matrix__axis { transform: none; transition: transform .7s var(--ease); }
.matrix.is-in .dot { opacity: 1; transform: scale(1); transition: opacity .4s var(--ease), transform .4s var(--ease), box-shadow .25s, background-color .25s; transition-delay: calc(.5s + var(--i) * 60ms), calc(.5s + var(--i) * 60ms), 0s, 0s; }
.matrix.is-in .dot.is-active { transform: scale(1.15); transition-delay: 0s; }

/* Connecteurs du user flow */
.flow-line { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
.flow-line--dotted { stroke-dasharray: 2 5; stroke-dashoffset: 0; opacity: 0; }
.flow.is-in .flow-line { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.flow.is-in .flow-line--dotted { opacity: 1; transition: opacity .5s var(--ease); transition-delay: calc(var(--i) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  .band__track, .next__star { animation: none; }
  .js .hero__title .line > span, .js .sticker, .js .hero__visual,
  .js .reveal-title .serif, .js .verbatim .word,
  .js .matrix__axis, .js .matrix .dot { transform: none !important; opacity: 1 !important; }
  .js .sticker { transform: rotate(-14deg) !important; }
  .flow-line { stroke-dashoffset: 0 !important; opacity: 1 !important; }
}

/* ===================== PERSONNAGE : FLOTTEMENT DISCRET ===================== */
/* Montée de 10px et très légère rotation, sur 6s. Chaque illustration a son propre décalage. */
.popart, .popart--bench { animation: float 6s ease-in-out infinite; will-change: transform; }
.context__head .popart { animation-delay: -1s; }
.popart--bench { animation-duration: 7s; animation-delay: -3s; }
.ui-head .popart { animation-delay: -4.5s; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .popart, .popart--bench { animation: none; }
}

/* ==========================================================================
   Étude de cas — Pharmaland « Refonte de l’accueil » (blocs spécifiques)
   ========================================================================== */
.hero__visual .frame--pl { aspect-ratio: 1560 / 1036; background: #EEF0EF; }
.intro--wide { max-width: 1000px; }

.pl-h3 { font: 800 28px/1.15 var(--font-display); letter-spacing: -0.02em; font-variation-settings: "opsz" 48; }
.pl-h3--lg { font-size: 40px; }
.pl-h3--gap { margin-top: 88px; }
.pl-sub { max-width: 760px; margin: 12px 0 32px; opacity: .85; }
.pl-tag {
  display: inline-block; align-self: flex-start; background: var(--violet); color: var(--cream);
  font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  border-radius: 100px; padding: 6px 12px; white-space: nowrap;
}

/* Entretiens : déroulé */
.pl-steps-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.pl-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 88px; }
.pl-step { padding: 22px 20px; display: grid; gap: 8px; align-content: start; }
.pl-step__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pl-step__n {
  width: 28px; height: 28px; border-radius: 50%; background: var(--violet); color: var(--cream);
  display: grid; place-content: center; font: 500 13px/1 var(--font-body); flex: none;
}
.pl-step__line { flex: 1; height: 1.5px; background: var(--lavender); }
.pl-step__t { font: 500 12px/1 var(--font-mono); color: var(--violet); }
.card .pl-step__t { font-size: 12px; }
.pl-step h4 { font: 800 18px/1.2 var(--font-display); letter-spacing: -0.01em; }
.pl-step p { font-size: 14px; opacity: .75; }

.pl-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pl-learn { display: grid; gap: 14px; align-content: start; }
.pl-learn h4 { font: 800 24px/1.15 var(--font-display); letter-spacing: -0.02em; }
.pl-learn p { opacity: .8; }
.pl-bilan { margin-top: 24px; }
.pl-bilan .card { display: grid; gap: 14px; align-content: start; }
.pl-bilan .mono { color: var(--violet); font-size: 12px; }
.pl-bilan ul { display: grid; gap: 8px; padding-left: 18px; list-style: disc; }
.pl-bilan__risk { background: var(--lavender); box-shadow: none; }

/* Friction log */
.pl-analysed { margin: 24px auto 56px; max-width: 1000px; box-shadow: var(--shadow-s); }
.pl-log { padding: 40px 48px; }
.pl-log__meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 24px 0 28px; }
.pl-log__meta dt { font-size: 11px; opacity: .6; margin-bottom: 4px; }
.pl-log__meta dd { margin: 0; font-size: 15px; }
.pl-table-wrap { overflow-x: auto; border: var(--line); border-radius: 16px; }
.pl-table { width: 100%; border-collapse: collapse; min-width: 820px; font-size: 14px; line-height: 1.45; }
.pl-table thead th {
  background: var(--violet); color: var(--cream); text-align: left; padding: 14px 16px;
  font: 500 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.pl-table td, .pl-table tbody th { padding: 14px 16px; border-top: 1px solid rgba(35, 12, 39, .14); vertical-align: top; text-align: left; }
.pl-table tbody th { font-weight: 700; white-space: nowrap; }
.pl-table tbody tr:nth-child(even) { background: var(--cream); }
.sev { display: inline-block; border-radius: 100px; padding: 4px 10px; font-size: 12px; font-weight: 500; border: 1.5px solid var(--ink); white-space: nowrap; }
.sev--high { background: var(--orange); }
.sev--low { background: var(--yellow); }
.sev--none { background: var(--white); opacity: .7; }

/* Benchmark Pharmaland : deux cartes égales */
.bench--pl .card { gap: 16px; }
.bench--pl .zoomable { margin-top: auto; border-radius: 16px; overflow: hidden; border: 1px solid rgba(35, 12, 39, .12); }
.bench--pl .zoomable img { width: 100%; }

/* Wireframes */
.pl-pistes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.pl-piste { display: grid; gap: 14px; align-content: start; }
.pl-piste .shot { border-radius: 16px; }
.pl-piste .pl-tag { margin-top: 8px; }
.pl-piste h4 { font: 800 26px/1.15 var(--font-display); letter-spacing: -0.02em; }
.pl-piste p { opacity: .8; }
.pl-wfv2 {
  background: var(--yellow); border: var(--line-bold); border-radius: 36px; box-shadow: var(--shadow-l);
  padding: 16px 16px 0; overflow: hidden;
}
.pl-wfv2 .zoomable { border-radius: 22px; overflow: hidden; }
.pl-wfv2 figcaption { padding: 18px 4px 20px; display: flex; justify-content: center; }
.pl-wfv2 figcaption .pill { background: var(--white); }

/* Design system */
.pl-ds { margin-bottom: 24px; }
.pl-ds img { width: 100%; }

/* Parcours de vente */
.pl-sale { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.pl-sale li {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: var(--line); border-radius: 100px; background: var(--white);
  font: 500 15px/1.2 var(--font-body); white-space: nowrap;
}
.pl-sale li span {
  width: 24px; height: 24px; border-radius: 50%; background: var(--lavender); color: var(--violet);
  display: grid; place-content: center; font-size: 12px; flex: none;
}
.pl-sale li.is-current { background: var(--violet); color: var(--cream); box-shadow: 0 4px 0 var(--ink); }
.pl-sale li.is-current span { background: var(--cream); }

@media (max-width: 1100px) {
  .pl-steps { grid-template-columns: repeat(3, 1fr); }
  .pl-sale { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .pl-grid3, .pl-pistes { grid-template-columns: 1fr; }
  .pl-log { padding: 28px 20px; }
  .pl-log__meta { grid-template-columns: 1fr 1fr; }
  .pl-h3--lg { font-size: 30px; }
  .pl-h3--gap { margin-top: 64px; }
}
@media (max-width: 640px) {
  .pl-steps { grid-template-columns: 1fr; margin-bottom: 64px; }
  .pl-sale { grid-template-columns: 1fr 1fr; }
  .pl-wfv2 { border-radius: 24px; padding: 8px 8px 0; }
  .pl-wfv2 .zoomable { border-radius: 16px; }
}
.pl-learn .pl-tag, .pl-piste .pl-tag { justify-self: start; }
.next__title--long .l2 { font-size: clamp(52px, 8.2vw, 118px); }

/* ===================== CE QUI A ÉTÉ DIFFICILE ===================== */
.hard { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.hard__card { display: flex; flex-direction: column; gap: 16px; }
.hard__card .pl-tag { align-self: flex-start; }
.hard__parts { display: grid; gap: 14px; }
.hard__parts .mono { color: var(--violet); font-size: 12px; }
.hard__list { list-style: decimal; padding-left: 20px; display: grid; gap: 4px; margin-top: 6px; }
.hard__list li { font-size: 15px; line-height: 1.55; }
.hard--single { grid-template-columns: 1fr; }
.hard--single .hard__parts { grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.hard__lesson {
  margin-top: 32px; background: var(--ink); color: var(--cream); border-radius: 28px;
  padding: 28px 36px; display: flex; align-items: center; gap: 32px;
}
.hard__lesson .mono { color: var(--yellow); flex: none; }
.hard__lesson-text { font-family: var(--font-serif); font-style: italic; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; }
@media (max-width: 860px) {
  .hard, .hard--single .hard__parts { grid-template-columns: 1fr; }
  .hard__lesson { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; }
}
.hard__parts .decision__part { align-content: start; }

/* ==========================================================================
   Étude courte — Boursorama
   ========================================================================== */
.hero__visual .frame--bo { aspect-ratio: 1600 / 1200; background: #fff; }
.bo-brief { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: center; margin-bottom: 64px; }
.bo-brief .brief__statement { margin-bottom: 0; }
.bo-brief .popart { width: 300px; }
.brief__grid--3 { grid-template-columns: repeat(3, 1fr); }
.bo-step + .bo-step { margin-top: 88px; }
.bo-step__head { display: flex; align-items: center; gap: 16px; }
.bo-shot { box-shadow: var(--shadow-s); border-radius: 20px; }
.bo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ui-shot--yellow { background: var(--yellow); }
.ui-shot--yellow figcaption { color: var(--ink); }
@media (max-width: 900px) {
  .bo-brief { grid-template-columns: 1fr; }
  .bo-brief .popart { width: 200px; justify-self: end; margin-top: -20px; }
  .brief__grid--3, .bo-pair { grid-template-columns: 1fr; }
  .bo-step + .bo-step { margin-top: 64px; }
}