/* Le Déballage : la table de tri. Carton, scotch, marqueur, pancartes fluo. */
:root{
  --kraft:#c9a27a; --kraft-clair:#e2c8a4; --kraft-fonce:#a67c52; --kraft-ombre:#7f5d3c;
  --papier:#fbf5e9; --papier-2:#f3e9d4; --encre:#1c1712; --encre-2:#4a3d30;
  --fluo:#ffe600; --rose:#ff3d8b; --vert:#0a6b49; --rouge:#b3261e; --scotch:rgba(226,190,120,.72);
  --ombre:0 1px 0 rgba(255,255,255,.25) inset,0 10px 24px -10px rgba(50,30,10,.55);
  --titre:"Saira Stencil One","Arial Black",Impact,sans-serif;
  --marqueur:"Permanent Marker","Comic Sans MS",cursive;
  --texte:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Courier Prime","Courier New",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--kraft);color:var(--encre);font:400 1.0625rem/1.65 var(--texte);overflow-x:hidden;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .16 0 0 0 0 .08 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg,rgba(90,60,30,.07) 0 2px,transparent 2px 7px)}
img,svg{max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--rose)}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:2px}
.lien-evitement{position:absolute;left:-999px;top:0;background:var(--fluo);padding:.6rem 1rem;z-index:100}
.lien-evitement:focus{left:1rem;top:1rem}
h1,h2,h3{line-height:1.1;margin:0 0 .6em}
h1,h2{font-family:var(--titre);font-weight:400;letter-spacing:.01em}
h3{font-weight:800;font-size:1.25rem;line-height:1.25}
p{margin:0 0 1em}
.cadre{width:min(1180px,100% - 32px);margin-inline:auto}

/* rouleau de scotch = progression de lecture */
#rouleau{position:fixed;top:0;left:0;height:7px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--scotch);box-shadow:0 1px 2px rgba(0,0,0,.25);z-index:60;backdrop-filter:brightness(.92)}

/* bandeau : pas officiel */
.pas-officiel{background:var(--encre);color:var(--papier);font-size:.875rem;line-height:1.4;text-align:center;padding:.5rem 1rem}
.pas-officiel strong{color:var(--fluo)}
.pas-officiel a{color:var(--papier)}

/* en-tête */
.entete{position:relative;z-index:30;padding:1rem 0 .4rem}
.entete .cadre{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between}
.logo{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;transform:rotate(-1.2deg)}
.logo-boite{width:50px;height:50px;flex:none}
.logo b{display:block;font:400 1.75rem/1 var(--titre)}
.logo small{display:block;font:400 .95rem/1.1 var(--marqueur);color:var(--encre-2)}
.onglets{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:0;padding:0}
.onglets a{display:block;padding:.45rem .8rem .35rem;background:var(--kraft-clair);border:2px solid var(--encre);border-bottom-width:4px;border-radius:7px 7px 2px 2px;font-weight:700;font-size:.94rem;text-decoration:none;transition:transform .15s,background .15s}
.onglets a:hover,.onglets a[aria-current=page]{background:var(--fluo);transform:translateY(-3px)}
.menu-bouton{display:none;background:var(--fluo);border:2px solid var(--encre);border-bottom-width:4px;border-radius:6px;font:700 1rem var(--texte);padding:.45rem .9rem;color:var(--encre);cursor:pointer}

