/* ============================================================
   Créer / modifier une fiche activité (brique F3, spec docs/specs/2026-10-02-fiches-activites-design.md § 6) —
   js/activites/edition*.js et historique.js. Préfixe `afe-` (vérifié : aucun autre module ne le porte).
   Couleurs : jetons de css/tokens.css seulement (clair et sombre). Pictos au trait, toujours libellés ; aucun emoji ;
   un état se dit toujours par du texte ou un glyphe, jamais par la couleur seule.
   Ordinateur : formulaire à gauche, aperçu en direct collant à droite. Téléphone : une colonne, aperçu replié en bas.
   ============================================================ */

[hidden] { display: none !important; }
.afe-page { --afe-col: 46rem; }
.afe { display: flex; flex-direction: column; color: var(--texte); }
.afe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.afe-ariane { margin-bottom: .9rem; }

/* ---------- Tête et progression ---------- */
.afe-tete { max-width: var(--afe-col); }
.afe-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.04; letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.afe-chapo { margin: .7rem 0 0; color: var(--texte-2); line-height: 1.5; max-width: 62ch; text-wrap: pretty; }
.afe-tete-liens { margin: .6rem 0 0; }
.afe-lien, .afe-lien-btn { color: var(--accent); text-underline-offset: 3px; font: inherit; }
.afe-lien-btn { appearance: none; background: none; border: 0; padding: .55rem 0; cursor: pointer; text-decoration: underline; min-height: 44px; }
.afe-lien:hover, .afe-lien-btn:hover { color: var(--survol-texte); }
.afe-lien-btn:disabled { color: var(--texte-3); cursor: not-allowed; text-decoration: none; }
.afe-progres { margin: 1.1rem 0 0; }
.afe-pas { list-style: none; margin: 0; padding: 0; display: flex; gap: .3rem; flex-wrap: wrap; }
.afe-pas-b { appearance: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--ligne-2); background: var(--s1); color: var(--texte-2);
  font: 600 .86rem/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur), color var(--dur); }
.afe-pas-b:hover { background: var(--survol-fond); color: var(--survol-texte); }
.afe-pas-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.afe-pas li[data-fait="oui"] .afe-pas-b { background: var(--texte); color: var(--bg-0); border-color: var(--texte); }
.afe-pas li[data-fait="oui"] .afe-pas-b::after { content: '✓'; font-size: .7rem; margin-left: .08rem; }
.afe-progres-t { margin: .7rem 0 0; font-size: .92rem; color: var(--texte-2); }
.afe-progres-t strong { color: var(--texte); }

.afe-alertes { max-width: var(--afe-col); }
.afe-bandeau { margin: 1rem 0 0; padding: .7rem .9rem; border-left: 3px solid var(--accent); background: var(--accent-fond); line-height: 1.45; }
.afe-bandeau-ok { border-left-color: var(--ok); background: var(--ok-fond); }
.afe-bandeau-ok::before { content: '✓ '; font-weight: 600; }
.afe-bandeau-erreur { border-left-color: var(--critique); background: var(--critique-fond); }
.afe-bandeau-erreur::before { content: '⚠ '; font-weight: 600; }

/* ---------- Grille : formulaire + aperçu ---------- */
.afe-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 3rem; margin-top: 1.6rem; align-items: start; }
@media (min-width: 1100px) {
  .afe-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
  .afe-apercu { position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow: auto; order: 2; }
}
.afe-form { min-width: 0; max-width: var(--afe-col); display: flex; flex-direction: column; gap: 0; }

/* ---------- Étapes racontées ---------- */
.afe-etape { padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--texte); display: flex; flex-direction: column; gap: .9rem; }
.afe-etape + .afe-etape { margin-top: .5rem; }
.afe-etape-t { display: flex; align-items: baseline; gap: .7rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.7rem); line-height: 1.15; margin: 0; }
.afe-n { font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--accent); min-width: 1.2rem; }
.afe-etape[data-fait="oui"] .afe-n::after { content: ' ✓'; font-family: var(--sans); font-size: .8rem; vertical-align: .2em; }

