/* Charte « Affiche » d'hestia-projekt.com, transposée à ambactos.ai (ambactos#347, 8 octobre 2026).
   Sources, lues en lecture seule : hestia-site (DESIGN.md, packages/visual-system/tokens.json,
   apps/fr/app/bibliotheque/primitives.css, matieres/tampon-encre.css) et le portage déjà fait pour
   le Studio IA (web/apps/studio/app/affiche.css). Cette page ne dépend d'aucun de ces dépôts : les
   jetons --af-* vivent ici, et toute valeur de couleur, de taille, de rayon, d'ombre ou de courbe
   vient d'eux. Ce qui est propre à la page (ses sections, ses objets, son formulaire) est dans
   page.css. */

/* ---------- Polices ---------- */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-700.woff2') format('woff2');
}
/* Replis métriques, contre le saut de mise en page pendant le chargement. */
@font-face {
  font-family: 'Barlow-fb';
  src: local('Arial');
  size-adjust: 97%;
}
@font-face {
  font-family: 'Barlow Condensed-fb';
  src: local('Arial Narrow'), local('Arial');
  size-adjust: 99%;
}

/* ---------- Jetons (tokens.json d'Hestia, version 1) ---------- */
:root {
  /* Couleurs */
  --af-craie: #EDEBE3;
  --af-encre: #26251F;
  --af-encre-profonde: #1A1814;
  --af-brique: #96402C;
  --af-brique-sombre: #7C3323;
  --af-braise: #C45A3A;
  --af-braise-claire: #EC9476;
  --af-jaune-papier: #F0D77B;
  --af-kraft: #D9C29C;
  --af-carton: #EDE3CF;
  --af-bleu-papier: #C8D9DE;
  --af-blanc-papier: #F7F5EE;
  --af-peche: #F4CDBA;
  --af-encre-bleue: #22407C;
  --af-acier: #B9B4A8;
  --af-acier-sombre: #8E897E;
  --af-ficelle: #C9B48A;
  --af-ficelle-sombre: #A98E66;
  --af-cire-claire: #C2553A;
  --af-cire-sombre: #6A2A1C;
  --af-liege: #3A342B;

  /* Typographie */
  --af-police-titre: 'Barlow Condensed', 'Barlow Condensed-fb', 'Arial Narrow', Arial, sans-serif;
  --af-police-texte: 'Barlow', 'Barlow-fb', Arial, sans-serif;
  --af-t-affiche: clamp(42px, min(7.4vw, 14.6vh), 176px);
  --af-il-affiche: 0.86;
  --af-ap-affiche: -0.012em;
  --af-t-titre: clamp(40px, min(6vw, 10vh), 132px);
  --af-il-titre: 0.88;
  --af-ap-titre: -0.01em;
  --af-t-objet: clamp(22px, min(2.5vw, 4.7vh), 48px);
  --af-il-objet: 1;
  --af-ap-objet: 0;
  --af-t-chapeau: clamp(16px, min(1.25vw, 2.4vh), 21px);
  --af-il-chapeau: 1.5;
  --af-ap-chapeau: 0;
  --af-t-texte: clamp(15px, min(1.2vw, 2.35vh), 20px);
  --af-il-texte: 1.5;
  --af-ap-texte: 0;
  --af-t-bouton: clamp(15px, 1.05vw, 18px);
  --af-il-bouton: 1;
  --af-ap-bouton: 0.1em;
  --af-t-repere: clamp(13px, 0.95vw, 16px);
  --af-il-repere: 1.2;
  --af-ap-repere: 0.18em;
  --af-t-geant: min(56vh, 44vw);
  --af-il-geant: 0.78;
  --af-ap-geant: -0.04em;
  --af-t-mini: clamp(11px, 0.85vw, 14px);
  --af-il-mini: 1.1;
  --af-ap-mini: 0.16em;

  /* Rayons */
  --af-r-papier: 2px;
  --af-r-carte: 10px;
  --af-r-pilule: 999px;
  --af-r-rond: 50%;

  /* Ombres */
  --af-o-portee: 6px 6px 0 #1A1814;
  --af-o-portee-brique: 6px 6px 0 #96402C;
  --af-o-suspendue: 0 18px 28px -10px rgba(26, 24, 20, 0.7);
  --af-o-feuille: 0 10px 18px -10px rgba(26, 24, 20, 0.55);

  /* Mouvement */
  --af-m-sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --af-m-ressort: cubic-bezier(0.3, 1.45, 0.5, 1);
  --af-m-tampon: cubic-bezier(0.2, 1.7, 0.4, 1);
  --af-m-balancement: 5.2s;

  /* Espaces */
  --af-e-bord: clamp(20px, 5.6vw, 72px);
  --af-e-section: clamp(26px, 6.2vh, 76px);
  --af-e-xs: 8px;
  --af-e-sm: 16px;
  --af-e-md: 24px;
  --af-e-lg: 40px;
  --af-e-xl: 64px;

  /* L'en-tête : sa hauteur sur ordinateur, que l'ouverture de la page déduit de l'écran. */
  --af-entete: 78px;

  color-scheme: light;
}
@media (max-width: 899px) {
  :root {
    --af-t-affiche: clamp(34px, 10vw, 60px);
    --af-t-titre: clamp(36px, 10.4vw, 64px);
    --af-t-objet: 22px;
    --af-t-chapeau: 17px;
    --af-t-texte: 16px;
    --af-t-bouton: 15px;
    --af-t-repere: 13px;
    --af-t-geant: 62vw;
    --af-t-mini: 11px;
    --af-e-section: 28px;
  }
}

/* ---------- Socle ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  min-width: 320px;
  background: var(--af-craie);
  color: var(--af-encre);
  font: 400 var(--af-t-texte) / var(--af-il-texte) var(--af-police-texte);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in srgb, var(--af-brique) 22%, transparent); }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
button, input, select, textarea { font: inherit; }
svg { display: block; }
:is(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--af-fort, var(--af-brique));
  outline-offset: 3px;
}

.site {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow-x: clip;
}
.site > main { flex: 1; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--af-r-pilule);
  background: var(--af-encre-profonde);
  color: var(--af-craie);
  font: 700 var(--af-t-bouton) / var(--af-il-bouton) var(--af-police-titre);
  letter-spacing: var(--af-ap-bouton);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* Texte réservé aux lecteurs d'écran. */
.af-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- La page en affiche ---------- */
.af {
  display: block;
  position: relative;
  color: var(--af-encre);
  font-family: var(--af-police-texte);
}
:where(.af) :where(ul, ol) {
  padding: 0;
  list-style: none;
}
.af :is(.af-bouton, [data-af-objet-lien]) { background-image: none !important; }