/* scène d'accueil : le déballage */
.scene{position:relative;padding:1.2rem 0 2.5rem;overflow:hidden}
.scene-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2rem;align-items:center}
.scene h1{font-size:clamp(2.5rem,6.2vw,5.1rem);line-height:.98;margin:.25em 0 .35em;color:var(--encre)}
.scene h1 em{font:400 .62em/1 var(--marqueur);display:inline-block;background:var(--fluo);padding:.12em .35em .05em;transform:rotate(-2deg)}
.surtitre{font:400 1.2rem/1.2 var(--marqueur);margin:0}
.chapo{font-size:1.2rem;max-width:36em}
.boite{position:relative;width:min(100%,430px);aspect-ratio:1/.84;margin:3rem auto 0;perspective:900px}
.boite-face{position:absolute;inset:18% 0 0;background:linear-gradient(180deg,#d2ad85,#b98f64);border:3px solid var(--encre);border-radius:4px;box-shadow:0 26px 36px -18px rgba(40,20,5,.75);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:3;padding:1rem}
.boite-face::before{content:"";position:absolute;left:43%;right:43%;top:0;height:42%;background:var(--scotch);border-inline:1px solid rgba(90,60,20,.3)}
.boite-face b{font:400 clamp(1.9rem,5vw,3rem)/1 var(--titre);position:relative}
.boite-face span{font:700 .85rem/1.3 var(--mono);margin-top:.5rem;position:relative}
.rabat{position:absolute;top:18%;height:34%;width:50%;background:linear-gradient(180deg,#a67c52,#c39b70);border:3px solid var(--encre);transform-origin:50% 0;transition:transform 1s cubic-bezier(.3,1.5,.5,1);z-index:2}
.rabat.g{left:0;transform:rotateX(0)}.rabat.d{right:0}
.ouverte .rabat.g{transform:rotateX(158deg) rotateZ(-5deg)}
.ouverte .rabat.d{transform:rotateX(158deg) rotateZ(6deg);transition-delay:.12s}
.jaillit svg{display:block;width:100%;height:auto;filter:url(#crayon) drop-shadow(0 6px 4px rgba(50,30,10,.35))}
.boite-pancarte{position:absolute;right:-6%;bottom:-3%;z-index:5;width:150px;font-size:1rem;padding:1.6rem 1.1rem}
.jaillit{position:absolute;left:50%;top:32%;width:82px;margin-left:-41px;z-index:4;opacity:0;transition:transform .9s cubic-bezier(.2,1.5,.5,1),opacity .2s}
.ouverte .jaillit{opacity:1}
.ouverte .j1{transform:translate(-132px,-112px) rotate(-14deg);transition-delay:.25s}
.ouverte .j2{transform:translate(-44px,-150px) rotate(8deg);transition-delay:.35s}
.ouverte .j3{transform:translate(52px,-146px) rotate(-6deg);transition-delay:.45s}
.ouverte .j4{transform:translate(134px,-100px) rotate(14deg);transition-delay:.55s}

/* tampons et pancartes */
.pancarte{--c:var(--fluo);display:inline-block;background:var(--c);color:var(--encre);font:400 1.15rem/1.15 var(--marqueur);padding:1.5rem 1.5rem;clip-path:polygon(50% 0,60% 9%,73% 4%,78% 17%,92% 17%,90% 31%,100% 40%,93% 51%,100% 62%,88% 69%,89% 84%,75% 83%,68% 96%,56% 89%,44% 100%,35% 88%,22% 95%,18% 81%,4% 80%,8% 66%,0 55%,8% 45%,0 32%,12% 27%,11% 12%,26% 14%,33% 2%,44% 9%);text-align:center;transform:rotate(-7deg)}
.tampon{display:inline-block;border:3px solid currentColor;color:var(--rouge);font:400 1.05rem/1 var(--titre);padding:.35rem .6rem .25rem;border-radius:4px;transform:rotate(-4deg);opacity:.9}
.tampon.vert{color:var(--vert)}
.marqueur{font-family:var(--marqueur)}

/* le trieur */
.trieur{position:relative;background:var(--papier);border:3px solid var(--encre);box-shadow:var(--ombre);padding:1.2rem 1.3rem 1.4rem;margin:1rem 0 1.5rem}
.trieur::before,.trieur::after{content:"";position:absolute;width:112px;height:30px;background:var(--scotch);top:-14px;transform:rotate(-3deg)}
.trieur::before{left:8%}.trieur::after{right:8%;transform:rotate(3deg)}
.trieur label{display:block;font:400 1.3rem/1.2 var(--marqueur);margin-bottom:.5rem}
.trieur-champ{position:relative}
.trieur input{width:100%;font:700 1.15rem var(--mono);padding:.8rem .9rem;border:3px solid var(--encre);border-radius:3px;background:#fff;color:var(--encre)}
.suggestions{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:100%;background:#fff;border:3px solid var(--encre);border-top:0;z-index:20;max-height:280px;overflow:auto}
.suggestions li{padding:.55rem .9rem;cursor:pointer;font-weight:600}
.suggestions li[aria-selected=true],.suggestions li:hover{background:var(--fluo)}
.exemples{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0 0;padding:0;list-style:none}
.exemples button{font:600 .92rem var(--texte);background:var(--papier-2);color:var(--encre);border:2px dashed var(--encre);border-radius:3px;padding:.28rem .6rem;cursor:pointer}
.exemples button:hover{background:var(--fluo);border-style:solid}

/* l'étiquette d'expédition */
.etiquette{position:relative;background:#fff;border:3px solid var(--encre);font-family:var(--mono);margin-top:1.1rem;animation:colle .35s cubic-bezier(.2,1.6,.5,1);box-shadow:var(--ombre)}
@keyframes colle{from{transform:scale(1.08) rotate(2deg);opacity:0}to{transform:none;opacity:1}}
.etiquette header{display:flex;justify-content:space-between;align-items:center;gap:.6rem;border-bottom:3px solid var(--encre);padding:.5rem .8rem;font-weight:700;background:var(--papier-2)}
.etiquette h3{font:400 1.7rem/1.1 var(--titre);margin:0}
.etiquette dl{margin:0;display:grid;grid-template-columns:auto 1fr}
.etiquette dt{font-weight:700;padding:.5rem .8rem;border-bottom:1px solid #bbb;text-transform:uppercase;font-size:.82rem}
.etiquette dd{margin:0;padding:.5rem .8rem;border-bottom:1px solid #bbb;font-family:var(--texte)}
.etiquette dl>:nth-last-child(-n+2){border-bottom:0}
.etiquette .code-barres{height:26px;background:repeating-linear-gradient(90deg,var(--encre) 0 2px,transparent 2px 5px,var(--encre) 5px 9px,transparent 9px 11px,var(--encre) 11px 12px,transparent 12px 17px);margin:0 .8rem .6rem}

/* la table : objets à cliquer */
.table-objets{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:1rem;margin:1.2rem 0;padding:0;list-style:none}
.objet{position:relative;display:block;width:100%;background:none;border:0;padding:.3rem;font:inherit;color:inherit;cursor:pointer;text-align:center;transition:transform .2s;text-decoration:none}
.table-objets li:nth-child(3n+1) .objet{transform:rotate(-3deg)}
.table-objets li:nth-child(3n+2) .objet{transform:rotate(2deg)}
.objet:hover,.objet:focus-visible{transform:translateY(-8px) rotate(0)!important}
.objet svg{display:block;height:92px;width:auto;margin:0 auto .2rem;filter:url(#crayon) drop-shadow(0 7px 4px rgba(50,30,10,.35))}
.objet span{display:inline-block;background:#fff;border:2px solid var(--encre);border-radius:2px 12px 12px 2px;padding:.1rem .6rem .1rem .5rem;font:700 .86rem/1.3 var(--mono)}
.objet.mystere span{background:var(--rose);color:#000}

/* cartons : blocs de section */
.carton{position:relative;margin:2.8rem 0}
.carton-num{display:inline-block;font:700 .85rem var(--mono);background:var(--encre);color:var(--papier);padding:.15rem .6rem;margin-bottom:.5rem}
.carton h2{font-size:clamp(1.9rem,4.2vw,3.1rem);max-width:21em}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;list-style:none;margin:0;padding:0}
.fiche{position:relative;display:block;height:100%;background:var(--papier);border:3px solid var(--encre);padding:1.1rem 1.1rem 1rem;text-decoration:none;box-shadow:var(--ombre);transition:transform .2s,background .2s}
.grille>li:nth-child(odd) .fiche{transform:rotate(-.7deg)}
.grille>li:nth-child(even) .fiche{transform:rotate(.6deg)}
a.fiche:hover{transform:translateY(-5px) rotate(0)!important;background:#fff}
.fiche::before{content:"";position:absolute;width:78px;height:22px;background:var(--scotch);top:-12px;left:50%;margin-left:-39px;transform:rotate(-2deg)}
.fiche h3{margin-bottom:.35rem}
.fiche p{margin:0;font-size:1rem}
.fiche .chiffre{display:block;font:400 2.2rem/1 var(--titre)}
.fiche .suite{display:inline-block;margin-top:.5rem;font:700 .9rem var(--mono);text-decoration:underline}

/* bloc sombre : le nid */
.grenier{position:relative;background:#1f1812;color:var(--papier);border:3px solid var(--encre);padding:clamp(1.3rem,4vw,2.6rem);margin:3rem 0;overflow:hidden}
.grenier::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 300px at var(--lx,74%) var(--ly,30%),rgba(255,214,120,.26),transparent 70%);pointer-events:none}
.grenier>*{position:relative}
.grenier-grille{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2rem;align-items:center}
.grenier h2{color:var(--fluo);font-size:clamp(1.9rem,4.2vw,3rem)}
.grenier a{color:#fff}
.grenier select{width:100%;font:700 1.05rem var(--mono);padding:.7rem;background:#fff;color:var(--encre);border:3px solid var(--fluo)}
.grenier label{display:block;font:400 1.15rem var(--marqueur);margin-bottom:.4rem;color:var(--fluo)}
.bouton{display:inline-block;background:var(--fluo);color:var(--encre)!important;border:3px solid var(--encre);border-bottom-width:6px;border-radius:5px;padding:.55rem 1rem .45rem;font:800 1.02rem/1.25 var(--texte);text-decoration:none;box-shadow:0 0 0 2px var(--fluo);cursor:pointer}
.bouton:hover{transform:translateY(-2px);background:#fff}
.nid-svg{width:100%;max-width:260px;margin:auto;display:block}
.nids-liens{columns:3 200px;gap:1.2rem;margin:1rem 0 0;padding:0;list-style:none;font-size:.97rem}
.nids-liens li{break-inside:avoid;margin-bottom:.25rem}

/* carte découpée */
.carte-wrap{background:var(--papier);border:3px dashed var(--encre);padding:.8rem;box-shadow:var(--ombre)}
.carte-svg{display:block;width:100%;height:auto;max-height:820px}
.carte-grille{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:1.6rem;align-items:start}
.carte-cote h3{font:400 1.25rem var(--marqueur)}
.carte-svg path{fill:var(--kraft-clair);stroke:var(--encre);stroke-width:.9;stroke-dasharray:3 2;transition:fill .15s}
.carte-svg a:hover path,.carte-svg a:focus path{fill:var(--fluo)}
.carte-svg path.sans{fill:#ece0c9;stroke:#a79a84}
.carte-svg circle.dech{fill:var(--vert);stroke:#fff;stroke-width:1.2}
.carte-svg text{font:700 13px var(--texte);fill:var(--encre);paint-order:stroke;stroke:#fbf5e9;stroke-width:3px;pointer-events:none}
.legende{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.92rem;margin:.6rem 0 0}
.legende i{display:inline-block;width:13px;height:13px;border-radius:50%;background:var(--vert);margin-right:.35rem;vertical-align:-1px}
.legende i.c{border-radius:0;background:var(--kraft-clair);border:1.5px dashed var(--encre)}

/* page article : feuille scotchée */
.page-haut{padding:1rem 0 .4rem}
.ariane{font:700 .85rem var(--mono);margin-bottom:.6rem}
.ariane a{text-decoration:underline}
.ariane ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1rem .45rem}
.ariane li+li::before{content:"› ";margin-right:.1rem}
.page-haut h1{font-size:clamp(2.1rem,5.2vw,4rem);max-width:19em;margin-bottom:.3em}
.page-haut .chapo{max-width:44em}
.mise-en-page{display:grid;grid-template-columns:250px minmax(0,1fr);gap:2rem;align-items:start;padding-bottom:3rem}
.mise-en-page.sans-sommaire{grid-template-columns:minmax(0,860px);justify-content:center}
.bordereau{position:sticky;top:18px;background:#fff;border:3px solid var(--encre);font-family:var(--mono);font-size:.88rem;max-height:calc(100vh - 36px);overflow:auto}
.bordereau b{display:block;background:var(--encre);color:var(--papier);padding:.3rem .6rem}
.bordereau ol{margin:0;padding:.4rem .5rem .6rem 1.9rem}
.bordereau li{margin:.3rem 0;line-height:1.25}
.bordereau a{text-decoration:none}
.bordereau a:hover{text-decoration:underline}
.feuille{position:relative;background:var(--papier);padding:clamp(1.2rem,4vw,2.8rem);box-shadow:0 18px 34px -16px rgba(40,20,5,.65);min-width:0}
.feuille::before,.feuille::after{content:"";position:absolute;width:120px;height:30px;background:var(--scotch);top:-13px}
.feuille::before{left:-22px;transform:rotate(-31deg);top:2px}
.feuille::after{right:-22px;transform:rotate(31deg);top:2px}
.feuille h2{font-size:clamp(1.55rem,3.2vw,2.3rem);margin-top:1.6em;scroll-margin-top:16px}
.feuille h2:first-child{margin-top:0}
.feuille h3{margin-top:1.3em}
.feuille ul,.feuille ol{padding-left:1.3em;margin:0 0 1em}
.feuille li{margin-bottom:.35em}
.feuille a{color:#064b33;font-weight:600}
.feuille figure{margin:1.5rem 0;background:#fff;padding:.6rem .6rem .4rem;border:1px solid #cdbfa5;box-shadow:0 8px 14px -8px rgba(40,20,5,.55);transform:rotate(-.6deg);max-width:680px}
.feuille figure:nth-of-type(even){transform:rotate(.7deg)}
.feuille figure img{display:block;width:100%;height:auto}
.feuille figcaption{font:400 .86rem/1.35 var(--mono);padding-top:.4rem}
.reponse{background:var(--fluo);border:3px solid var(--encre);padding:1rem 1.2rem;margin:0 0 1.6rem;font-weight:500}
.reponse b:first-child{font:400 1.15rem var(--marqueur);display:block;margin-bottom:.2rem}
.attention{border:3px solid var(--rouge);background:#fff4ef;padding:.9rem 1.1rem;margin:1.2rem 0}
.attention b:first-child{font:400 1.05rem var(--titre);color:var(--rouge);display:block;margin-bottom:.2rem}
.bon-plan{border:3px dashed var(--vert);background:#f0f8ef;padding:.9rem 1.1rem;margin:1.2rem 0}
.nid-encart{background:#1f1812;color:var(--papier);padding:1.1rem 1.3rem;margin:1.6rem 0;border-left:10px solid var(--fluo)}
.nid-encart b:first-child{font:400 1.2rem var(--marqueur);color:var(--fluo);display:block;margin-bottom:.2rem}
.feuille .nid-encart a{color:#fff}
.defile-tableau{overflow-x:auto;margin:1.2rem 0}
table{border-collapse:collapse;width:100%;background:#fff;font-size:.97rem}
th,td{border:2px solid var(--encre);padding:.5rem .6rem;text-align:left;vertical-align:top}
th{background:var(--encre);color:var(--papier);font:700 .9rem var(--mono)}
.faq details{background:#fff;border:2px solid var(--encre);margin:.55rem 0}
.faq summary{cursor:pointer;font-weight:700;padding:.65rem .8rem}
.faq details[open] summary{background:var(--papier-2)}
.faq details>div{padding:.7rem .9rem .2rem}
.sources{font-size:.9rem}
.sources li{overflow-wrap:anywhere}
.date-maj{font:700 .85rem var(--mono);color:var(--encre-2)}
.voisines{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:.5rem 0 1rem}
.voisines a{display:inline-block;background:var(--kraft-clair);border:2px solid var(--encre);border-radius:2px 12px 12px 2px;padding:.1rem .7rem .1rem .5rem;font-size:.93rem;text-decoration:none;color:var(--encre)}
.voisines a:hover{background:var(--fluo)}

/* pied : bordereau d'expédition */
.pied{background:var(--encre);color:var(--papier);margin-top:3rem;padding:2.2rem 0 1.4rem;font-size:.97rem}
.pied a{color:var(--papier)}
.pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:1.6rem}
.pied h2{font:400 1.15rem var(--marqueur);color:var(--fluo);margin:0 0 .5rem}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin:.2rem 0}
.pied-bas{border-top:2px dashed #7b6a58;margin-top:1.6rem;padding-top:.9rem;font:400 .85rem/1.5 var(--mono)}

@media(max-width:900px){
  .scene-grille,.grenier-grille,.carte-grille{grid-template-columns:1fr}
  .boite-pancarte{right:-4%;width:124px;font-size:.88rem;padding:1.3rem .9rem}
  .boite{margin-top:5.5rem;width:min(82%,340px)}
  .ouverte .j1{transform:translate(-105px,-80px) rotate(-14deg)}
  .ouverte .j2{transform:translate(-36px,-118px) rotate(8deg)}
  .ouverte .j3{transform:translate(40px,-116px) rotate(-6deg)}
  .ouverte .j4{transform:translate(106px,-74px) rotate(14deg)}
  .mise-en-page{grid-template-columns:1fr}
  .bordereau{position:static;max-height:none}
  .pied-grille{grid-template-columns:1fr 1fr}
  .feuille::before{left:-12px}.feuille::after{right:-12px}
}
@media(max-width:720px){
  .menu-bouton{display:block}
  .onglets{display:none;width:100%;flex-direction:column}
  .onglets.ouvert{display:flex}
  .etiquette dl{grid-template-columns:1fr}
  .etiquette dt{border-bottom:0;padding-bottom:0}
  .pied-grille{grid-template-columns:1fr}
  .table-objets{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
  .objet svg{height:68px}
  .objet span{font-size:.74rem;padding:.08rem .35rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{#rouleau,.pas-officiel,.entete,.bordereau,.pied{display:none}body{background:#fff}.feuille{box-shadow:none}}
.feuille td a[href^="tel:"]{white-space:nowrap}