/* 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;
}

/* =========================================================
   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;
  }
}