/* ============================================================
   Fiche activité (brique F1, spec docs/specs/2026-10-02-fiches-activites-design.md § 6) — js/activites/fiche*.js
   Trois lectures sur une grille : Découvrir (2 colonnes : identité + Comprendre / Animer + Préparer), Terrain (fiche
   express, gros texte), Préparer. Couleurs : jetons de css/tokens.css seulement (clair et sombre) ; pictos au trait,
   toujours libellés. Sur téléphone (≤ 900 px) les colonnes s'effacent : identité → carte → lectures → reste.
   ============================================================ */

.act-page { width: 100%; box-sizing: border-box; padding: clamp(.9rem, 2.4vw, 2rem) clamp(16px, 3.5vw, 56px) 4rem; }
.act-chargement, .act-message { color: var(--texte-2); font-size: 1.05rem; }
.act-fiche-message { padding-block: 2rem; }
.act-vide { color: var(--texte-3); font-style: italic; }

.act-fiche { display: flex; flex-direction: column; gap: 0; color: var(--texte); }
.act-ariane { margin-bottom: .9rem; }

/* ---------- Barre : lectures + actions ---------- */
.act-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem;
  padding-bottom: 1.1rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--ligne); }
.act-lectures { display: inline-flex; border: 1px solid var(--ligne-2); border-radius: var(--r-sm); overflow: hidden; background: var(--s1); }
.act-lecture { appearance: none; border: 0; background: transparent; color: var(--texte-2); font: 500 .86rem/1 var(--sans);
  letter-spacing: .02em; padding: .72rem 1.05rem; cursor: pointer; min-height: 44px; transition: background var(--dur), color var(--dur); }
.act-lecture + .act-lecture { border-left: 1px solid var(--ligne-2); }
.act-lecture:hover { background: var(--survol-fond); color: var(--survol-texte); }
.act-lecture[aria-pressed="true"] { background: var(--texte); color: var(--bg-0); }
.act-lecture:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.act-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- Grille : deux colonnes sur ordinateur ---------- */
.act-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(2rem, 4.5vw, 5rem); align-items: start; }
.act-grille:has(> .act-col-g:only-child) { grid-template-columns: minmax(0, 1fr); }
.act-col { min-width: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.act-fiche[data-lecture="preparer"] .act-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* ---------- Identité ---------- */
.act-ident-haut { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .55rem; }
.act-ident-haut .kicker { margin: 0; }
.act-titre { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.02; letter-spacing: -.01em;
  margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.act-phrase { font-size: clamp(1.12rem, 1.6vw, 1.32rem); line-height: 1.45; margin: .8rem 0 0; max-width: 60ch; text-wrap: pretty; }
.act-analogie { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--texte-2); margin: .6rem 0 0; max-width: 60ch; }
.act-alias { font-size: .86rem; color: var(--texte-3); margin: .6rem 0 0; }
.act-manque { margin: .7rem 0 0; padding: .55rem .8rem; border-left: 3px solid var(--alerte); background: var(--alerte-fond); color: var(--texte); font-size: .9rem; max-width: 60ch; }

.act-badges { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.act-badge { display: inline-flex; align-items: center; padding: .22rem .55rem; border-radius: var(--r-xs); font: 600 .72rem/1.2 var(--sans);
  letter-spacing: .06em; text-transform: uppercase; border: 1px solid transparent; }
.act-badge-brouillon { background: var(--alerte-fond); color: var(--alerte); border-color: var(--alerte-filet); }
.act-badge-privee { background: var(--accent-fond); color: var(--accent); border-color: var(--accent-filet); }
.act-badge-archivee { background: var(--s3); color: var(--texte-2); border-color: var(--ligne-2); }

/* ---------- Pictos (js/activites/pictos.js) ---------- */
.act-picto { display: inline-flex; align-items: center; gap: .45rem; }
.act-picto-svg { flex: none; width: 20px; height: 20px; color: var(--accent); }
.act-picto-vide { display: inline-block; width: 20px; height: 20px; flex: none; }

/* Carte complète (Découvrir) : picto + libellé au-dessus, valeur, précision */
.act-carte .act-groupe-titre { margin-bottom: .8rem; }
.act-carte-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 0 1.6rem; margin: 0;
  border-top: 1px solid var(--texte); }
.act-carte-i { padding: .7rem 0 .75rem; border-bottom: 1px solid var(--ligne); min-width: 0; }
.act-carte-i dt { display: flex; align-items: center; gap: .45rem; font: 500 .74rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }
.act-carte-i dd { margin: .35rem 0 0 calc(20px + .45rem); }
.act-carte-v { display: block; font-size: 1.02rem; font-weight: 500; }
.act-carte-d { display: block; font-size: .86rem; color: var(--texte-2); margin-top: .12rem; }

/* Carte express (Terrain, Préparer) */
.act-express { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.act-express li { display: inline-flex; padding: .42rem .7rem; border: 1px solid var(--ligne-2); border-radius: var(--r-sm); background: var(--s1);
  font-size: .98rem; font-weight: 500; }

/* ---------- Groupes et blocs ---------- */
.act-groupe { display: flex; flex-direction: column; gap: 1.25rem; }
.act-groupe-titre { margin: 0; }
.act-bloc { min-width: 0; }
.act-h { font-family: var(--serif); font-weight: 400; font-size: 1.42rem; line-height: 1.15; margin: 0 0 .5rem; }
.act-bloc p { margin: 0; line-height: 1.55; max-width: 68ch; white-space: pre-line; text-wrap: pretty; }
.act-bloc p + p { margin-top: .6rem; }
.act-puces { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .4rem; line-height: 1.5; }
.act-bloc .act-sous { font: 500 .74rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); margin: 1rem 0 .4rem; }
.act-exemple { font-style: italic; color: var(--texte-2); }
.act-histoire { font-size: 1.02rem; color: var(--texte-2); }

/* Étapes : numéro serif, texte, minutage */
.act-etapes { list-style: none; margin: 0; padding: 0; counter-reset: none; border-top: 1px solid var(--ligne); }
.act-etapes li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--ligne); }
.act-etape-n { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--accent); }
.act-etape-t { line-height: 1.5; }
.act-etape-m { font-family: var(--mono); font-size: .8rem; color: var(--texte-2); white-space: nowrap; padding: .12rem .4rem; border: 1px solid var(--ligne); border-radius: var(--r-xs); }
.act-bloc .act-etapes-total { margin-top: .5rem; font-size: .86rem; color: var(--texte-2); }

