/* ═══════════════════════════════════════════════════════════
   Agent de poche — feuille de style PROPRE à l'appli
   Le socle (/shared/appli-socle.css) porte le reste : reset, barre, boutons, dock, feuilles, listes, message passager, clavier, visite,
   micro, onglets. On y redéfinit ici les jetons de couleur (la teinte de l'appli) et ce qui ne vaut que pour elle.
   Rayons et ombres : jamais de littéral (--r-*, --sh-* de /shared/jetons.css — controle-jetons.mjs le refuserait).
   ⚠️ L'accent est un TERRACOTTA : le vert dit « c'est fait » (--ok), jamais l'accent. Une étape faite n'est pas dite par la couleur seule :
   la coche et le mot l'accompagnent.
   ═══════════════════════════════════════════════════════════ */

:root {
  --accent: #b8502c; --accent-fort: #8a3a1d; --accent-clair: #fbe9e1;
}
html[data-theme="sombre"] {
  --accent: #e68a68; --accent-fort: #f2b49b; --accent-clair: #3a2018; --sur-accent: #2a130b;
}

#ecran { padding-bottom: calc(var(--dock-h) + 96px + var(--bas)); }
#ecran.sans-cta { padding-bottom: calc(var(--dock-h) + 28px + var(--bas)); }
#toast { bottom: calc(var(--dock-h) + var(--bas) + 84px); }
@media (max-width: 480px) { html.avec-panneau-bug #ecran { padding-top: 62px; } html.avec-panneau-bug.clavier #ecran { padding-top: 18px; } }

.sous-titre { margin: 18px 0 8px; font-size: .95rem; font-weight: 800; }
.sous-titre:first-child { margin-top: 2px; }
.accroche { margin: 4px 0 14px; line-height: 1.5; color: var(--doux); }
a.btn-1, a.btn-2 { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }
a.btn-2 { color: var(--accent-fort); }
.note-infos { margin-top: 10px; }
.lien-partage { width: 100%; padding: 10px 12px; border-radius: var(--r-md); border: 1.5px solid var(--trait); background: var(--panneau); font-size: .88rem; resize: none; }
.retour { margin: 0 0 10px; }
.contenu-fr { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-md); background: var(--panneau-2); font-size: .84rem; color: var(--doux); }

/* ── le parcours ─────────────────────────────────────────────── */
.hero { margin: 0 0 14px; padding: 18px 16px 16px; border-radius: var(--r-xl); background: linear-gradient(160deg, var(--accent-clair), var(--panneau)); border: 1px solid var(--trait); box-shadow: var(--sh-1); }
.hero h2 { font-family: var(--police-titre); font-size: 1.7rem; line-height: 1.15; color: var(--accent-fort); }
.hero p { margin: 8px 0 0; line-height: 1.5; }
.cadran-bloc { display: grid; justify-items: center; gap: 8px; margin: 0 0 14px; padding: 14px 12px 12px; border-radius: var(--r-xl); background: var(--panneau); border: 1px solid var(--trait); box-shadow: var(--sh-1); }
.cadran { width: min(100%, 280px); height: auto; display: block; }
.cadran .part { cursor: pointer; outline: none; }
.cadran .part path { fill: var(--accent-clair); stroke: var(--panneau); stroke-width: 3; transition: fill .2s; }
.cadran .part.faite path { fill: var(--accent); }
.cadran .part.fac path { stroke-dasharray: 6 4; stroke: var(--accent); stroke-width: 1.5; }
.cadran .part.faite.fac path { stroke: var(--panneau); stroke-dasharray: none; stroke-width: 3; }
.cadran .part text { font: 800 15px var(--police); fill: var(--accent-fort); pointer-events: none; }
.cadran .part.faite text { fill: var(--sur-accent); }
.cadran .part:focus-visible path { stroke: var(--encre); stroke-width: 3; }
.cadran .centre { fill: var(--panneau); stroke: var(--trait); stroke-width: 1.5; }
.cadran .c-grand { font: 800 26px var(--police-titre); fill: var(--accent-fort); text-anchor: middle; }
.cadran .c-petit { font: 700 11px var(--police); fill: var(--doux); text-anchor: middle; }
@media (prefers-reduced-motion: reduce) { .cadran .part path { transition: none; } }
.cadran-legende { font-size: .84rem; color: var(--doux); text-align: center; line-height: 1.45; }
.court { display: flex; align-items: center; gap: 10px; }
.etape-ligne { position: relative; }
.etape-ligne .item .item-ico { font-weight: 800; color: var(--accent-fort); background: var(--accent-clair); }
.etape-ligne.faite .item .item-ico { background: var(--ok); color: #fff; }
.badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); font-size: .7rem; font-weight: 800; background: var(--panneau-2); color: var(--doux); vertical-align: middle; }
details.bloc-pliable { margin: 14px 0; padding: 4px 14px 10px; border: 1px solid var(--trait); border-radius: var(--r-lg); background: var(--panneau); box-shadow: var(--sh-1); }
details.bloc-pliable > summary { cursor: pointer; font-weight: 700; padding: 12px 0; min-height: 44px; list-style-position: inside; }
details.bloc-pliable[open] > summary { border-bottom: 1px solid var(--trait); margin-bottom: 8px; }
.comment-liste { display: grid; gap: 10px; margin: 6px 0 0; list-style: none; }
.comment-liste li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.comment-liste .ico { font-size: 1.4rem; line-height: 1.2; }
.comment-liste b { display: block; }
.comment-liste span { display: block; color: var(--doux); font-size: .88rem; line-height: 1.45; }
.credits { margin: 18px 0 0; padding: 14px; border-radius: var(--r-xl); background: var(--accent-clair); border: 1px solid var(--trait); }
.credits h3 { font-family: var(--police-titre); font-size: 1.15rem; color: var(--accent-fort); }
.credits p { margin: 6px 0 10px; line-height: 1.5; font-size: .92rem; }
.credits .pile { grid-template-columns: 1fr; }
@media (min-width: 480px) { .credits .pile { grid-template-columns: repeat(3, 1fr); } }

