/* 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-display: block : le navigateur attend la police (quelques millisecondes, elle est en cache)
   plutôt que de dessiner la police de secours puis de basculer — le texte changeait de police
   sous les yeux à chaque rechargement. */
@font-face { font-family: Poppins; font-weight: 500; font-display: block; src: url('/polices/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-display: block; src: url('/polices/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-display: block; src: url('/polices/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: Rubik; font-weight: 400; font-display: block; src: url('/polices/rubik-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: Rubik; font-weight: 500; font-display: block; src: url('/polices/rubik-latin-500-normal.woff2') format('woff2'); }

:root {
    --green: #335533; --green-dk: #1d301d; --green-vif: #79cb43;
    /* Le vert des boutons principaux : celui de l'entrée active du menu du back-office (24/10 ;
       l'accent à 22 % sur #335533). */
    --bouton-principal: #5f6e37;
    --pea: #c8e296; --pea-lt: #eef6e8;
    --cream: #fcf3d9; --cream-2: #f4f1e4; --yellow: #f9c645; --coral: #f0907a;
    --yellow-lt: #fdf3d4; --yellow-dk: #8a6400; --coral-lt: #fde8e2; --coral-dk: #9c3f2a;
    /* Les marches du podium : l'or est le jaune de la charte ; l'argent et le bronze, ses voisins. */
    --argent: #dfe5e8; --argent-dk: #5b6a72; --bronze: #f0c39b; --bronze-dk: #8a4b1f;
    /* Un rouge vif, pour ce qu'on ne doit pas manquer (un emprunt en cours). */
    --rouge: #e5262b;
    --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(--bouton-principal); 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; }
/* Un profil à viser : son nom, puis le portrait qu’en fait Happea. */
.profil-vise { display: grid; gap: 4px; }
.profil-vise .portrait { font-weight: 400; line-height: 1.45; }
/* Un bouton qui attend (une réponse à cocher, une case d’engagement) se voit grisé. */
.btn:disabled { opacity: .45; cursor: not-allowed; }
.consultation-attente { margin: 14px 0 0; text-align: center; }
.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 (Elements.barre) : une <div role="progressbar"> et son plein, dont le
   script pose la largeur. Pas un <progress> habillé par ses pseudo-éléments : la capture des
   retours (snapdom) ne les recopie pas, la barre y paraissait vide. */
.bar { --fond: var(--pea-lt); --plein: var(--green); display: block; width: 100%; height: 8px; border-radius: 999px; background: var(--fond); overflow: hidden; margin-bottom: 16px; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--plein); }
.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 { position: relative; overflow: hidden; background: var(--green-dk); padding: 12px 0; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
/* Au-dessus du ruban jaune de la charte (.appbar::after). */
.appbar .row { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 16px; }
.appbar img { height: 26px; width: auto; }
.appbar .quitter { color: #8fa38f; margin-left: 16px; font-size: 18px; }
.appbar .quitter:hover { color: #fff; }

/* ---------- 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; overflow-wrap: anywhere; }
.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; }
.gain .pois { font-size: 22px; line-height: 1; }
.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; }
/* La note de fin, pensée pour le pouce : la rangée de cinq étoiles prend la largeur, centrée ;
   à la note, elles s'allument en cascade, puis le verdict et, s'il y en a, les sourires
   arrivent un à un. Cinq cases se lisaient comme cinq choix : plus de cases. */
.ecran .note-question { text-align: center; }
.note-de-fin { margin: 6px auto 0; max-width: 360px; text-align: center; }
.note-etoiles { display: grid; grid-template-columns: repeat(5, 1fr); }
.note-etoile { height: 64px; display: grid; place-items: center; border-radius: 16px; font-size: 40px; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .18s cubic-bezier(.2, .8, .2, 1), color .12s; }
.note-etoile.allumee { color: var(--yellow); filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--yellow-dk) 40%, transparent)); }
.note-etoile:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: -4px; }
@media (hover: hover) { .note-etoile:hover { transform: scale(1.12); } }
.vient-d-etre-notee .note-etoile.allumee { animation: etoile-allumee .42s cubic-bezier(.2, .8, .2, 1) backwards; }
.vient-d-etre-notee .note-etoile:nth-child(2) { animation-delay: .06s; }
.vient-d-etre-notee .note-etoile:nth-child(3) { animation-delay: .12s; }
.vient-d-etre-notee .note-etoile:nth-child(4) { animation-delay: .18s; }
.vient-d-etre-notee .note-etoile:nth-child(5) { animation-delay: .24s; }
@keyframes etoile-allumee { 0% { transform: scale(.6); color: var(--muted); } 55% { transform: scale(1.3) rotate(-10deg); } 100% { transform: none; } }
/* La place du verdict est gardée (un mot, une rangée de sourires) : la carte ne saute pas. */
.note-verdict { min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding-top: 6px; }
.note-verdict .consigne { color: var(--muted); font-size: 14.5px; padding-top: 4px; }
.note-verdict .mot { font: 700 20px Poppins, sans-serif; color: var(--green-dk); }
.note-sourires { display: inline-flex; }
.note-sourires .visages { display: inline-flex; gap: 10px; font-size: 34px; color: var(--green-vif); filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--green) 30%, transparent)); }
.vient-d-etre-notee .note-verdict .mot { animation: verdict-parait .3s .2s ease-out backwards; }
.vient-d-etre-notee .note-sourires { animation: verdict-parait .3s .3s ease-out backwards; }
.vient-d-etre-notee .note-sourires .visages i { animation: sourire-arrive .4s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: .4s; }
.vient-d-etre-notee .note-sourires .visages i:nth-child(2) { animation-delay: .52s; }
.vient-d-etre-notee .note-sourires .visages i:nth-child(3) { animation-delay: .64s; }
@keyframes verdict-parait { from { opacity: 0; transform: translateY(6px); } }
@keyframes sourire-arrive { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.35); } 100% { transform: none; } }
.note-precision { text-align: center; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .note-etoile, .vient-d-etre-notee .note-etoile.allumee, .vient-d-etre-notee .note-verdict .mot, .vient-d-etre-notee .note-sourires, .vient-d-etre-notee .note-sourires .visages i { transition: none; animation: none; } }
.nav-apercu { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
/* Trois boutons (« Je reviens plus tard », « M’arrêter ici ») ne tiennent pas sur une ligne de
   420 px : le principal sortait de la carte (file n° 29). Il prend sa ligne, en dessous, pleine largeur. */
.nav-apercu.trois .btn.p { flex: 1 1 100%; justify-content: center; }
/* Le quizz fini : le suspense avant le score — Happea, le tambour qui roule, puis le score qui apparaît. */
.ecran.suspense .nav-apercu { display: none; }
.suspense-score { text-align: center; }
.tambour { display: block; width: 150px; height: auto; margin: 18px auto 6px; }
.tambour.roule { animation: tambour-roule .09s linear infinite; }
@keyframes tambour-roule { 0% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(1px, -2px) rotate(4deg); } 100% { transform: translate(0, 0) rotate(-4deg); } }
.score.devoile { animation: score-devoile .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes score-devoile { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tambour.roule, .score.devoile { animation: none; } }
/* « Je fais une pause ! » : en haut de l’écran, à droite, au-dessus de la question. */
.ligne-pause { display: flex; justify-content: flex-end; margin: -4px 0 10px; }

@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; }
    .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; }
    /* La barre sur deux lignes : la page garde de quoi défiler au-dessus. */
    .mobile:has(.nav-apercu.trois) { padding-bottom: calc(166px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 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); }
/* L'appareil photo (sur un téléphone) : sous le titre, avant le champ natif — qui reste le
   premier du formulaire, celui que les envois lisent. */
.fichier .titre-fichier { flex-basis: 100%; }
.fichier > input { order: 2; }
.fichier .camera { order: 1; position: relative; padding: 9px 16px; font-size: 13.5px; }
.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; }

