/* Peas'Up — le déroulé d'un défi côté participant, repris du POC (sections « aperçu »,
   « mobile », « opt », « échelle », « sourires » de public/assets/app.css). Une page à
   part, sans la coquille du back-office : c'est l'application participante qu'on montre,
   pensée pour le téléphone — barre d'action basse, cibles de 44 px, zones sûres iOS. */

@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url('/polices/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url('/polices/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url('/polices/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: Rubik; font-weight: 400; font-display: swap; src: url('/polices/rubik-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: Rubik; font-weight: 500; font-display: swap; src: url('/polices/rubik-latin-500-normal.woff2') format('woff2'); }

:root {
    --green: #335533; --green-dk: #1d301d; --green-vif: #79cb43;
    --pea: #c8e296; --pea-lt: #eef6e8;
    --cream: #fcf3d9; --cream-2: #f4f1e4; --yellow: #f9c645; --coral: #f0907a;
    --ink: #1d301d; --body: #3d4d3d; --muted: #6c7d6c;
    --line: rgba(51, 85, 51, .13); --white: #fff;
    --shadow: 0 2px 12px rgba(29, 48, 29, .06);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--body); font: 15px/1.5 Rubik, system-ui, sans-serif; }
h1, h2, h3 { font-family: Poppins, sans-serif; margin: 0; color: var(--green-dk); letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { max-width: 100%; }
.sp { flex: 1; }
.row { display: flex; align-items: center; gap: 12px; }
.muted { color: var(--muted); }
.petit { font-size: 12.5px; }

.btn { border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 600; font-family: Poppins; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.btn.p { background: var(--green); color: #fff; }
.btn.s { background: var(--white); color: var(--green-dk); border: 1px solid var(--line); }
.btn.y { background: var(--yellow); color: var(--green-dk); }
.btn.sm { padding: 6px 13px; font-size: 13px; }
.btn.large { width: 100%; justify-content: center; margin: 14px 0; }
.tag { display: inline-flex; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 500; background: var(--pea); color: var(--green-dk); }
/* Barre d'avancement : un <progress> (macro `barre`, templates/_ui.html.twig). */
.bar { --fond: var(--pea-lt); --plein: var(--green); appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--fond); overflow: hidden; margin-bottom: 16px; }
.bar::-webkit-progress-bar { background: var(--fond); }
.bar::-webkit-progress-value { background: var(--plein); border-radius: 999px; }
.bar::-moz-progress-bar { background: var(--plein); border-radius: 999px; }
.note { display: flex; gap: 9px; border-radius: 12px; padding: 10px 13px; font-size: 13px; background: #fdf0ec; color: #a2543f; }
.note > i { margin-top: 3px; }
.note a { text-decoration: underline; }

/* ---------- en-têtes ---------- */
.appbar { background: var(--green-dk); padding: 12px 0; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.appbar .row, .bandeau .row { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.appbar img { height: 26px; }
.appbar .quitter { color: #8fa38f; margin-left: 16px; font-size: 18px; }
.appbar .quitter:hover { color: #fff; }
.bandeau { background: var(--green-dk); color: #fff; padding: 14px 0 16px; position: sticky; top: 0; z-index: 5; }
.bandeau b { color: #fff; font-family: Poppins; font-size: 14px; }
.bandeau .sous { font-size: 12.5px; opacity: .75; }
.bandeau .bar { max-width: 900px; margin: 12px auto 0; --fond: rgba(255, 255, 255, .18); --plein: var(--pea); }
.bandeau .controles { max-width: 900px; margin: 12px auto 0; padding: 0 16px; }

/* ---------- l'écran ---------- */
.mobile { max-width: 420px; margin: 0 auto; padding: 22px 16px 60px; }
.ecran { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); min-height: 340px; }
.ecran h1 { font-size: 22px; margin-top: 12px; }
.ecran h2 { font-size: 19px; }
.ecran p { margin: 10px 0 0; }
.happea { display: flex; gap: 10px; align-items: center; background: var(--cream-2); border-radius: 14px; padding: 10px 12px; margin-bottom: 14px; font-size: 13.5px; }
.happea img { width: 46px; height: 46px; flex: 0 0 46px; }
.encart { background: var(--pea-lt); border-radius: 14px; padding: 12px 14px; margin-top: 14px; font-size: 14px; }
.encart div { margin-top: 4px; }
.gain { margin-top: 18px; font: 700 18px Poppins; color: var(--green); display: flex; align-items: center; gap: 8px; }
.gain.grand { font-size: 26px; }
.etoile { width: 22px; height: 22px; }
.gain.grand .etoile { width: 28px; height: 28px; }
.opt { border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; margin-top: 10px; cursor: pointer; font-size: 14.5px; display: block; }
.opt:hover { border-color: var(--green); background: var(--pea-lt); }
.opt:has(input:checked) { border-color: var(--green); background: var(--pea-lt); box-shadow: inset 0 0 0 1px var(--green); }
.opt.suggestion { display: flex; align-items: center; gap: 12px; }
.champ { border: 1px dashed var(--line); border-radius: 14px; padding: 14px; margin-top: 12px; color: var(--muted); font-size: 14px; }
.depot { background: var(--cream-2); border-radius: 14px; padding: 12px 14px; margin-top: 14px; font-size: 13.5px; }
.echelle { display: flex; gap: 8px; margin-top: 12px; }
.echelle label { flex: 1; display: block; }
.echelle span { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 12px 0; text-align: center; font-family: Poppins; font-weight: 600; color: var(--green-dk); cursor: pointer; }
.echelle span:hover { background: var(--pea-lt); border-color: var(--green); }
.echelle label:has(input:checked) span { background: var(--green); border-color: var(--green); color: #fff; }
.critere { margin-top: 14px; }
.verdict { display: flex; gap: 9px; align-items: center; border-radius: 12px; padding: 10px 13px; margin-top: 12px; font-size: 13.5px; }
.verdict.juste { background: #eef6e8; color: var(--green); }
.verdict.faux { background: #fdf0ec; color: #a2543f; }
.sourires { display: flex; gap: 12px; margin-top: 14px; }
.sourire { flex: 1; border: 1px solid var(--line); background: var(--white); border-radius: 16px; padding: 12px 0 10px; font-size: 24px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sourire span { font: 500 12px Rubik; color: var(--muted); }
.sourire.rouge { color: var(--coral); } .sourire.jaune { color: var(--yellow); } .sourire.vert { color: var(--green-vif); }
.sourire:hover { background: var(--cream-2); }
.nav-apercu { display: flex; gap: 10px; align-items: center; margin-top: 18px; }

@media (max-width: 640px) {
    .mobile { padding: 14px 12px calc(104px + env(safe-area-inset-bottom, 0px)); }
    .mobile .ecran { border-radius: 18px; padding: 18px 16px; min-height: 0; }
    .ecran h1 { font-size: 20px; }
    .ecran h2 { font-size: 17px; }
    .opt { padding: 15px; font-size: 15px; margin-top: 9px; }
    .echelle { gap: 6px; }
    .echelle span { padding: 15px 0; }
    .sourire { padding: 16px 0; font-size: 26px; }
    .happea img { width: 40px; height: 40px; flex-basis: 40px; }
    .gain { font-size: 17px; }
    /* la navigation reste sous le pouce */
    .nav-apercu { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 10; gap: 8px;
        background: var(--cream); border-top: 1px solid var(--line);
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .nav-apercu .btn { padding: 15px 18px; }
    .nav-apercu .btn.p { flex: 1; justify-content: center; }
    .bandeau .row { flex-wrap: wrap; }
}

/* ---------- en jeu, pour de vrai : les champs se remplissent ---------- */
.appbar .solde { color: #fff; font: 600 13px Poppins; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saisie { display: block; width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; margin-top: 12px; font: inherit; font-size: 14.5px; color: var(--ink); background: var(--white); }
textarea.saisie { min-height: 110px; resize: vertical; }
/* Le dépôt d'une photo ou d'une vidéo : une grande cible, le bouton natif habillé. */
.fichier { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; border: 1px dashed var(--line); border-radius: 14px; padding: 14px; margin-top: 12px; background: var(--white); color: var(--green-dk); font-weight: 500; cursor: pointer; }
.fichier:hover, .fichier:focus-within { border-color: var(--green); }
.fichier input { flex-basis: 100%; min-width: 0; font-size: 13.5px; color: var(--muted); }
.fichier input::file-selector-button { border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; margin-right: 12px; background: var(--pea-lt); color: var(--green-dk); font: 600 13.5px Poppins, sans-serif; cursor: pointer; }
.saisie:focus { outline: 2px solid var(--pea); border-color: var(--green); }
.etiquette { display: block; margin-top: 12px; font-size: 13.5px; color: var(--green-dk); font-weight: 500; }
.sourire:has(input:checked) { background: var(--pea-lt); border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }

/* ---------- l'application : accueil, profil, onglets ---------- */
body.application { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.application .appbar img { height: 26px; }
.application .appbar .solde { display: flex; align-items: center; gap: 6px; }
.application .appbar .solde .etoile { width: 18px; height: 18px; }
.annonce { border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; background: var(--pea); color: var(--green-dk); }
.annonce-error { background: #fdf0ec; color: #a2543f; }
.gain-flash { justify-content: center; margin: 0 0 14px; }
.ecran + .ecran { margin-top: 16px; }
.ecran.conteneur .tag { margin-bottom: 4px; }
.ecran .bar { margin: 14px 0 6px; }
.defi { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; margin-top: 10px; color: var(--ink); }
.defi > i:first-child { color: var(--green); width: 20px; text-align: center; }
.defi b { font-family: Poppins; font-size: 14.5px; color: var(--green-dk); }
a.defi:hover { border-color: var(--green); background: var(--pea-lt); }
.defi.fait { background: var(--pea-lt); border-color: transparent; }
.defi.fait > i:first-child { color: var(--green-vif); }
.defi.bientot { opacity: .6; }
.defi .peas { font-family: Poppins; font-weight: 600; color: var(--green); }
/* Les quatre états d'un défi (brief §5.1) : nouveau, à faire, réalisé, expiré. */
.defi.nouveau { border-color: var(--green-vif); box-shadow: inset 3px 0 0 var(--green-vif); }
.defi.en_cours { border-color: var(--yellow); box-shadow: inset 3px 0 0 var(--yellow); background: var(--cream); }
.defi.expire { background: var(--cream-2); border-color: transparent; color: var(--muted); }
.defi.expire > i:first-child { color: var(--muted); }
.badge-nouveau { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--yellow); color: var(--green-dk); font: 600 11px Poppins, sans-serif; vertical-align: 2px; }
.etat-titre { font-size: 15px; margin: 20px 0 2px; }
.repli { margin-top: 14px; }
.repli summary { cursor: pointer; font: 600 14px Poppins, sans-serif; color: var(--green-dk); padding: 6px 0; }

/* L'accueil : Happea d'abord, puis un onglet par conteneur. */
.bonjour { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.bonjour img { width: 52px; height: 52px; flex: 0 0 52px; }
.bonjour b { display: block; font: 700 18px Poppins, sans-serif; color: var(--green-dk); }
.bonjour span { font-size: 14px; color: var(--body); }
/* Le choix du conteneur (app/choisir) : une carte par conteneur, le plus chargé en haut. */
.choix-conteneurs { display: grid; gap: 10px; }
.choix-conteneurs .choix { display: flex; align-items: center; gap: 14px; margin: 0; min-height: 0; padding: 14px 16px; }
.choix .sp { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choix b { font-family: Poppins, sans-serif; color: var(--green-dk); font-size: 16px; }
.choix .icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--pea-lt); color: var(--green); flex: 0 0 auto; }
.pastille { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--yellow); color: var(--green-dk); font: 600 12.5px/24px Poppins, sans-serif; text-align: center; }
.changer { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--green); font-size: 13.5px; font-weight: 500; }
.resume { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* Avant le lancement : le compte à rebours d'abord, puis ce qui motive (récompenses, inscrits). */
.avant { margin: 14px 0 6px; }
.compte-a-rebours { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px; border-radius: 16px; background: var(--green-dk); color: #fff; text-align: center; }
.compte-a-rebours b { font: 700 32px Poppins, sans-serif; color: var(--pea); line-height: 1.1; }
.compte-a-rebours [data-reste] { font-size: 14px; }
.compte-a-rebours .muted { color: #c3d3c0; }
.recompenses { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--cream); }
.recompenses > i { color: var(--yellow); font-size: 22px; margin-top: 2px; }
.recompenses b { font-family: Poppins; color: var(--green-dk); }
.recompenses p { margin: 4px 0 0; font-size: 14px; }
.avant h3 { font-size: 14px; margin: 16px 0 6px; }
.inscrits { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.inscrits li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.regles ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.regles li { margin: 4px 0; }
/* Le classement : le lien depuis l'accueil, puis la liste des équipes. */
.vers-classement { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--pea-lt); color: var(--green-dk); font-weight: 600; font-size: 14px; }
.vers-classement > i:first-child { color: var(--yellow); }
.equipes { list-style: none; margin: 8px 0 0; padding: 0; }
.equipes li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; margin-top: 6px; border: 1px solid var(--line); }
.equipes li.moi { background: var(--pea-lt); border-color: var(--green-vif); }
.equipes .rang { width: 22px; font: 700 15px Poppins, sans-serif; color: var(--green); text-align: center; }
.equipes .sp { display: flex; flex-direction: column; }
.equipes .moyenne { font: 700 16px Poppins, sans-serif; color: var(--green-dk); }
.classement { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.classement h3 { font-size: 14px; margin-bottom: 6px; }
.classement ol { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.classement li { display: flex; gap: 10px; padding: 5px 0; }
.classement li.moi { font-weight: 600; color: var(--green-dk); }
.classement .rang { width: 22px; color: var(--muted); }
.deconnexion { margin-top: 22px; }
.deconnexion button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; font: inherit; font-size: 13.5px; }
.onglets { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 4px; background: var(--white); border-top: 1px solid var(--line); padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 10; }
.onglets a { flex: 1; max-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border-radius: 12px; color: var(--muted); font-size: 12px; }
.onglets a i { font-size: 18px; }
.onglets a.on { color: var(--green-dk); background: var(--pea-lt); font-weight: 600; }

/* Une photo ou une vidéo jointe à une suggestion, au vote (gabarit _piece). */
.piece { display: block; margin-top: 8px; }
.piece img { display: block; max-height: 180px; border-radius: 10px; }
.piece-video { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 13.5px; }

/* Le suivi des invitations d'un parrain. */
.invitation { cursor: default; }
.invitation .row + .row { margin-top: 8px; }
.invitation .saisie { margin-top: 0; padding: 9px 12px; font-size: 13.5px; }
.tag.attente { background: var(--cream-2); color: var(--muted); }

/* Le verdict d'une question : la ou les bonnes options surlignées, celle choisie à tort barrée. */
.opt.corrige { cursor: default; display: flex; align-items: center; gap: 8px; }
.opt.corrige.bonne { background: var(--pea-lt); border-color: var(--green-vif); color: var(--green-dk); font-weight: 500; }
.opt.corrige.bonne i { color: var(--green); }
.opt.corrige.erronee { text-decoration: line-through; color: var(--muted); }
.opt.corrige.erronee i { color: var(--coral); }
/* Le score en fin de quizz. */
.score { font: 700 22px Poppins, sans-serif; color: var(--green-dk); text-align: center; margin: 0 0 12px; }

/* ── Repris de Peas'Up 0.4.5 (derouler.css) : contenu en deux temps, difficulté, maturité, priorisation ── */

/* Les liens « en savoir plus » après une question, côte à côte. */
.liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* L’accroche d’un défi, sous son titre dans la liste. */
.defi .accroche { color: var(--body); margin-top: 2px; }

/* Le contenu de connaissance : ses repères gardent leurs lignes ; le choix de la suite, deux boutons égaux. */
.lignes { white-space: pre-line; }
.suite { display: grid; gap: 10px; margin: 14px 0 6px; }
.suite .btn.large { margin: 0; }
/* Un défi « à terminer » : consulté, questions à faire. */
.defi.a-terminer { border-color: var(--yellow); }
.a-terminer-libelle { color: var(--green-dk); }

/* La difficulté d'un défi : une pastille aux couleurs du back-office. */
.difficulte { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.difficulte i { font-size: .7em; }
.niveau-facile i { color: #79cb43; }
.niveau-moyen i { color: #f9c645; }
.niveau-difficile i { color: #f0907a; }

/* Le résultat du questionnaire de maturité : le profil, son visuel, l'état d'esprit. */
.persona { text-align: center; margin-bottom: 16px; }
.persona img { display: block; width: 160px; max-width: 60%; aspect-ratio: 1; object-fit: contain; margin: 0 auto 12px; }
.persona h2 { margin: 2px 0 6px; }
.persona .etat { margin: 0; font-weight: 600; }

/* Le questionnaire de priorisation : une carte par élément, la note en petits pois. */
.carte-prio { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; margin: 10px 0 0; background: var(--white); }
.carte-prio legend { padding: 0 4px; font: 600 15px Poppins, sans-serif; color: var(--green-dk); }
.carte-prio p { margin: 6px 0; }
.choix-prio { display: flex; gap: 8px; flex-wrap: wrap; }
.choix-prio span, .nsp span { display: block; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 13.5px; }
.choix-prio label:has(input:checked) span, .nsp:has(input:checked) span { background: var(--green); border-color: var(--green); color: #fff; }
.axe-prio { border: 0; border-top: 1px solid var(--line); margin: 12px 0 0; padding: 10px 0 0; min-width: 0; }
.axe-prio legend { padding: 0; font-size: 13.5px; }
.pois-echelle { display: inline-flex; flex-direction: row-reverse; gap: 6px; margin: 8px 12px 4px 0; }
.pois-echelle label { cursor: pointer; }
.pois-note { display: block; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--green-vif); background: var(--white); }
.pois-echelle label:hover .pois-note, .pois-echelle label:hover ~ label .pois-note { background: var(--pea); }
.pois-echelle label:has(input:checked) .pois-note, .pois-echelle label:has(input:checked) ~ label .pois-note { background: var(--green-vif); }
.bornes { font-size: 12px; color: var(--muted); }
.case { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; cursor: pointer; }
.reserve-prio textarea { display: none; min-height: 70px; margin-top: 6px; }
.reserve-prio:has(input:checked) textarea { display: block; }
.pois-restants { font-size: 14px; }
.pois-restants b { font: 700 22px Poppins, sans-serif; color: var(--green-dk); }
.pois-restants b.depasse { color: var(--coral); }
.pois-saisie { width: 76px; border: 1px solid var(--line); border-radius: 10px; padding: 8px; font: inherit; text-align: center; }