.afe-champ { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.afe-champ + .afe-champ { margin-top: .9rem; }
.afe-label { font: 600 .86rem/1.3 var(--sans); letter-spacing: .02em; color: var(--texte); }
.afe-aide { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--texte-2); max-width: 62ch; }
.afe-aide-haut { margin-top: -.3rem; }
.afe-aide:empty, .afe-aide:has(> span:only-child:empty) { display: none; }
.afe-erreur { margin: 0; font-size: .9rem; color: var(--critique); font-weight: 500; }
.afe-erreur::before { content: '⚠ '; }
.afe-en-erreur > .afe-label { color: var(--critique); }
.afe-en-erreur .afe-input, .afe-en-erreur .afe-texte, .afe-en-erreur .afe-nombre { border-color: var(--critique); }
.afe-sous { margin: 0; font: 500 .74rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }

/* ---------- Contrôles ---------- */
.afe-input, .afe-texte, .afe-nombre, .afe-select { width: 100%; box-sizing: border-box; font: 400 1rem/1.45 var(--sans); color: var(--texte); background: var(--s1);
  border: 1px solid var(--ligne-2); border-radius: var(--r-sm); padding: .62rem .75rem; min-height: 44px; transition: border-color var(--dur); }
.afe-input-grand { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; padding: .7rem .85rem; }
.afe-texte { resize: vertical; min-height: 4.4rem; field-sizing: content; max-height: 24rem; }
.afe-texte-ligne { min-height: 3.2rem; }
.afe-nombre { width: 5.4rem; text-align: center; }
.afe-nombre-petit { width: 4.6rem; }
.afe-select { width: auto; max-width: 100%; }
.afe-select-court { min-width: 9rem; }
.afe-input:hover, .afe-texte:hover, .afe-nombre:hover, .afe-select:hover { border-color: var(--texte-3); }
.afe-input:focus-visible, .afe-texte:focus-visible, .afe-nombre:focus-visible, .afe-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.afe-input::placeholder, .afe-texte::placeholder, .afe-nombre::placeholder { color: var(--texte-3); }

.afe-paire { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }
.afe-mini { display: inline-flex; align-items: center; gap: .45rem; color: var(--texte-2); font-size: .92rem; }
.afe-unite { color: var(--texte-2); font-size: .92rem; }
.afe-raccourcis { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; }
.afe-raccourci { appearance: none; background: transparent; color: var(--texte-2); border: 1px dashed var(--ligne-2); border-radius: var(--r-sm); padding: .35rem .7rem; min-height: 38px;
  font: 500 .86rem/1 var(--sans); cursor: pointer; transition: background var(--dur), color var(--dur); }
.afe-raccourci:hover { background: var(--survol-fond); color: var(--survol-texte); border-style: solid; }
.afe-raccourci:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Choix : pastilles (radio ou case cochée), le choix se dit par un ✓ en plus du fond */
.afe-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.afe-chip { position: relative; display: inline-flex; }
.afe-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.afe-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--ligne-2); border-radius: var(--r-sm); background: var(--s1);
  font: 500 .95rem/1.15 var(--sans); color: var(--texte); transition: background var(--dur), color var(--dur), border-color var(--dur); }
.afe-chip:hover span { background: var(--survol-fond); color: var(--survol-texte); }
.afe-chip input:checked + span { background: var(--texte); color: var(--bg-0); border-color: var(--texte); }
.afe-chip input:checked + span::before { content: '✓'; margin-right: .45rem; font-size: .85em; }
.afe-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.afe-chip input:disabled + span { opacity: .55; cursor: not-allowed; }
.afe-case { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; font-size: .95rem; }
.afe-case input { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }
.afe-autres { margin-top: .6rem; }
.afe-autres > summary { cursor: pointer; color: var(--accent); min-height: 44px; display: flex; align-items: center; font-size: .92rem; }