/* ---------- l'application : accueil, profil, onglets ---------- */
body.application { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.application .appbar img { height: 26px; width: auto; }
.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; }
/* Signaler (brief §5.1) : le drapeau de la barre du haut, son dialogue, et le lien sous une suggestion au vote. */
.signaler { background: none; border: 0; color: #fff; font-size: 16px; padding: 6px 8px; margin-left: 6px; cursor: pointer; opacity: .8; }
.signaler:hover, .signaler:focus-visible { opacity: 1; }
.dialogue-signaler { border: 0; border-radius: 18px; padding: 20px; width: min(92vw, 420px); box-shadow: var(--shadow); }
.dialogue-signaler::backdrop { background: rgba(20, 40, 20, .45); }
.dialogue-signaler textarea { width: 100%; margin-top: 12px; }
.dialogue-signaler .actions { display: flex; gap: 10px; margin-top: 12px; }
.natures-signalement { border: 0; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.natures-signalement legend { padding: 0; margin-bottom: 6px; }
.natures-signalement .opt.nature { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.natures-signalement .opt.nature input { position: absolute; opacity: 0; pointer-events: none; }
.natures-signalement .opt.nature:has(input:checked) { border-color: var(--green-dk); background: var(--pea-lt); color: var(--green-dk); font-weight: 600; }
.natures-signalement .opt.nature:has(input:focus-visible) { outline: 2px solid var(--green-dk); outline-offset: 2px; }
@media (max-width: 360px) { .natures-signalement { grid-template-columns: 1fr; } }
.lien-signaler { background: none; border: 0; color: var(--muted, #6c7d6c); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 2px 0 8px; }
/* Les notifications (brief §5.1) : une case par type de courriel. */
.case-notification { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
/* « Embarque tes collègues » : le code du parrain, la micro-question du filleul, le champ du code. */
.code-parrain .code { display: block; font-size: 24px; letter-spacing: 4px; font-family: ui-monospace, monospace; margin: 4px 0 10px; }
.code-parrain .row, .question-filleul .row { gap: 8px; margin-top: 8px; }
details.code-parrain { margin: 12px 0; }
details.code-parrain summary { cursor: pointer; color: var(--muted, #6c7d6c); }
.question-filleul .saisie { margin-top: 8px; }
/* La clôture (brief §5.1) : le questionnaire encore ouvert, le bilan, le podium des équipes. */
.cloture { margin: 14px 0 6px; }
.questionnaire-cloture { border-color: var(--yellow); background: #fff8e1; }
.bilan { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin-top: 8px; }
.bilan > div { border: 1px solid var(--line); border-radius: 14px; padding: 10px; text-align: center; }
.bilan b { display: block; font-family: Poppins; font-size: 20px; color: var(--green-dk); }
.podium-equipes { margin: 8px 0 0; padding-left: 22px; }
.podium-equipes li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.podium-equipes li.moi { font-weight: 600; color: var(--green-dk); }
/* Le profil (brief §5.1) : le bandeau des avatars, les attributs par entreprise, le rappel à l'accueil.
   Le bandeau (30/10, demande du client) : les avatars en grand plutôt qu'en mini pastilles —
   celui du milieu agrandi, ses voisins plus petits et pâlis de chaque côté. La piste glisse
   dans un cadre qui coupe ce qui dépasse : jamais de barre ni de défilement horizontal. */
.choix-avatar { margin: 8px 0 18px; }
.bandeau-avatars { display: flex; align-items: center; gap: 6px; }
.cadre-avatars { flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 30px 0; touch-action: pan-y; }
.piste-avatars { display: flex; gap: 22px; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.avatar { position: relative; flex: 0 0 84px; aspect-ratio: 1; padding: 3px; border: 3px solid transparent; border-radius: 50%; background: var(--white); cursor: pointer; opacity: .5; transform: scale(.8); transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, border-color .15s ease, box-shadow .2s ease; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.avatar:hover { opacity: .8; }
.avatar.au-centre { opacity: 1; transform: scale(1.4); z-index: 1; box-shadow: 0 6px 16px rgba(29, 48, 29, .18); }
.avatar.choisi { border-color: var(--green-vif); }
/* Pas encore d'avatar : un rond vide cerclé de pointillés, qui dit « choisis-en un ». */
.avatar.sans-avatar { display: grid; place-items: center; border: 3px dashed var(--green-vif); background: var(--pea-lt); color: var(--green); font-size: 30px; }
.avatar:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.fleche-avatars { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.fleche-avatars:disabled { opacity: .35; cursor: default; }
.nom-avatar { margin: 4px 0 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .piste-avatars, .avatar { transition: none; } }
/* Le visuel d'une équipe (26/10) : son avatar Peas'Up ou sa photo, toujours dans un rond. */
.visuel-equipe { flex: none; display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--white); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--line); }
.mon-equipe .visuel-equipe, .carte-equipe .visuel-equipe { width: 48px; height: 48px; }
.carte-equipe .visuel-equipe { border-color: var(--pea); box-shadow: none; }
.ligne-arrivees .visuel-equipe, .podium-equipes .visuel-equipe { width: 28px; height: 28px; border-width: 1px; }
.equipes li .visuel-equipe { width: 36px; height: 36px; }
.profil-entreprise { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.profil-entreprise .saisie { width: 100%; }
/* Un attribut que l'entreprise renseigne seule : lisible, visiblement pas à changer. */
.profil-entreprise .saisie:disabled { background: var(--cream-2); color: var(--body); cursor: not-allowed; opacity: 1; }
.profil-entreprise .saisie:disabled + .muted.petit { margin-top: 4px; }
a.rappel-profil { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--green-dk); text-decoration: none; }
/* Les conteneurs qu'une entreprise propose : en tête de l'accueil, accepter ou refuser. */
.ecran.propositions { min-height: 0; margin-bottom: 16px; }
.proposition + .proposition { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 4px; }
.proposition .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ecran.conteneur .tag { margin-bottom: 4px; }
.ecran.conteneur .attente-equipe { margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--yellow-lt); color: var(--yellow-dk); font-weight: 500; }
.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); }
/* Un défi à faire se détache sur la carte blanche (demande #43) : un fond pois pâle, et un
   cran plus soutenu au survol — pour TOUT défi qui mène quelque part, chacun dans sa teinte. */
a.defi:hover { border-color: var(--green); background: color-mix(in srgb, var(--pea) 45%, 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.a_faire, .defi.nouveau { background: var(--pea-lt); border-color: var(--pea); }
.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); }
a.defi.en_cours:hover { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 25%, var(--cream)); }
.defi.expire { background: var(--cream-2); border-color: transparent; color: var(--muted); }
.defi.expire > i:first-child { color: var(--muted); }
/* Sous cadenas (un groupe enchaîné) : pas éteint — la suite, qui donne envie. Un filet pois en
   tirets, le cadenas dans sa pastille jaune, la promesse de peas à droite. */
.defi.verrouille { border-style: dashed; border-color: var(--pea); background: var(--pea-lt); }
.defi.verrouille .cadenas { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow-lt); color: var(--yellow-dk); font-size: 14px; }
.defi.verrouille .muted a { color: var(--green-dk); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.defi.verrouille .promesse { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--white); color: var(--green); font: 600 13px Poppins, sans-serif; }
.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 podium du classement : trois marches, 2 · 1 · 3, la première plus haute ; au-dessus,
   l'emblème (avatar, ou initiales de l'équipe), le nom ; sur la marche, le rang et le chiffre
   qui classe. Les marches montent à l'arrivée, l'une après l'autre (pas pour qui réduit les
   animations). Sa propre place : cerclée de vert. */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; margin: 18px auto 6px; max-width: 460px; }
.podium-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; }
.podium-1 { grid-template-columns: minmax(0, 1fr); max-width: 160px; }
.podium .place { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; --teinte: var(--yellow); --teinte-dk: var(--yellow-dk); --hauteur: 116px; }
.podium .place-1 { order: 2; }
.podium .place-2 { order: 1; --teinte: var(--argent); --teinte-dk: var(--argent-dk); --hauteur: 92px; }
.podium .place-3 { order: 3; --teinte: var(--bronze); --teinte-dk: var(--bronze-dk); --hauteur: 78px; }
.podium-1 .place-1 { order: 0; }
.podium .tete { position: relative; display: flex; flex-direction: column; align-items: center; }
.podium .tete .fa-crown { color: var(--yellow); font-size: 22px; margin-bottom: 2px; filter: drop-shadow(0 2px 2px rgba(138, 100, 0, .35)); }
.podium .embleme { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--white); color: var(--green-dk); font: 700 19px Poppins, sans-serif; border: 3px solid var(--teinte); box-shadow: var(--shadow); }
.podium .place-1 .embleme { width: 68px; height: 68px; font-size: 23px; }
.podium .embleme i { font-size: 24px; }
.podium .embleme:has(.visuel-equipe) { overflow: hidden; padding: 0; }
.podium .embleme .visuel-equipe { width: 100%; height: 100%; border: 0; }
.podium .place.moi .embleme { outline: 3px solid var(--green-vif); outline-offset: 3px; }
.podium .nom { font: 600 13.5px/1.25 Poppins, sans-serif; color: var(--green-dk); max-width: 100%; overflow-wrap: anywhere; }
.podium .vous { display: block; margin-top: 2px; font: 600 11px Rubik, sans-serif; color: var(--green); text-transform: uppercase; letter-spacing: .05em; }
.podium .marche { width: 100%; height: var(--hauteur); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; padding-top: 10px; border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, var(--teinte), color-mix(in srgb, var(--teinte) 72%, var(--white))); color: var(--teinte-dk); transform-origin: bottom; animation: marche-monte .55s cubic-bezier(.16, 1, .3, 1) both; }
.podium .place-2 .marche { animation-delay: .08s; }
.podium .place-1 .marche { animation-delay: .2s; }
.podium .marche .rang { font: 800 26px/1 Poppins, sans-serif; }
.podium .place-1 .marche .rang { font-size: 32px; }
.podium .marche .valeur { font: 700 16px/1.2 Poppins, sans-serif; color: var(--green-dk); font-variant-numeric: tabular-nums; }
.podium .marche .detail { font-size: 11.5px; line-height: 1.2; padding: 0 6px; max-width: 100%; overflow-wrap: anywhere; }
.podium .tete, .podium .nom { animation: tete-arrive .45s cubic-bezier(.16, 1, .3, 1) .35s both; }
@keyframes marche-monte { from { transform: scaleY(0); } to { transform: none; } }
@keyframes tete-arrive { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .podium .marche, .podium .tete, .podium .nom { animation: none; } }
@media (max-width: 380px) { .podium { gap: 6px; } .podium .embleme { width: 48px; height: 48px; font-size: 16px; } .podium .place-1 .embleme { width: 58px; height: 58px; } }
.podium + .equipes, .podium + .top-individuel { margin-top: 14px; }

/* Le classement : la liste des équipes. */
.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; }

/* 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); }
/* « Photo à choisir » (file n° 39) : les propositions en vignettes, deux par ligne, la
   légende dessous ; au verdict, la photo écartée pâlit au lieu d'être barrée. */
.opts-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.opts-photos .opt { margin-top: 0; padding: 8px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; min-width: 0; overflow-wrap: anywhere; }
.opts-photos .opt.corrige { flex-direction: column; text-decoration: none; }
.photo-proposition { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--cream); }
.photo-proposition.vide { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 28px; }
.opts-photos .opt.corrige.erronee .photo-proposition { opacity: .55; }
/* 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; }
/* Un libellé long (une phrase, une adresse) revient à la ligne dans son bouton : sans ça, le
   bouton déborde de l’écran, élargit la page, et « Continuer » se cale sur ce débord. */
.liens .btn { white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: left; }

/* 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, .recontact-details { display: grid; gap: 10px; margin: 14px 0 6px; }
.suite .btn.large { margin: 0; }
/* Son titre sur le bouton revient à la ligne plutôt que de déborder ; avec une image, le lien
   entier est une carte : l'image, et le titre dessous (file n° 32). */
.btn.large.contenu-titre { white-space: normal; overflow-wrap: anywhere; text-align: center; }
.carte-contenu { display: block; margin: 0 0 8px; border-radius: 18px; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--green-dk); text-decoration: none; transition: transform .15s; }
.carte-contenu:hover, .carte-contenu:focus-visible { transform: translateY(-2px); }
.carte-contenu img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--pea-lt); }
.carte-contenu .titre-contenu { display: flex; gap: 8px; align-items: baseline; padding: 12px 16px; font-family: Poppins, sans-serif; font-weight: 600; overflow-wrap: anywhere; }
/* 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: 10px 0 8px; }
/* Une nouvelle partie d'un écran long (résultat et projection de la maturité, fin d'un
   défi) : les titres n'ont aucune marge par défaut, et chaque partie se collait à la
   précédente. */
.ecran .section { margin-top: 26px; }
.persona .etat { margin: 0; font-weight: 600; }

/* Le questionnaire de priorisation (22/10) : une carte à la fois, sous une barre qui dit où
   l'on en est des réponses ; trois grandes réponses à la sélection, une note chiffrée par
   axe à la notation. */
.progression-prio { margin: 4px 0 14px; }
.progression-prio .row { gap: 10px; align-items: center; }
.progression-prio .invisible { visibility: hidden; }
/* Le compteur sur sa propre ligne, sous « Précédente » et le nombre de réponses : il ne se coupe plus. */
.progression-prio .row { flex-wrap: wrap; }
.progression-prio .compteur-prio { order: 3; flex: 1 0 100%; font: 600 15px Poppins, sans-serif; color: var(--green-dk); }
.progression-prio .row > .muted { margin-left: auto; }
.barre-prio { height: 8px; margin-top: 10px; border-radius: 999px; background: var(--pea-lt); overflow: hidden; }
.barre-prio span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--green-vif); transition: width .3s ease; }
.carte-prio { display: block; border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 20px; margin: 0; background: var(--white); box-shadow: var(--shadow); min-width: 0; }
.carte-prio h2 { font-size: 20px; margin: 8px 0 6px; }
.carte-prio p { margin: 6px 0; }
.question-prio { margin-top: 16px !important; font-weight: 600; color: var(--green-dk); }
/* Non à gauche, Oui à droite, sur une ligne ; « Je ne sais pas » dessous, plus discret. */
.choix-prio { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.choix-prio .choix-nsp { grid-column: 1 / -1; }
.choix-prio .choix-nsp span { min-height: 44px; font-size: 14.5px; border-style: dashed; }
.choix-prio .choix-oui span { border-color: var(--green-vif); }
.choix-prio .choix-non span { border-color: var(--coral); }
.choix-prio .choix-oui i { color: var(--green); }
.choix-prio .choix-non i { color: var(--coral-dk); }
.choix-prio label:has(input:checked) i { color: inherit; }
/* Le glissement d'une carte : elle suit le doigt, penche, et se teinte du côté visé. */
.carte-seule[class] { touch-action: pan-y; transition: transform .2s ease, box-shadow .2s ease; }
.carte-seule.glissable { touch-action: none; }
/* L'astuce du geste : une seule ligne, en tout petit. */
.astuce-glisser { margin: 12px 0 0 !important; text-align: center; font-size: 10.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); opacity: .85; }
.carte-seule.vers-nsp { box-shadow: 0 0 0 3px var(--yellow), var(--shadow); }
.carte-seule.glisse { transition: none; cursor: grabbing; user-select: none; }
.carte-seule.vers-oui { box-shadow: 0 0 0 3px var(--green-vif), var(--shadow); }
.carte-seule.vers-non { box-shadow: 0 0 0 3px var(--coral), var(--shadow); }
@media (prefers-reduced-motion: reduce) { .carte-seule[class] { transition: none; } }
.choix-prio label { cursor: pointer; }
.choix-prio span { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border: 2px solid var(--line); border-radius: 14px; font: 600 16px Poppins, sans-serif; color: var(--green-dk); background: var(--white); transition: background .15s, border-color .15s; }
.choix-prio label:hover span { border-color: var(--green); }
.choix-prio .choix-oui:has(input:checked) span { background: var(--green); border-color: var(--green); color: var(--white); }
.choix-prio .choix-non:has(input:checked) span { background: var(--coral-lt); border-color: var(--coral-dk); color: var(--coral-dk); }
.choix-prio .choix-nsp:has(input:checked) span { background: var(--yellow-lt); border-color: var(--yellow-dk); color: var(--yellow-dk); }
.axe-prio { border: 0; margin: 16px 0 0; padding: 14px; min-width: 0; border-radius: 14px; background: var(--cream-2); }
.axe-prio legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; }
.axe-question { display: block; font-weight: 600; color: var(--green-dk); line-height: 1.4; }
/* Les extrémités d'une échelle de notes : une légende, pas une note de bas de page. Un fin
   dégradé du corail au vert sous les notes, chaque extrémité à sa couleur et de son côté ;
   au plus la moitié de la largeur chacune, elles vont à la ligne plutôt que de déborder. */
