/* promptparty.fr : feuille commune aux écrans participant, animateur, projection et livret. */

@font-face {
  font-family: "Bricolage";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url("fonts/bricolage.woff2") format("woff2-variations");
}

:root {
  --encre: #10213a;
  --encre-2: #1d3458;
  --encre-3: #2c4a76;
  --ciel: #8fd0ff;
  --papier: #f3f6fa;
  --blanc: #ffffff;
  --trait: #d5dde8;
  --gris: #5a6b82;
  --postit: #ffd84d;
  --postit-clair: #fff2b8;
  --postit-ombre: #e3b900;
  --lien: #0969da;
  --erreur: #b42331;
  --succes: #17784a;
  --rayon: 14px;
  --police: "Bricolage", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--encre);
  background: var(--papier);
  font-variation-settings: "wdth" 100;
}

a { color: var(--lien); text-decoration: none; }
a:hover { text-decoration: none; color: #0550ae; }

:focus-visible { outline: 3px solid var(--lien); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 750; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-stretch: 85%; }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); font-stretch: 90%; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.page { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.etroit { max-width: 640px; margin: 0 auto; padding: 0 16px; }

/* En-tête de page, modèle des nouvelles pages NextStart : bandeau bleu nuit arrondi. */
.bandeau {
  margin: 16px auto 0;
  max-width: 1120px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--encre) 0%, var(--encre-2) 62%, var(--encre-3) 100%);
  color: var(--blanc);
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 56px);
}
.bandeau .surtitre {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--ciel); font-weight: 600; font-size: .95rem; margin-bottom: .9em;
}
.bandeau .surtitre::before {
  content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--ciel);
}
.bandeau h1 { color: var(--blanc); max-width: 20ch; }
.bandeau .chapo {
  border-left: 3px solid var(--ciel);
  padding-left: 1em; margin: 1.2em 0 0;
  max-width: 60ch; color: #dbe6f5; font-size: 1.1rem;
}
.bandeau a { color: var(--ciel); }

/* Barre de marque discrète en haut des écrans de jeu. */
.barre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; max-width: 1120px; margin: 0 auto;
}
.marque { font-weight: 800; font-stretch: 80%; font-size: 1.2rem; color: var(--encre); letter-spacing: -0.01em; }
.marque span { background: var(--postit); padding: 0 .2em; border-radius: 4px; }
.barre .infos { color: var(--gris); font-size: .9rem; text-align: right; }

/* Formulaires */
label { display: block; font-weight: 600; margin: 1em 0 .35em; }
.aide { color: var(--gris); font-size: .9rem; font-weight: 400; }
input[type=text], input[type=number], textarea, select {
  width: 100%; font: inherit; color: var(--encre);
  background: var(--blanc); border: 1.5px solid var(--trait); border-radius: 10px;
  padding: .7em .85em;
}
textarea { min-height: 9em; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { border-color: var(--encre-3); outline: none; box-shadow: 0 0 0 3px rgba(9, 105, 218, .18); }

button, .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  font: inherit; font-weight: 650; cursor: pointer;
  border: 0; border-radius: 999px; padding: .7em 1.35em;
  background: var(--encre); color: var(--blanc);
  transition: transform .08s ease, background-color .15s ease;
}
button:hover, .bouton:hover { background: var(--encre-2); color: var(--blanc); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondaire, .bouton.secondaire { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--trait); }
button.secondaire:hover { background: var(--blanc); }
button.jaune { background: var(--postit); color: var(--encre); }
button.jaune:hover { background: #ffcf1f; }
button.petit { padding: .4em .85em; font-size: .9rem; }
button.danger { background: transparent; color: var(--erreur); box-shadow: inset 0 0 0 1.5px #f0c4c9; }

.message { border-radius: 10px; padding: .75em 1em; margin: 1em 0; font-size: .95rem; }
.message.erreur { background: #fdecee; color: var(--erreur); }
.message.succes { background: #e6f5ec; color: var(--succes); }
.message:empty { display: none; }

.carte {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: clamp(18px, 3vw, 28px);
}

.muet { color: var(--gris); }
.cache { display: none !important; }
.ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.espace { justify-content: space-between; }

/* Code de partie : le ticket jaune. */
.ticket {
  display: inline-block; background: var(--postit); color: var(--encre);
  font-weight: 800; font-stretch: 75%; letter-spacing: .08em;
  padding: .05em .4em; border-radius: 8px;
}

/* Minuteur */
.minuteur { font-weight: 800; font-stretch: 75%; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.minuteur.urgent { color: var(--erreur); }
.jauge { height: 8px; border-radius: 99px; background: var(--trait); overflow: hidden; }
.jauge > i { display: block; height: 100%; background: var(--postit-ombre); border-radius: inherit; transition: width 1s linear; }

/* Étapes du cycle (Pratiquer, Observer, Conceptualiser, Transférer) : vraie séquence. */
.cycle { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.cycle li {
  font-size: .85rem; font-weight: 600; padding: .3em .75em; border-radius: 99px;
  color: var(--gris); box-shadow: inset 0 0 0 1.5px var(--trait);
}
.cycle li.fait { color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre-3); }
.cycle li.actif { background: var(--encre); color: var(--blanc); box-shadow: none; }

/* Le mur de post-its : seul endroit où l'interface se permet du jeu. */
.mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; padding: 0; margin: 0; list-style: none; }
.postit {
  position: relative; background: var(--postit-clair); color: var(--encre);
  border-radius: 3px 3px 14px 3px; padding: 16px 16px 14px;
  box-shadow: 0 1px 0 rgba(16,33,58,.06), 0 10px 18px -12px rgba(16,33,58,.35);
  transform: rotate(var(--penche, 0deg));
  display: flex; flex-direction: column; gap: 10px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.postit .texte { font-size: 1rem; line-height: 1.45; }
.postit .resultat { font-size: .88rem; color: #4d4426; border-top: 1px dashed #d9c77a; padding-top: 8px; }
.postit .pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.postit.vote { background: var(--postit); box-shadow: 0 0 0 3px var(--encre), 0 10px 18px -12px rgba(16,33,58,.45); }
.postit.mien { background: #eef2f7; }
.postit .numero { font-weight: 800; font-stretch: 75%; color: #8c7a2b; }
.pastille { font-size: .8rem; font-weight: 650; padding: .2em .65em; border-radius: 99px; background: rgba(16,33,58,.08); }

/* Podium */
.podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.podium li { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px 18px; }
.podium .rang { grid-row: span 2; font-weight: 800; font-stretch: 75%; font-size: 2.6rem; line-height: 1; color: var(--encre); }
.podium li:first-child { background: var(--postit-clair); border-color: var(--postit-ombre); }
.podium .auteur { font-weight: 700; }
.podium .prompt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .97rem; }

.retenir { margin: 0; padding-left: 1.2em; }
.retenir li { margin: .25em 0; }

.pied-page { color: var(--gris); font-size: .9rem; padding: 40px 16px 32px; text-align: center; }
.pied-page a { color: var(--lien); }

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