/* Jauges de longueur : mesure, repère, signes ; « long » et « plein » se disent en toutes lettres */
.afe-jauge { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .9rem; margin: .35rem 0 0; font-size: .82rem; color: var(--texte-2); }
.afe-jauge-m { font-weight: 600; color: var(--texte); }
.afe-jauge-s { margin-left: auto; font-family: var(--mono); font-size: .76rem; }
.afe-jauge-a { flex: 1 0 100%; color: var(--texte); }
.afe-jauge[data-etat="long"] .afe-jauge-m, .afe-jauge[data-etat="long"] .afe-jauge-a { color: var(--alerte); }
.afe-jauge[data-etat="long"] .afe-jauge-a::before { content: '⚠ '; }
.afe-jauge[data-etat="plein"] { padding: .3rem .5rem; border-left: 3px solid var(--alerte); background: var(--alerte-fond); }
.afe-jauge[data-etat="plein"] .afe-jauge-a { font-weight: 600; }

/* Famille choisie */
.afe-famille { margin-top: .7rem; padding: .85rem 1rem; border-left: 3px solid var(--accent); background: var(--accent-fond); display: flex; flex-direction: column; gap: .35rem; }
.afe-famille p { margin: 0; line-height: 1.5; }
.afe-famille-nom { font-family: var(--serif); font-size: 1.3rem; }
.afe-famille-ex, .afe-defauts { font-size: .9rem; color: var(--texte-2); }
.afe-note { font-size: .9rem; padding-top: .2rem; }

/* Doublons */
.afe-doublon-c { padding: .9rem 1rem; border-left: 3px solid var(--accent); background: var(--accent-fond); display: flex; flex-direction: column; gap: .5rem; }
.afe-doublon-attente { border-left-color: var(--alerte); background: var(--alerte-fond); }
.afe-doublon-c p { margin: 0; }
.afe-doublon-t { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.afe-doublon-l { list-style: none; margin: .2rem 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.afe-doublon-i { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-top: .7rem; border-top: 1px solid var(--ligne); }
.afe-doublon-texte { min-width: 0; flex: 1 1 14rem; }
.afe-doublon-nom { font-weight: 600; overflow-wrap: anywhere; }
.afe-doublon-meta { font-weight: 400; color: var(--texte-2); font-size: .88rem; }
.afe-doublon-phrase { font-size: .9rem; color: var(--texte-2); margin-top: .2rem !important; }
.afe-doublon-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: flex-start; }
.afe-doublon-fin { margin-top: .2rem !important; }
.afe-variante { margin: 0; padding: .35rem 0; }
.afe-variante-t { font-size: .98rem; }

/* ---------- Listes (étapes, sécurité…) ---------- */
.afe-lignes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.afe-lignes:empty { border-top: 0; }
.afe-ligne { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .4rem .7rem; padding: .75rem 0; border-bottom: 1px solid var(--ligne); align-items: start; }
.afe-ligne-n { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; color: var(--accent); }
.afe-ligne-corps { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; min-width: 0; }
.afe-ligne-corps .afe-texte, .afe-ligne-corps .afe-input { flex: 1 1 14rem; min-width: 0; width: auto; }
.afe-ligne-corps .afe-minutes { display: inline-flex; align-items: center; gap: .35rem; }
.afe-ligne-actions { grid-column: 2; display: inline-flex; gap: .3rem; justify-content: flex-end; }
.afe-ico { appearance: none; width: 2.6rem; height: 2.6rem; border: 1px solid var(--ligne-2); border-radius: var(--r-sm); background: var(--s1); color: var(--texte-2); font: 500 1rem/1 var(--sans); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur), color var(--dur); }
.afe-ico:hover:not(:disabled) { background: var(--survol-fond); color: var(--survol-texte); }
.afe-ico:disabled { opacity: .4; cursor: not-allowed; }
.afe-ico:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.afe-ico-retirer:hover:not(:disabled) { color: var(--critique); }
.afe-ajouter { margin: .2rem 0 0; }
@media (min-width: 640px) {
  .afe-ligne { grid-template-columns: 1.7rem minmax(0, 1fr) auto; }
  .afe-ligne-actions { grid-column: 3; }
}

