/* Mur à idées: one screen of wall. In the middle, the torn paper you write on; around it, everyone's ideas, each on a
   torn scrap of paper held by a piece of tape, sized by its text. Common base (colours, fonts, buttons): ../assets/charte/charte.css. */
.mur{--papier:#fffdf6;--scotch:rgba(222,205,156,.78);--note:clamp(15px,calc(.8vw + 6px),22px);
  position:relative;height:100%;overflow:hidden;background:var(--jg-papier)}
.titre{position:absolute;top:max(12px,env(safe-area-inset-top));left:16px;z-index:6;margin:0;font-size:clamp(38px,3.8vw,54px);line-height:1}
.fermer{position:absolute;top:max(10px,env(safe-area-inset-top));right:16px;z-index:6}

/* A paper: the shadow sits on the outer element, so it follows the torn edges cut into the sheet inside. */
.papier{filter:drop-shadow(0 1px 1px rgba(23,36,65,.14)) drop-shadow(0 7px 9px rgba(23,36,65,.13))}
.feuille{position:relative;display:block;padding:.5em .75em .55em;background:var(--papier);color:var(--jg-encre);
  font:700 1em/1.05 var(--jg-manuscrit);letter-spacing:.02em;text-align:center;overflow-wrap:anywhere;text-wrap:balance}
/* Tape: a strip with frayed ends across the top edge. */
.scotch{position:absolute;left:50%;top:-.42em;width:3.2em;height:.95em;background:var(--scotch);
  clip-path:polygon(0 12%,5% 0,95% 0,100% 14%,96% 32%,100% 52%,95% 72%,100% 90%,94% 100%,6% 100%,0 86%,4% 66%,0 46%,5% 28%);
  transform:translateX(-50%) rotate(var(--scotch-penche,-3deg))}

/* The ideas on the wall: placed by the share of the wall's width and height of their centre. */
.idees{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.idees .papier{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:max-content;font-size:var(--note);
  transform:translate(-50%,-50%) rotate(var(--tilt,0deg))}
.idees .feuille{max-width:11em} /* up to 280 characters: wider papers rather than tall columns */
.idees .nouveau{animation:pose .4s ease-out}
@keyframes pose{from{opacity:0;scale:1.25}}
/* Your own ideas stay above the others (their × always reachable) and can be dragged anywhere; the one in your hand lifts a little. */
.idees .mien{z-index:2;cursor:grab;touch-action:none;user-select:none}
.idees .prise{z-index:3;cursor:grabbing;filter:drop-shadow(0 2px 2px rgba(23,36,65,.16)) drop-shadow(0 16px 18px rgba(23,36,65,.2))}
/* The × on your own papers takes them off the wall (a 44 px touch area around a 28 px button). */
.idees .retirer{position:absolute;top:-10px;right:-10px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:2px solid var(--jg-marine);
  border-radius:50%;background:var(--jg-papier);color:var(--jg-marine);cursor:pointer}
.idees .retirer::before{content:"";position:absolute;inset:-8px}
.idees .retirer svg{width:13px;height:13px}
.idees .retirer:hover{background:#eef1ff}

/* The paper being written: bigger, in the middle, above the wall. */
.ecrire{position:absolute;left:50%;top:50%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:14px;
  width:min(560px,calc(100% - 32px));transform:translate(-50%,-50%)}
.papier--ecrire{position:relative;font-size:clamp(24px,2.1vw,31px);rotate:-1.5deg}
.papier--ecrire .feuille{padding:.55em .8em .6em}
.papier--ecrire textarea{display:block;width:7em;height:1.1em;margin:0;padding:0;border:0;background:none;resize:none;overflow:hidden;
  color:inherit;font:inherit;line-height:1.1;letter-spacing:inherit;text-align:center}
.papier--ecrire textarea:focus-visible{outline:none} /* like every field of the charter: only the caret shows it */
.papier--ecrire textarea::placeholder{color:#9aa0ab;opacity:1}
.mesure{position:absolute;left:0;top:0;visibility:hidden;white-space:pre;font:inherit;letter-spacing:inherit;pointer-events:none}
.erreur{margin:0;min-height:1.4em;color:var(--jg-rate);font-weight:800;text-align:center;text-wrap:balance}

/* « Retirer ton idée ? »: title, one line of explanation, then two buttons of the same width (as Quitter in Guess the Number). */
.confirmation{width:min(380px,calc(100% - 32px));padding:30px 28px 26px;border:var(--jg-contour);border-radius:22px;box-shadow:var(--jg-ombre);text-align:center}
.confirmation[open]{display:flex;flex-direction:column;align-items:center}
.confirmation::backdrop{background:rgba(23,36,65,.35)}
.confirmation .consigne{margin:0;font:800 22px/1.2 var(--jg-police)}
.confirmation .aide{margin:10px 0 0;color:var(--jg-gris);font-size:15px;line-height:1.45}
.confirmation .ligne{display:flex;justify-content:center;gap:10px;width:100%;margin-top:24px}
.confirmation .ligne .jg-bouton{flex:1;max-width:150px}

/* Phones (portrait, or landscape and short): no title at the top, the wall gets the whole screen. The title stays for screen
   readers, and the closing × stays on every screen (Jamel's request of 1 November 2026, which replaces its removal on phones). */
@media(max-width:760px),(pointer:coarse) and (max-height:520px){
  .titre{width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}