/* ============================================================================================
   ANIMA — Atelier projet pédagogique (B2, spec 2026-09-23-atelier-projet-pedagogique-design.md)
   --------------------------------------------------------------------------------------------
   Grammaire visuelle héritée de ~/ta-trace (public/css/site.css + public-equipe/css/equipe.css) :
   fond calcaire clair, encre sombre, titres serif Instrument Serif + corps Inter, écrans-portails
   de valeur pleine largeur teintés, filet d'ouverture de rubrique, bloc « Atteint si » teinté,
   cartes. Toutes les classes sont préfixées `ap-` (namespace, pas de collision avec styles.css
   ANIMA). Toutes les couleurs sont des variables CSS `--ap-*` : les teintes (`--ap-accent*`,
   `--ap-teinte-1..8*`) sont pilotées par js/atelier-pp/theme.js#deriver, posées en inline par
   l'appelant (B3) sur l'élément racine de l'atelier — les valeurs ci-dessous en :root sont un
   repli visuel pour un aperçu sans JS (mêmes teintes que Ta Trace, § 6.1).
   Trois modes de rendu partagent ce fichier : "site"/"edition" (même squelette, l'édition
   ajoute les affordances .ap-editable/.ap-vide/.ap-cadenas/boutons) et "formel" (impression A4).
   ============================================================================================ */

:root {
  /* Neutres fixes — grammaire du site, indépendants du projet ET du thème de l'app (B8a) :
     alias des constantes « document » de css/tokens.css. Le projet pédagogique est un objet
     imprimé, il garde le calcaire en thème sombre chaud ; theme.js dérive ses teintes de
     rupture contre ce même calcaire (FOND_CLAIR). */
  --ap-calcaire:   var(--calcaire);
  --ap-calcaire-2: var(--calcaire-2);
  --ap-encre:      var(--encre);
  --ap-encre-2:    var(--encre-2);
  --ap-nuit:       var(--nuit);
  --ap-filet:      var(--filet-encre);
  --ap-filet-nuit: var(--filet-calcaire);

  /* Repli si le thème du projet n'a pas encore été posé en inline (aperçu sans JS) :
     accent pétrole de la charte + teintes de rupture prises dans les portails de domaine. */
  --ap-accent:        var(--doc-accent);
  --ap-accent-texte:  var(--doc-accent);
  --ap-teinte-1: var(--reglementation-portail); --ap-teinte-1-texte: var(--calcaire);
  --ap-teinte-2: var(--equipe-portail);         --ap-teinte-2-texte: var(--calcaire);
  --ap-teinte-3: var(--logistique-portail);     --ap-teinte-3-texte: var(--calcaire);
  --ap-teinte-4: var(--pedagogie-portail);      --ap-teinte-4-texte: var(--calcaire);
  --ap-teinte-5: var(--sante-portail);          --ap-teinte-5-texte: var(--calcaire);
  --ap-teinte-6: var(--encre-2);                --ap-teinte-6-texte: var(--calcaire);
  --ap-teinte-7: var(--argent-portail);         --ap-teinte-7-texte: var(--calcaire);
  --ap-teinte-8: var(--enfants-portail);        --ap-teinte-8-texte: var(--calcaire);

  --ap-serif: var(--serif);
  --ap-sans:  var(--sans);
  --ap-mono:  var(--mono);

  --ap-gutter: clamp(1rem, 4.5vw, 4rem);
  --ap-wrap: 72rem;
}

/* ---- Racine ---------------------------------------------------------------------------- */

.ap-atelier { font-family: var(--ap-sans); color: var(--ap-encre); background: var(--ap-calcaire); line-height: 1.55; }
.ap-atelier * { box-sizing: border-box; }
.ap-atelier img, .ap-atelier svg { display: block; max-width: 100%; }
.ap-atelier a { color: inherit; }
.ap-wrap { max-width: var(--ap-wrap); margin-inline: auto; padding-inline: var(--ap-gutter); }

/* ---- Typographie ------------------------------------------------------------------------ */

.ap-titre { font-family: var(--ap-serif); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; font-size: clamp(1.9rem, 3.6vw, 3.2rem); text-wrap: balance; margin: 0; }
.ap-chapo { font-family: var(--ap-serif); font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.25; max-width: 40ch; margin: .6rem 0 0; }
.ap-sous-titre { font-family: var(--ap-mono); font-weight: 400; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ap-encre-2); margin: 1.6rem 0 .7rem; }
.ap-kicker { font-family: var(--ap-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ap-encre-2); margin: 0 0 .4rem; }
.ap-texte { max-width: 62ch; text-wrap: pretty; }
.ap-texte p + p { margin-top: .8em; }
.ap-note { color: var(--ap-encre-2); font-size: .9em; font-style: italic; }