/* Section : un aplat pleine largeur, jamais plus haut que l'écran. */
.af-section {
  --af-fond: var(--af-craie);
  --af-texte: var(--af-encre);
  --af-doux: color-mix(in srgb, var(--af-encre) 80%, transparent);
  --af-fort: var(--af-brique);
  --af-repere: var(--af-brique);
  --af-filet: color-mix(in srgb, var(--af-encre) 25%, transparent);
  --af-o-objet: var(--af-o-portee);
  --af-ombre: var(--af-encre-profonde);
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-content: center;
  padding: var(--af-e-section) var(--af-e-bord);
  background: var(--af-fond);
  color: var(--af-texte);
}
.af-section[data-aplat='brique'] {
  --af-fond: var(--af-brique);
  --af-texte: var(--af-craie);
  --af-doux: color-mix(in srgb, var(--af-craie) 85%, transparent);
  --af-fort: var(--af-peche);
  --af-repere: var(--af-peche);
  --af-filet: color-mix(in srgb, var(--af-craie) 32%, transparent);
}
.af-section[data-aplat='encre'] {
  --af-fond: var(--af-encre-profonde);
  --af-texte: var(--af-craie);
  --af-doux: color-mix(in srgb, var(--af-craie) 85%, transparent);
  --af-fort: var(--af-braise-claire);
  --af-repere: var(--af-braise-claire);
  --af-filet: color-mix(in srgb, var(--af-craie) 20%, transparent);
  --af-o-objet: var(--af-o-portee-brique);
  --af-ombre: var(--af-brique);
}
.af-section[data-aplat='jaune'] {
  --af-fond: var(--af-jaune-papier);
  --af-texte: var(--af-encre-profonde);
  --af-doux: color-mix(in srgb, var(--af-encre-profonde) 82%, transparent);
  --af-fort: var(--af-brique-sombre);
  --af-repere: var(--af-brique-sombre);
  --af-filet: color-mix(in srgb, var(--af-encre-profonde) 30%, transparent);
}
@media (min-width: 900px) {
  .af-section[data-hauteur='ecran'] { min-height: 100svh; }
  /* L'ouverture de la page partage l'écran avec l'en-tête. */
  .af-section[data-hauteur='ouverture'] { min-height: calc(100svh - var(--af-entete)); }
}
/* Deux colonnes : le texte, puis son objet. */
.af-section[data-colonnes='2'] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  column-gap: var(--af-e-xl);
  row-gap: var(--af-e-lg);
}
@media (max-width: 899px) {
  .af-section[data-colonnes='2'] {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--af-e-md);
  }
}

/* Le numéro géant, en filigrane. */
.af-geant {
  position: absolute;
  z-index: -1;
  top: -.1em;
  right: -.03em;
  font: 700 var(--af-t-geant) / var(--af-il-geant) var(--af-police-titre);
  letter-spacing: var(--af-ap-geant);
  color: transparent;
  -webkit-text-stroke: 2px var(--af-filet);
  opacity: .4;
  pointer-events: none;
  user-select: none;
}

/* ---------- Texte ---------- */
.af-repere {
  margin: 0 0 var(--af-repere-marge, clamp(8px, 1.4vh, 16px));
  font: 700 var(--af-t-repere) / var(--af-il-repere) var(--af-police-titre);
  letter-spacing: var(--af-ap-repere);
  text-transform: uppercase;
  color: var(--af-repere, var(--af-brique));
}
.af-titre {
  font-family: var(--af-police-titre);
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--af-texte, var(--af-encre));
}
.af-titre[data-niveau='affiche'] {
  font-size: var(--af-t-affiche);
  line-height: var(--af-il-affiche);
  letter-spacing: var(--af-ap-affiche);
}
.af-titre[data-niveau='titre'] {
  font-size: var(--af-t-titre);
  line-height: var(--af-il-titre);
  letter-spacing: var(--af-ap-titre);
}
.af-titre[data-niveau='objet'] {
  font-size: var(--af-t-objet);
  line-height: var(--af-il-objet);
}
.af-fort { color: var(--af-fort, var(--af-brique)); }
.af-titre[data-niveau='affiche'] .af-fort { display: block; }
/* Le titre qui clôt la page : un cran au-dessus, son groupe fort à la ligne. */
.af-titre[data-ampleur='grande'] { font-size: min(calc(var(--af-t-titre) * 1.2), calc(var(--af-t-affiche) * .946)); }
.af-titre[data-ampleur='grande'] .af-fort { display: block; }
.af-chapeau {
  max-width: var(--af-chapeau-mesure, 62ch);
  margin-top: var(--af-chapeau-marge, clamp(12px, 2.4vh, 28px));
  font-size: var(--af-t-chapeau);
  line-height: var(--af-il-chapeau);
  color: var(--af-doux, var(--af-encre));
}
.af-titre[data-niveau='affiche'] + .af-chapeau { margin-top: var(--af-chapeau-marge, clamp(16px, 3vh, 34px)); }
.af-texte {
  max-width: var(--af-texte-mesure, 68ch);
  font-size: var(--af-t-texte);
  line-height: var(--af-il-texte);
  color: var(--af-doux, var(--af-encre));
}
/* Le lien courant : souligné de la couleur forte de son aplat. */
.af :where(a:not(.af-bouton, [data-af-objet-lien], .wordmark, .btn)) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--af-fort, var(--af-brique));
}
.af :where(a:not(.af-bouton, [data-af-objet-lien], .wordmark, .btn)):hover { color: var(--af-fort, var(--af-brique)); }
.af :is(a, button, input, textarea):focus-visible {
  outline: 3px solid var(--af-fort, var(--af-brique));
  outline-offset: 3px;
}

/* L'exergue : une phrase qui compte, tenue par un filet. */
.af-exergue {
  padding: var(--af-exergue-retrait, clamp(6px, 1.2vh, 14px) 0 clamp(6px, 1.2vh, 14px) var(--af-e-sm));
  border-left: var(--af-exergue-filet, 6px) solid var(--af-fort, var(--af-brique));
  font: 700 var(--af-t-objet) / var(--af-il-objet) var(--af-police-titre);
  text-transform: uppercase;
  text-wrap: balance;
}

/* ---------- Bouton ---------- */
.af-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: var(--af-actions-marge, clamp(18px, 3.4vh, 38px));
}
.af-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 26px;
  font: 700 var(--af-t-bouton) / var(--af-il-bouton) var(--af-police-titre);
  letter-spacing: var(--af-ap-bouton);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--af-r-pilule);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .25s var(--af-m-ressort);
}
.af-bouton:hover { transform: translateY(-2px) rotate(-1deg); }
.af-bouton:active { transform: translateY(1px); }
/* Une action qui attend (un envoi en cours) : posée, sans réponse au survol. */
.af-bouton:disabled {
  opacity: .5;
  pointer-events: none;
}
.af-bouton[data-variante='plein'] { background: var(--af-brique); color: var(--af-craie); }
.af-bouton[data-variante='plein']:hover { background: var(--af-encre-profonde); }
.af-bouton[data-variante='trait'] { border-color: currentColor; color: var(--af-texte, var(--af-encre)); background: transparent; }
.af-bouton[data-variante='trait']:hover { background: var(--af-texte, var(--af-encre)); color: var(--af-fond, var(--af-craie)); border-color: var(--af-texte, var(--af-encre)); }
.af-bouton[data-variante='craie'] { background: var(--af-craie); color: var(--af-brique-sombre); }
.af-bouton[data-variante='craie']:hover { background: var(--af-encre-profonde); color: var(--af-craie); }
/* La grande taille : l'action qui clôt la page. */
.af-bouton[data-taille='grande'] {
  min-height: 66px;
  padding: 0 34px;
  font-size: clamp(1.0625rem, 1.3vw, 1.375rem);
}
.af-bouton[data-fleche]::after {
  content: "";
  flex: none;
  width: 18px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(0 42%, 70% 42%, 70% 0, 100% 50%, 70% 100%, 70% 58%, 0 58%);
}
/* La mention sous un bouton. */
.af-bouton-mention {
  font: 700 var(--af-t-mini) / var(--af-il-mini) var(--af-police-titre);
  letter-spacing: var(--af-ap-mini);
  text-transform: uppercase;
  color: var(--af-doux, var(--af-encre));
}