/* ── une étape ───────────────────────────────────────────────── */
.etape-tete { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.etape-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--accent-clair); font-size: 1.8rem; }
.etape-tete h2 { font-family: var(--police-titre); font-size: 1.4rem; line-height: 1.15; }
.etape-tete small { display: block; color: var(--doux); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.pourquoi { margin: 0 0 12px; line-height: 1.55; }
.pas { display: grid; gap: 8px; margin: 6px 0 0; list-style: none; counter-reset: pas; }
.pas li { counter-increment: pas; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.5; }
.pas li::before { content: counter(pas); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--accent); color: var(--sur-accent); font-weight: 800; font-size: .85rem; }
.pieges { display: grid; gap: 6px; margin: 6px 0 0; list-style: none; }
.pieges li { padding: 8px 12px; border-radius: var(--r-md); background: var(--alerte-clair); line-height: 1.45; font-size: .92rem; }
html[data-theme="sombre"] .pieges li { background: var(--panneau-2); }
.prompt { margin: 0 0 12px; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--trait); background: var(--panneau); box-shadow: var(--sh-1); }
.prompt h4 { font-size: 1rem; }
.prompt .quand { margin: 2px 0 8px; font-size: .85rem; color: var(--doux); line-height: 1.4; }
.prompt pre { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--panneau-2); font: .88rem/1.55 var(--police); white-space: pre-wrap; overflow-wrap: anywhere; }
.trou { padding: 0 3px; border-radius: var(--r-xs); background: var(--accent-clair); color: var(--accent-fort); font-weight: 700; }
.prompt .pile { grid-template-columns: 1fr; }
@media (min-width: 420px) { .prompt .pile { grid-template-columns: 1fr 1fr; } }
.coches { display: grid; gap: 6px; margin: 6px 0 0; list-style: none; }
.coche-ligne { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: var(--r-md); background: var(--panneau-2); line-height: 1.4; cursor: pointer; }
.coche-ligne input { width: 24px; height: 24px; accent-color: var(--accent); }
.etape-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; }
.etape-nav .btn-2 { min-height: 44px; }