/* ---- Rubriques (squelette commun, filet d'ouverture) ----------------------------------- */

.ap-rubrique { padding-block: clamp(2.4rem, 6vw, 4.5rem); border-top: 1px solid var(--ap-filet); }
.ap-rubrique:first-of-type { border-top: 0; }
.ap-rubrique__tete { margin-bottom: clamp(1.3rem, 3vw, 2rem); }

/* ---- Couverture ------------------------------------------------------------------------- */

.ap-couverture { position: relative; isolation: isolate; min-height: min(100svh, 720px); display: flex; align-items: flex-end; color: var(--sur-portail); overflow: hidden; background: var(--ap-accent); }
.ap-couverture__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ap-couverture__voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in oklab, var(--nuit) 82%, transparent) 0%, color-mix(in oklab, var(--nuit) 28%, transparent) 55%, transparent 100%); }
/* Couverture Unsplash (J-U) : crédit visible, discret, en bas à droite de la couverture. */
.ap-couverture__credit { position: absolute; right: .7rem; bottom: .45rem; z-index: 1; margin: 0; font-size: .68rem; line-height: 1.3; color: var(--sur-portail); opacity: .85; }
.ap-couverture__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.atp-pop__images { max-height: min(50vh, 26rem); overflow-y: auto; padding-right: .2rem; }
.ap-couverture__texte { padding-block: clamp(2.4rem, 7vw, 4.5rem); width: 100%; display: grid; gap: .5rem; }
.ap-couverture__sejour { color: var(--sur-portail); opacity: .85; }
.ap-couverture__titre { font-size: clamp(2.4rem, 6vw, 5.6rem); text-shadow: 0 .05em .5em color-mix(in oklab, var(--nuit) 35%, transparent); }
.ap-couverture__accroche { color: var(--calcaire); }

/* ---- Fiche (dt/dd) — contexte ------------------------------------------------------------ */

.ap-fiche { border-top: 1px solid var(--ap-encre); }
.ap-fiche__ligne { display: grid; grid-template-columns: 11rem minmax(0,1fr); gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--ap-filet); }
.ap-fiche dt { font-family: var(--ap-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ap-encre-2); }
.ap-fiche dd { line-height: 1.45; }

/* ---- Cartes valeurs ----------------------------------------------------------------------- */

.ap-cartes-valeurs { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0; border-top: 1px solid var(--ap-encre); margin: 0 0 1.5rem; padding: 0; }
.ap-cartes-valeurs > li { position: relative; padding: 1.2rem 1.4rem 1.4rem 1rem; border-left: 3px solid var(--ap-teinte, var(--ap-encre)); border-bottom: 1px solid var(--ap-filet); display: grid; gap: .5rem; align-content: start; }
/* Nom de la valeur : la teinte de rupture elle-même (sombre, ≥ 4,5:1 sur le calcaire par
   construction — theme.js), jamais --ap-teinte-texte (texte CLAIR prévu pour un fond teinté :
   sur le calcaire il rendait le nom invisible). */
.ap-cartes-valeurs b { font-family: var(--ap-serif); font-weight: 400; font-size: 1.7rem; line-height: 1.1; color: var(--ap-teinte, var(--ap-encre)); }
.ap-cartes-valeurs p { color: var(--ap-encre-2); margin: 0; }

/* ---- Vue d'ensemble des OG (sommaire) ------------------------------------------------------ */

.ap-vue-og { list-style: none; border-top: 1px solid var(--ap-encre); margin: 0; padding: 0; }
.ap-vue-og li { border-bottom: 1px solid var(--ap-filet); }
.ap-og-lien { display: flex; align-items: baseline; gap: .9rem; padding: .8rem 0; text-decoration: none; font-family: var(--ap-serif); font-size: 1.2rem; }
.ap-og-num { font-family: var(--ap-mono); font-size: .68rem; letter-spacing: .1em; color: var(--ap-encre-2); white-space: nowrap; }

/* ---- Écran-portail de valeur : pleine largeur, teinté ------------------------------------- */

.ap-portail { position: relative; padding-block: clamp(3.5rem, 10vw, 7rem); border-top: 0 !important; }
.ap-portail .ap-wrap { max-width: 60rem; }
.ap-portail__mot { font-family: var(--ap-serif); font-size: clamp(3rem, 9vw, 8rem); line-height: .95; letter-spacing: -.02em; margin: 0 0 1.1rem; }
.ap-portail__mot.ap-vide { opacity: .55; font-style: italic; }
.ap-portail__phrase { font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.4; max-width: 42ch; padding-left: 1.1rem; border-left: 3px solid currentColor; margin: 0; }
.ap-portail__og { list-style: none; margin: 2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid color-mix(in oklab, var(--calcaire) 30%, transparent); display: grid; gap: .1rem; }
.ap-portail__og li { padding: .7rem 0; border-bottom: 1px solid var(--filet-calcaire); font-family: var(--ap-serif); font-size: 1.15rem; }
.ap-portail__og .ap-kicker { display: inline-block; margin: 0 .8rem 0 0; color: inherit; opacity: .75; }