/* ---------- Le tampon d'encre ---------- */
.af-tampon-encre {
  --inclinaison: -3deg;
  --delai: 0s;
  --tampon-encre: var(--af-fort, var(--af-brique));
  display: inline-block;
  max-width: 100%;
  padding: .2em .42em .14em;
  border: .12em solid var(--tampon-encre);
  border-radius: .16em;
  font-family: var(--af-police-titre);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tampon-encre);
  rotate: var(--inclinaison);
  filter: url(#af-encre);
  opacity: .94;
}
.af-tampon-encre[data-ton='brique'] { --tampon-encre: var(--af-brique); mix-blend-mode: multiply; }
.af-tampon-encre[data-ton='encre'] { --tampon-encre: var(--af-encre); mix-blend-mode: multiply; }
.af-tampon-encre[data-ton='craie'] { --tampon-encre: var(--af-craie); }
.af-tampon-encre[data-taille='mention'] {
  padding: .12em .5em .08em;
  border-width: .14em;
  border-radius: .22em;
  font-size: var(--af-t-repere);
  letter-spacing: .16em;
  filter: none;
}
.af-tampon-encre[data-taille='mot'] { font-size: calc(var(--af-t-objet) * .76); }
.af-tampon-encre[data-taille='verdict'] {
  padding: .12em .34em .07em;
  font-size: calc(var(--af-t-objet) * 1.45);
  letter-spacing: .06em;
}
.af-tampon-encre[data-taille='herite'] { font-size: 1em; }
.af-tampon-encre[data-cadre='pointille'] { border-style: dashed; }
.af-tampon-encre[data-cadre='double'] {
  margin: .15em;
  padding: .26em .44em .22em;
  border-width: .11em;
  border-radius: 0;
  outline: .04em solid var(--tampon-encre);
  outline-offset: .11em;
}
/* La frappe : le tampon arrive de haut, s'écrase, se pose. Sans JavaScript, il est posé. */
.af-tampon-encre[data-etat='attente'] {
  opacity: 0;
  scale: 1.7;
}
.af-tampon-encre[data-anime][data-etat='pose'] {
  transition:
    scale .32s var(--af-m-tampon) var(--delai),
    opacity .12s linear var(--delai);
}

/* ---------- La fiche : blanc papier, filet encre, ombre dure ---------- */
.af-fiche {
  --af-fond: var(--af-blanc-papier);
  --af-texte: var(--af-encre);
  --af-doux: color-mix(in srgb, var(--af-encre) 80%, transparent);
  --af-fort: var(--af-brique);
  --af-repere: var(--af-brique);
  --af-filet: color-mix(in srgb, var(--af-encre) 25%, transparent);
  background: var(--af-fond);
  color: var(--af-texte);
  border: 2px solid var(--af-encre);
  border-radius: var(--af-r-carte);
  box-shadow: var(--af-o-objet, var(--af-o-portee));
}

/* ---------- En-tête : la signature, la langue, l'action ---------- */
.top {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--af-entete);
  padding: 14px var(--af-e-bord);
  border-bottom: 3px solid var(--af-encre);
  background: color-mix(in srgb, var(--af-craie) 62%, transparent);
  backdrop-filter: blur(14px) saturate(.9);
  -webkit-backdrop-filter: blur(14px) saturate(.9);
}
@media (min-width: 900px) {
  /* Collant, et d'une hauteur fixe : l'ouverture de la page en déduit la sienne. */
  .top {
    position: sticky;
    top: 0;
    height: var(--af-entete);
    padding-top: 0;
    padding-bottom: 0;
  }
}
/* La marque, seule : « Ambactos. », le point en brique. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  min-height: 44px;
  min-width: 24px;
  font-family: var(--af-police-titre);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--af-encre);
  text-decoration: none;
}
.wordmark b {
  color: var(--af-brique);
  font-weight: 700;
}
/* La langue : deux lettres, un point, la langue courante soulignée. */
.langues {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  margin-right: 14px;
  font-family: var(--af-police-titre);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.langues a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  min-width: 24px;
  padding: 10px 6px;
  text-decoration: none;
  color: color-mix(in srgb, var(--af-encre) 80%, transparent);
  border-bottom: 3px solid transparent;
}
.langues a:hover { color: var(--af-brique); }
.langues a[aria-current='page'] {
  color: var(--af-brique);
  border-bottom-color: var(--af-brique);
}
.langues span {
  color: color-mix(in srgb, var(--af-encre) 45%, transparent);
  user-select: none;
}
/* L'action de l'en-tête : la pilule pleine d'hestia-projekt.com. */
.btn--header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 20px;
  font-family: var(--af-police-titre);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--af-craie);
  border: 0;
  border-radius: var(--af-r-pilule);
  background: var(--af-brique);
  transition: transform .25s var(--af-m-ressort), background .2s, color .2s;
}
.btn--header:hover {
  background: var(--af-encre-profonde);
  transform: translateY(-2px) rotate(-1deg);
}
.btn--header:active { transform: translateY(1px); }
@media (max-width: 899px) {
  .top {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding-top: 12px;
    padding-bottom: 10px;
  }
  .wordmark { margin-right: auto; }
  .langues {
    order: 3;
    margin: 0 0 0 auto;
  }
  .btn--header {
    order: 2;
    min-height: 40px;
    padding: 10px 12px;
    font-size: 12px;
    letter-spacing: .06em;
  }
}

