/* PicDunk — le site est un bureau en papier. */
:root {
  --paper: #F3ECDD;
  --sheet: #FBF8F1;
  --ink: #221E18;
  --pen: #24479C;          /* stylo bille bleu */
  --red: #D23A2C;          /* tampon */
  --line: #B9D3EA;         /* lignes du cahier */
  --margin: #E8857B;       /* marge rouge */
  --highlight: #FFE45C;    /* surligneur */
  --postit-y: #FFE873;
  --postit-p: #FFB8C9;
  --tape: rgba(240, 226, 180, .78);
  --marker: "Permanent Marker", "Comic Sans MS", cursive;
  --hand: "Caveat", "Bradley Hand", cursive;
  --typed: "Courier Prime", "Courier New", monospace;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  color: var(--ink);
  font-family: var(--typed);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  background-color: var(--paper);
  /* fibres du papier */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--pen); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

.marker { font-family: var(--marker); font-weight: 400; line-height: 1.02; letter-spacing: .01em; }
.hand { font-family: var(--hand); font-weight: 700; font-size: 26px; line-height: 1.15; }
.hand.small { font-size: 21px; }
.hand.big { font-size: 46px; line-height: 1; }
.typed { font-family: var(--typed); }
.pen { color: var(--pen); }
mark { background: linear-gradient(100deg, transparent 2%, var(--highlight) 4%, var(--highlight) 94%, transparent 97%); color: inherit; padding: 0 .12em; }

.tilt-2 { transform: rotate(2deg); }
.tilt-3 { transform: rotate(3deg); }
.tilt-4 { transform: rotate(4deg); }
.tilt-m1 { transform: rotate(-1.5deg); }
.tilt-m2 { transform: rotate(-2.5deg); }
.tilt-m3 { transform: rotate(-4deg); }

/* ---------- Feuilles, scotch, post-it, tampons ---------- */
.sheet {
  position: relative; background: var(--sheet); padding: 40px 42px;
  box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 10px 24px -8px rgba(60,40,10,.28), 0 2px 0 rgba(0,0,0,.04);
}
.sheet.lined {
  background-color: var(--sheet);
  background-image:
    linear-gradient(90deg, transparent 58px, var(--margin) 58px, var(--margin) 60px, transparent 60px),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--line) 31px 32px);
  background-position: 0 14px;
}
.tape {
  position: absolute; width: 120px; height: 34px; background: var(--tape); z-index: 3;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 48%);
}
.tape-tl { top: -14px; left: -26px; transform: rotate(-32deg); }
.tape-tr { top: -14px; right: -26px; transform: rotate(30deg); }
.tape-top { top: -16px; left: 50%; transform: translateX(-50%) rotate(-3deg); }

.postit {
  position: relative; padding: 22px 24px 26px; box-shadow: 0 14px 20px -12px rgba(60,40,10,.45), 0 2px 3px rgba(0,0,0,.08);
}
.postit::before { /* pli en haut */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 18px; background: rgba(0,0,0,.035);
}
.postit.yellow { background: var(--postit-y); }
.postit.pink { background: var(--postit-p); }

.stamp {
  display: inline-block; font-family: var(--marker); text-transform: uppercase; color: var(--red);
  border: 4px double var(--red); border-radius: 10px; padding: 8px 16px; line-height: 1.05; font-size: 22px;
  transform: rotate(-9deg); opacity: .86; mix-blend-mode: multiply; filter: url(#rough);
}

/* ---------- En-tête ---------- */
.desk-top {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: 1240px; margin: 0 auto; padding: 26px clamp(18px, 4vw, 40px) 8px;
}
.signature { font-family: var(--marker); font-size: 38px; color: var(--ink); text-decoration: none; transform: rotate(-3deg); display: inline-block; }
.signature.small { font-size: 28px; }
.desk-top nav { display: flex; gap: clamp(14px, 3vw, 30px); font-family: var(--hand); font-weight: 700; font-size: 24px; }
.desk-top nav a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--highlight), var(--highlight)) 0 88% / 0 40% no-repeat; transition: background-size .25s; }
.desk-top nav a:hover { background-size: 100% 40%; }
@media (max-width: 560px) { .desk-top nav a:not(:last-child) { display: none; } }

main { max-width: 1240px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }

/* ---------- Note de service + jeu ---------- */
.memo-row { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: start; padding: 34px 0 90px; }
.memo { transform: rotate(-1.2deg); }
.memo-head { font-size: 15px; border-bottom: 2px dashed rgba(0,0,0,.25); padding-bottom: 16px; margin-bottom: 24px; }
.memo-head span { display: inline-block; width: 70px; font-weight: 700; }
.memo h1 { font-size: clamp(44px, 6.4vw, 78px); line-height: 1.12; margin-bottom: 22px; }
.memo p.typed { margin-bottom: 18px; }
.memo .stamp { position: absolute; right: 26px; bottom: -26px; background: rgba(251,248,241,.6); }

.game-wrap { position: relative; padding-top: 30px; }
.game-hint { position: absolute; top: -14px; right: -22px; width: 200px; z-index: 4; }
.game-sheet { padding: 0; transform: rotate(1.4deg); }
#desk-game { display: block; width: 100%; height: auto; }
.score-note { position: absolute; right: -26px; bottom: -64px; width: 180px; text-align: center; z-index: 4; }
.score-note .big { display: block; color: var(--red); margin: 2px 0; }