.axe-prio .bornes { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 10px; padding-top: 12px; font-size: 12.5px; line-height: 1.3; }
.axe-prio .bornes::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--coral), var(--yellow), var(--green-vif)); opacity: .7; }
.axe-prio .bornes > .sp { display: none; }
.axe-prio .bornes > span { max-width: 48%; overflow-wrap: anywhere; font-weight: 600; }
.axe-prio .bornes > span:first-child { color: var(--coral-dk); }
.axe-prio .bornes > span:last-child { color: var(--green); text-align: right; }
.nsp { display: block; margin-top: 10px; cursor: pointer; }
.nsp span { display: block; text-align: center; border: 1px dashed var(--line); border-radius: 999px; padding: 8px 14px; font-size: 13.5px; background: var(--white); }
.nsp:has(input:checked) span { background: var(--yellow-lt); border: 1px solid var(--yellow-dk); color: var(--yellow-dk); font-weight: 600; }
.suite-prio { margin-top: 18px; }
/* La notation, une question par carte : l'idée (le cas d'usage) en grand, un filet pois, la
   question dessous, plus petite — on retient le cas, la question revient à chaque carte
   (retour client du 27/10 : l'inverse faisait chercher de quoi l'on parlait). */
.rappel-idee { margin: 0 !important; font: 600 22px/1.3 Poppins, sans-serif; color: var(--green-dk); }
.carte-note .axe-prio { background: none; border-radius: 0; padding: 14px 0 0; margin-top: 12px; border-top: 1px solid var(--pea); }
.carte-note .axe-question { font: 600 15px/1.4 Poppins, sans-serif; color: var(--green); }
/* La note en pastilles côte à côte, teintées du corail (1) au vert (la dernière) ; la
   pastille choisie se remplit de sa teinte et grandit. Les extrémités en tout petit dessous,
   chacune de son côté, à sa couleur. */