/* ---------- Pied : la signature, les liens ---------- */
.footer {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px var(--af-e-bord) 28px;
  border-top: 1px solid color-mix(in srgb, var(--af-craie) 20%, transparent);
  background: var(--af-encre);
  color: color-mix(in srgb, var(--af-craie) 55%, transparent);
}
.footer__ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 36px;
  font-family: var(--af-police-titre);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.footer__ligne a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 6px;
  color: color-mix(in srgb, var(--af-craie) 75%, transparent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--af-craie) 35%, transparent);
}
.footer a:hover { color: var(--af-craie); }
.footer :is(a, summary):focus-visible { outline-color: var(--af-craie); }
@media (max-width: 640px) {
  .footer__ligne,
  .footer nav {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------- Téléphone ---------- */
@media (max-width: 899px) {
  .af-titre[data-niveau='affiche'] + .af-chapeau { margin-top: var(--af-chapeau-marge, 18px); }
  .af-actions { margin-top: var(--af-actions-marge, 18px); }
  .af-bouton { width: 100%; }
  .af-bouton[data-taille='grande'] {
    width: auto;
    max-width: 100%;
    min-height: 58px;
    padding: 0 22px;
    font-size: var(--af-t-texte);
  }
  .af-titre[data-ampleur='grande'] { font-size: calc(var(--af-t-objet) * 2); }
}

/* ---------- Mouvement réduit : tout est posé, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .af *,
  .af *::before,
  .af *::after,
  .top *,
  .footer * {
    animation: none !important;
    transition: none !important;
  }
  .af-bouton:hover,
  .btn--header:hover { transform: none; }
  .af-tampon-encre[data-etat='attente'] {
    opacity: .94;
    scale: 1;
  }
}

/* ambactos.ai : ce qui est propre à la page, dans la charte « Affiche » d'Hestia.
   Les primitives, l'en-tête et le pied sont dans affiche.css. Ici : la composition de chaque
   section (sa grille, ses écarts, l'échelle de ses textes, réglée par les variables que lisent
   les primitives), les quatre objets (la feuille d'inscription, le tableau épinglé, le parapheur,
   la note signée) et les états du formulaire. Couleurs, tailles, rayons, ombres et courbes
   viennent des jetons --af-*. */

.page {
  /* La place qu'un objet posé garde pour son ombre portée. */
  --page-ombre: 6px;
}
.page .af-section[data-colonnes='2'] {
  align-items: center;
  column-gap: clamp(28px, 4vw, 72px);
  row-gap: var(--af-e-md);
}
.page-texte {
  --af-chapeau-mesure: 56ch;
  min-width: 0;
}
.page-objet {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* =========================================================
   01 · L'annonce : le titre de la page, et la feuille d'inscription sur son panneau brique
   ========================================================= */
.page .af-section.page-annonce {
  --page-panneau: clamp(400px, 38vw, 620px);
  grid-template-columns: minmax(0, 1fr) calc(var(--page-panneau) - var(--af-e-bord));
  align-items: center;
  column-gap: clamp(24px, 3.4vw, 64px);
  padding-top: 0;
  padding-bottom: 0;
}
/* Le panneau brique, à fond perdu sur la droite : l'objet s'y pose. */
.page-annonce::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--page-panneau);
  background: var(--af-brique);
}
.page-annonce .page-texte {
  --af-chapeau-mesure: 54ch;
  padding: clamp(18px, 3.6vh, 48px) 0;
}
.page-annonce .page-objet {
  align-self: stretch;
  align-items: center;
  margin-right: calc(-1 * var(--af-e-bord));
  padding: clamp(24px, 4vh, 48px) clamp(16px, 2.4vw, 40px);
}
@media (min-width: 900px) {
  /* Le groupe fort du titre tient sur une ligne dans sa colonne. */
  .page-annonce .page-texte { --af-t-affiche: clamp(42px, min(5.6vw, 12.2vh), 152px); }
}

/* ---------- La feuille d'inscription : du papier, une ligne, une case, un tampon ---------- */
.feuille {
  --largeur: min(100%, 460px);
  container: feuille / inline-size;
  position: relative;
  width: var(--largeur);
  margin: 0;
  padding: clamp(18px, 4.4cqw, 26px) clamp(18px, 5cqw, 30px) clamp(14px, 3.6cqw, 20px);
  border-radius: var(--af-r-papier);
  background: var(--af-blanc-papier);
  color: var(--af-encre);
  box-shadow: var(--af-o-portee);
  rotate: -.5deg;
  scroll-margin-top: calc(var(--af-entete) + var(--af-e-md));
}
.feuille__tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-bottom: clamp(10px, 2.2cqw, 14px);
  border-bottom: 2px solid var(--af-encre);
}
.feuille__surtitre {
  font: 700 clamp(12px, 2.6cqw, 14px) / 1 var(--af-police-titre);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--af-brique);
}
.feuille__date { margin: 0; }
.feuille__form {
  display: grid;
  gap: clamp(12px, 2.8cqw, 18px);
  margin-top: clamp(14px, 3.2cqw, 20px);
}
.feuille__champ {
  display: grid;
  gap: 2px;
}
.feuille__label {
  font: 700 var(--af-t-mini) / 1.2 var(--af-police-titre);
  letter-spacing: var(--af-ap-mini);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--af-encre) 72%, transparent);
}
/* Ce que le visiteur écrit est à l'encre bleue, sur une ligne. */
.feuille__email {
  width: 100%;
  min-height: 46px;
  padding: 6px 0;
  border: 0;
  border-bottom: 2px solid var(--af-encre);
  border-radius: 0;
  background: transparent;
  color: var(--af-encre-bleue);
  caret-color: var(--af-encre-bleue);
  font-size: clamp(17px, 3.8cqw, 20px);
  line-height: 1.3;
}
.feuille__email:focus-visible {
  outline: 3px solid var(--af-brique);
  outline-offset: 2px;
}
.feuille__email[aria-invalid='true'] { border-bottom-color: var(--af-brique); }
.feuille__email[aria-invalid='true'] ~ .feuille__label,
.feuille__champ:has(.feuille__email[aria-invalid='true']) .feuille__label { color: var(--af-brique); }
/* Le pot de miel : hors de l'écran, hors du clavier, hors des lecteurs d'écran. */
.feuille__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.feuille__consent { position: relative; }
.feuille__case-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.feuille__case-label {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  min-height: 24px;
  cursor: pointer;
  font-size: clamp(14px, 3cqw, 16px);
  line-height: 1.4;
  color: color-mix(in srgb, var(--af-encre) 88%, transparent);
}
.feuille__case {
  display: block;
  width: 26px;
  height: 26px;
  margin-top: -1px;
  border: 2px solid var(--af-encre);
  border-radius: var(--af-r-papier);
  background: var(--af-blanc-papier);
  overflow: visible;
}
.feuille__case svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* La coche, à la main du visiteur : encre bleue, qui se dépose. */
.feuille__case path {
  fill: none;
  stroke: var(--af-encre-bleue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1px;
  stroke-dashoffset: 1px;
  transition: stroke-dashoffset .3s ease-out;
}
.feuille__case-input:checked + .feuille__case-label .feuille__case path { stroke-dashoffset: 0px; }
.feuille__case-input:focus-visible + .feuille__case-label .feuille__case {
  outline: 3px solid var(--af-brique);
  outline-offset: 3px;
}
.feuille__case-input[aria-invalid='true'] + .feuille__case-label .feuille__case { border-color: var(--af-brique); }
.feuille__case-input[aria-invalid='true'] + .feuille__case-label { color: var(--af-brique); }
.feuille__bouton {
  justify-self: start;
  margin-top: clamp(2px, 1cqw, 6px);
}
/* L'état du formulaire : une ligne qui parle, tenue par un filet quand elle alerte. */
.feuille__etat {
  margin-top: 0;
  font-size: clamp(14px, 3cqw, 16px);
  line-height: 1.4;
  color: color-mix(in srgb, var(--af-encre) 80%, transparent);
  outline: none;
}
.feuille__etat:not(:empty) { margin-top: clamp(10px, 2.4cqw, 14px); }
.feuille[data-etat='erreur'] .feuille__etat {
  padding-left: 12px;
  border-left: 3px solid var(--af-brique);
  color: var(--af-brique);
}
.feuille[data-etat='ok'] .feuille__form { display: none; }
.feuille[data-etat='ok'] .feuille__etat {
  font-size: clamp(16px, 3.4cqw, 18px);
  color: var(--af-encre);
  text-align: center;
}
.feuille__ok {
  display: flex;
  justify-content: center;
  padding: clamp(20px, 5cqw, 32px) 0 clamp(6px, 1.6cqw, 10px);
}
.feuille__ok[hidden] { display: none; }
.feuille__ok-tampon { margin: 0; }
.feuille__mention {
  margin-top: clamp(12px, 2.8cqw, 16px);
  padding-top: clamp(8px, 2cqw, 12px);
  border-top: 1px solid color-mix(in srgb, var(--af-encre) 25%, transparent);
  font-size: clamp(12px, 2.6cqw, 13.5px);
  line-height: 1.4;
  color: color-mix(in srgb, var(--af-encre) 70%, transparent);
}
/* Le lien, dans la phrase : sa cible fait 24 px de haut sans déplacer la ligne. */
.feuille__mention a {
  display: inline-block;
  padding-block: 5px;
  margin-block: -5px;
  color: inherit;
}

/* =========================================================
   02 · Les quatre agents : le tableau épinglé
   ========================================================= */
.page .af-section.page-agents { grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr); }
.page-agents .page-objet { padding-right: var(--page-ombre); }