/* ---------- Mode d'emploi ---------- */
.howto { padding: 40px 0 70px; text-align: center; }
.underline { display: inline-block; font-size: clamp(38px, 5vw, 58px); position: relative; }
.underline::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -10px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12'%3E%3Cpath d='M2 8 C 60 2, 120 11, 180 5 S 270 3, 298 7' fill='none' stroke='%23D23A2C' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.polaroids { display: flex; justify-content: center; gap: clamp(20px, 4vw, 56px); margin-top: 60px; flex-wrap: wrap; }
.polaroid {
  position: relative; width: 260px; background: #fff; padding: 14px 14px 18px; text-align: left;
  box-shadow: 0 16px 28px -14px rgba(60,40,10,.5), 0 1px 2px rgba(0,0,0,.1); transition: transform .3s;
}
.polaroid:hover { transform: rotate(0) scale(1.03); z-index: 2; }
.polaroid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 62%; filter: saturate(1.05) contrast(1.02); }
.polaroid .tape { top: -15px; left: 50%; width: 96px; transform: translateX(-50%) rotate(-4deg); }
.polaroid figcaption { margin-top: 12px; font-size: 24px; color: var(--pen); }
.polaroid figcaption b { color: var(--red); }
.arrow-note { margin-top: 34px; color: var(--pen); transform: rotate(-2deg); }

/* ---------- Liste ---------- */
.checklist-row { display: grid; grid-template-columns: 1.4fr .8fr; gap: clamp(30px, 5vw, 70px); align-items: center; padding: 40px 0 90px; }
.checklist { padding: 46px 40px 40px 84px; transform: rotate(.8deg); }
.checklist h2 { font-size: clamp(36px, 4.4vw, 52px); margin-bottom: 18px; }
.checklist ul { list-style: none; padding: 0; }
.checklist li { display: grid; grid-template-columns: 34px 1fr; gap: 6px; line-height: 32px; margin-bottom: 0; padding-bottom: 12px; }
.check { font-family: var(--hand); font-size: 30px; color: var(--pen); line-height: 32px; }
.margin-note { position: absolute; left: 6px; bottom: 30px; transform: rotate(-90deg); transform-origin: left bottom; color: var(--red); font-size: 22px; }
.phone-taped { position: relative; width: min(300px, 100%); justify-self: center; background: #111; padding: 9px; border-radius: 40px; box-shadow: 0 30px 40px -20px rgba(60,40,10,.6); }
.phone-taped img { border-radius: 32px; }
.phone-taped .tape { top: 40px; left: -40px; transform: rotate(-38deg); }

/* ---------- Dossier confidentiel ---------- */
.dossier { padding: 40px 0 100px; }
.folder { position: relative; max-width: 860px; margin: 0 auto; background: #D9B97C; padding: 34px 26px 26px; border-radius: 6px 6px 8px 8px; box-shadow: 0 20px 30px -18px rgba(60,40,10,.6); transform: rotate(-.8deg); }
.folder-tab { position: absolute; top: -30px; left: 30px; background: #D9B97C; padding: 6px 22px 4px; border-radius: 8px 8px 0 0; font-weight: 700; font-size: 15px; }
.file { padding: 46px 48px; }
.file h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 18px; max-width: 18ch; }
.file p { margin-bottom: 14px; }
.big-stamp { position: absolute; top: 30px; right: 30px; font-size: 30px; transform: rotate(12deg); }
.redact { background: var(--ink); color: transparent; letter-spacing: -.1em; user-select: none; }
.signed { text-align: right; color: var(--pen); margin-top: 18px; }

/* ---------- Appel à télécharger ---------- */
.cta { display: flex; justify-content: center; align-items: center; gap: 40px; padding: 30px 0 110px; flex-wrap: wrap; }
.cta-note { width: 320px; text-align: center; }
.cta-note p { margin-bottom: 12px; }
.cta-note s { text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.store {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 20px 10px 16px;
  background: #111; color: #fff; border-radius: 12px; text-decoration: none; font-family: -apple-system, system-ui, sans-serif; font-weight: 600; font-size: 19px; line-height: 1.05;
  box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
.store svg { width: 26px; height: 26px; fill: currentColor; }
.store small { display: block; font-size: 11px; font-weight: 500; opacity: .8; }
.app-icon { border-radius: 26px; transform: rotate(8deg); box-shadow: 0 16px 24px -12px rgba(60,40,10,.6); }

/* ---------- Pied de page ---------- */
.desk-bottom { max-width: 1240px; margin: 0 auto; padding: 30px clamp(18px, 4vw, 40px) 50px; border-top: 2px dashed rgba(0,0,0,.2); display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; }
.desk-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 15px; }
.desk-bottom nav a { color: var(--ink); }
.tiny { width: 100%; font-size: 13px; opacity: .65; }

/* ---------- Mobile ---------- */
@media (max-width: 920px) {
  .memo-row, .checklist-row { grid-template-columns: 1fr; }
  .game-wrap { max-width: 560px; margin: 20px auto 0; width: 100%; }
  .memo .stamp { right: 14px; }
}
@media (max-width: 560px) {
  .sheet { padding: 30px 24px; }
  .checklist { padding: 40px 22px 34px 70px; }
  .game-wrap { display: flex; flex-direction: column; padding-top: 0; }
  .game-hint { position: relative; inset: auto; width: auto; align-self: flex-end; margin: 0 4px -14px 40px; padding: 12px 16px 14px; }
  .game-hint .hand { font-size: 21px; }
  .score-note { position: relative; inset: auto; align-self: flex-start; width: 210px; margin: -12px 0 0 10px; display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; }
  .score-note .big { font-size: 34px; display: inline; }
  .score-note #best { display: none; }
  .file { padding: 40px 24px; }
  .big-stamp { font-size: 22px; top: 14px; right: 10px; }
  .polaroid { width: 78%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }