/* Dossier : pages A4 qui se redimensionnent comme un PDF (unités cqw),
   animations toujours actives à l'écran, impression propre en PDF. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--f-text); color: var(--c-ink);
  background: radial-gradient(120% 80% at 10% 0%, #DCE3FF, #EDEBFF 45%, #FBE7F4 100%) fixed;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 3px solid var(--c-royal); outline-offset: 3px; }

.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  padding: .7rem 1rem;
  background: rgba(255,255,255,.45); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.8);
}
.bar__btn {
  min-height: 44px; padding: .55rem 1.1rem; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 .9rem var(--f-text); color: var(--c-ink); text-decoration: none; display: inline-flex; align-items: center;
  background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 6px 16px -12px rgba(28,24,70,.6);
}
.bar__btn--main { color: #fff; background: linear-gradient(135deg, var(--c-royal), #6A5BFF 60%, var(--c-pink)); }
.bar__toast { align-self: center; font-size: .85rem; font-weight: 600; min-width: 1ch; }

.book { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 28px 16px 64px; }

/* ---------- la page ---------- */
.page {
  container-type: inline-size;
  position: relative; overflow: hidden;
  width: min(210mm, 100%); aspect-ratio: 210 / 297;
  border-radius: 1.6cqw;
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(247,246,255,.88));
  box-shadow: 0 30px 70px -40px rgba(18,15,51,.6), inset 0 0 0 1px rgba(255,255,255,.9);
  padding: 6cqw 7cqw 4.5cqw;
  line-height: 1.55;
  display: flex; flex-direction: column;
}
/* la page est son propre conteneur : la taille du texte se fixe sur ses enfants */
.page > * { font-size: 2.05cqw; }
.page > * { position: relative; z-index: 1; }
.page__foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 1.5cqw; color: var(--c-ink-2); padding-top: 2cqw; }

/* décor animé : verres flottants */
.deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.deco i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 7%, rgba(255,255,255,.3) 24%, rgba(255,255,255,0) 62%), var(--iri);
  background-size: 100% 100%, 300% 300%;
  box-shadow: inset 0 0 0 .25cqw rgba(255,255,255,.8), inset -2cqw -3cqw 5cqw rgba(47,75,255,.18);
  opacity: .9;
  animation: float 9s ease-in-out infinite, iri 14s linear infinite;
}
.deco i:nth-child(2) { animation-delay: -3s, -4s; }
.deco i:nth-child(3) { animation-delay: -6s, -8s; border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%; }
@keyframes float { 50% { transform: translate(1.5cqw, -2.4cqw) rotate(8deg); } }
@keyframes iri { to { background-position: 0 0, 300% 0; } }

.kicker { font-family: var(--f-display); font-weight: 600; font-size: 1.7cqw; color: var(--c-royal); margin: 0 0 1.2cqw; }
.title { font-family: var(--f-display); font-weight: 800; font-size: 5.4cqw; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 2.4cqw; max-width: 20ch; }
.h { font-family: var(--f-display); font-weight: 600; font-size: 2.2cqw; margin: 0 0 1cqw; color: var(--c-royal); }
p { margin: 0 0 1.4cqw; }
ul, ol { margin: 0; padding-left: 2.6cqw; }
li { margin-bottom: .5cqw; }