.tableau {
  --largeur: min(100%, 680px);
  container: tableau / inline-size;
  width: var(--largeur);
  margin: 0 auto;
  /* La place de l'étiquette, au-dessus du cadre. */
  padding-top: 14px;
}
.tableau__cadre {
  position: relative;
  padding: clamp(18px, 3.6cqw, 30px) clamp(14px, 3cqw, 24px) clamp(14px, 3cqw, 24px);
  border: clamp(8px, 1.5cqw, 12px) solid var(--af-liege);
  border-radius: var(--af-r-papier);
  background: var(--af-kraft);
  box-shadow: var(--af-o-objet, var(--af-o-portee));
  rotate: .4deg;
}
/* L'étiquette du tableau, collée sur le cadre. */
.tableau__titre {
  position: absolute;
  top: 0;
  left: clamp(18px, 4cqw, 32px);
  translate: 0 calc(-50% - clamp(8px, 1.5cqw, 12px));
  padding: 7px 12px 6px;
  border: 2px solid var(--af-encre);
  border-radius: var(--af-r-papier);
  background: var(--af-blanc-papier);
  font: 700 clamp(10px, 1.8cqw, 13px) / 1 var(--af-police-titre);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--af-brique);
  box-shadow: var(--af-o-feuille);
  rotate: -2deg;
}
/* Quatre fiches, deux par rangée. */
.tableau__fiches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2.4cqw, 20px);
  margin: 0;
  padding: clamp(8px, 1.6cqw, 12px) 0 0;
  list-style: none;
}
.tableau__fiche {
  --papier: var(--af-blanc-papier);
  --encre: var(--af-encre);
  --etiquette: var(--af-brique);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, .9cqw, 8px);
  min-width: 0;
  min-height: clamp(150px, 24cqw, 200px);
  padding: clamp(24px, 4.4cqw, 34px) clamp(10px, 2.2cqw, 18px) clamp(12px, 2.4cqw, 18px);
  border-radius: var(--af-r-papier);
  background: var(--papier);
  color: var(--encre);
  box-shadow: var(--af-o-feuille);
  rotate: var(--pente);
  transform-origin: 50% 12px;
}
.tableau__fiche[data-papier='jaune'] {
  --papier: var(--af-jaune-papier);
  --encre: var(--af-encre-profonde);
  --etiquette: var(--af-brique-sombre);
}
.tableau__fiche[data-papier='bleu'] { --papier: var(--af-bleu-papier); }
.tableau__fiche[data-papier='peche'] {
  --papier: var(--af-peche);
  --etiquette: var(--af-brique-sombre);
}
/* La punaise : une tête ronde, en cire. */
.tableau__punaise {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 15px;
  height: 15px;
  translate: -50% 0;
  border-radius: var(--af-r-rond);
  background: radial-gradient(circle at 34% 32%, var(--af-cire-claire), var(--af-brique) 52%, var(--af-cire-sombre));
  box-shadow: 0 2px 3px color-mix(in srgb, var(--af-encre-profonde) 45%, transparent);
}
.tableau__label {
  font: 700 clamp(11px, 1.9cqw, 13px) / 1.1 var(--af-police-titre);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--etiquette);
}
.tableau__gros {
  font: 700 clamp(18px, 4cqw, 30px) / .95 var(--af-police-titre);
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.tableau__texte {
  margin-top: auto;
  font-size: clamp(13px, 2.2cqw, 15.5px);
  line-height: 1.35;
  color: color-mix(in srgb, var(--encre) 85%, transparent);
}
/* À l'arrivée dans l'écran, les fiches viennent se piquer l'une après l'autre. */
.tableau[data-arme] .tableau__fiche {
  opacity: 0;
  translate: 0 -34px;
}
.tableau[data-arme][data-vu] .tableau__fiche {
  opacity: 1;
  translate: 0 0;
  transition:
    translate .8s var(--af-m-ressort) calc(var(--i) * 130ms),
    opacity .25s linear calc(var(--i) * 130ms);
}
/* Rail étroit ou téléphone : les fiches se rangent en colonne. */
@media (max-width: 899px) {
  .tableau__fiches { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tableau__fiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas: "label texte" "gros texte";
    column-gap: 14px;
    row-gap: 3px;
    align-items: center;
    min-height: 0;
    padding: 10px 12px 10px 28px;
    rotate: calc(var(--pente) * .5);
    transform-origin: 14px 50%;
  }
  .tableau__punaise {
    top: 50%;
    left: 10px;
    translate: 0 -50%;
    width: 12px;
    height: 12px;
  }
  .tableau__label { grid-area: label; font-size: 11px; }
  .tableau__gros { grid-area: gros; font-size: 20px; }
  .tableau__texte { grid-area: texte; margin: 0; font-size: 13px; line-height: 1.3; }
}

/* =========================================================
   03 · La validation du dirigeant : le parapheur (repris du Studio IA)
   ========================================================= */
.page .af-section.page-validation { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.page-validation .page-objet { padding-right: var(--page-ombre); }

.af-parapheur {
  --largeur: min(100%, 640px);
  container: af-parapheur / inline-size;
  width: var(--largeur);
  margin: 0 auto;
  /* La place de l'onglet, au-dessus du dossier. */
  padding-top: clamp(30px, 6cqw, 42px);
}
.af-parapheur__dossier {
  position: relative;
  padding: clamp(14px, 3cqw, 22px) clamp(14px, 3cqw, 22px) clamp(14px, 3cqw, 22px) clamp(24px, 5.5cqw, 38px);
  border-radius: var(--af-r-carte);
  background: var(--af-kraft);
  color: var(--af-encre);
  box-shadow: var(--af-o-objet, var(--af-o-portee));
  rotate: -.8deg;
}
/* Le dos du dossier. */
.af-parapheur__dossier::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(10px, 2.4cqw, 16px);
  border-radius: var(--af-r-carte) 0 0 var(--af-r-carte);
  background: var(--af-ficelle-sombre);
}
.af-parapheur__onglet {
  position: absolute;
  bottom: calc(100% - 1px);
  left: clamp(24px, 6cqw, 44px);
  padding: 9px 14px 7px;
  border-radius: var(--af-r-carte) var(--af-r-carte) 0 0;
  background: var(--af-kraft);
  font: 700 clamp(11px, 1.9cqw, 14px) / 1 var(--af-police-titre);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--af-brique-sombre);
}
.af-parapheur__feuilles {
  display: grid;
  gap: clamp(8px, 1.6cqw, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.af-parapheur__feuille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "domaine visa" "lignes visa";
  column-gap: clamp(10px, 2.4cqw, 18px);
  align-items: center;
  padding: clamp(10px, 2cqw, 16px) clamp(12px, 2.4cqw, 18px);
  border-radius: var(--af-r-papier);
  background: var(--af-blanc-papier);
  box-shadow: var(--af-o-feuille);
  rotate: var(--pente);
}
.af-parapheur__domaine {
  grid-area: domaine;
  font: 700 clamp(18px, 3.6cqw, 30px) / 1 var(--af-police-titre);
  text-transform: uppercase;
}
/* Les lignes où l'action s'écrit : vides, le dossier n'invente rien. */
.af-parapheur__lignes {
  grid-area: lignes;
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.af-parapheur__lignes span {
  height: 0;
  border-bottom: 2px dotted color-mix(in srgb, var(--af-encre) 35%, transparent);
}
.af-parapheur__lignes span:last-child { width: 68%; }
.af-parapheur__visa {
  grid-area: visa;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: clamp(58px, 12cqw, 92px);
}
.af-parapheur__visa svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.af-parapheur__case {
  fill: color-mix(in srgb, var(--af-craie) 60%, transparent);
  stroke: var(--af-encre);
  stroke-width: 1.2;
  stroke-linejoin: round;
  opacity: .55;
}
.af-parapheur__feuille[data-etat='paraphe'] .af-parapheur__case { opacity: 1; }
.af-parapheur__encre path {
  fill: none;
  stroke: var(--af-encre-bleue);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.af-parapheur__souligne { opacity: .8; }
.af-parapheur__mot {
  font: 700 var(--af-t-mini) / 1.15 var(--af-police-titre);
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--af-encre) 70%, transparent);
}
.af-parapheur__feuille[data-etat='paraphe'] .af-parapheur__mot { color: var(--af-encre-bleue); }
/* À l'arrivée : les feuilles se glissent dans le dossier, puis le paraphe se dépose. */
.af-parapheur[data-arme] .af-parapheur__feuille {
  opacity: 0;
  translate: 0 26px;
}
.af-parapheur[data-arme][data-vu] .af-parapheur__feuille {
  opacity: 1;
  translate: 0 0;
  transition:
    translate .7s var(--af-m-ressort) calc(var(--i) * 120ms),
    opacity .22s linear calc(var(--i) * 120ms);
}
.af-parapheur[data-arme] .af-parapheur__encre path {
  stroke-dasharray: 1px;
  stroke-dashoffset: 1px;
}
.af-parapheur[data-arme][data-vu] .af-parapheur__encre path {
  stroke-dashoffset: 0px;
  transition: stroke-dashoffset .55s ease-in-out .9s;
}
.af-parapheur[data-arme][data-vu] .af-parapheur__souligne {
  transition-duration: .25s;
  transition-delay: 1.4s;
}
@media (max-width: 899px) {
  .af-parapheur__feuille { padding: 10px 12px; }
  .af-parapheur__domaine { font-size: 20px; }
  .af-parapheur__lignes { margin-top: 8px; gap: 6px; }
  .af-parapheur__visa { width: 60px; }
}

/* =========================================================
   04 · L'origine : le titre qui clôt, la note signée, l'action qui clôt
   ========================================================= */
.page .af-section.page-origine { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
.page-origine .page-texte { --af-chapeau-mesure: 58ch; }
.page-origine .page-objet { padding-right: var(--page-ombre); }
.page-origine__actions { gap: 14px 22px; }

.note {
  --largeur: min(100%, 440px);
  container: note / inline-size;
  position: relative;
  width: var(--largeur);
  margin: 0 auto;
  padding: clamp(18px, 5cqw, 28px) clamp(20px, 5.4cqw, 32px) clamp(16px, 4cqw, 22px);
  border-radius: var(--af-r-papier);
  background: var(--af-blanc-papier);
  color: var(--af-encre);
  box-shadow: var(--af-o-objet, var(--af-o-portee));
  rotate: 1.2deg;
}
.note__marque {
  display: block;
  font: 700 clamp(11px, 2.6cqw, 13px) / 1 var(--af-police-titre);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.note__marque b { color: var(--af-brique); }
.note__citation { margin-top: clamp(12px, 3.2cqw, 18px); }
.note__citation p {
  font: 700 clamp(19px, 4.8cqw, 27px) / 1.15 var(--af-police-titre);
  text-wrap: balance;
}
.note__signature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "paraphe nom" "paraphe role";
  column-gap: 14px;
  row-gap: 2px;
  align-items: end;
  margin-top: clamp(14px, 3.6cqw, 22px);
  padding-top: clamp(10px, 2.6cqw, 14px);
  border-top: 2px dotted color-mix(in srgb, var(--af-encre) 35%, transparent);
}
/* La signature du fondateur, à l'encre bleue : la main du signataire. */
.note__paraphe {
  grid-area: paraphe;
  width: clamp(92px, 26cqw, 128px);
  height: auto;
  overflow: visible;
}
.note__paraphe path {
  fill: none;
  stroke: var(--af-encre-bleue);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.note__souligne { opacity: .8; }
.note__nom {
  grid-area: nom;
  font: 700 clamp(14px, 3.2cqw, 17px) / 1.1 var(--af-police-titre);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.note__role {
  grid-area: role;
  font: 600 clamp(11px, 2.4cqw, 13px) / 1.2 var(--af-police-titre);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--af-encre) 65%, transparent);
}
/* À l'arrivée : la signature se dépose. */
.note[data-arme] .note__paraphe path {
  stroke-dasharray: 1px;
  stroke-dashoffset: 1px;
}
.note[data-arme][data-vu] .note__paraphe path {
  stroke-dashoffset: 0px;
  transition: stroke-dashoffset .7s ease-in-out .3s;
}
.note[data-arme][data-vu] .note__souligne {
  transition-duration: .3s;
  transition-delay: .95s;
}

/* =========================================================
   La page introuvable : une seule colonne, le numéro géant en filigrane
   ========================================================= */
.page .af-section.page-introuvable {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}
.page-introuvable .page-texte {
  --af-chapeau-mesure: 52ch;
  max-width: 100%;
}
.page-introuvable__actions { gap: 14px 22px; }
.page-introuvable__fr {
  margin-top: clamp(18px, 3.4vh, 38px);
  color: color-mix(in srgb, var(--af-encre) 70%, transparent);
}
.page-introuvable__fr a {
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;
}
@media (max-width: 899px) {
  .page-introuvable__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================================================
   Pied : les mentions, la confidentialité repliée
   ========================================================= */
.footer__mentions {
  display: grid;
  gap: 10px;
  max-width: 92ch;
  font-family: var(--af-police-texte);
  font-size: clamp(12.5px, .9vw, 14px);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--af-craie) 66%, transparent);
}
.footer__mentions strong {
  font: 700 var(--af-t-mini) / 1.2 var(--af-police-titre);
  letter-spacing: var(--af-ap-mini);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--af-craie) 88%, transparent);
}
.footer__privacy summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  padding-block: 4px;
  cursor: pointer;
  list-style: none;
  font: 700 var(--af-t-mini) / 1.2 var(--af-police-titre);
  letter-spacing: var(--af-ap-mini);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--af-craie) 88%, transparent);
}
.footer__privacy summary::-webkit-details-marker { display: none; }
.footer__privacy summary::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  transition: rotate .2s;
}
.footer__privacy[open] summary::before {
  margin-top: 3px;
  rotate: -135deg;
}
.footer__privacy summary:hover { color: var(--af-craie); }
.footer__privacy p {
  max-width: 78ch;
  margin-top: 8px;
}
.footer__claude { color: color-mix(in srgb, var(--af-craie) 52%, transparent); }