/* ---------- Blocs facultatifs repliés ---------- */
.afe-blocs { margin-top: 1rem; border-top: 1px solid var(--texte); padding-top: 1.1rem; }
.afe-blocs-t { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin: 0 0 .5rem; }
.afe-facultatif { font: 400 .9rem var(--sans); color: var(--texte-2); }
.afe-bloc { border-bottom: 1px solid var(--ligne); }
.afe-bloc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7rem; min-height: 52px; padding: .5rem 0; font-size: 1.02rem; font-weight: 500; }
.afe-bloc > summary::-webkit-details-marker { display: none; }
.afe-bloc > summary::before { content: '▸'; color: var(--accent); transition: transform var(--dur); flex: none; }
.afe-bloc[open] > summary::before { transform: rotate(90deg); }
.afe-bloc > summary:hover { color: var(--survol-texte); }
.afe-bloc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.afe-compte { font-size: .82rem; font-weight: 400; color: var(--texte-2); margin-left: auto; }
.afe-bloc-corps { padding: .3rem 0 1.4rem; display: flex; flex-direction: column; gap: .2rem; }
.afe-precis { margin-top: .6rem; border-top: 1px solid var(--ligne); }
.afe-flow .afe-label { font-weight: 500; }

/* ---------- Publication ---------- */
.afe-publier { margin-top: .5rem; padding: 1.3rem 0 1.5rem; border-top: 2px solid var(--texte); display: flex; flex-direction: column; gap: .8rem; }
.afe-statut { margin: 0; font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; }
.afe-statut::before { margin-right: .5rem; font-family: var(--sans); font-size: .85em; }
.afe-statut-pret::before { content: '✓'; color: var(--ok); }
.afe-statut-brouillon::before, .afe-statut-bloque::before { content: '⚠'; color: var(--alerte); }
.afe-boutons { display: flex; flex-wrap: wrap; gap: .6rem; }
.afe-bouton { min-height: 48px; }
.afe-bouton:disabled { opacity: .5; cursor: not-allowed; }
.afe-alerte { padding: .7rem .9rem; border-left: 3px solid var(--critique); background: var(--critique-fond); line-height: 1.45; }
.afe-pied { margin: 2rem 0 0; }

/* Conflit de version (409) */
.afe-conflit { margin-top: 1rem; padding: 1rem 1.1rem; border-left: 3px solid var(--alerte); background: var(--alerte-fond); display: flex; flex-direction: column; gap: .5rem; }
.afe-conflit p { margin: 0; line-height: 1.5; }
.afe-conflit-t { font-family: var(--serif); font-size: 1.35rem; }