/* Ajuster, rôles, postes : définitions */
.act-ajuster, .act-roles { margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.act-ajuster dt, .act-roles dt { font-weight: 600; font-size: .95rem; }
.act-ajuster dd, .act-roles dd { margin: .15rem 0 0; line-height: 1.5; color: var(--texte); }

/* Animer : panneau (colonne de l'animateur) */
.act-panneau { background: var(--s1); border: 1px solid var(--ligne); border-radius: var(--r-md); padding: clamp(1.1rem, 2vw, 1.6rem); }
.act-a-dire { margin: 0; padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--accent); }
.act-a-dire p { font-size: 1.05rem; line-height: 1.55; }
.act-securite { padding: .8rem 1rem; border-left: 3px solid var(--alerte); background: var(--alerte-fond); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.act-securite .act-h { font-size: 1.2rem; }

/* Préparer */
.act-materiel { width: 100%; border-collapse: collapse; font-size: .95rem; }
.act-materiel th { text-align: left; font: 500 .72rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2);
  padding: 0 .6rem .5rem 0; border-bottom: 1px solid var(--texte); }
.act-materiel td { padding: .55rem .6rem .55rem 0; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.act-materiel td:not(:first-child), .act-materiel th:not(:first-child) { white-space: nowrap; }
.act-temps { font-weight: 500; }

/* Pourquoi, famille */
.act-pourquoi { font-family: var(--serif); font-size: 1.2rem; line-height: 1.4; }
.act-fam-nom { font-family: var(--serif); font-size: 1.3rem; }
.act-bloc .act-fam-meca { margin-top: .35rem; }
.act-bloc .act-fam-ex { margin-top: .4rem; font-size: .9rem; color: var(--texte-2); }
.act-liens { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.act-liens a { color: var(--accent); text-underline-offset: 3px; }
.act-liens a:hover { color: var(--survol-texte); }

.act-tout-voir-l { margin: .4rem 0 0; }

/* ---------- Terrain : gros texte ---------- */
.act-fiche[data-lecture="terrain"] { font-size: 1.12rem; }
.act-fiche[data-lecture="terrain"] .act-bloc p, .act-fiche[data-lecture="terrain"] .act-puces,
.act-fiche[data-lecture="terrain"] .act-etape-t, .act-fiche[data-lecture="terrain"] .act-ajuster dd { font-size: 1.12rem; line-height: 1.5; }
.act-fiche[data-lecture="terrain"] .act-h { font-size: 1.5rem; }
.act-fiche[data-lecture="terrain"] .act-etape-n { font-size: 1.8rem; }

/* ---------- Téléphone et tablette étroite : une colonne, identité → carte → lectures → reste ---------- */
@media (max-width: 900px) {
  .act-grille, .act-col { display: contents; }
  .act-fiche > *, .act-col > * { order: 5; }
  .act-fiche > .act-ariane { order: 0; }
  .act-col > .act-ident { order: 1; }
  .act-col > .act-carte, .act-col > .act-express { order: 2; }
  .act-fiche > .act-barre { order: 3; margin: 1.2rem 0 1.3rem; padding: 0; border: 0; }
  .act-col > * { margin-bottom: 1.5rem; }
  .act-col > .act-ident { margin-bottom: 0; }
  .act-col > .act-express, .act-col > .act-carte { margin: 1rem 0 0; }
}
@media (max-width: 600px) {
  .act-page { padding-top: .6rem; }
  .act-ariane { margin-bottom: .5rem; font-size: .76rem; }
  .act-titre { font-size: 2rem; }
  .act-phrase { font-size: 1.1rem; margin-top: .55rem; }
  .act-col > .act-express { margin-top: .8rem; gap: .35rem; }
  .act-express li { font-size: .92rem; padding: .34rem .55rem; }
  .act-barre { gap: .6rem; }
  .act-lectures { width: 100%; }
  .act-lecture { flex: 1 1 0; padding-inline: .4rem; }
  .act-actions .c-btn { padding: .5em .9em; font-size: .74rem; }
  .act-etapes li { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .act-etape-m { grid-column: 2; justify-self: start; }
  .act-materiel td:not(:first-child), .act-materiel th:not(:first-child) { white-space: normal; }
}

/* ---------- Schéma du terrain (brique F4, js/activites/schema.js) ----------
   Le SVG ne porte aucune couleur : trait et texte = currentColor (encre), deux teintes d'équipe (--accent, --equipe) en
   lavis transparent, lisibles en clair comme en sombre. Largeur plafonnée : les textes (13 unités) restent entre ~11 et
   ~18 px de 320 à 900 px de large. */
.act-schema { margin: .9rem 0 0; padding: .7rem .7rem .5rem; background: var(--s1); border: 1px solid var(--ligne); border-radius: var(--r-md); max-width: 32rem; }
.act-bloc > .act-schema:first-child { margin-top: 0; }
.sch { display: block; width: 100%; height: auto; color: var(--texte); font-family: var(--sans); overflow: visible; }
.sch .sch-txt { fill: currentColor; font-size: 13px; font-weight: 500; }
.sch .sch-txt-fort { font-weight: 650; }
.sch .sch-txt-2 { fill: var(--texte-2); }
.sch .sch-txt-l { font-weight: 450; }
.sch .sch-txt-p { font-size: 13px; font-weight: 600; }
.sch .sch-txt-n { font-size: 14px; font-weight: 700; }
.sch .sch-halo { paint-order: stroke; stroke: var(--s1); stroke-width: 4px; stroke-linejoin: round; }
.sch .sch-trait { fill: none; stroke: currentColor; stroke-width: 1.6; }
.sch .sch-fin { stroke-width: 1; opacity: .55; }
.sch .sch-pointe { stroke-linecap: round; stroke-linejoin: round; }
.sch .sch-tirets { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 6 4; }
.sch .sch-ligne-forte { stroke: currentColor; stroke-width: 3; }
.sch .sch-a { fill: var(--accent); fill-opacity: .14; }
.sch .sch-b { fill: var(--equipe); fill-opacity: .14; }
.sch .sch-n { fill: currentColor; fill-opacity: .05; }
.sch .sch-joueur { stroke: currentColor; stroke-width: 1; }
.sch .sch-joueur-a { fill: var(--accent); }
.sch .sch-joueur-b { fill: var(--equipe); }
.sch .sch-joueur-n { fill: currentColor; }
.sch .sch-fanion { stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
.sch .sch-plot { fill: currentColor; }
.sch .sch-plein { fill: currentColor; }
.sch .sch-chasseur { fill: var(--s1); stroke: currentColor; stroke-width: 2.4; }
.sch .sch-ballon { fill: var(--s1); stroke: currentColor; stroke-width: 1.6; }
.sch .sch-arbre { fill: currentColor; fill-opacity: .1; stroke: currentColor; stroke-width: 1.4; }
.sch .sch-prison { fill: currentColor; fill-opacity: .06; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 3 3; }
.sch .sch-base { fill: var(--s1); stroke: currentColor; stroke-width: 2; }
.sch .sch-poste { fill: var(--s1); stroke: currentColor; stroke-width: 2; }
.sch .sch-circuit { fill: none; stroke: currentColor; stroke-width: 6; stroke-opacity: .16; }
.sch .sch-sans-fond { fill: none; }