/* =========================================================
   Téléphone et petites tablettes : une colonne
   ========================================================= */
@media (max-width: 899px) {
  .page .af-section.page-annonce,
  .page .af-section.page-agents,
  .page .af-section.page-validation,
  .page .af-section.page-origine {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--af-e-md);
  }
  /* L'annonce : le texte, puis la feuille sur une bande brique à fond perdu. */
  .page-annonce::before { display: none; }
  .page-annonce .page-texte { padding: var(--af-e-md) 0 0; }
  .page-annonce .page-objet {
    align-self: auto;
    margin: 0 calc(-1 * var(--af-e-bord));
    padding: var(--af-e-md) var(--af-e-bord) var(--af-e-md);
    background: var(--af-brique);
  }
  .feuille {
    rotate: 0deg;
    padding: 18px 18px 14px;
  }
  .feuille__bouton { justify-self: stretch; }
  .page-agents .page-objet,
  .page-validation .page-objet,
  .page-origine .page-objet { padding-right: 0; }
  .tableau__cadre { rotate: 0deg; }
  .note { rotate: 0deg; }
  .page-origine__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .page-origine__actions .af-bouton-mention { text-align: center; }
}

/* ---------- Mouvement réduit : les objets sont posés, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  .tableau__fiche,
  .af-parapheur__feuille {
    transition: none !important;
    opacity: 1 !important;
    translate: 0 0 !important;
  }
  .af-parapheur__encre path,
  .note__paraphe path,
  .feuille__case path {
    transition: none !important;
  }
  .af-parapheur__encre path,
  .note__paraphe path {
    stroke-dashoffset: 0px !important;
  }
}

/* ambactos.ai : les pages de lecture (les articles et leur index), dans la charte « Affiche ».
   Gabarit transposé de la page de lecture d'hestia-projekt.com (apps/fr/app/lecture-affiche.css,
   lue en lecture seule le 8 octobre 2026) : une ouverture sur aplat encre, un corps de prose sur
   craie (68 caractères par ligne, les titres de partie tenus par un filet de 6 px et, sur écran
   large, posés dans la marge), les blocs qui ne sont pas de la prose en fiches (blanc papier,
   filet encre, ombre dure décalée), puis la bande brique qui porte la feuille de la liste
   d'attente. Rien ici ne touche l'accueil : tout est sous .lecture, ou tient au lien « Articles »
   de l'en-tête, qui n'existe que s'il y a un article publié. Couleurs, tailles, rayons, ombres et
   courbes viennent des jetons --af-*. */

/* ---------- Le lien discret vers les articles, dans l'en-tête ---------- */
.top__articles {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-left: auto;
  padding: 10px 6px;
  font-family: var(--af-police-titre);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: color-mix(in srgb, var(--af-encre) 80%, transparent);
  border-bottom: 3px solid transparent;
}
.top__articles:hover { color: var(--af-brique); }
.top__articles[aria-current='page'] {
  color: var(--af-brique);
  border-bottom-color: var(--af-brique);
}
.top__articles ~ .langues { margin-left: 18px; }
@media (max-width: 899px) {
  /* Une page anglaise seule : le lien tient entre la marque et l'action. */
  .top__articles {
    order: 1;
    margin-left: 0;
    padding-inline: 4px;
  }
  /* L'accueil, quand il y a des articles : la marque et l'action en haut, le lien et la langue
     en dessous. Sans article, l'en-tête de l'accueil n'est pas touché. */
  .top:has(.top__articles):has(.langues) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "marque action" "articles langues";
    align-items: center;
    row-gap: 4px;
  }
  .top:has(.top__articles):has(.langues) .wordmark {
    grid-area: marque;
    margin-right: 0;
  }
  .top:has(.top__articles):has(.langues) .btn--header {
    grid-area: action;
    justify-self: end;
  }
  .top:has(.top__articles):has(.langues) .top__articles {
    grid-area: articles;
    justify-self: start;
    margin-left: -4px;
  }
  .top:has(.top__articles):has(.langues) .langues {
    grid-area: langues;
    justify-self: end;
    margin: 0;
  }
}

