@font-face { font-family: 'Patrick Hand'; src: url(polices/patrick-hand-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Caveat'; font-weight: 700; src: url(polices/caveat-latin-700-normal.woff2) format('woff2'); font-display: swap; }

:root {
  --papier: #efe6cc; --papier-clair: #fbf6e6; --encre: #1d2f6f; --bleu: #22408f; --rouge: #c4302b; --or: #e2a12b; --gris: #5a5a6a;
  --main: 'Patrick Hand', 'Comic Sans MS', cursive; --titre: 'Caveat', 'Patrick Hand', cursive;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--encre); font: 400 1.15rem/1.5 var(--main);
  background: var(--papier) repeating-linear-gradient(0deg, transparent 0 31px, rgb(29 47 111 / .08) 31px 32px);
}
/* La marge rouge du cahier */
body::before { content: ''; position: fixed; top: 0; bottom: 0; left: clamp(14px, 4vw, 56px); width: 2px; background: rgb(196 48 43 / .35); pointer-events: none; z-index: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); }
h1, h2 { font-family: var(--titre); font-weight: 700; line-height: 1.05; margin: 0 0 .6rem; }
h2 { font-size: clamp(2.1rem, 6vw, 3.2rem); }
p { margin: 0 0 1rem; }
main, .pied { position: relative; z-index: 1; }

/* Barre du haut */
.barre { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem clamp(1rem, 4vw, 2.5rem); background: rgb(239 230 204 / .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1.5px dashed rgb(29 47 111 / .25); }
.marque { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--encre); font: 700 1.6rem/1 var(--titre); }
.barre .marque { margin-right: auto; }
.langue { color: var(--bleu); text-decoration: none; font-size: 1rem; padding: .2rem .5rem; border: 1.5px dashed rgb(34 64 143 / .45); border-radius: 8px; }
.marque img { width: 32px; height: 32px; border-radius: 8px; }

/* Boutons à l'encre */
.boutons { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.4rem 0 1rem; }
.boutons.centre { justify-content: center; }
.bouton { display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1.3rem; border-radius: 14px 18px 12px 16px / 16px 12px 18px 14px; text-decoration: none;
  font: 400 1.25rem/1 var(--main); color: var(--papier-clair); background: var(--bleu); box-shadow: 0 4px 0 var(--encre), 0 10px 20px -8px rgb(29 47 111 / .6);
  transition: transform .15s cubic-bezier(.3, 1.6, .5, 1), box-shadow .15s; }
.bouton:hover { transform: translateY(-2px) rotate(-1deg); }
.bouton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.bouton.fantome { color: var(--encre); background: var(--papier-clair); box-shadow: inset 0 0 0 2px var(--encre), 0 4px 0 var(--encre); }
.bouton.petit { padding: .45rem .9rem; font-size: 1.05rem; }

.surtitre { margin: 0 0 .3rem; color: var(--rouge); font-size: 1.1rem; letter-spacing: .02em; }
.surtitre::before { content: '✎ '; }
.grand { font-size: clamp(1.25rem, 3vw, 1.5rem); }
.bleu { color: var(--bleu); font-weight: 700; }
.rouge { color: var(--rouge); font-weight: 700; }
.gras { font-size: 1.3rem; color: var(--rouge); }
.discret { color: var(--gris); font-size: 1rem; }
.etroit { max-width: 760px; margin-inline: auto; }