/* ---------- couverture ---------- */
.cover { padding: 0; background: radial-gradient(120% 90% at 20% 10%, #DCE3FF 0%, #F3F4FF 45%, #FBEAF7 100%); }
.cover__name { position: absolute; left: 7cqw; top: 9cqw; z-index: 2; margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 13cqw; line-height: .86; letter-spacing: -.05em; }
.cover__name span { display: block; }
.cover__name span + span { background: linear-gradient(100deg, var(--c-royal), #7B5CFF 40%, var(--c-pink) 75%, var(--c-royal)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s ease-in-out infinite; }
@keyframes shine { 50% { background-position: 100% 0; } }
.cover__role { position: absolute; left: 7cqw; top: 37cqw; z-index: 2; font-family: var(--f-display); font-weight: 600; font-size: 2.6cqw; max-width: 18ch; line-height: 1.3; }
.cover__mascot { position: absolute; right: -6cqw; bottom: 0; height: 80%; width: auto; z-index: 1; animation: bob 6s ease-in-out infinite; filter: drop-shadow(0 3cqw 3cqw rgba(28,24,70,.25)); }
@keyframes bob { 50% { transform: translateY(-1.4cqw); } }
.cover__foot { position: absolute; left: 7cqw; right: 7cqw; bottom: 6cqw; z-index: 2; display: flex; flex-direction: column; gap: .6cqw; font-size: 1.8cqw; font-weight: 600; }
.cover__chip { align-self: flex-start; padding: .8cqw 1.8cqw; border-radius: 99cqw; background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 .2cqw rgba(255,255,255,.95); }

/* ---------- grilles internes ---------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.glass {
  padding: 2.4cqw 2.6cqw; border-radius: 2.4cqw;
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 .2cqw rgba(255,255,255,.95), 0 2cqw 4cqw -3cqw rgba(28,24,70,.35);
}
.chips { display: flex; flex-wrap: wrap; gap: .8cqw; list-style: none; padding: 0; margin: 0; }
.chips li { margin: 0; padding: .5cqw 1.3cqw; border-radius: 99cqw; background: var(--c-mist); font-weight: 600; font-size: 1.65cqw; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; margin: 2cqw 0; }
.stats div { padding: 1.8cqw; border-radius: 2cqw; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 .2cqw #fff; }
.stats b { display: block; font-family: var(--f-display); font-size: 3.6cqw; color: var(--c-royal); line-height: 1.1; }
.stats span { font-size: 1.55cqw; color: var(--c-ink-2); }

.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
.role { padding: 1.5cqw 2cqw; border-radius: 2.2cqw; background: rgba(255,255,255,.65); box-shadow: inset 0 0 0 .2cqw #fff; }
.role b { display: block; font-family: var(--f-display); font-size: 1.95cqw; margin-bottom: .4cqw; }
.role span { font-size: 1.7cqw; color: var(--c-ink-2); }
.role em { display: block; margin-top: .6cqw; font-style: normal; font-size: 1.45cqw; font-weight: 700; color: var(--c-royal); }

/* ---------- projet ---------- */
.proj { display: flex; flex-direction: column; gap: 1.2cqw; }
.proj p { margin: 0; }
.proj + .proj { margin-top: 2.4cqw; padding-top: 2.4cqw; border-top: .2cqw solid rgba(28,24,70,.08); }
.proj__head { display: grid; grid-template-columns: 17cqw 1fr; gap: 2.6cqw; align-items: center; }
.proj__art { position: relative; aspect-ratio: 1; border-radius: 3cqw; overflow: hidden; background: radial-gradient(120% 120% at 20% 0%, var(--a) 0%, var(--b) 100%); }
.proj__art i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,.3) 24%, rgba(255,255,255,.04) 60%); box-shadow: inset 0 0 0 .25cqw rgba(255,255,255,.75); animation: float 7s ease-in-out infinite; }
.proj__art i:nth-child(1) { width: 60%; aspect-ratio: 1; right: -12%; top: -12%; }
.proj__art i:nth-child(2) { width: 30%; aspect-ratio: 1; left: 10%; bottom: 12%; animation-delay: -3s; }
.proj__art b { position: absolute; left: 1.2cqw; bottom: 1cqw; font-family: var(--f-display); font-weight: 800; font-size: 2.3cqw; color: #fff; text-shadow: 0 1cqw 2cqw rgba(28,24,70,.3); letter-spacing: -.03em; }
.proj__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.badge { display: inline-block; padding: .35cqw 1.1cqw; border-radius: 99cqw; font-size: 1.4cqw; font-weight: 700; margin-bottom: .8cqw; }
.badge--real { background: rgba(79,227,208,.25); color: #0B6B60; }
.badge--concept { background: rgba(183,164,255,.32); color: #4B2FB8; }
.proj__title { font-family: var(--f-display); font-weight: 800; font-size: 3cqw; line-height: 1.12; margin: 0 0 .6cqw; }
.proj__client { font-weight: 700; font-size: 1.7cqw; color: var(--c-ink-2); margin: 0; }
.proj__idea { padding: 1.2cqw 1.8cqw; border-radius: 2cqw; background: rgba(183,164,255,.18); box-shadow: inset 0 0 0 .2cqw rgba(123,92,255,.2); }
.proj__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; font-size: 1.85cqw; }
.note { font-size: 1.5cqw; font-style: italic; color: var(--c-ink-2); }

/* ---------- parcours ---------- */
.tl { list-style: none; padding: 0 0 0 2.4cqw; border-left: .35cqw solid var(--c-lilac); }
.tl li { position: relative; margin-bottom: 2cqw; }
.tl li::before { content: ""; position: absolute; left: -3.35cqw; top: .7cqw; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .45cqw var(--c-royal); }
.tl small { font-weight: 700; color: var(--c-ink-2); }
.tl b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 2cqw; }
.tl ul { font-size: 1.7cqw; color: var(--c-ink-2); margin-top: .5cqw; }

/* ---------- fin ---------- */
.end { justify-content: center; text-align: center; background: radial-gradient(90% 70% at 50% 30%, #fff 0%, rgba(255,255,255,.4) 60%), var(--iri); background-size: 100% 100%, 300% 300%; animation: iri 16s linear infinite; }
.end .title { margin-left: auto; margin-right: auto; }
.end__links { display: flex; flex-direction: column; gap: 1.2cqw; align-items: center; font-weight: 700; font-size: 2.2cqw; }
.end__links a { color: var(--c-ink); text-decoration: none; padding: 1cqw 2.4cqw; border-radius: 99cqw; background: rgba(255,255,255,.75); }
.end__mascot { height: 34cqw; width: auto; margin: 0 auto 2cqw; animation: bob 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

/* ---------- impression / PDF ---------- */
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  .bar { display: none; }
  .book { padding: 0; gap: 0; }
  .page { width: 210mm; height: 297mm; aspect-ratio: auto; border-radius: 0; box-shadow: none; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page:last-child { break-after: auto; }
  .glass, .cover__chip { -webkit-backdrop-filter: none; backdrop-filter: none; }
}