/* ---------- La page de lecture ---------- */
.lecture {
  /* Le texte courant : le niveau Texte, un cran au-dessus, tenu entre 17 et 19 px. */
  --lecture-t-texte: clamp(17px, calc(var(--af-t-texte) + 1px), 19px);
  /* La mesure de la prose, et la largeur au-delà de laquelle la page se centre. */
  --lecture-mesure: 68ch;
  --lecture-largeur: 1280px;
  /* La place qu'une fiche posée garde pour son ombre. */
  --lecture-ombre: 6px;
  display: block;
}
.lecture__cadre {
  width: 100%;
  max-width: var(--lecture-largeur);
  margin-inline: auto;
}

/* ---------- L'ouverture : un aplat encre, qui tient dans l'écran ---------- */
.lecture__ouverture { padding-bottom: calc(var(--af-e-section) + var(--af-e-sm)); }
.lecture__fil ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 700 var(--af-t-mini) / var(--af-il-mini) var(--af-police-titre);
  letter-spacing: var(--af-ap-mini);
  text-transform: uppercase;
  color: var(--af-doux);
}
.lecture__fil li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow-wrap: anywhere;
}
.lecture__fil li + li::before {
  content: "/";
  margin: 0 10px;
  color: var(--af-filet);
}
.lecture__fil a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 4px;
}
.lecture__fil [aria-current='page'] { color: var(--af-texte); }
.lecture__ouverture .af-repere { margin-top: var(--af-e-md); }
/* Le lien du pilier, dans le repère : sa cible fait 24 px de haut sans déplacer la ligne. */
.lecture__ouverture .af-repere a {
  display: inline-block;
  padding-block: 5px;
  margin-block: -5px;
}
.lecture__ouverture .af-titre { max-width: 28ch; }
.lecture__ouverture .af-chapeau { --af-chapeau-mesure: 62ch; }
.lecture__edition {
  margin-top: var(--af-e-sm);
  font: 700 var(--af-t-mini) / var(--af-il-mini) var(--af-police-titre);
  letter-spacing: var(--af-ap-mini);
  text-transform: uppercase;
  color: var(--af-doux);
}
/* Le nom de l'auteur, lié à sa page About : sa cible fait 24 px de haut sans déplacer la ligne. */
.lecture__edition a {
  display: inline-block;
  padding-block: 6px;
  margin-block: -6px;
}

/* ---------- Le corps : une colonne de prose sur craie ---------- */
.lecture__corps {
  --af-fond: var(--af-craie);
  --af-texte: var(--af-encre);
  --af-doux: color-mix(in srgb, var(--af-encre) 80%, transparent);
  --af-fort: var(--af-brique);
  --af-repere: var(--af-brique);
  --af-filet: color-mix(in srgb, var(--af-encre) 25%, transparent);
  padding: var(--af-e-lg) var(--af-e-bord) calc(var(--af-e-section) + var(--af-e-lg));
  background: var(--af-fond);
  color: var(--af-texte);
}
.lecture__prose {
  counter-reset: lecture;
  font-size: var(--lecture-t-texte);
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* Une partie : le filet de 6 px, le numéro, le titre au niveau Objet, puis sa prose. */
.lecture__partie {
  padding-top: var(--af-e-sm);
  border-top: 6px solid var(--af-encre);
}
.lecture__partie + .lecture__partie { margin-top: var(--af-e-xl); }
.lecture__entree {
  padding-top: 0;
  border-top: 0;
}
.lecture__partie > h2 {
  counter-increment: lecture;
  max-width: var(--lecture-mesure);
  font: 700 var(--af-t-objet) / var(--af-il-objet) var(--af-police-titre);
  text-transform: uppercase;
  text-wrap: balance;
  scroll-margin-top: calc(var(--af-entete) + var(--af-e-md));
}
.lecture__partie > h2::before {
  content: counter(lecture, decimal-leading-zero);
  display: block;
  margin-bottom: var(--af-e-xs);
  font: 700 var(--af-t-repere) / var(--af-il-repere) var(--af-police-titre);
  letter-spacing: var(--af-ap-repere);
  color: var(--af-repere);
}
/* L'étiquette d'une partie qui n'est pas un titre : le sommaire, la suite. */
.lecture__marge {
  font: 700 var(--af-t-repere) / var(--af-il-repere) var(--af-police-titre);
  letter-spacing: var(--af-ap-repere);
  text-transform: uppercase;
  color: var(--af-repere);
}
.lecture__partie-corps {
  max-width: var(--lecture-mesure);
  margin-top: var(--af-e-md);
}
.lecture__entree > .lecture__partie-corps { margin-top: 0; }
.lecture__partie-corps > * + * { margin-top: var(--af-e-sm); }
/* Écran large : le titre dans la marge, la prose à sa mesure à côté. */
@media (min-width: 1121px) {
  .lecture__partie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--lecture-mesure));
    column-gap: var(--af-e-xl);
    align-items: start;
  }
  .lecture__partie > h2,
  .lecture__partie > .lecture__marge { grid-column: 1; }
  .lecture__partie-corps {
    grid-column: 2;
    max-width: none;
    margin-top: 0;
  }
}

/* ---------- Le sommaire : une fiche, un lien par partie ---------- */
.lecture__sommaire,
.lecture__suite { border-top-width: 2px; }
.lecture__sommaire-liste {
  width: calc(100% - var(--lecture-ombre));
  padding: var(--af-e-xs) var(--af-e-md);
  list-style: none;
  background: var(--af-blanc-papier);
  border: 2px solid var(--af-encre);
  border-radius: var(--af-r-carte);
  box-shadow: var(--af-o-portee);
}
.lecture__sommaire-liste > li + li {
  margin-top: 0;
  border-top: 1px solid var(--af-filet);
}
.lecture__sommaire-liste a {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  column-gap: 8px;
  align-items: baseline;
  padding: 9px 0;
  font: 700 var(--af-t-repere) / 1.3 var(--af-police-titre);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: color-mix(in srgb, var(--af-encre) 80%, transparent);
}
.lecture__sommaire-liste a span {
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--af-encre) 45%, transparent);
}
.lecture__sommaire-liste a:hover { color: var(--af-brique); }