/* ── l'atelier ───────────────────────────────────────────────── */
.champ-f { display: grid; gap: 4px; margin: 0 0 12px; }
.champ-f .etiquette.petit { margin-bottom: 0; }
.champ-f small { color: var(--doux); font-size: .8rem; line-height: 1.4; }
.champ-f textarea { min-height: 84px; }
.champ-f input[type="text"], .champ-f input[type="time"], .champ-f select { width: 100%; min-height: 44px; }
.demarrer { display: grid; gap: 8px; margin: 0 0 14px; grid-template-columns: 1fr; }
@media (min-width: 420px) { .demarrer { grid-template-columns: repeat(3, 1fr); } }
.resultat { margin: 16px 0 0; padding: 12px; border-radius: var(--r-xl); background: var(--panneau); border: 1px solid var(--trait); border-left: 6px solid var(--accent); box-shadow: var(--sh-2); }
.resultat h3 { font-family: var(--police-titre); font-size: 1.15rem; }
.resultat pre { margin: 8px 0; padding: 10px 12px; max-height: 340px; overflow: auto; border-radius: var(--r-md); background: var(--panneau-2); font: .84rem/1.55 var(--police); white-space: pre-wrap; overflow-wrap: anywhere; }
.controle { display: grid; gap: 6px; margin: 8px 0; list-style: none; }
.controle li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; font-size: .9rem; line-height: 1.4; }
.controle .signe { font-weight: 800; }
.controle .oui .signe { color: var(--ok); }
.controle .non .signe { color: var(--alerte); }
.controle small { display: block; color: var(--doux); font-size: .8rem; }
.bilan { margin: 6px 0 8px; font-weight: 700; }
.outil-carte { margin: 0 0 12px; padding: 12px; border-radius: var(--r-lg); border: 1.5px solid var(--trait); background: var(--panneau); }
.outil-carte.choisi { border-color: var(--accent); background: var(--accent-clair); }
.outil-carte .tete { display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; gap: 10px; align-items: center; cursor: pointer; min-height: 44px; }
.outil-carte .tete .ico { font-size: 1.5rem; text-align: center; }
.outil-carte .tete input { width: 24px; height: 24px; accent-color: var(--accent); }
.outil-carte .tete small { display: block; color: var(--doux); font-size: .84rem; line-height: 1.35; }
.outil-carte .corps { margin: 10px 0 0; display: grid; gap: 6px; }
.outil-carte .prudence { padding: 8px 10px; border-radius: var(--r-md); background: var(--panneau-2); font-size: .84rem; line-height: 1.4; }
.cas-puces { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.verif-ligne { margin: 0 0 12px; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--trait); background: var(--panneau); }
.verif-ligne b { display: block; }
.verif-ligne small { display: block; margin: 2px 0 8px; color: var(--doux); line-height: 1.4; }
.verif-ligne .puces { margin-top: 4px; }
.puce.ko[aria-pressed="true"] { background: var(--alerte-clair); border-color: var(--alerte); color: var(--alerte); }
.puce.oui[aria-pressed="true"] { background: #e3f2e8; border-color: var(--ok); color: var(--ok); }
html[data-theme="sombre"] .puce.oui[aria-pressed="true"] { background: var(--panneau-2); }
.suggeree { font-size: .7rem; font-weight: 800; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--accent); color: var(--sur-accent); }

/* ── les idées ───────────────────────────────────────────────── */
.critere { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-lg); border: 1px solid var(--trait); background: var(--panneau); }
.critere b { display: block; line-height: 1.4; }
.critere small { display: block; margin: 2px 0 6px; color: var(--doux); line-height: 1.4; }
.verdict { margin: 12px 0 0; padding: 14px; border-radius: var(--r-xl); background: var(--accent-clair); border-left: 6px solid var(--accent); line-height: 1.5; }
.verdict b { display: block; font-family: var(--police-titre); font-size: 1.15rem; color: var(--accent-fort); }
.idee { margin: 0 0 12px; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--trait); background: var(--panneau); box-shadow: var(--sh-1); }
.idee h4 { font-size: 1.02rem; }
.idee p { margin: 6px 0 0; line-height: 1.5; font-size: .92rem; }
.idee ul { margin: 4px 0 0 18px; font-size: .9rem; line-height: 1.45; }
.idee .btn-2 { margin-top: 10px; min-height: 44px; }

/* ── le quiz ─────────────────────────────────────────────────── */
.quiz-q { font-family: var(--police-titre); font-size: 1.2rem; line-height: 1.3; margin: 8px 0 12px; }
.quiz-opts { display: grid; gap: 8px; list-style: none; }
.quiz-opt { width: 100%; min-height: 52px; padding: 10px 12px; text-align: left; border-radius: var(--r-lg); border: 1.5px solid var(--trait); background: var(--panneau); line-height: 1.4; }
.quiz-opt:disabled { opacity: 1; }
.quiz-opt.juste { border-color: var(--ok); background: #e3f2e8; }
.quiz-opt.faux { border-color: var(--alerte); background: var(--alerte-clair); }
html[data-theme="sombre"] .quiz-opt.juste, html[data-theme="sombre"] .quiz-opt.faux { background: var(--panneau-2); }
.quiz-expl { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--panneau-2); line-height: 1.5; }
.quiz-prog { color: var(--doux); font-size: .84rem; }

/* ── Plus ────────────────────────────────────────────────────── */
.reglage-taille { margin: 12px 0; display: grid; gap: 6px; }
.signature { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 12px; border-radius: var(--r-md); color: inherit; text-decoration: none; }
.signature:hover, .signature:focus-visible { background: var(--panneau-2); }
.signature-txt { display: flex; flex-direction: column; line-height: 1.3; }
.signature-txt small { color: var(--doux); }

.dock button[aria-current="page"] { color: var(--accent-fort); background: var(--accent-clair); }