/* ---- Écran par objectif général -------------------------------------------------------- */

.ap-ecran-og { padding-block: clamp(2.4rem, 6vw, 4rem); border-top: 1px solid var(--ap-filet); }
.ap-og-titre { font-family: var(--ap-serif); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.15; margin: .3rem 0 1.4rem; border-top: 3px solid var(--ap-teinte, var(--ap-encre)); padding-top: .8rem; max-width: 44ch; }
.ap-cartes-oo { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0; margin: 0; padding: 0; }
.ap-cartes-oo > li { padding: 1.2rem 1.4rem 1.5rem 0; border-top: 1px solid var(--ap-filet); display: grid; gap: .55rem; align-content: start; }
.ap-oo-num { font-family: var(--ap-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.ap-oo-titre { font-family: var(--ap-serif); font-size: 1.35rem; line-height: 1.15; margin: 0; }
.ap-oo-moyens { list-style: none; display: grid; gap: .4rem; margin: 0; padding: 0; }
.ap-oo-moyens li { position: relative; padding-left: 1rem; color: var(--ap-encre-2); font-size: .95em; line-height: 1.45; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.ap-oo-moyens li::before { content: ""; position: absolute; left: 0; top: .62em; width: .42rem; height: 1px; background: var(--ap-encre); opacity: .5; }

.ap-atteint-si-bloc { margin-top: .3rem; padding: .7rem .9rem; background: color-mix(in srgb, var(--ap-teinte, var(--ap-encre)) 10%, transparent); border-left: 3px solid var(--ap-teinte, var(--ap-encre)); }
/* Étiquette « Atteint si » : teinte assombrie (70 % teinte + 30 % encre) sur le fond teinté à
   10 % — contraste ≥ 6:1 mesuré sur 12 accents (test/atelier_pp_rendu.test.mjs). */
.ap-atteint-si-bloc .ap-kicker { color: color-mix(in srgb, var(--ap-teinte, var(--ap-encre)) 70%, var(--ap-encre)); font-weight: 600; margin-bottom: .25rem; }
.ap-atteint-si { margin: 0; color: var(--ap-encre); }

/* ---- Étiquettes R227-25 ------------------------------------------------------------------- */

.ap-points { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.ap-tag { font-family: var(--ap-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .4rem; border: 1px solid var(--ap-filet); color: var(--ap-encre-2); background: transparent; border-radius: 2px; line-height: 1.4; }
.ap-tag.est-actif { color: var(--ap-calcaire); background: var(--ap-encre); border-color: var(--ap-encre); }
button.ap-tag { cursor: pointer; }
/* Lecture (aperçu, site, partie fermée) : étiquette discrète au trait, petite capitale. */
.ap-tag--lu { font-family: var(--ap-sans); font-size: .74rem; font-variant-caps: all-small-caps; text-transform: none; letter-spacing: .04em; padding: 0 .35rem; line-height: 1.45; color: var(--ap-encre-2); background: transparent; border: 1px solid color-mix(in srgb, var(--ap-encre-2) 45%, transparent); }
button.ap-tag:hover { border-color: var(--ap-encre); }

/* ---- Cartes génériques (posture, attentes, exigences, interdits) -------------------------- */

.ap-cartes { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0; border-top: 1px solid var(--ap-encre); margin: 0; padding: 0; }
.ap-cartes > li { padding: 1.1rem 1.3rem 1.3rem 0; border-bottom: 1px solid var(--ap-filet); display: grid; gap: .4rem; align-content: start; }
.ap-cartes b { font-family: var(--ap-serif); font-weight: 400; font-size: 1.35rem; line-height: 1.15; }
.ap-cartes p { color: var(--ap-encre-2); margin: 0; }

.ap-encart { margin-top: 1rem; padding: .9rem 1rem; background: var(--ap-calcaire-2); border-left: 3px solid var(--ap-accent); }
.ap-carnet-lien { margin-top: .8rem; }

/* ---- Pied --------------------------------------------------------------------------------- */

.ap-pied { background: var(--ap-nuit); color: var(--ap-calcaire); padding-block: 2.2rem; margin-top: 2rem; }
.ap-pied__ligne { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ap-pied__version { font-family: var(--ap-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in oklab, var(--calcaire) 65%, var(--nuit)); margin: 0; }

/* ---- Boutons ------------------------------------------------------------------------------ */

.ap-btn { display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.3em; font-family: var(--ap-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1px solid currentColor; color: inherit; background: transparent; cursor: pointer; }
.ap-btn:hover { background: var(--ap-encre); color: var(--ap-calcaire); border-color: var(--ap-encre); }

.ap-btn-ajouter { display: inline-block; margin-top: .8rem; padding: .5em 1em; font-family: var(--ap-mono); font-size: .72rem; letter-spacing: .05em; color: var(--ap-accent-texte); background: transparent; border: 1px dashed var(--ap-accent-texte); cursor: pointer; }
.ap-btn-ajouter:hover { background: color-mix(in srgb, var(--ap-accent-texte) 10%, transparent); }

.ap-btn-menu { margin-left: .5rem; padding: .1rem .5rem; font-size: 1.1rem; line-height: 1; color: var(--ap-encre-2); background: transparent; border: 1px solid transparent; cursor: pointer; border-radius: 3px; }
.ap-btn-menu:hover { color: var(--ap-encre); border-color: var(--ap-filet); }

/* ---- Affordances d'édition ------------------------------------------------------------------ */

.ap-editable { outline-offset: 2px; border-radius: 2px; transition: background .15s ease; cursor: text; }
.ap-editable:hover, .ap-editable:focus-visible { background: color-mix(in srgb, var(--ap-accent) 8%, transparent); outline: 1px dashed color-mix(in srgb, var(--ap-accent) 55%, transparent); }

.ap-vide { min-height: 1.4em; }
.ap-vide::before { content: attr(data-placeholder); color: var(--ap-encre-2); font-style: italic; opacity: .62; }
.ap-portail .ap-vide::before, .ap-couverture .ap-vide::before { color: inherit; opacity: .6; }
/* Sur fond sombre (portail teinté) : affordances et cadenas en couleur héritée (claire), jamais
   l'accent/encre prévus pour le calcaire — invisibles sur la teinte (revue des captures B3). */
.ap-portail .ap-btn-ajouter, .ap-portail .ap-btn-menu, .ap-portail .ap-cadenas-hote { color: inherit; opacity: .9; }
.ap-portail .ap-btn-ajouter { border-color: currentColor; }
.ap-portail .ap-btn-ajouter:hover { background: color-mix(in oklab, var(--calcaire) 12%, transparent); }
.ap-portail .ap-btn-menu:hover { border-color: currentColor; }
.ap-atteint-si-bloc .ap-vide::before { opacity: .55; }

/* Bloc absent (édition, direction) : une ligne compacte à sa place dans le document. */
.ap-rubrique--a-creer { padding-block: .9rem; }
.ap-rubrique--a-creer .ap-rubrique__tete { margin-bottom: 0; display: inline-block; margin-right: 1rem; }
.ap-rubrique--a-creer .ap-titre { font-size: 1.15rem; color: var(--ap-encre-2); }
.ap-rubrique--a-creer .ap-btn-ajouter { margin-top: 0; }

.ap-btn-ajouter--element { margin-top: .6rem; }
.ap-btn-retirer { margin-left: .4rem; padding: 0 .35rem; font-size: .95rem; line-height: 1.2; color: var(--ap-encre-2); background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; vertical-align: baseline; }
.ap-btn-retirer:hover { color: var(--ap-encre); border-color: var(--ap-filet); }
.ap-fiche dd { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.ap-cartes > li { position: relative; }

.ap-cadenas-hote { display: inline-flex; color: var(--ap-encre-2); opacity: .7; margin-right: .4rem; vertical-align: middle; }
.ap-cadenas { width: 1em; height: 1em; }

/* ---- Responsive (cible téléphone) ---------------------------------------------------------- */

@media (max-width: 720px) {
  .ap-fiche__ligne { grid-template-columns: minmax(0,1fr); gap: .2rem; }
  .ap-cartes-oo, .ap-cartes-valeurs, .ap-cartes { grid-template-columns: minmax(0,1fr); }
  .ap-portail__mot { font-size: clamp(2.4rem, 13vw, 4.5rem); }
  .ap-couverture { min-height: min(80svh, 560px); }
  .ap-pied__ligne { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================================
   Rendu « formel » — sobre, imprimable A4 (§ 6.3)
   ============================================================================================ */

.ap-formel { font-family: var(--ap-sans); color: var(--encre-papier); background: var(--papier); max-width: 48rem; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2rem); line-height: 1.5; }
.ap-formel h1, .ap-formel h2, .ap-formel h3 { font-family: var(--ap-serif); font-weight: 400; color: var(--encre-papier); }
.ap-formel__entete { border-bottom: 2px solid var(--encre-papier); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.ap-formel__entete h1 { font-size: 2.1rem; }
.ap-formel__entete p { font-family: var(--ap-serif); font-style: italic; font-size: 1.1rem; margin: .4rem 0 0; }
.ap-formel__section { margin-bottom: 1.8rem; }
.ap-formel__section h2 { font-size: 1.35rem; border-bottom: 1px solid var(--filet-papier-2); padding-bottom: .3rem; margin-bottom: .8rem; }
.ap-formel__section h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.ap-formel__og, .ap-formel__valeur, .ap-formel__point { margin-bottom: 1rem; }
.ap-formel ul, .ap-formel ol { margin: 0 0 .6rem; padding-left: 1.3rem; }
.ap-formel li { margin-bottom: .35rem; }
.ap-formel .ap-note { color: var(--encre-papier-2); }

@media print {
  @page { size: A4; margin: 18mm 16mm; }
  body { background: var(--papier); }
  .ap-formel { max-width: none; padding: 0; }
  .ap-formel__section { break-inside: avoid; }
  .ap-formel__og, .ap-formel__valeur, .ap-formel__point { break-inside: avoid; }
  .ap-no-print { display: none !important; }
}

/* ============================================================================================
   Atelier (B3, § 6.4) — page d'écriture en place : barre d'outils, états, menus, panneaux.
   Préfixe `atp-` (chrome de l'atelier), distinct de `ap-` (le rendu du projet lui-même).
   La page sort de la colonne d'ANIMA (pleine largeur) : le projet est un site, pas une carte.
   ============================================================================================ */

body.atp-actif { overflow-x: clip; }
.atp-page { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: var(--ap-calcaire); color: var(--ap-encre); font-family: var(--ap-sans); min-height: 70vh; }
.atp-zone { min-height: 50vh; }
.atp-chargement, .atp-message { font-family: var(--ap-mono); font-size: .8rem; letter-spacing: .06em; color: var(--ap-encre-2); padding: 3rem var(--ap-gutter); margin: 0; }
.atp-message { display: grid; gap: .8rem; justify-items: start; font-family: var(--ap-sans); font-size: 1rem; letter-spacing: 0; color: var(--ap-encre); }

/* ---- Barre d'outils (collée sous l'en-tête d'ANIMA) --------------------------------------- */

.atp-barre { position: sticky; top: var(--header-h, 62px); z-index: 40; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .5rem var(--ap-gutter); background: var(--ap-encre); color: var(--ap-calcaire); font-size: .8rem; }
.atp-barre__titre { font-family: var(--ap-serif); font-size: 1.15rem; margin: 0 .6rem 0 .2rem; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atp-barre__note { color: color-mix(in oklab, var(--calcaire) 80%, var(--nuit)); font-size: .78rem; }
.atp-outil { font: inherit; font-family: var(--ap-mono); font-size: .72rem; letter-spacing: .05em; color: inherit; background: transparent; border: 1px solid color-mix(in oklab, var(--calcaire) 28%, transparent); border-radius: 3px; padding: .42rem .7rem; cursor: pointer; white-space: nowrap; min-height: 34px; }
.atp-outil:hover { border-color: color-mix(in oklab, var(--calcaire) 70%, transparent); }
.atp-outil:focus-visible { outline: 2px solid var(--alerte-sur-nuit); outline-offset: 2px; }
.atp-outil[aria-pressed="true"], .atp-interrupteur[aria-checked="true"] { background: var(--ap-calcaire); color: var(--ap-encre); border-color: var(--ap-calcaire); }
.atp-outil--retour { border-color: transparent; padding-left: 0; }
.atp-outil--a-traiter { border-color: var(--alerte-sur-nuit); color: var(--alerte-sur-nuit); }
.atp-outil--alerte { background: var(--doc-critique); border-color: var(--doc-critique); color: var(--calcaire); }
.atp-bascule { display: inline-flex; }
.atp-bascule .atp-outil { border-radius: 0; }
.atp-bascule .atp-outil:first-child { border-radius: 3px 0 0 3px; }
.atp-bascule .atp-outil:last-child { border-radius: 0 3px 3px 0; border-left: 0; }

/* ---- Écriture en place ------------------------------------------------------------------- */

.atp-edition .ap-couverture { min-height: min(56svh, 460px); }
.atp-en-edition { white-space: pre-wrap; text-transform: none !important; font-variant-caps: normal; cursor: text; outline: 2px solid currentColor !important; outline-offset: 4px; background: color-mix(in srgb, currentColor 6%, transparent) !important; border-radius: 2px; }
.atp-saisi { white-space: pre-wrap; }
.atp-edition .ap-editable { min-height: 1.3em; }
.atp-edition .ap-editable:focus-visible { outline: 2px dashed currentColor; }

/* État par partie : pastille propre (lisible aussi sur un portail teinté), FLOTTANTE au-dessus du
   champ (position calculée par atelier.js) — jamais dans le flux : elle ne décale rien. */
.atp-etat { position: absolute; z-index: 35; pointer-events: none; display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .12rem .45rem; box-shadow: var(--shadow-card); font-family: var(--ap-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; border-radius: 2px; background: var(--calcaire); color: var(--encre-2); border: 1px solid var(--filet-encre); vertical-align: middle; white-space: nowrap; }
.atp-etat--ok { color: var(--doc-ok); border-color: var(--doc-ok); }
.atp-etat--erreur { color: var(--doc-critique); border-color: var(--doc-critique); pointer-events: auto; }
.atp-etat--conflit { color: var(--doc-alerte); border-color: var(--doc-alerte); }
.atp-etat__action { font: inherit; text-transform: none; letter-spacing: 0; font-family: var(--ap-sans); font-size: .74rem; font-weight: 600; color: var(--doc-critique); background: transparent; border: 0; border-left: 1px solid var(--doc-critique-filet); padding: 0 0 0 .45rem; cursor: pointer; text-decoration: underline; }

/* Parties ouvertes à l'équipe (vue direction). */
.atp-ouverte { box-shadow: inset 3px 0 0 var(--doc-ok); }
.atp-badge-ouvert { display: inline-flex; align-items: center; margin: 0 .5rem .35rem 0; padding: .06rem .4rem; font-family: var(--ap-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--doc-ok); background: var(--doc-ok-fond); border: 1px solid var(--doc-ok); border-radius: 2px; }
.ap-portail .atp-badge-ouvert { color: var(--doc-ok); }

.atp-flash { animation: atp-flash 1.8s ease-out; }
@keyframes atp-flash { 0% { box-shadow: 0 0 0 4px var(--alerte-sur-nuit); } 100% { box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) { .atp-flash { animation: none; outline: 3px solid var(--alerte-sur-nuit); } }

/* ---- Menu flottant (partie, « + bloc », contrôles, thème) ---------------------------------- */

.atp-pop { position: absolute; z-index: 60; min-width: 15rem; max-width: min(26rem, calc(100vw - 1rem)); max-height: 70vh; overflow: auto; padding: .45rem; background: var(--calcaire); color: var(--ap-encre); border: 1px solid var(--filet-encre); border-radius: 4px; box-shadow: var(--shadow-elevated); font-family: var(--ap-sans); font-size: .88rem; }
.atp-pop__titre { margin: .35rem .5rem .4rem; font-family: var(--ap-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ap-encre-2); }
.atp-pop__note { margin: .5rem; font-size: .78rem; color: var(--ap-encre-2); }
.atp-pop__vide { margin: .5rem; color: var(--ap-encre-2); font-style: italic; }
.atp-pop__item { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 3px; padding: .55rem .6rem; cursor: pointer; min-height: 38px; }
.atp-pop__item:hover, .atp-pop__item:focus-visible { background: var(--voile); outline: none; }
.atp-pop__item--danger { color: var(--doc-critique); }

.atp-controles__points { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .3rem; margin: 0 .4rem .5rem; }
.atp-point { display: flex; justify-content: space-between; gap: .4rem; padding: .3rem .45rem; font-family: var(--ap-mono); font-size: .72rem; border: 1px solid var(--filet-encre); border-radius: 2px; }
.atp-point b { font-weight: 500; }
.atp-point--manque { border-color: var(--doc-critique); color: var(--doc-critique); }
.atp-alerte { display: block; width: 100%; text-align: left; font: inherit; font-size: .84rem; color: var(--ap-encre); background: none; border: 0; border-left: 3px solid var(--doc-alerte); padding: .45rem .6rem; margin: .15rem 0; cursor: pointer; }
.atp-alerte--a_traiter { border-left-color: var(--doc-critique); font-weight: 600; }
.atp-alerte:hover:not(:disabled) { background: var(--voile); }
.atp-alerte:disabled { cursor: default; opacity: .85; }

.atp-theme__ligne { display: flex; align-items: center; gap: .6rem; margin: 0 .5rem; }
.atp-theme__ligne input[type="color"] { width: 3rem; height: 2.2rem; padding: 0; border: 1px solid var(--filet-encre); background: none; cursor: pointer; }
.atp-theme__valeur { font-family: var(--ap-mono); font-size: .8rem; }
.atp-theme .atp-bouton { margin: .2rem .5rem .2rem; }
.atp-cache { display: none !important; }

/* ---- Panneau modal (conflit, suppression, historique) -------------------------------------- */

/* Ancré en haut, jamais centré verticalement : quand le contenu grandit (liens publiés, liste
   chargée), la boîte s'allonge vers le bas au lieu de se recentrer — les boutons ne sautent pas sous
   le pointeur (un clic tombait sur le voile et fermait le panneau — trouvé en recette B4). */
.atp-voile { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: start center; padding: max(1rem, 7vh) 1rem 1rem; background: var(--voile-modal); overflow: auto; }
.atp-panneau { width: 100%; max-width: 46rem; max-height: 86vh; overflow: auto; padding: 1.4rem 1.5rem 1.2rem; background: var(--ap-calcaire); color: var(--ap-encre); border-radius: 4px; box-shadow: var(--shadow-modal); font-family: var(--ap-sans); }
.atp-panneau__titre { font-family: var(--ap-serif); font-weight: 400; font-size: 1.7rem; line-height: 1.1; margin: 0 0 .8rem; }
.atp-panneau__intro { margin: 0 0 .6rem; }
.atp-panneau__note { margin: 0 0 .8rem; color: var(--ap-encre-2); font-size: .9rem; }
.atp-panneau__alerte { margin: .6rem 0 .4rem; color: var(--doc-critique); font-weight: 600; }
.atp-panneau__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.atp-bouton { font: inherit; font-family: var(--ap-mono); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; padding: .6rem 1rem; min-height: 40px; color: var(--ap-encre); background: transparent; border: 1px solid var(--ap-encre); border-radius: 3px; cursor: pointer; }
.atp-bouton:hover { background: var(--voile); }
.atp-bouton--principal { background: var(--ap-encre); color: var(--ap-calcaire); }
.atp-bouton--principal:hover { background: var(--encre-2); }
.atp-bouton--danger { background: var(--doc-critique); border-color: var(--doc-critique); color: var(--calcaire); }
.atp-bouton--danger:hover { background: color-mix(in oklab, var(--doc-critique) 80%, var(--nuit)); }
.atp-citation { margin: .4rem 0; padding: .6rem .8rem; border-left: 3px solid var(--ap-encre-2); background: var(--ap-calcaire-2); white-space: pre-wrap; }
.atp-contributions { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.atp-contributions li { margin-bottom: .3rem; }

.atp-conflit__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin-top: .6rem; }
.atp-conflit__col { border: 1px solid var(--ap-filet); background: var(--calcaire); padding: .7rem .8rem; border-radius: 3px; }
.atp-conflit__titre { margin: 0 0 .4rem; font-family: var(--ap-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ap-encre-2); }
.atp-conflit__texte { white-space: pre-wrap; font-size: .95rem; line-height: 1.5; }

.atp-historique { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ap-filet); }
.atp-historique li { border-bottom: 1px solid var(--ap-filet); padding: .55rem 0; }
.atp-historique__qui { display: block; margin: 0 0 .2rem; font-family: var(--ap-mono); font-size: .68rem; letter-spacing: .04em; color: var(--ap-encre-2); }
.atp-historique__quoi { display: block; margin: 0; font-size: .92rem; white-space: pre-wrap; }
.atp-historique__lien { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.atp-historique__lien:hover .atp-historique__quoi { text-decoration: underline; }

/* ---- Téléphone : barre défilante sur une ligne, panneaux pleine largeur -------------------- */

@media (max-width: 720px) {
  .atp-barre { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: .45rem; }
  .atp-barre::-webkit-scrollbar { display: none; }
  .atp-barre__titre, .atp-barre__note { display: none; }
  .atp-panneau { padding: 1.1rem 1rem 1rem; max-height: 92vh; }
  .atp-panneau__titre { font-size: 1.4rem; }
  .atp-edition .ap-couverture { min-height: min(46svh, 380px); }
  .ap-points { gap: .25rem; }
  button.ap-tag { min-height: 30px; min-width: 30px; }
}

/* ============================================================================================
   « Mes projets pédagogiques » (§ 6.6) — page de liste, dans le chrome d'ANIMA (ses jetons).
   ============================================================================================ */

.atp-liste { display: grid; gap: 1.2rem; max-width: 60rem; }
.atp-liste__intro { color: var(--text-2); margin: 0; max-width: 62ch; }
.atp-liste__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 10px); }
.atp-liste__nouveau { display: flex; gap: .5rem; align-items: flex-end; flex: 1 1 22rem; flex-wrap: wrap; }
.atp-liste__nouveau .sf-field { flex: 1 1 14rem; }
.atp-liste__erreurs { margin: 0; color: var(--crit); }
.atp-liste__erreurs ul { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .88rem; }
.atp-liste__groupe { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: .4rem 0 0; }
.atp-liste__items { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.atp-liste__item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; text-align: left; padding: .9rem 1rem; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 10px); cursor: pointer; min-height: 56px; }
.atp-liste__item:hover { border-color: var(--survol-filet); }
.atp-liste__titre { font-weight: 600; }
.atp-liste__meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; font-size: .8rem; color: var(--text-2); margin-top: .2rem; }
.atp-liste__badge { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; padding: .1rem .45rem; border: 1px solid var(--line-2); border-radius: 20px; color: var(--text-2); white-space: nowrap; }
.atp-liste__badge--ouvert { border-color: var(--accent); color: var(--accent); }
.atp-liste__vide { color: var(--text-2); font-style: italic; margin: 0; }

/* ============================================================================================
   Publication (B4, § 6.5) — panneau « Publier » de l'atelier + page publique #/p/<jeton>.
   ============================================================================================ */

.atp-outil--publier { border-color: var(--accent-sur-nuit); color: var(--accent-sur-nuit); }
a.atp-bouton { display: inline-flex; align-items: center; text-decoration: none; }
.atp-bouton:disabled { opacity: .5; cursor: default; }

.atp-publier { display: grid; gap: .9rem; }
.atp-publier__rappel { margin: 0; }
.atp-publier__ligne { display: grid; gap: .65rem; padding: .9rem 1rem; background: var(--calcaire); border: 1px solid var(--ap-filet); border-left: 3px solid var(--ap-encre-2); border-radius: 3px; }
.atp-publier__ligne--publie { border-left-color: var(--doc-ok); }
.atp-publier__ligne--depublie { border-left-color: var(--doc-critique); }
.atp-publier__titre { font-family: var(--ap-serif); font-weight: 400; font-size: 1.35rem; margin: 0; }
.atp-publier__pour { margin: .1rem 0 0; font-size: .85rem; color: var(--ap-encre-2); }
.atp-publier__etat { margin: .35rem 0 0; font-size: .88rem; font-weight: 600; }
.atp-publier__lien { display: flex; flex-wrap: wrap; gap: .4rem; align-items: stretch; }
.atp-publier__url { flex: 1 1 16rem; min-width: 0; padding: .55rem .6rem; font-family: var(--ap-mono); font-size: .76rem; color: var(--ap-encre); background: var(--papier); border: 1px solid var(--filet-encre); border-radius: 3px; }
.atp-publier__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- Page publique : aucune interface d'ANIMA, le projet seul ------------------------------ */

body.atp-public-mode { background: var(--ap-calcaire); overflow-x: clip; }
body.atp-public-mode .wrap[data-app] { padding-top: 0; }
/* La coque (css/coque.css) pose `[data-app] { padding-top: var(--header-h) }` et la div n'est plus un `.wrap` : la règle ci-dessus ne
   la touchait plus, et un bandeau vide de la hauteur de l'en-tête (masqué) restait au-dessus de la couverture (70 px sur téléphone). */
body.atp-public-mode [data-app] { padding-top: 0; padding-bottom: 0; min-height: 0; }
body.atp-public-mode .proj-shell { gap: 0; }   /* grille à 14 px d'écart : l'aside de navigation, vide, laissait un liseré au-dessus de la couverture */
/* La coque d'ANIMA garde un rembourrage (8 px en haut, 56 px en bas) : sur la page publique et dans
   l'atelier, le projet commence sous l'en-tête, bord à bord — pas de liseré au-dessus de la couverture. */
body.atp-public-mode .proj-shell, body.atp-actif .proj-shell { padding: 0; }
body.atp-public-mode .proj-content, body.atp-actif .proj-content { padding-top: 0; }
.atp-public { min-height: 100vh; }
.atp-public--formel { background: var(--papier); }
.atp-public__barre { display: flex; justify-content: flex-end; gap: .5rem; max-width: 48rem; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 2rem) 0; }
.atp-public__message { max-width: 40rem; margin: 0 auto; padding: 18vh var(--ap-gutter) 4rem; }
.atp-public__marque { margin: 0 0 .6rem; font-family: var(--ap-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ap-encre-2); }
.atp-public__titre { margin: 0; font-family: var(--ap-serif); font-weight: 400; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.05; }
.atp-public__texte { margin: .8rem 0 0; color: var(--ap-encre-2); }
.ap-formel__meta { margin: .35rem 0 0; font-family: var(--ap-sans) !important; font-style: normal !important; font-size: .92rem !important; color: var(--encre-papier-2); }

@media print {
  body.atp-public-mode { background: var(--papier); }
  body.atp-public-mode [data-header], body.atp-public-mode [data-foot], .atp-barre, .atp-public__barre { display: none !important; }
  body.atp-public-mode .wrap[data-app] { max-width: none; padding: 0; }
  .atp-page { width: auto; margin: 0; min-height: 0; background: var(--papier); }
}