.echelle-pastilles { clear: both; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.echelle-pastilles label { flex: 1 1 0; max-width: 62px; cursor: pointer; }
/* Un petit pois de dessin animé par note (29/10) : un aplat vert cerné de foncé, un reflet
   net, une ombre en croissant, le chiffre dedans ; il grossit de la première à la dernière
   note. Une note choisie, les autres pâlissent. Pas de dégradé fondu : il faisait « pomme ». */
.echelle-pastilles .rang { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--green-dk);
    background:
        radial-gradient(ellipse 12% 8% at 26% 23%, #fff 0 92%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle at 41% 15%, #fff 0 3.5%, rgba(255, 255, 255, 0) 4%),
        radial-gradient(circle at 40% 36%, rgba(0, 0, 0, 0) 0 61%, var(--pois-fonce, #6cae33) 62%),
        var(--pois, #9bd65a);
    box-shadow: 0 3px 0 var(--green-dk);
    font: 800 19px/1 Poppins, sans-serif; color: var(--green-dk);
    transform: scale(var(--taille, 1)); transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), filter .18s ease, opacity .18s ease, box-shadow .18s ease; }
/* Du pois vert tendre, à peine formé (la première note), au pois bien mûr, gros et d'un vert franc (la dernière). */
.echelle-pastilles .ton-0 { --taille: .74; --pois: #e2eba8; --pois-fonce: #c2d07a; }
.echelle-pastilles .ton-25, .echelle-pastilles .ton-33 { --taille: .82; --pois: #cde48b; --pois-fonce: #a8c65c; }
.echelle-pastilles .ton-50 { --taille: .88; --pois: #b4dc6d; --pois-fonce: #8bbd45; }
.echelle-pastilles .ton-67, .echelle-pastilles .ton-75 { --taille: .94; --pois: #97d257; --pois-fonce: #68aa31; }
.echelle-pastilles .ton-100 { --taille: 1; --pois: #78c544; --pois-fonce: #4b9624; }
.echelle-pastilles label:hover .rang { transform: scale(calc(var(--taille, 1) * 1.06)); }
.echelle-pastilles:has(input:checked) label:not(:has(input:checked)) .rang { filter: saturate(.5) brightness(1.08); opacity: .7; }
.echelle-pastilles label:has(input:checked) .rang { transform: scale(calc(var(--taille, 1) * 1.16)); box-shadow: 0 3px 0 var(--green-dk), 0 0 0 5px #fff, 0 0 0 8px var(--green-vif); }
.echelle-pastilles label:has(input:focus-visible) .rang { outline: 3px solid var(--green-dk); outline-offset: 4px; }
.ton-0 { --ton: var(--coral); }
.ton-25, .ton-33 { --ton: color-mix(in srgb, var(--coral) 55%, var(--yellow)); }
.ton-50 { --ton: var(--yellow); }
.ton-67, .ton-75 { --ton: color-mix(in srgb, var(--yellow) 45%, var(--green-vif)); }
.ton-100 { --ton: var(--green-vif); }
.bouts-echelle { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 11.5px; line-height: 1.25; }
.bouts-echelle span { flex: 0 1 auto; max-width: 70%; }
.bouts-echelle .bas { color: var(--coral-dk); }
.bouts-echelle .haut { color: var(--green); text-align: right; }
@media (prefers-reduced-motion: reduce) { .echelle-pastilles .rang { transition: none; } }
.nsp { display: block; margin-top: 10px; cursor: pointer; }
.nsp span { display: block; text-align: center; border: 1px dashed var(--line); border-radius: 999px; padding: 8px 14px; font-size: 13.5px; background: var(--white); }
.nsp:has(input:checked) span { background: var(--yellow-lt); border: 1px solid var(--yellow-dk); color: var(--yellow-dk); font-weight: 600; }
.suite-prio { margin-top: 18px; }
.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; }
/* Répartir les pois : le compteur, puis une ligne par idée, la case en tête (elles
   s'alignent), un écart franc avec le titre, de l'air entre les lignes et avant les précisions. */
.pois-restants { font-size: 14px; margin: 4px 0 16px; }
.pois-restants b { font: 700 22px Poppins, sans-serif; color: var(--green-dk); }
.pois-restants b.depasse { color: var(--coral); }
.ligne-pois { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin-top: 12px; cursor: text; }
.ligne-pois .titre-pois { flex: 1 1 auto; min-width: 0; font: 600 15px/1.35 Poppins, sans-serif; color: var(--green-dk); }
.pois-saisie { flex: 0 0 72px; width: 72px; min-height: 46px; border: 2px solid var(--line); border-radius: 12px; padding: 8px; font: 700 18px Poppins, sans-serif; color: var(--green-dk); text-align: center; background: var(--white); }
.pois-saisie:focus { outline: 2px solid var(--pea); border-color: var(--green); }
[data-pois] > p.muted, .ligne-pois ~ p.muted { margin-top: 16px; }

.ecran > .btn.sm { margin-top: 12px; }

/* Sécurité : le QR code de l'application d'authentification, et sa clé lisible. */
.inscription-application { margin-top: 12px; }
.inscription-application .qr { display: block; width: 220px; height: 220px; margin: 12px auto; border-radius: 14px; border: 1px solid var(--line); }
.inscription-application .petit { word-break: break-all; }

/* L'emprunt par le back-office : une pastille flottante qu'on ne peut pas manquer (cerclée de
   rouge, elle pulse) sans rien déplacer ni recouvrir ; au-dessus des onglets sur un téléphone.
   Un clic ouvre la bulle : à la place de qui, et « Terminer ». */
.emprunt { position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.emprunt-pastille { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--rouge); background: var(--green-dk); color: var(--white); font-size: 21px; cursor: pointer; display: grid; place-items: center; animation: emprunt-pouls 1.8s ease-out infinite; }
.emprunt-pastille:hover, .emprunt-pastille[aria-expanded="true"] { background: var(--rouge); }
.emprunt-pastille:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.emprunt-panneau { max-width: 280px; padding: 14px 16px; border-radius: 16px; background: var(--white); border: 2px solid var(--rouge); box-shadow: var(--shadow); color: var(--green-dk); font-size: 14px; }
.emprunt-panneau p { margin: 0 0 10px; }
@keyframes emprunt-pouls {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rouge) 60%, transparent); }
    70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--rouge) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rouge) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .emprunt-pastille { animation: none; } }

/* L'œil d'un champ de mot de passe (si l'instance le veut, js/api.js) : l'enveloppe reprend
   la marge du champ, l'œil se colle à son bord droit. */
.champ-oeil { position: relative; display: block; margin-top: 12px; }
.champ-oeil > .saisie { margin-top: 0; padding-right: 48px; }
.champ-oeil .oeil { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--green); cursor: pointer; }
.champ-oeil .oeil[aria-pressed="true"] { color: var(--green-dk); background: var(--cream-2); }

/* ---------- la charte : rubans, étoiles, mascottes ----------
   Les pièces de la charte officielle (img/ : rubans « lignes », étoiles, mascottes, logo à
   baseline). Toujours en décor : sous le contenu, jamais devant (pointer-events: none),
   et sans couleur nouvelle — celles du ruban sont celles de la palette. */

/* Le fond : un ruban vert tendre en bas de page, qui habite l'espace vide. */
body::before { content: ''; position: fixed; left: -40px; right: -40px; bottom: -20px; height: 300px; background: url(/img/ruban-pea.svg) no-repeat left bottom / min(900px, 140%) auto; opacity: .4; pointer-events: none; z-index: -1; }
body.application::before { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }

/* La barre du haut : un ruban jaune derrière le solde. */
.appbar::after { content: ''; position: absolute; right: -36px; top: -8px; width: 240px; height: 76px; background: url(/img/ruban-jaune.svg) no-repeat right top / contain; opacity: .9; pointer-events: none; }

/* Les pages d'entrée (connexion, mot de passe, parrainage…) : le logo sans baseline (celui
   du pied de page du site, demande du 27/10), des étoiles, un ruban — et Olive qui se penche
   sur ce qui vient en premier. */
/* Le ruban déborde sous la carte (rogné, il finirait en coupe nette) ; seulement en
   largeur est-il retenu, pour ne pas faire défiler la page de côté. */
.marque { position: relative; display: flex; justify-content: center; padding: calc(28px + env(safe-area-inset-top, 0px)) 16px 0; overflow-x: clip; overflow-y: visible; }
.marque::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: min(1100px, 130%); top: 4px; aspect-ratio: 1564 / 487; background: url(/img/ruban-jaune.svg) no-repeat center top / 100% auto; opacity: .3; pointer-events: none; }
.publique .mobile { position: relative; }
.marque > * { position: relative; }
.marque .logo { display: block; height: 66px; width: auto; }
.marque .etoiles { position: absolute; pointer-events: none; }
.marque .gauche { width: 44px; left: calc(50% - 168px); top: calc(24px + env(safe-area-inset-top, 0px)); }
.marque .droite { width: 34px; right: calc(50% - 170px); top: calc(54px + env(safe-area-inset-top, 0px)); }
/* Olive est dans le flux, en tête de la page : posée sur la carte quand elle vient seule, sur
   le message quand il y en a un (« Si un compte correspond… », « Mot de passe enregistré… »).
   Accrochée à la carte, elle débordait dessus et masquait le message placé avant elle. */
.publique .mobile { padding-top: 0; }
.publique .ecran { position: relative; }
.publique .mobile::before { content: ''; display: block; position: relative; z-index: 1; width: 80px; height: 66px; margin: 0 18px -6px auto; background: url(/img/mascotte-olive-joie.svg) no-repeat center bottom / contain; pointer-events: none; }

/* « Bonjour » : des étoiles s'invitent au salut. */
.bonjour { position: relative; }
.bonjour .etoiles { position: absolute; right: 0; top: -6px; width: 30px; height: auto; flex: none; }

/* Le classement et « Moi » : une mascotte de la charte en tête. */
.tete-marque { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.tete-marque .mascotte { width: 76px; height: auto; flex: 0 0 76px; }
.tete-marque h1 { margin-top: 0; }
.tete-marque .sous { font-size: 13px; color: var(--muted); }
.tete-marque .etoiles { width: 26px; margin-left: auto; align-self: flex-start; }
.pied-marque { display: block; margin: 26px auto 0; height: 42px; width: auto; opacity: .9; }

/* La découverte d'une charte : ses étapes, ses pages, la charte entière par-dessus l'écran. */
.etapes-charte { margin: 8px 0 6px; padding-left: 20px; }
/* La visionneuse de charte (charte.js, la même dans l'aperçu) : les pages à la largeur,
   leur texte en grands caractères, une page en plein écran, la charte entière. */
.charte-tete { gap: 8px; margin-bottom: 10px; }
.charte-pages { margin: 10px 0; }
.charte-outils { gap: 8px; margin-bottom: 8px; }
.charte-images { display: grid; gap: 14px; }
.charte-page { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: center; cursor: zoom-in; }
.charte-page canvas { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.charte-page .petit { display: block; margin-top: 4px; }
.charte-texte { font-size: 19px; line-height: 1.65; }
.charte-texte:focus { outline: none; }
.charte-texte h3 { font-size: 14px; color: var(--muted); margin: 18px 0 6px; }
.charte-texte p { margin: 0 0 14px; }
.charte-loupe { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #1f2a1f; color: var(--white); }
.charte-loupe-barre, .charte-loupe-nav { gap: 8px; padding: 10px 12px; }
.charte-loupe-nav { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.charte-loupe-scene { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; }
.charte-loupe-scene canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: var(--white); }
.charte-fenetre { position: fixed; inset: 0; z-index: 50; background: var(--cream); overflow-y: auto; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.charte-fenetre-barre { position: sticky; top: 0; gap: 8px; background: var(--cream); padding: 10px 0; z-index: 1; }
body.fige { overflow: hidden; }

/* Le défi à la carte : compteurs, cartes d'action, textes à copier. */
.carte-compteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.compteur { background: var(--pea-lt); border-radius: 14px; padding: 10px; text-align: center; display: flex; flex-direction: column; }
.compteur b { font: 700 18px Poppins; color: var(--green); }
.action-carte { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-top: 10px; background: var(--white); }
.action-carte.engagee { border-color: var(--yellow); box-shadow: inset 3px 0 0 var(--yellow); }
.action-carte.realisee, .action-carte.demain, .action-carte.rejouable { background: var(--pea-lt); }
.action-carte > .fa-circle-check { color: var(--green-vif); }
.action-carte.fermee { background: var(--cream-2); color: var(--muted); }
.action-carte.a_choisir { flex-wrap: wrap; }
.action-carte.a_choisir > .sp { flex: 1 1 180px; min-width: 0; }
.action-carte.choisie { border-color: var(--green-vif); background: var(--pea-lt); box-shadow: inset 3px 0 0 var(--green-vif); }
.gestes-action { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-action { flex: 1 0 100%; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; font-size: 14px; overflow-wrap: anywhere; }
.detail-action h3 { font-size: 14px; margin: 12px 0 4px; }
.engagements { list-style: none; padding: 0; margin: 10px 0; }
.engagements li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.btn.engager-tout { margin-top: 16px; }
.dialogue-happea { border: 0; border-radius: 18px; padding: 20px; width: min(92vw, 420px); box-shadow: var(--shadow); }
.dialogue-happea::backdrop { background: rgba(20, 40, 20, .45); }
.dialogue-happea .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.actions-carte { gap: 10px; justify-content: flex-end; margin-top: 16px; }
.copie .row { gap: 8px; }
.copie p { margin: 8px 0 0; }
.paragraphes { white-space: pre-line; }
.etapes-action { padding-left: 20px; margin: 6px 0; }
.etapes-action li { margin: 4px 0; }
.hors-ecran { position: fixed; left: -9999px; top: 0; }

/* La conversation en vrai : le cadre, l'antisèche, les catégories de retour en cartes. */
.regle-cadre { display: flex; gap: 12px; align-items: flex-start; background: var(--pea-lt); border-radius: 14px; padding: 12px 14px; margin-top: 10px; }
.regle-cadre .numero { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: var(--white); font-size: 13px; }
.amorce { font-size: 15px; }
.amorce.point-dur { background: var(--yellow-lt); }
.categories-retour { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }
.categorie-retour { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px; cursor: pointer; background: var(--white); font-size: 14px; }
.categorie-retour i { font-size: 22px; color: var(--green); }
.categorie-retour:hover { border-color: var(--green); background: var(--pea-lt); }
.categorie-retour:has(input:checked) { border-color: var(--green); background: var(--pea-lt); box-shadow: inset 0 0 0 1px var(--green); }
.aide-categorie { min-height: 1.5em; margin-top: 10px; }
.rappel-confidentialite { background: var(--cream-2); border-radius: 10px; padding: 8px 12px; }
.faq summary { cursor: pointer; font-weight: 500; }

/* La maturité : un profil plus bas que le sien, grisé ; le chemin parcouru en seconde passation. */
.opt.desactive { opacity: .45; cursor: not-allowed; }
.opt.desactive:hover { border-color: var(--line); background: none; }
.encart.chemin { background: var(--yellow-lt); }

/* Les idées : le mur, les cartes, le vote et ses coups de cœur. */
.carte-idee { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-top: 10px; background: var(--white); }
.carte-idee summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.carte-idee summary b { flex: 1 1 100%; }
.carte-idee .piece { max-width: 100%; border-radius: 10px; margin-top: 8px; }
.filtres-idees { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; }
.idee-votable { margin-top: 6px; }
.idee-votable > .row { gap: 8px; margin-top: 6px; }
.compteurs-vote { gap: 8px; position: sticky; top: 0; background: var(--cream); padding: 8px 0; z-index: 1; }
.classement-idee { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; margin-top: 8px; background: var(--white); }
.classement-idee.bilan { background: var(--yellow-lt); }
.classement-idee .rang { width: 24px; color: var(--muted); }
.formats-idee { gap: 8px; }
.formats-idee .opt { flex: 1; text-align: center; }
.apercu-image { max-width: 100%; max-height: 220px; border-radius: 10px; margin-top: 8px; }
.compteur-caracteres { text-align: right; margin-top: 2px; }
.boussole { background: var(--yellow-lt); }
.depliant summary { cursor: pointer; font-weight: 500; }

/* « Ce que voit votre donneur d'ordre » : un choix par défi. */
.choix-defi { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--green-dk); overflow-wrap: break-word; }
#consentement { margin-top: 22px; }

/* ---------- Mes défis, phase en cours (spécification des parcours du 16/10) ---------- */
/* L'en-tête : le nom, l'icône podium (le classement n'est pas un onglet), le temps qui reste. */
.entete-challenge { display: flex; align-items: flex-start; gap: 12px; }
.entete-challenge > .sp { min-width: 0; }
.entete-challenge h1 { overflow-wrap: break-word; }
/* Les boutons de l'en-tête (règles, classement) : une icône et un mot, côte à côte, sans
   prendre la place des défis. Les règles en vert pois, le podium en jaune. */
.boutons-entete { flex: 0 0 auto; display: flex; gap: 8px; }
.btn-entete { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 8px 10px; border-radius: 16px; border: 1px solid; font-weight: 600; }
.btn-entete i { font-size: 20px; }
.btn-entete:focus-visible { outline: none; }
.btn-podium { background: var(--yellow-lt); color: var(--yellow-dk); border-color: var(--yellow); }
.btn-podium:hover, .btn-podium:focus-visible { background: var(--yellow); color: var(--green-dk); }
.btn-regles { background: var(--pea-lt); color: var(--green); border-color: var(--pea); }
.btn-regles:hover, .btn-regles:focus-visible { background: var(--pea); color: var(--green-dk); }
/* La page des règles : la période en tête, puis les règles et ce qui est en jeu. */
.periode-jeu { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: var(--pea-lt); }
.periode-jeu > i { font-size: 22px; color: var(--green); }
.periode-jeu b { display: block; font-family: Poppins; color: var(--green-dk); }
.temps-restant { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; margin-top: 14px; }
.temps-restant b { font: 700 18px Poppins, sans-serif; color: var(--green-dk); }
.temps-restant .bar { margin: 0; }
.temps-restant .petit { grid-column: 1 / -1; color: var(--yellow-dk); font-weight: 600; }
/* La carte de l'équipe : son total, son rang, ce qui a bougé ; jamais le détail par membre. */
.carte-equipe { margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: var(--green); color: var(--white); }
.carte-equipe .row { gap: 8px; }
.carte-equipe .row b { color: var(--white); font: 600 15px Poppins, sans-serif; overflow-wrap: anywhere; }
.carte-equipe .row i { color: var(--pea); }
.chiffres-equipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.chiffres-equipe div { display: flex; flex-direction: column; }
.chiffres-equipe b { font: 700 26px/1.1 Poppins, sans-serif; color: var(--white); font-variant-numeric: tabular-nums; }
.chiffres-equipe .petit { color: var(--pea); }
.carte-equipe .evolution { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 4px 12px; border-radius: 999px; font: 600 13px Poppins, sans-serif; }
.carte-equipe .evolution.monte { background: var(--pea); color: var(--green-dk); }
.carte-equipe .evolution.descend { background: rgba(255, 255, 255, .14); color: var(--white); }
.carte-equipe > .muted { color: #cfe0c4; margin: 10px 0 0; }
/* Les trois sections : un mot de Happea quand l'une est vide, jamais un vide. */
.section-defis { margin-top: 6px; }
.section-defis > .happea { margin-top: 10px; }
details.section-defis > summary { font: 600 16px Poppins, sans-serif; color: var(--green-dk); }
.disparait { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: var(--coral-lt); color: var(--coral-dk); font: 600 12px Poppins, sans-serif; }
/* La fenêtre des nouveaux défis : Happea, la liste, « J'y vais » ; un cadre au centre, jamais plus large que l'écran. */
/* La fenêtre des nouveaux défis : Happea en tête, une carte par défi à feuilleter, les actions
   au pied. Tête et pied restent en place ; seule la carte défile si son annonce est longue. */
dialog.fenetre-annonce { width: min(420px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; border: 0; border-radius: 24px; padding: 24px 22px 22px; background: var(--white); color: var(--body); box-shadow: 0 18px 48px rgba(29, 48, 29, .25); }
dialog.fenetre-annonce[open] { animation: annonce-entree .22s cubic-bezier(.16, 1, .3, 1); }
dialog.fenetre-defis { overflow: hidden; padding: 0; }
dialog.fenetre-defis[open] { display: flex; flex-direction: column; }
dialog.fenetre-annonce::backdrop { background: rgba(29, 48, 29, .45); }
@keyframes annonce-entree { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.fenetre-annonce[open] { animation: none; } }
.fermer-annonce { position: absolute; top: 12px; right: 12px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--green-dk); cursor: pointer; }
.fermer-annonce:focus-visible, .actions-annonce .btn:focus-visible, .fleche-annonce:focus-visible, .point-annonce:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.tete-annonce { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.tete-annonce .happea-annonce { width: 64px; height: 64px; flex: 0 0 64px; }
.tete-annonce h2 { font-size: 19px; line-height: 1.3; text-wrap: balance; }
.fenetre-defis .tete-annonce { padding: 22px 56px 14px 22px; }
.fenetre-defis .tete-annonce .happea-annonce { width: 56px; height: 56px; flex-basis: 56px; }
.fenetre-defis .tete-annonce h2 { font-size: 18px; }
.corps-annonce { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 22px; }
.scene-annonce { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--pea) transparent; }
.carte-annonce { display: flex; flex-direction: column; gap: 12px; min-height: 240px; padding: 18px; border-radius: 18px; background: var(--pea-lt); color: var(--green-dk); overflow-wrap: anywhere; }
.carte-annonce.vient-de-droite { animation: carte-vient-de-droite .28s cubic-bezier(.16, 1, .3, 1); }
.carte-annonce.vient-de-gauche { animation: carte-vient-de-gauche .28s cubic-bezier(.16, 1, .3, 1); }
@keyframes carte-vient-de-droite { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes carte-vient-de-gauche { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .carte-annonce.vient-de-droite, .carte-annonce.vient-de-gauche { animation: none; } }
.carte-annonce.sans-annonce { align-items: center; justify-content: center; text-align: center; }
.carte-annonce .etoiles-annonce { width: 44px; height: 44px; }
.gain-annonce { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-weight: 500; }
.carte-annonce .image-annonce { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.titre-carte-annonce { font: 700 20px/1.3 Poppins, sans-serif; color: var(--green-dk); text-wrap: balance; }
.contenu-annonce { display: grid; gap: 10px; color: var(--body); }
.contenu-annonce h4 { font: 600 15px/1.4 Poppins, sans-serif; color: var(--green-dk); }
.contenu-annonce p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 62ch; }
.contenu-annonce .lien-annonce { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.contenu-annonce .lien-annonce:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
.pied-carte-annonce { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.defi-carte-annonce { font: 600 13.5px/1.35 Poppins, sans-serif; color: var(--green); min-width: 0; }
.tag.peas-annonce { flex: none; background: var(--pea); color: var(--green-dk); font-family: Poppins, sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; }
.nav-annonce { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 2px; }
.fleche-annonce { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--green-dk); cursor: pointer; display: grid; place-items: center; transition: background-color .18s ease-out; }
.fleche-annonce:hover { background: var(--pea-lt); }
.milieu-annonce { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.points-annonce { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
/* Le point se voit à 8px, mais se touche à 20px. */
.point-annonce { width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.point-annonce::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pea); transition: width .18s ease-out, background-color .18s ease-out; }
.point-annonce.actif::before { width: 18px; border-radius: 999px; background: var(--green); }
@media (prefers-reduced-motion: reduce) { .point-annonce::before, .fleche-annonce { transition: none; } }
.compteur-annonce { font: 600 12.5px/1 Poppins, sans-serif; color: var(--muted); font-variant-numeric: tabular-nums; }
.actions-annonce { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.fenetre-defis .actions-annonce { margin-top: 0; padding: 16px 22px 22px; }
.actions-annonce .btn { flex: 1 1 140px; justify-content: center; }
/* Le mot de retour, en bandeau. */
.bandeau-retour { display: flex; align-items: center; gap: 10px; background: var(--yellow-lt); color: var(--green-dk); }
.bandeau-retour i { color: var(--yellow-dk); }
/* La pastille de l'onglet Mes défis. */
.onglets a { position: relative; }
.pastille-onglet { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--coral); color: var(--white); font: 700 11px/18px Poppins, sans-serif; text-align: center; }
/* Navigation (spécification des parcours du 16/10) : Mes défis, Mes missions (grisé), Moi. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.onglets a.bientot { color: #7d8a7d; }
.onglets a.bientot i { opacity: .7; }
/* Sur ordinateur, les onglets deviennent une barre latérale à gauche, sur toute la hauteur,
   le logo en tête (comme le back-office) ; la barre du haut et le contenu se rangent à sa
   droite. Une page sans onglets (un défi en cours) garde toute la largeur. */
.onglets .logo-onglets { display: none; }
@media (min-width: 900px) {
    body.application { padding-bottom: 0; }
    body.application:has(> .onglets) { padding-left: var(--largeur-onglets); }
    :root { --largeur-onglets: 232px; }
    .appbar { position: sticky; top: 0; z-index: 9; }
    body.application:has(> .onglets) .appbar .logo-appbar { visibility: hidden; }
    .onglets { position: fixed; top: 0; bottom: 0; left: 0; right: auto; width: var(--largeur-onglets); flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 4px; z-index: 11;
        background: var(--green-dk); border: 0; border-right: 1px solid rgba(255, 255, 255, .08); padding: 18px 14px; overflow-y: auto; }
    .onglets .logo-onglets { display: block; padding: 4px 10px 22px; }
    .onglets .logo-onglets img { height: 30px; width: auto; }
    .onglets a { flex: 0 0 auto; max-width: none; flex-direction: row; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: #cfe0c4; font-size: 14.5px; }
    .onglets a i { width: 18px; font-size: 16px; text-align: center; }
    .onglets a:hover, .onglets a:focus-visible { color: var(--white); background: rgba(255, 255, 255, .08); outline: none; }
    .onglets a.on { color: var(--green-dk); background: var(--pea); font-weight: 600; }
    .onglets a.bientot { color: #9fb39f; }
    .pastille-onglet { position: static; margin-left: auto; }
    body.application::before { bottom: 40px; }
    body.application:has(> .onglets)::before { left: calc(var(--largeur-onglets) - 40px); }
    /* Plus d'onglets en bas : la pastille d'un emprunt descend dans le coin. */
    .emprunt { right: 24px; bottom: 24px; }
}
/* Les impulsions, grisées : lisibles, et l'état dit. */
.section-bientot { margin-top: 14px; min-height: 0; background: var(--cream-2); border-style: dashed; }
.section-bientot summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font: 600 15px Poppins, sans-serif; color: #5b6b5b; list-style: none; }
.section-bientot summary::-webkit-details-marker { display: none; }
.section-bientot p { margin: 10px 0 0; }
.tag-bientot { background: var(--white); color: #5b6b5b; border: 1px solid var(--line); }
.missions-bientot h1 { margin-top: 16px; }
/* La préparation (spécification des parcours du 16/10) : l'équipe d'abord. */
.mon-equipe, .autres-equipes, .regles-courtes { margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: var(--pea-lt); }
.mon-equipe .row { gap: 10px; }
.mon-equipe .row i { color: var(--green); font-size: 18px; }
.mon-equipe h3, .autres-equipes h3, .regles-courtes h3 { font-size: 16px; overflow-wrap: anywhere; }
.compte-arrives { font: 700 16px Poppins, sans-serif; color: var(--green-dk); white-space: nowrap; }
.jauge-equipe { height: 12px; border-radius: 999px; background: var(--white); margin: 10px 0 12px; overflow: hidden; }
.jauge-equipe span { display: block; height: 100%; border-radius: 999px; background: var(--green-vif); }
.mon-equipe .happea { background: var(--white); }
.membres-equipe { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.membres-equipe li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px 6px 12px; border-radius: 12px; background: var(--white); color: var(--ink); overflow-wrap: anywhere; }
.membres-equipe li.a-rejoint i { color: var(--green-vif); }
.membres-equipe li.pas-arrive i { color: var(--yellow-dk); }
.membres-equipe .statut { font-size: 12.5px; color: #5b6b5b; white-space: nowrap; }
.autres-equipes { background: var(--cream-2); }
.ligne-arrivees { margin-top: 10px; font-size: 14px; }
.ligne-arrivees .bar { margin: 6px 0 0; }
.ligne-arrivees.moi b, .ligne-arrivees.moi .sp { color: var(--green-dk); font-weight: 600; }
.regles-courtes { background: var(--white); border: 1px solid var(--line); }
.regles-courtes ul { margin: 8px 0 0; padding-left: 20px; }
.regles-courtes li { margin: 4px 0; }
.regles-courtes .repli { margin-top: 8px; }
/* Le classement (spécification des parcours du 16/10) : des onglets internes, le top 10. */
.onglets-internes { display: flex; gap: 6px; margin: 16px 0 4px; padding: 4px; border-radius: 999px; background: var(--cream-2); }
.onglets-internes button { flex: 1 1 0; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--green-dk); font: 600 14px Poppins, sans-serif; cursor: pointer; }
.onglets-internes button[aria-selected="true"] { background: var(--green); color: var(--white); }
.onglets-internes button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.vue-classement { margin-top: 12px; }
.vue-classement > .happea { margin: 6px 0 10px; }
.top-individuel { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.top-individuel li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--white); }
/* Les trois premiers sont sur le podium : la liste commence au quatrième. */
.top-individuel li.moi { background: var(--pea-lt); border-color: var(--green-vif); }
.top-individuel .rang { width: 24px; font: 700 15px Poppins, sans-serif; color: var(--green); text-align: center; font-variant-numeric: tabular-nums; }
.top-individuel .sp { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.top-individuel .peas { font: 700 15px Poppins, sans-serif; color: var(--green-dk); white-space: nowrap; }
.avatar-classement { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--pea); color: var(--green-dk); }
.avatar-classement .avatar-image, .embleme .avatar-image { display: block; width: 100%; height: 100%; border-radius: 50%; }
.mon-rang { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--green); color: var(--white); font: 600 14px Poppins, sans-serif; }
.mon-rang i { color: var(--pea); }
/* Le retour d'un défi réalisé : Happea, l'équipe, la suite. */
.retour-defi { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 14px 16px; border-radius: 18px; background: var(--pea); color: var(--green-dk); animation: retour-entree .3s cubic-bezier(.16, 1, .3, 1); }
.retour-defi .happea-retour { width: 56px; height: 56px; flex: 0 0 56px; }
.retour-defi .sp { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.retour-defi b { font: 700 16px Poppins, sans-serif; }
.retour-defi .suite-defi { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@keyframes retour-entree { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .retour-defi { animation: none; } }
/* La clôture en deux temps. */
.rebours-final b { font-size: 16px; }
.relancer-equipe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.contribution { margin: 8px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--pea); color: var(--green-dk); font: 600 15px Poppins, sans-serif; }
.podium-equipes .rang { width: 22px; font: 700 15px Poppins, sans-serif; color: var(--green); text-align: center; }
.cloture.finale .podium-equipes li:first-child { background: var(--yellow-lt); border-color: var(--yellow); }
.podium-equipes { list-style: none; padding-left: 0; }
.podium-equipes li { align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; margin-top: 6px; }
.podium-equipes li .sp { overflow-wrap: anywhere; }
/* Ses réglages d'affichage (Moi) : animations réduites, messages de Happea essentiels. */
html.animations-reduites *, html.animations-reduites *::before, html.animations-reduites *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.happea-essentiel .section-defis > .happea, html.happea-essentiel .bandeau-retour, html.happea-essentiel .mon-equipe > .happea, html.happea-essentiel .vue-classement > .happea { display: none; }
/* Moi : les cumuls du challenge en cours, l'historique, l'affichage. */
.cumuls-challenge { margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: var(--green); color: var(--white); }
.cumuls-challenge .nom { display: block; color: var(--white); font: 600 15px Poppins, sans-serif; overflow-wrap: anywhere; }
.cumuls-challenge .bilan div { background: rgba(255, 255, 255, .1); border-color: transparent; }
.cumuls-challenge .bilan b { color: var(--white); }
.cumuls-challenge .bilan .muted { color: var(--pea); }
.historique { margin-top: 22px; }
.historique .participation .peas { white-space: nowrap; font: 600 14px Poppins, sans-serif; color: var(--green); }
.reglages-affichage { margin-top: 22px; }
.choix-reglage { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px 12px; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.choix-reglage legend { padding: 0 6px; font: 600 14px Poppins, sans-serif; color: var(--green-dk); }
.choix-reglage .case { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.choix-reglage input { accent-color: var(--green); }
.deconnexion p { margin: 0 0 8px; text-align: center; }
/* La première connexion : un écran, l'accord, puis la visite de Happea. */
.premiere-connexion h1 { margin-top: 14px; }
.premiere-connexion h2 { font-size: 16px; margin-top: 18px; }
.info-donnees { margin-top: 18px; font-size: 14px; }
.accord-conditions { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--pea-lt); color: var(--ink); }
.accord-conditions input { margin-top: 3px; accent-color: var(--green); width: 18px; height: 18px; flex: 0 0 18px; }
.accord-conditions a { color: var(--green-dk); font-weight: 600; text-decoration: underline; }
.accord-conditions a i { font-size: 11px; }
.premiere-connexion .btn.large:disabled { opacity: .5; cursor: not-allowed; }
/* Le filleul choisit son équipe (#54) : une carte par équipe, la cochée en vert. */
.choix-equipes { display: grid; gap: 10px; margin: 16px 0 18px; padding: 0; border: 0; min-width: 0; }
.equipe-au-choix { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--white); color: var(--green-dk); font: 600 15px Poppins, sans-serif; cursor: pointer; overflow-wrap: anywhere; }
.equipe-au-choix input { accent-color: var(--green); width: 18px; height: 18px; flex: 0 0 18px; margin: 0; }
.equipe-au-choix i { color: var(--green); }
.equipe-au-choix:has(input:checked) { border-color: var(--green); background: var(--pea-lt); }
.equipe-au-choix:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 2px; }
.fenetre-visite { text-align: center; }
.btn-passer { position: absolute; top: 12px; right: 14px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--green-dk); font: 600 13px Poppins, sans-serif; cursor: pointer; }
.btn-passer:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.corps-visite { padding-top: 26px; }
.corps-visite .happea-visite { width: 120px; height: 120px; display: block; margin: 0 auto 12px; }
.corps-visite h2 { font-size: 20px; }
.corps-visite p { margin: 10px 0 0; }
.points-visite { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.points-visite span { width: 9px; height: 9px; border-radius: 50%; background: var(--pea); }
.points-visite span.on { width: 22px; border-radius: 999px; background: var(--green); }
.carte-equipe .happea { margin-top: 12px; background: rgba(255, 255, 255, .92); color: var(--green-dk); }
/* L'objectif d'équipe : une jauge en nombre, jamais en noms. */
.objectif-equipe { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--yellow-lt); color: var(--green-dk); font-size: 13px; }
.objectif-equipe .row { gap: 8px; }
.objectif-equipe .row i { color: var(--yellow-dk); }
.objectif-equipe b { font: 600 13px Poppins, sans-serif; }
.objectif-equipe .compte-objectif { font: 700 13px Poppins, sans-serif; white-space: nowrap; }
.objectif-equipe .jauge-equipe { margin: 8px 0 0; height: 8px; }
.objectif-equipe .jauge-equipe span { background: var(--yellow-dk); }
.objectif-equipe p { margin: 6px 0 0; }
.objectif-equipe .proche { font-weight: 600; color: var(--coral-dk); }
.objectif-equipe.atteint { background: var(--pea); }
.objectif-equipe.atteint .row i { color: var(--green); }
.bandeau-objectif { display: flex; align-items: center; gap: 10px; background: var(--yellow); color: var(--green-dk); font-weight: 600; }
.titre-par-defi { font-size: 15px; margin-top: 16px; overflow-wrap: anywhere; }

/* Le sondage : l'en-tête du bloc, la note de 0 à 10 en pastilles (deux rangées sur un petit
   téléphone), la grille d'accord en cartes, une par affirmation. */
.tete-sondage { gap: 8px; margin-bottom: 10px; }
.requis { color: var(--coral-dk); }
.pastilles { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; margin-top: 14px; }
.pastilles label { display: block; }
.pastilles span { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; font-family: Poppins; font-weight: 600; color: var(--green-dk); cursor: pointer; }
.pastilles span:hover { background: var(--pea-lt); border-color: var(--green); }
.pastilles label:has(input:checked) span { background: var(--green); border-color: var(--green); color: var(--white); }
.pastilles label:has(input:focus-visible) span { outline: 2px solid var(--green-vif); outline-offset: 2px; }
.bornes { gap: 8px; margin-top: 8px; }
.item-grille { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px 14px; margin: 16px 0 0; background: var(--white); }
.item-grille legend { font-family: Poppins; font-weight: 600; color: var(--green-dk); padding: 0 6px; }
.opt.petite { padding: 10px 13px; margin-top: 7px; font-size: 14px; }
.opt:has(input:focus-visible) { outline: 2px solid var(--green-vif); outline-offset: 2px; }
@media (max-width: 420px) {
    .pastilles { grid-template-columns: repeat(6, 1fr); }
}