/* ---------- Aperçu en direct (rendu de la brique F1, sans sa barre) ---------- */
.afe-apercu { min-width: 0; }
.afe-apercu-d { border: 1px solid var(--ligne-2); border-radius: var(--r-md); background: var(--bg-0); }
.afe-apercu-d > summary { cursor: pointer; padding: .8rem 1rem; min-height: 48px; display: flex; align-items: center; font: 600 .82rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }
.afe-apercu-d > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.afe-apercu-barre { display: inline-flex; margin: 0 1rem .8rem; border: 1px solid var(--ligne-2); border-radius: var(--r-sm); overflow: hidden; background: var(--s1); }
.afe-apercu-l { appearance: none; border: 0; background: transparent; color: var(--texte-2); font: 500 .82rem/1 var(--sans); padding: .6rem 1rem; min-height: 40px; cursor: pointer; }
.afe-apercu-l + .afe-apercu-l { border-left: 1px solid var(--ligne-2); }
.afe-apercu-l[aria-pressed="true"] { background: var(--texte); color: var(--bg-0); }
.afe-apercu-l:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.afe-apercu-corps { padding: 0 1rem 1.2rem; }
.afe-apercu .act-barre, .afe-apercu .act-ariane, .afe-apercu .act-tout-voir-l { display: none; }
.afe-apercu .act-grille { grid-template-columns: minmax(0, 1fr); }
.afe-apercu .act-titre { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
.afe-apercu .act-fiche[data-lecture="terrain"] { font-size: 1.02rem; }
.afe-apercu .act-fiche[data-lecture="terrain"] .act-bloc p, .afe-apercu .act-fiche[data-lecture="terrain"] .act-puces,
.afe-apercu .act-fiche[data-lecture="terrain"] .act-etape-t, .afe-apercu .act-fiche[data-lecture="terrain"] .act-ajuster dd { font-size: 1rem; }
.afe-apercu .act-col { gap: 1.2rem; }

/* ---------- Historique ---------- */
.afe-versions { list-style: none; margin: 1.6rem 0 0; padding: 0; max-width: var(--afe-col); border-left: 2px solid var(--ligne-2); display: flex; flex-direction: column; gap: 1.1rem; }
.afe-version { position: relative; padding: .1rem 0 .1rem 1.3rem; }
.afe-version::before { content: ''; position: absolute; left: -.43rem; top: .6rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--bg-0); border: 2px solid var(--texte-3); }
.afe-version[data-courante="oui"]::before { background: var(--accent); border-color: var(--accent); }
.afe-v-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.afe-v-n { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
.afe-v-motif { font: 600 .72rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }
.afe-version p { margin: .2rem 0 0; line-height: 1.45; }
.afe-v-meta { color: var(--texte-2); font-size: .92rem; }
.afe-v-auteur { color: var(--texte); font-weight: 500; }
.afe-v-resume { font-size: .95rem; }
.afe-v-action { margin-top: .6rem; }
.afe-v-actuelle { display: inline-flex; padding: .22rem .55rem; border-radius: var(--r-xs); background: var(--accent-fond); color: var(--accent); border: 1px solid var(--accent-filet); font: 600 .72rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.afe-v-confirm { display: inline-flex; flex-wrap: wrap; gap: .5rem; }

/* Fiche : archivage demandé (premier clic) */
.act-archiver-confirme { border-color: var(--critique); color: var(--critique); }

/* ---------- Téléphone ---------- */
@media (max-width: 860px) {
  .afe-page { padding-bottom: calc(4rem + var(--nav-bas-h, 0px)); }
}
@media (max-width: 600px) {
  .afe-ariane { margin-bottom: .5rem; font-size: .76rem; }
  .afe-h1 { font-size: 1.9rem; }
  .afe-grille { margin-top: 1.2rem; }
  .afe-etape { padding-top: 1rem; }
  .afe-input-grand { font-size: 1.3rem; }
  .afe-boutons .c-btn { flex: 1 1 100%; }
  .afe-doublon-actions .c-btn { flex: 1 1 auto; }
  .afe-version { padding-left: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .afe-chip span, .afe-pas-b, .afe-bloc > summary::before, .afe-input, .afe-texte, .afe-nombre, .afe-select { transition: none; }
}

/* Schéma du terrain (F4) : réglages en quelques contrôles, aperçu du dessin juste dessous. */
.afe-schema-reglages { display: grid; gap: .9rem; margin-top: .9rem; }
.afe-schema-r { min-width: 0; }
.afe-schema-r > .afe-label { display: block; margin-bottom: .35rem; }
.afe-schema-apercu { margin-top: .9rem; }
.afe-schema-apercu .act-schema { margin: 0; }
[data-schema-zone] .afe-chips + .afe-aide { margin-top: .6rem; }