/* Éditorial Brut, version de travail TEST. Chargée après les styles fonctionnels. */
@font-face {
  font-family: "Archivo Black";
  src: url("../fonts/archivo-black-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body.charte-test {
  --bg: #f2efe8;
  --bg-2: #e9e6df;
  --surface: #fff;
  --line: rgba(10, 10, 10, .18);
  --line-strong: rgba(10, 10, 10, .38);
  --ink: #0a0a0a;
  --ink-2: #363636;
  --ink-3: #575757;
  --dark: #0a0a0a;
  --dark-2: #262626;
  --dark-ink: #f2efe8;
  --dark-ink-2: #dedbd4;
  --accent: #262626;
  --accent-light: #444;
  --accent-soft: rgba(10, 10, 10, .07);
  --font-display: "Archivo Black", Impact, "Arial Black", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius: 2px;
  --radius-sm: 2px;
  --shadow-soft: none;
  background: var(--bg);
  color: var(--ink);
}

/* Une marque reconnaissable ; les longues consignes gardent la police de lecture. */
.charte-test h1,
.charte-test .brand .name {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.055em;
}
.charte-test h1 { line-height: 1.08; max-width: 24ch; }
.charte-test h2,
.charte-test h3 { font-family: var(--font-body); font-weight: 700; letter-spacing: -.025em; }
.charte-test .site-header {
  background: #f2efe8;
  border-bottom: 2px solid #0a0a0a;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.charte-test .brand .name { font-size: 1.18rem; }
.charte-test .section-head {
  padding-bottom: clamp(22px, 3vw, 42px);
  margin-bottom: clamp(22px, 3vw, 42px);
  border-bottom: 2px solid #0a0a0a;
}
.charte-test .section-head .eyebrow {
  display: block;
  margin-bottom: 1.1rem;
  color: #363636;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.charte-test .section-head h1 {
  max-width: 38ch;
  font-size: clamp(1.85rem, 3.2vw, 3rem);
  line-height: 1.13;
  text-transform: none;
  overflow-wrap: anywhere;
}
.charte-test .nav a { border-radius: 0; }
.charte-test .nav a[aria-current="page"] { color: #0a0a0a; }
.charte-test .nav a:hover,
.charte-test .nav a:focus-visible { background: #e9e6df; }

/* Seule la décision principale reçoit l'orange. */
.charte-test .btn { border-radius: 2px; box-shadow: none; }
.charte-test .btn-primary {
  background: #f2551c;
  border-color: #0a0a0a;
  color: #0a0a0a;
  font-weight: 700;
}
.charte-test .btn-primary:hover { background: #0a0a0a; color: #f2efe8; }
.charte-test .amx-cahier-raccourci { background: #0a0a0a; color: #f2efe8; box-shadow: none; }
.charte-test .btn-secondary,
.charte-test .btn-messages { border-radius: 2px; background: transparent; color: #0a0a0a; }
.charte-test .btn-messages:hover { background: #e9e6df; }
.charte-test .btn:focus-visible,
.charte-test a:focus-visible,
.charte-test input:focus-visible,
.charte-test textarea:focus-visible,
.charte-test select:focus-visible,
.charte-test summary:focus-visible { outline: 3px solid #f2551c; outline-offset: 2px; }

.charte-test :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  border-radius: 2px;
  max-width: 100%;
}
.charte-test :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):not([type="submit"]) {
  background-color: #fff;
  color: #0a0a0a;
}
.charte-test :is(.admin-block, .access-card, .progress-card, .semaine-card, .amx-cahier, .amx-cahier-menu) {
  border-radius: 2px;
  box-shadow: none;
}
.charte-test .admin-block,
.charte-test .amx-cahier { background: #fff; }
.charte-test .amx-prochaine-action {
  border: 2px solid #0a0a0a;
  padding: clamp(22px, 3vw, 42px);
}
.charte-test .amx-prochaine-action .eyebrow { color: #363636; font-weight: 800; }
.charte-test .amx-prochaine-action h2 { max-width: 32ch; font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.charte-test .amx-parcours {
  gap: 0;
  border-top: 2px solid #0a0a0a;
}
.charte-test .amx-pas {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding-block: 1rem;
}
.charte-test .amx-pas-num {
  width: 2rem;
  height: 2rem;
  border-radius: 2px;
  border-color: #0a0a0a;
  color: #0a0a0a;
  font-weight: 800;
}
.charte-test .amx-pas-faite .amx-pas-num { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.charte-test .amx-pas-ouverte {
  border: 1px solid #0a0a0a;
  border-left: 5px solid #0a0a0a;
  background: #fff;
  margin-block: .4rem;
  padding-inline: 1rem;
}
.charte-test .amx-pas-ouverte .amx-pas-num { background: #0a0a0a; color: #fff; }
.charte-test .amx-pas-titre { line-height: 1.45; }
.charte-test .amx-action-contenu .admin-block { border: 1px solid var(--line); background: #fff; }
.charte-test .amx-action-pourquoi {
  background: #e9e6df !important;
  border-left: 5px solid #0a0a0a !important;
}
.charte-test .amx-action-contenu h2 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.22; }
.charte-test .amx-action-etapes li { border-radius: 2px; background: #fff; }
.charte-test .amx-action-etapes li::before { border-radius: 2px; }
.charte-test .amx-cahier-navigation a,
.charte-test .amx-cahier-menu { border-radius: 2px; }
.charte-test .amx-action-side .admin-block,
.charte-test .amx-parcours-side .admin-block {
  background: #fff;
  border: 1px solid #0a0a0a;
}
.charte-test .amx-cahier-form textarea { min-height: 10rem; line-height: 1.65; }
.charte-test .amx-cahier-menu summary { background: #e9e6df; }
.charte-test .amx-cahier-menu a[aria-current="page"] { background: #0a0a0a; color: #fff; }
.charte-test .amx-outils-action a {
  border-radius: 2px;
  background: transparent;
  border-color: #0a0a0a;
  font-weight: 600;
}
.charte-test .amx-outils-action a:hover { background: #0a0a0a; color: #fff; }
.charte-test .portal-footer { border-top: 2px solid #0a0a0a; }

/* Les tableaux d'administration restent denses ; on souligne leur hiérarchie. */
.charte-test .admin-table th { background: #0a0a0a; color: #f2efe8; }
.charte-test .admin-table tr:hover td { background: #f5f3ee; }
.charte-test .table-wrap { border-radius: 2px; }

@media (max-width: 640px) {
  .charte-test h1 { font-size: clamp(2rem, 9vw, 2.8rem); overflow-wrap: anywhere; }
  .charte-test .brand .name { font-size: 1rem; }
  .charte-test .btn { white-space: normal; line-height: 1.25; }
}

@media (prefers-reduced-motion: reduce) {
  .charte-test *, .charte-test *::before, .charte-test *::after { scroll-behavior: auto !important; }
}

/* Éditorial Brut : version affirmée. Aucun contenu ni geste métier n'est modifié. */
.charte-test {
  --bg: #f2efe8;
  --bg-2: #e5e1d8;
  --surface: #f2efe8;
  --line: rgba(10,10,10,.26);
  --line-strong: #0a0a0a;
  --ink: #0a0a0a;
  --ink-2: #303030;
  --ink-3: #545454;
  --dark: #0a0a0a;
  --dark-2: #252525;
  --dark-ink: #f2efe8;
  --accent: #0a0a0a;
  --radius: 0;
  --radius-sm: 0;
  --shadow-soft: none;
  background-color: #f2efe8;
  background-image:
    linear-gradient(rgba(10,10,10,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.045) 1px, transparent 1px),
    linear-gradient(rgba(10,10,10,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.022) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

/* En-tête conçu comme une manchette de magazine, mais navigation complète. */
.charte-test .site-header {
  background: #0a0a0a;
  border-bottom: 2px solid #0a0a0a;
  color: #f2efe8;
}
.charte-test main { position: relative; }
.charte-test .site-header .header-inner { min-height: 88px; }
.charte-test .site-header .brand { color: #f2efe8; }
.charte-test .site-header .brand .name {
  color: #f2efe8;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  line-height: 1;
  text-transform: uppercase;
}
.charte-test .site-header .brand .desc { color: #c9c6bd; }
.charte-test .site-header .nav { gap: 0; }
.charte-test .site-header .nav a {
  padding: 13px 12px;
  border: 0;
  border-radius: 0;
  color: #f2efe8;
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.charte-test .site-header .nav a:hover,
.charte-test .site-header .nav a:focus-visible { background: #262626; color: #fff; }
.charte-test .site-header .nav a[aria-current="page"] {
  background: #f2efe8;
  color: #0a0a0a;
}
.charte-test .site-header .nav a::after { display: none; }
.charte-test .site-header .header-actions { gap: 10px; }
.charte-test .site-header .header-actions .inline-form .btn {
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: #bdbab3;
  font-size: .72rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .25em;
}
.charte-test .site-header .header-actions .inline-form .btn:hover { color: #fff; }
.charte-test .site-header .btn-messages,
.charte-test .site-header .header-msg { color: #f2efe8; border-color: #f2efe8; }
.charte-test .site-header .btn-messages:hover,
.charte-test .site-header .header-msg:hover { background: #f2efe8; color: #0a0a0a; }

/* Les titres font le travail visuel ; les paragraphes restent très lisibles. */
.charte-test .container { max-width: 1480px; }
.charte-test main.container.section { padding-block: clamp(38px, 5vw, 82px); }
.charte-test .section-head {
  padding: 0 0 clamp(28px, 4vw, 58px);
  margin: 0 0 clamp(24px, 4vw, 54px);
  border-bottom: 2px solid #0a0a0a;
}
.charte-test .section-head .eyebrow {
  display: block;
  margin-bottom: 20px;
  color: #0a0a0a;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.charte-test .section-head h1,
.charte-test .parcours-head h1 {
  max-width: none;
  margin-bottom: clamp(20px, 2.6vw, 38px);
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(2.7rem, 4.6vw, 5.5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.075em;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.charte-test .section-head p { max-width: 78ch; line-height: 1.62; }
.charte-test .section-head p.small { max-width: 90ch; }
.charte-test :is(.section, .admin-block, .tb-offres, .tb-autres) h2 {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(1.55rem, 2.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.charte-test :is(.section, .admin-block, .tb-offres, .tb-autres) h3 {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.45vw, 1.45rem);
  font-weight: 800;
  line-height: 1.2;
}

/* Pleins filets, blocs nets et contraste fort ; l'information reste à sa place. */
.charte-test :is(.admin-block, .tb-action, .tb-offre, .rdv-prochain,
  .progress-card, .semaine-card, .suivi-row, .rdv-admin,
  .amx-carte, .amx-cahier, .access-card) {
  border: 2px solid #0a0a0a;
  border-radius: 0;
  box-shadow: none;
  background: #f2efe8;
}
.charte-test .admin-block { padding: clamp(20px, 2.4vw, 38px); }
.charte-test .admin-block + .admin-block { margin-top: 22px; }
.charte-test .suivi-list { border-top: 3px solid #0a0a0a; }
.charte-test .suivi-row { margin: 0; border-top: 0; }
.charte-test .suivi-row + .suivi-row { border-top: 0; }
.charte-test .suivi-nom { color: #0a0a0a; font-weight: 800; }
.charte-test .suivi-row:hover { background: #e5e1d8; }
.charte-test .tb-action {
  background: #0a0a0a;
  color: #f2efe8;
  padding: clamp(24px, 3.3vw, 54px);
}
.charte-test .tb-action :is(h2, p, .text) { color: #f2efe8; }
.charte-test .tb-action h2 { max-width: 25ch; font-size: clamp(1.8rem, 3vw, 3.5rem); }
.charte-test .tb-offres,
.charte-test .tb-autres { border-top: 3px solid #0a0a0a; padding-top: clamp(24px, 3vw, 44px); }
.charte-test .tb-liste { gap: 0; }
.charte-test .tb-offre { margin: 0; border-top: 0; }
.charte-test .tb-offre:hover { background: #e5e1d8; }
.charte-test .rdv-prochain { display: flex; gap: 24px; align-items: center; }
.charte-test .rdv-prochain-actions { margin-left: auto; }
.charte-test .rdv-prochain-vide { background: #e5e1d8; }
.charte-test .semaines-grid { gap: 0; }
.charte-test .semaine-card { margin: 0; border-width: 1px; }
.charte-test .semaine-card:is(.semaine-en-cours, .semaine-ouverte) { border-width: 3px; background: #fff; }
.charte-test .semaine-num,
.charte-test .semaine-badge,
.charte-test .amx-pas-etat {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* L'orange n'est utilisé que pour l'action décisive. */
.charte-test .btn-primary {
  min-height: 50px;
  padding: 14px 22px;
  border: 2px solid #0a0a0a;
  border-radius: 0;
  background: #f2551c;
  color: #0a0a0a;
  font-weight: 900;
}
.charte-test .btn-primary:hover { background: #0a0a0a; color: #f2efe8; }
.charte-test .btn-secondary { border: 2px solid #0a0a0a; border-radius: 0; color: #0a0a0a; }
.charte-test .btn-secondary:hover { background: #0a0a0a; color: #f2efe8; }
.charte-test .btn-messages { border-radius: 0; }

/* Le parcours guide vers l'action ouverte ; les actions finies restent faciles à relire. */
.charte-test .amx-parcours { border-top: 2px solid #0a0a0a; }
.charte-test .amx-pas {
  min-height: 0;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 11px 8px;
  border: 0;
  border-bottom: 1px solid #0a0a0a;
  border-radius: 0;
  background: transparent;
}
.charte-test .amx-pas-num {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid #0a0a0a;
  border-radius: 0;
  background: transparent;
  color: #0a0a0a;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 1.05rem;
  line-height: 1;
}
.charte-test .amx-pas-ouverte {
  margin-block: 5px;
  padding: 15px 13px;
  border: 2px solid #0a0a0a;
  background: #0a0a0a;
  color: #f2efe8;
}
.charte-test .amx-pas-ouverte :is(.amx-pas-num, .amx-pas-titre, .amx-pas-etat, .amx-pas-phase) { color: #f2efe8; }
.charte-test .amx-pas-ouverte .amx-pas-num { border-color: #f2efe8; background: transparent; }
.charte-test .amx-pas-ouverte .amx-pas-note { color: #dedbd4; }
.charte-test .amx-pas-faite { background: transparent; }
.charte-test .amx-pas-faite .amx-pas-num { border-color: #0a0a0a; background: transparent; color: #0a0a0a; }
.charte-test .amx-pas-faite .amx-pas-titre { color: #343434; font-weight: 600; }
.charte-test .amx-pas-faite .amx-pas-etat { color: #555; }
.charte-test .amx-pas-verrouille { opacity: .72; }
.charte-test .amx-pas-titre { font-size: .96rem; font-weight: 700; line-height: 1.33; }
.charte-test .amx-pas-note { font-size: .8rem; line-height: 1.35; }
.charte-test .amx-pas-etat { font-size: .66rem; letter-spacing: .06em; white-space: nowrap; }
.charte-test .amx-pas-intro { border: 2px solid #0a0a0a; border-radius: 0; background: #e5e1d8; }
.charte-test .amx-cahier-menu,
.charte-test .amx-cahier-navigation a { border-radius: 0; }
.charte-test .amx-parcours-side .admin-block,
.charte-test .amx-action-side .admin-block { padding: 20px; border: 2px solid #0a0a0a; background: #f2efe8; }
.charte-test .amx-parcours-side h2,
.charte-test .amx-action-side h2 { font-size: clamp(1.35rem, 1.7vw, 1.9rem); line-height: 1.1; }
.charte-test .progress-card { padding: clamp(20px, 3vw, 42px); }
.charte-test .progress-num { font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(3rem, 5vw, 6rem); line-height: 1; }
.charte-test .reperes { border-radius: 0; }
.charte-test .repere { border-radius: 0; }
.charte-test .actions-barre { display: none; }

.charte-test .portal-footer { margin-top: 0; background: #0a0a0a; color: #d8d4cc; border-top: 3px solid #0a0a0a; }
.charte-test .portal-footer { position: relative; z-index: 1; }

/* Vue d'ensemble : chiffres posés sur une ligne de structure, sans cartes SaaS. */
.charte-test .amx-chiffres {
  gap: 0;
  margin: 0 0 clamp(32px, 4vw, 60px);
  border-top: 2px solid #0a0a0a;
  border-bottom: 2px solid #0a0a0a;
}
.charte-test .amx-chiffre {
  min-height: 160px;
  padding: clamp(18px, 2vw, 32px);
  border: 0;
  border-right: 1px solid #0a0a0a;
  border-radius: 0;
  background: transparent;
}
.charte-test .amx-chiffre:last-child { border-right: 0; }
.charte-test .amx-chiffre dt { color: #0a0a0a; font-size: .7rem; font-weight: 900; letter-spacing: .11em; }
.charte-test .amx-chiffre dd {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(2.2rem, 3vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1.06;
}
.charte-test .amx-chiffre .amx-precision { max-width: 30ch; }
.charte-test .amx-attention { gap: 0; border-top: 2px solid #0a0a0a; }
.charte-test .amx-todo,
.charte-test .amx-calme {
  padding: 20px 22px;
  border: 0;
  border-bottom: 1px solid #0a0a0a;
  border-radius: 0;
  background: transparent;
}
.charte-test .amx-todo strong { font-size: 1.1rem; }
.charte-test .amx-vide { border: 1px solid #0a0a0a; border-radius: 0; background: transparent; }
.charte-test .amx-filtres a { border-radius: 0; }
.charte-test .portal-footer a { color: #f2efe8; }

@media (max-width: 1199px) {
  .charte-test .site-header .header-inner { padding-block: 10px; }
  .charte-test .site-header .nav { border-top: 1px solid #555; padding-top: 8px; }
}
@media (max-width: 700px) {
  .charte-test main.container.section { padding-block: 28px 50px; }
  .charte-test .section-head h1,
  .charte-test .parcours-head h1 { font-size: clamp(1.35rem, 6.2vw, 3rem); overflow-wrap: normal; }
  .charte-test .rdv-prochain { display: block; }
  .charte-test .amx-pas { gap: 9px; padding-inline: 4px; }
  .charte-test .amx-pas-ouverte { padding-inline: 10px; }
  .charte-test .amx-pas-num { flex-basis: 27px; width: 27px; height: 27px; font-size: .94rem; }
  .charte-test .amx-pas-etat { white-space: normal; }
  .charte-test .amx-chiffre { min-height: 0; border-right: 0; border-bottom: 1px solid #0a0a0a; }
  .charte-test .amx-chiffre:last-child { border-bottom: 0; }
}