/* L'en-tête */
.une { padding: 0 0 clamp(2rem, 6vw, 4rem); }
.entete { width: 100%; max-height: 72svh; object-fit: cover; object-position: 50% 40%;
  -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.une-texte { max-width: 760px; margin: -3rem auto 0; padding-inline: clamp(1.4rem, 6vw, 2rem); text-align: center; position: relative; }
.une-texte .boutons { justify-content: center; }
.accroche { font: 700 clamp(2.2rem, 7vw, 3.6rem)/1.05 var(--titre); margin-bottom: .8rem; }
.souligne { color: var(--rouge); background: linear-gradient(transparent 70%, rgb(226 161 43 / .45) 70% 92%, transparent 92%); }
.chapeau { font-size: clamp(1.2rem, 3vw, 1.4rem); }
.promesses { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; list-style: none; margin: 0; padding: 0; color: var(--bleu); }
.promesses li::before { content: '✓ '; color: var(--rouge); font-weight: 700; }

/* Sections */
.bloc { position: relative; padding: clamp(3rem, 9vw, 6rem) clamp(1.4rem, 6vw, 3rem); }
.bloc + .bloc { border-top: 2px dashed rgb(29 47 111 / .18); }

/* L'essai */
.essai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(2rem, 6vw, 5rem); align-items: center; max-width: 1080px; margin-inline: auto; }
.etapes { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: .8rem; }
.etapes li { display: flex; gap: .8rem; align-items: flex-start; }
.etapes b { flex: none; width: 34px; height: 38px; display: grid; place-items: center; padding-top: 5px; color: #fff; font-size: 1.15rem;
  background: var(--bleu); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.note { color: var(--gris); font-size: 1.05rem; border-left: 3px solid var(--or); padding-left: .8rem; }

/* Le duel (même rendu que sur le site du studio) */
.duel { width: min(100%, 440px, calc((100svh - 220px) * .6667)); min-width: min(100%, 300px); margin-inline: auto; user-select: none; -webkit-user-select: none; }
.tapis { position: relative; border-radius: 10px; overflow: hidden; rotate: -.6deg;
  box-shadow: 0 1px 0 #d8cba8, 0 2px 0 #f4ecd6, 0 3px 0 #d8cba8, 0 24px 50px -20px rgb(80 60 20 / .45), inset 0 0 0 2px var(--encre); }
.tapis canvas { display: block; width: 100%; aspect-ratio: 12 / 18; touch-action: none; }
.tapis canvas.vise { cursor: crosshair; }
.couronnes { position: absolute; top: 50%; left: 50%; translate: -50% -50%; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .2rem .5rem; border-radius: 10px;
  background: rgb(251 246 230 / .92); box-shadow: 0 0 0 1.5px var(--encre); font: 700 .95rem/1.1 var(--main); pointer-events: none; }
.couronnes .r { color: var(--rouge); }
.couronnes .b { color: var(--bleu); border-top: 1px dashed rgb(29 47 111 / .4); padding-top: 2px; }
.bandeau { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; gap: .3rem; pointer-events: none; opacity: 0; background: rgb(246 239 220 / .75); }
.bandeau b { font: 700 clamp(2.4rem, 11vw, 3.4rem)/1 var(--main); rotate: -4deg; }
.bandeau span { font-size: 1.15rem; }
.bandeau.vu { animation: bandeau 4s forwards; }
.bandeau.gagne b { color: var(--bleu); }
.bandeau.perdu b { color: var(--rouge); }
@keyframes bandeau { 0% { opacity: 0; transform: scale(1.4); } 10% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
.table { display: grid; grid-template-columns: 52px 1fr; gap: .5rem; align-items: end; margin-top: .8rem; }
.suivante { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 400 .75rem/1 var(--main); color: var(--gris); }
.suivante canvas { width: 46px; height: 46px; border-radius: 8px; background: var(--papier-clair); box-shadow: 0 0 0 1.5px rgb(29 47 111 / .4); opacity: .8; }
.cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.carte { position: relative; padding: .25rem .2rem .3rem; border: 0; border-radius: 10px; cursor: pointer; background: var(--papier-clair); touch-action: manipulation;
  box-shadow: 0 0 0 2px var(--encre), 0 4px 0 var(--encre), 0 8px 14px -6px rgb(29 47 111 / .5); transition: transform .15s cubic-bezier(.3, 1.6, .5, 1), filter .2s;
  display: flex; flex-direction: column; align-items: center; color: var(--encre); font: 400 .78rem/1.05 var(--main); }
.carte canvas { width: 100%; aspect-ratio: 1; height: auto; }
.carte .nom { min-height: 2.1em; display: grid; place-items: center; text-align: center; }
.carte .cout { position: absolute; top: -8px; left: -6px; width: 24px; height: 28px; display: grid; place-items: center; padding-top: 4px;
  color: #fff; font: 700 .95rem/1 var(--main); background: var(--bleu); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: 0 0 0 2px var(--papier-clair); }
.carte.choisie { transform: translateY(-12px) rotate(-3deg) scale(1.06); box-shadow: 0 0 0 3px var(--or), 0 4px 0 var(--encre), 0 16px 24px -8px rgb(226 161 43 / .7); }
.carte.chere { filter: grayscale(.9) opacity(.6); }
.carte:active { transform: scale(.95); }
.encre { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; }
.chiffre { width: 30px; height: 34px; display: grid; place-items: center; padding-top: 4px; flex: none; color: #fff; font: 700 1.1rem/1 var(--main);
  background: var(--bleu); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.jauge { flex: 1; height: 16px; border-radius: 8px; background: var(--papier-clair); box-shadow: inset 0 0 0 1.5px var(--encre); overflow: hidden; --e: .5;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1.5px), rgb(29 47 111 / .35) calc(10% - 1.5px) 10%); }
.jauge i { display: block; height: 100%; width: calc(var(--e) * 100%); background: linear-gradient(#5a78d8, var(--bleu)); transition: width .1s linear; border-radius: 8px; }

/* L'histoire */
.histoire { text-align: center; overflow: hidden; }
.deco { position: absolute; mix-blend-mode: multiply; opacity: .75; pointer-events: none; }
.avion { width: 90px; top: 12%; left: 8%; animation: avion 6s ease-in-out infinite alternate; }
@keyframes avion { to { transform: translate(50px, -14px) rotate(-6deg); } }
.cerf { width: 80px; top: 14%; right: 8%; transform-origin: 50% 0; animation: cerf 4s ease-in-out infinite alternate; }
@keyframes cerf { from { rotate: -6deg; } to { rotate: 6deg; } }
.defile { margin-top: 2.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10% 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10% 90%, transparent); }
.piste { display: flex; align-items: center; justify-content: center; gap: clamp(.8rem, 3vw, 2rem); }
.piste img { width: clamp(52px, 11vw, 96px); mix-blend-mode: multiply; animation: sautille 1.6s ease-in-out infinite alternate; }
.piste img:nth-child(2n) { animation-delay: -.8s; }
.piste img:nth-child(3n) { animation-delay: -.4s; }
@keyframes sautille { to { transform: translateY(-8px) rotate(3deg); } }
.contre { font: 700 clamp(1.6rem, 5vw, 2.4rem)/1 var(--titre); color: var(--gris); rotate: -6deg; }

/* Les atouts */
.atouts { display: grid; gap: clamp(4rem, 10vw, 7rem); max-width: 1080px; margin-inline: auto; }
.atout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.atout.inverse { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.atout.inverse .telephone { order: -1; }
.telephone { margin: 0; justify-self: center; width: min(100%, 300px); padding: 10px; border-radius: 42px; background: #1a1a22; rotate: 2deg;
  box-shadow: 0 0 0 2px #3a3a48, 0 30px 60px -25px rgb(29 47 111 / .7); }
.atout.inverse .telephone { rotate: -2deg; }
.telephone img { border-radius: 32px; }
.modes { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.modes li { padding-left: 1.6rem; position: relative; }
.modes li::before { content: '★'; position: absolute; left: 0; color: var(--or); }
.gribouillis { width: min(100%, 320px); margin-top: .5rem; fill: none; stroke: var(--bleu); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 420; stroke-dashoffset: 420; animation: dessine 3.2s ease-in-out infinite; }
.gribouillis .lasso { stroke: var(--rouge); animation-delay: .8s; }
@keyframes dessine { 0% { stroke-dashoffset: 420; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* La galerie */
.galerie { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.5rem clamp(1.4rem, 6vw, 3rem) 1.5rem; margin-inline: calc(clamp(1.4rem, 6vw, 3rem) * -1); scrollbar-width: thin; }
.galerie img { flex: none; width: clamp(170px, 22vw, 230px); border-radius: 24px; scroll-snap-align: center; box-shadow: 0 0 0 6px #1a1a22, 0 18px 30px -16px rgb(29 47 111 / .6); margin: 6px; }
.galerie img:nth-child(odd) { rotate: -1.5deg; }
.galerie img:nth-child(even) { rotate: 1.5deg; }

/* La fin */
.fin { text-align: center; overflow: hidden; }
.fin .cerf { top: auto; bottom: 10%; }
.logo-fin { width: min(80%, 420px); margin: 0 auto 1.4rem; mix-blend-mode: multiply; }
.fin .grand { max-width: 620px; margin-inline: auto; }

.pied { padding: 2rem clamp(1.4rem, 6vw, 3rem) 3rem; text-align: center; color: var(--gris); font-size: 1rem; border-top: 2px dashed rgb(29 47 111 / .18); }
.pied b { color: var(--encre); }
.pied nav { margin-top: .4rem; }

@media (max-width: 860px) {
  .essai, .atout, .atout.inverse { grid-template-columns: 1fr; }
  .atout.inverse .telephone { order: 0; }
  .telephone { width: min(78%, 280px); }
  .essai-texte { text-align: left; }
  .deco { display: none; }
}
@media (max-width: 520px) {
  .piste img:nth-child(4), .piste img:nth-child(9) { display: none; }
  .une-texte { margin-top: -1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .gribouillis { stroke-dashoffset: 0; }
}