/* ---------- La prose ---------- */
.lecture__prose h3 {
  margin-top: var(--af-e-md);
  font: 700 var(--af-t-chapeau) / var(--af-il-repere) var(--af-police-titre);
  text-transform: uppercase;
  scroll-margin-top: calc(var(--af-entete) + var(--af-e-md));
}
.lecture__prose :is(h4, h5, h6) {
  margin-top: var(--af-e-md);
  font: 700 var(--lecture-t-texte) / 1.3 var(--af-police-titre);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lecture__prose strong { font-weight: 700; }
/* Les listes de la prose (sans classe) : les listes du gabarit gardent leur dessin. */
.lecture__prose ul:not([class]) { list-style: disc; }
.lecture__prose ol:not([class]) { list-style: decimal; }
.lecture__prose :is(ul, ol):not([class]) { padding-left: 1.3em; }
.lecture__prose :is(ul, ol):not([class]) > li + li,
.lecture__prose :is(ul, ol):not([class]) > li > * + * { margin-top: var(--af-e-xs); }
.lecture__prose :is(ul, ol):not([class]) > li::marker {
  font-family: var(--af-police-titre);
  font-weight: 700;
  color: var(--af-fort);
}
/* La citation : une phrase tenue par un filet, en texte courant. */
.lecture__prose blockquote {
  max-width: 62ch;
  padding: var(--af-e-xs) 0 var(--af-e-xs) var(--af-e-sm);
  border-left: 6px solid var(--af-fort);
  font-size: var(--af-t-chapeau);
  line-height: var(--af-il-chapeau);
}
.lecture__prose blockquote > * + * { margin-top: var(--af-e-xs); }
/* Le code : en ligne sur un papier, en bloc sur encre. */
.lecture__prose code {
  padding: .1em .35em;
  border-radius: var(--af-r-papier);
  background: color-mix(in srgb, var(--af-encre) 9%, transparent);
  font-size: .92em;
}
.lecture__prose pre {
  max-width: calc(100% - var(--lecture-ombre));
  max-height: 70svh;
  overflow: auto;
  padding: var(--af-e-sm) var(--af-e-md);
  border-radius: var(--af-r-carte);
  background: var(--af-encre-profonde);
  color: var(--af-craie);
  box-shadow: var(--af-o-portee-brique);
  font-size: .92em;
  line-height: 1.5;
  tab-size: 2;
}
.lecture__prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}
.lecture__prose pre:focus-visible {
  outline: 3px solid var(--af-fort);
  outline-offset: 3px;
}
.lecture__prose hr {
  margin-block: var(--af-e-md);
  border: 0;
  border-top: 2px dotted var(--af-filet);
}
.lecture__prose a[href^="http"] { overflow-wrap: anywhere; }
/* Un lien dans la prose : sa cible atteint 24 px de haut ; sur un élément en ligne, ce retrait
   vertical ne déplace rien. */
.lecture__prose :is(p, td, th, blockquote, figcaption) a,
.lecture__prose :is(ul, ol):not([class]) li a { padding-block: 4px; }
/* Le tableau : une fiche ; sur téléphone, il défile dans son cadre. */
.lecture__tableau {
  max-width: calc(100% - var(--lecture-ombre));
  margin-bottom: var(--lecture-ombre);
  overflow-x: auto;
  background: var(--af-blanc-papier);
  border: 2px solid var(--af-encre);
  border-radius: var(--af-r-carte);
  box-shadow: var(--af-o-portee);
}
.lecture__tableau table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: .95em;
  line-height: 1.45;
}
.lecture__tableau :is(th, td) {
  padding: var(--af-e-xs) var(--af-e-sm);
  vertical-align: top;
}
.lecture__tableau thead th {
  padding-block: var(--af-e-sm);
  border-bottom: 2px solid var(--af-encre);
  font: 700 var(--af-t-mini) / var(--af-il-repere) var(--af-police-titre);
  letter-spacing: var(--af-ap-mini);
  text-transform: uppercase;
  vertical-align: bottom;
  color: var(--af-repere);
}
.lecture__tableau tbody tr + tr > * { border-top: 1px solid var(--af-filet); }
.lecture__tableau [data-align='center'] { text-align: center; }
.lecture__tableau [data-align='right'] { text-align: right; }
/* L'image : posée, avec son ombre dure ; sa légende en mention. */
.lecture__prose img {
  display: block;
  max-width: 100%;
  height: auto;
}
.lecture__prose figure {
  max-width: calc(100% - var(--lecture-ombre));
  margin-bottom: var(--lecture-ombre);
}
.lecture__prose figure img {
  width: 100%;
  border-radius: var(--af-r-papier);
  box-shadow: var(--af-o-portee);
}
.lecture__prose figcaption {
  margin-top: var(--af-e-xs);
  font: 700 var(--af-t-mini) / var(--af-il-texte) var(--af-police-titre);
  letter-spacing: var(--af-ap-mini);
  text-transform: uppercase;
  color: var(--af-doux);
}

/* ---------- La suite : les autres articles du pilier ---------- */
.lecture__suite-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lecture__suite-liste li {
  display: grid;
  gap: 2px;
  padding: var(--af-e-sm) 0;
  border-bottom: 1px solid var(--af-filet);
}
.lecture__suite-liste li:first-child { padding-top: 0; }
.lecture__suite-liste a {
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;
  font: 700 var(--af-t-chapeau) / var(--af-il-repere) var(--af-police-titre);
  text-transform: uppercase;
  text-decoration: none;
}
.lecture__suite-liste a:hover { color: var(--af-brique); }
.lecture__suite-meta {
  font: 700 var(--af-t-mini) / var(--af-il-mini) var(--af-police-titre);
  letter-spacing: var(--af-ap-mini);
  text-transform: uppercase;
  color: var(--af-doux);
}
.lecture__suite .af-bouton { margin-top: var(--af-e-md); }

/* ---------- L'index : un pilier par partie, une fiche par article ---------- */
.lecture__pilier + .lecture__pilier { margin-top: var(--af-e-xl); }
.lecture__pilier-titre {
  padding-top: var(--af-e-sm);
  border-top: 6px solid var(--af-encre);
  font: 700 var(--af-t-objet) / var(--af-il-objet) var(--af-police-titre);
  text-transform: uppercase;
  scroll-margin-top: calc(var(--af-entete) + var(--af-e-md));
}
.lecture__fiches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--af-e-md);
  margin: var(--af-e-md) 0 0;
  padding: 0 var(--lecture-ombre) var(--lecture-ombre) 0;
  list-style: none;
}
.lecture__fiche {
  display: flex;
  flex-direction: column;
  gap: var(--af-e-xs);
  min-width: 0;
  padding: var(--af-e-md);
  background: var(--af-blanc-papier);
  color: var(--af-encre);
  border: 2px solid var(--af-encre);
  border-radius: var(--af-r-carte);
  box-shadow: var(--af-o-portee);
  transition: transform .25s var(--af-m-ressort), box-shadow .25s var(--af-m-ressort);
}
.lecture__fiche:is(:hover, :focus-within) {
  transform: translateY(-2px) rotate(-.5deg);
  box-shadow: var(--af-o-portee-brique);
}
.lecture__fiche-meta {
  font: 700 var(--af-t-repere) / var(--af-il-repere) var(--af-police-titre);
  letter-spacing: var(--af-ap-repere);
  text-transform: uppercase;
  color: var(--af-repere);
}
.lecture__fiche-titre {
  font: 700 var(--af-t-objet) / var(--af-il-objet) var(--af-police-titre);
  text-transform: uppercase;
  text-wrap: balance;
}
.lecture__fiche-titre a {
  display: inline-block;
  text-decoration: none;
}
.lecture__fiche-titre a:hover { color: var(--af-brique); }
.lecture__fiche-texte {
  margin-top: auto;
  color: var(--af-doux);
}

/* ---------- La bande brique qui clôt : la feuille de la liste d'attente ---------- */
.lecture__appel {
  padding-top: calc(var(--af-e-section) + var(--af-e-sm));
  padding-bottom: calc(var(--af-e-section) + var(--af-e-sm));
}
.lecture__appel .page-texte { --af-chapeau-mesure: 54ch; }
.lecture__appel .page-objet {
  padding-right: var(--lecture-ombre);
  padding-bottom: var(--lecture-ombre);
}

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 899px) {
  .lecture__ouverture .af-titre { max-width: none; }
  .lecture__corps { padding-top: var(--af-e-md); }
  .lecture__partie + .lecture__partie { margin-top: var(--af-e-lg); }
  .lecture__tableau :is(th, td) { min-width: 9rem; }
  .lecture__appel .page-objet { padding-right: 0; }
}

/* ---------- Mouvement réduit : les fiches restent posées ---------- */
@media (prefers-reduced-motion: reduce) {
  .lecture__fiche { transition: none; }
  .lecture__fiche:is(:hover, :focus-within) { transform: none; }
}