/* =========================================================
   Variante « Encre et mouvement » — Le Souffle du Tao
   Thème sombre inspiré du lavis à l'encre : fond profond,
   accents jade et or, animations lentes et respirées.
   ========================================================= */

@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Pinceau";
  src: url("../fonts/yuji-boku-subset.woff2") format("woff2");
  font-display: block;
}

:root {
  /* Couleurs du site de production */
  --encre: #ecefe4;          /* fond de page (papier céladon) */
  --encre-2: #e4e8da;        /* fond du pied de page */
  --surface: #f7f8f2;        /* cartes */
  --surface-haute: #fdfdf9;
  --trait: #cfd4c2;          /* filets */
  --texte: #2a221e;          /* encre */
  --sourd: #5e5a52;          /* texte secondaire */
  --jade: #4e5e17;           /* vert bambou */
  --jade-sombre: #97a56a;
  --or: #a8281c;             /* cinabre (accents) */
  --cinabre: #a8281c;
  --laque: #3b1d12;          /* brun laqué */
  --pousse: #ceea70;         /* vert clair, sur fond sombre */

  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --serif: "Alegreya", Georgia, serif;
  --pinceau: "Pinceau", serif;

  --mesure: 38rem;
  --largeur: 74rem;
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --rythme: 7s;               /* durée d'un cycle respiratoire */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__photo, .yinyang { animation: none !important; }
  .yinyang-piste { transition: none; }
}

body {
  margin: 0;
  background: var(--encre);
  color: var(--texte);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--jade); text-underline-offset: 0.2em; }
a:hover { color: var(--cinabre); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--sans); font-weight: 600; line-height: 1.15; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 2.8rem 0 0.8rem; letter-spacing: -0.015em; color: var(--jade); }
h3 { font-size: 1.15rem; margin: 1.8rem 0 0.4rem; color: var(--texte); letter-spacing: 0.01em; }
p, ul, ol, table, figure, blockquote { margin: 0 0 1.1em; }
strong { color: var(--laque); }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.lien-evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  background: var(--jade); color: #fff;
  font: 700 0.95rem var(--sans); padding: 0.6rem 1rem; border-radius: 999px;
}
.lien-evitement:focus { top: 1rem; }

/* ---------- En-tête translucide ---------- */
.bandeau {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--encre) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}
.bandeau__interieur {
  max-width: var(--largeur); margin: 0 auto;
  padding: 0.7rem var(--gouttiere);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.marque { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--texte); margin-right: auto; }
.marque img { width: 2.75rem; height: 2.75rem; }
.marque__nom { display: block; font: 700 1.15rem var(--sans); letter-spacing: -0.01em; }
.marque__lieu { display: block; font: 500 0.78rem var(--sans); color: var(--jade); letter-spacing: 0.08em; text-transform: uppercase; }

.bouton-menu {
  display: none; font: 700 0.95rem var(--sans);
  color: var(--encre); background: var(--jade); border: 0; border-radius: 999px;
  padding: 0.5rem 1rem; cursor: pointer;
}
.navigation ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1rem 1.15rem;
}
.navigation a {
  display: inline-block; padding: 0.4rem 0;
  font: 500 0.92rem var(--sans); color: var(--sourd); text-decoration: none;
  position: relative;
}
.navigation a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0.15rem;
  height: 1px; background: var(--jade); transition: right 0.35s ease;
}
.navigation a:hover { color: var(--laque); }
.navigation a:hover::after, .navigation a[aria-current="page"]::after { right: 0; }
.navigation a[aria-current="page"] { color: var(--texte); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(13rem, 30vh, 20rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--trait);
}
.hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.75) contrast(1.05) brightness(0.72);
  z-index: -2;
  animation: derive 28s ease-in-out infinite alternate;
  backface-visibility: hidden;
}
/* Sur tablette et mobile, pas de zoom : le lent zoom d'une image
   filtrée, redécoupée en tuiles par le processeur graphique, laissait
   apparaître de fins traits de raccord dès qu'un autre élément animé
   la recouvrait. On remplace le zoom par un lent panoramique. */
@media (max-width: 62rem) {
  .hero__photo { animation: derive-douce 30s ease-in-out infinite alternate; will-change: transform; }
}
/* Un panoramique à échelle constante : l'image n'est jamais redessinée pendant
   le mouvement, donc pas de raccords de tuiles, contrairement au zoom. */
@keyframes derive-douce {
  from { transform: scale(1.1) translate3d(0, 0, 0); }
  to   { transform: scale(1.1) translate3d(-2.4%, -1.6%, 0); }
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(28 20 14 / 0.45) 0%, transparent 40%),
    linear-gradient(0deg, rgb(28 20 14 / 0.82) 0%, rgb(28 20 14 / 0.38) 45%, transparent 78%);
}
@keyframes derive { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }

.hero__interieur {
  max-width: var(--largeur); width: 100%; margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gouttiere) clamp(1.4rem, 3vw, 2.2rem);
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end;
}
.hero__oeil { font: 500 0.75rem var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: #fff; margin: 0 0 0.6rem; }
.hero h1 {
  margin: 0;
  color: var(--pousse);
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  font-weight: 300; letter-spacing: -0.03em;
}
.hero__devise { margin: 0.5rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.2em; color: rgb(255 255 255 / 0.88); max-width: 28ch; }

/* Emblème du club, sur le bandeau de l'accueil */
.hero__interieur--embleme { grid-template-columns: auto 1fr auto; }
.hero__embleme {
  width: clamp(6.7rem, 3.9rem + 7.8vw, 10.9rem); height: auto;
  align-self: center; justify-self: center;
  filter: drop-shadow(0 0.3rem 1rem rgb(0 0 0 / 0.45));
}

.sceau {
  margin: 0;
  writing-mode: vertical-rl; inline-size: max-content; white-space: nowrap;
  font-family: var(--pinceau); font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.5rem);
  letter-spacing: 0.08em; color: #fff; opacity: 0.95;
  align-self: end; transform: translateY(0.35rem);
  text-shadow: 0 0.15rem 0.9rem rgb(0 0 0 / 0.65);
}
.sceau span { display: inline-block; }

/* Les idéogrammes apparaissent l'un après l'autre, comme une encre qui se pose */
@media (prefers-reduced-motion: no-preference) {
  .sceau span { animation: encre 900ms ease-out both; }
  .sceau span:nth-child(2) { animation-delay: 350ms; }
  .sceau span:nth-child(3) { animation-delay: 700ms; }
  @keyframes encre {
    from { opacity: 0; filter: blur(6px); }
    to   { opacity: 1; filter: blur(0); }
  }
}

/* yin-yang : le conteneur dérive dans le bandeau, le dessin tourne lentement */
.yinyang-piste {
  position: absolute; top: 0; left: 0; z-index: -1;
  transform: translate3d(60%, -30%, 0);
  transition: transform 9s cubic-bezier(0.37, 0, 0.63, 1);
}
.yinyang { display: block; width: 19rem; opacity: 0.16; color: #fff; animation: tourner 40s linear infinite; }
@keyframes tourner { to { transform: rotate(360deg); } }

/* ---------- Corps ---------- */
.corps {
  max-width: var(--largeur); margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gouttiere) 5rem;
  display: grid; grid-template-columns: minmax(0, var(--mesure)) minmax(15rem, 21rem);
  justify-content: space-between; gap: 3.5rem;
}
.corps--large { grid-template-columns: minmax(0, 1fr); }
.corps--large .texte { max-width: none; }
.texte > :first-child { margin-top: 0; }
.texte h2 { position: relative; padding-top: 1.6rem; }
.texte h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 2px;
  background: linear-gradient(90deg, var(--jade), transparent);
}

.illustration { float: right; margin: 0.4rem 0 1.2rem 1.75rem; max-width: 45%; }
.illustration img { border-radius: 6px; box-shadow: 0 0.8rem 1.6rem -1rem rgb(42 34 30 / 0.45); }
.illustration figcaption { font: 500 0.82rem var(--sans); color: var(--sourd); margin-top: 0.5rem; }
.illustration--gauche { float: left; margin: 0.4rem 1.75rem 1.2rem 0; }

.exergue {
  margin: 2.2rem 0; padding: 0.4rem 0 0.4rem 1.4rem;
  border-left: 2px solid var(--or);
  font-size: 1.25em; line-height: 1.45; color: var(--jade); font-style: italic;
}
.exergue p { margin: 0; }
.suite { clear: both; margin-top: 2rem; font: 700 0.95rem var(--sans); }
.suite a { text-decoration: none; }
.suite a::after { content: " →"; }

.encadre, .carte-laterale, .rouleau, form fieldset {
  background: linear-gradient(180deg, var(--surface-haute), var(--surface));
  border: 1px solid var(--trait); border-radius: 10px;
}
.encadre { clear: both; padding: 1.4rem 1.6rem; margin: 2.2rem 0; }
.encadre > :first-child { margin-top: 0; }
.encadre > :last-child { margin-bottom: 0; }
.encadre h2 { font-size: 1.25em; padding-top: 0; }
.encadre h2::before { display: none; }
.note { font: 500 0.92rem var(--sans); color: var(--sourd); }

/* Tableaux */
.tableau { overflow-x: auto; margin-bottom: 1.5rem; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
caption { text-align: left; font: 700 0.95rem var(--sans); padding-bottom: 0.5rem; }
th, td { text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--trait); }
thead th { font: 600 0.8rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte); }
tbody th { font-weight: 600; color: var(--jade); }
tbody tr:hover td, tbody tr:hover th { background: color-mix(in srgb, var(--jade) 7%, transparent); }

.fiche { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.75rem; margin-bottom: 1.5rem; }
.fiche dt { font: 600 0.95rem var(--sans); color: var(--texte); }
.fiche dd { margin: 0; }

.ideogramme { font-family: var(--pinceau); font-size: 3rem; line-height: 1; color: var(--or); }

/* Niveaux en jalons */
.niveaux { list-style: none; padding: 0 0 0 2.5rem; counter-reset: niveau; position: relative; }
.niveaux::before { content: ""; position: absolute; left: 0.85rem; top: 0.6rem; bottom: 0.6rem; width: 1px; background: linear-gradient(var(--jade), transparent); }
.niveaux > li { counter-increment: niveau; position: relative; margin-top: 1.8rem; }
.niveaux > li::before {
  content: counter(niveau); position: absolute; left: -2.5rem; top: 0.1rem;
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--jade); color: var(--jade);
  border-radius: 50%; font: 700 0.85rem var(--sans);
}
.niveaux h3 { margin-top: 0; }

/* ---------- Colonne latérale ---------- */
.lateral { display: flex; flex-direction: column; gap: 1.5rem; }
.rouleau { margin: 0; padding: 1.5rem; }
.rouleau blockquote { margin: 0; font-style: italic; font-size: 1.08em; color: var(--jade); }
.rouleau blockquote p { margin: 0 0 0.6em; }
.rouleau figcaption { margin-top: 0.9rem; font: 500 0.88rem var(--sans); color: var(--sourd); }
.rouleau figcaption::before { content: "— "; }
.rouleau__image { border-radius: 6px; margin: 0 auto 1.2rem; }

.carte-laterale { padding: 1.35rem 1.5rem; }
.carte-laterale h2 { font: 600 0.8rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte); margin: 0 0 0.8rem; padding: 0; }
.carte-laterale h2::before { display: none; }
.carte-laterale ul { list-style: none; padding: 0; margin: 0; }
.carte-laterale li { padding: 0.45rem 0; border-bottom: 1px solid var(--trait); }
.carte-laterale li:last-child { border-bottom: 0; }
.carte-laterale p { margin: 0 0 0.35rem; }
.format { font: 500 0.78rem var(--sans); color: var(--sourd); }
a[target="_blank"]::after { content: "\2197"; margin-left: 0.2em; font-size: 0.8em; color: var(--sourd); }
.document-apercu a[target="_blank"]::after { content: none; }

/* ---------- Module « prochain cours » (vivant) ---------- */
.prochain {
  background: linear-gradient(150deg, color-mix(in srgb, var(--jade) 12%, var(--surface)), var(--surface));
  border: 1px solid var(--jade-sombre);
}
.prochain__quand { font: 700 1.35rem var(--sans); color: var(--jade); margin: 0 0 0.2rem; }
.prochain__quoi { font-family: var(--serif); color: var(--texte); margin: 0 0 0.6rem; }
.prochain__delai { font: 500 0.9rem var(--sans); color: var(--jade); }
.pouls { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; border-radius: 50%; background: var(--jade); }
@media (prefers-reduced-motion: no-preference) {
  .pouls { animation: pouls 2.4s ease-in-out infinite; }
  @keyframes pouls { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } }
}

/* ---------- Respiration guidée ---------- */
.respiration { text-align: center; padding: 2rem 1.5rem 2.2rem; }
.respiration__cercle {
  width: min(13rem, 55vw); aspect-ratio: 1; margin: 1.2rem auto 1.4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--jade) 30%, transparent), transparent 70%);
  border: 1px solid var(--jade-sombre);
  display: grid; place-items: center;
  font: 500 0.95rem var(--sans); color: var(--texte);
  transform: scale(0.72);
}
.respiration .respiration__cercle { width: var(--resp-taille, min(13rem, 55vw)); border-color: var(--resp-couleur, var(--jade-sombre)); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--resp-couleur, var(--jade)) 30%, transparent), transparent 70%); }
@keyframes souffle { 0%, 100% { transform: scale(0.72); } 50% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .respiration--active .respiration__cercle { animation: none; } }

.bouton {
  font: 700 0.95rem var(--sans); color: #fff; background: var(--jade);
  border: 0; border-radius: 999px; padding: 0.75rem 1.5rem; cursor: pointer;
}
.bouton:hover { background: var(--laque); }
.bouton[disabled] { opacity: 0.6; cursor: progress; }
.bouton--fantome { background: transparent; color: var(--jade); border: 1px solid var(--jade-sombre); }

/* ---------- Formulaire ---------- */
form fieldset { padding: 1.2rem 1.4rem 1.4rem; margin: 0 0 1.5rem; }
form legend { font: 600 0.8rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte); padding: 0 0.4rem; }
.champ { display: grid; grid-template-columns: 11rem 1fr; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.champ label, .choix label { font: 500 0.95rem var(--sans); }
.champ input {
  font: inherit; padding: 0.5rem 0.7rem; color: var(--texte);
  background: #fff; border: 1px solid var(--trait); border-radius: 6px; min-width: 0;
}
.champ input:focus-visible { border-color: var(--jade); }
.choix { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; }
.choix input { width: 1.05rem; height: 1.05rem; accent-color: var(--jade); }
.etat { font: 500 0.95rem var(--sans); color: var(--jade); min-height: 1.5em; }
.etat--erreur { color: var(--cinabre); }

/* ---------- Aperçus de documents ---------- */
.documents-saison { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem; }
.document-apercu a { display: block; text-decoration: none; color: var(--texte); }
.document-apercu img { border-radius: 8px; border: 1px solid var(--trait); transition: transform 0.4s ease, box-shadow 0.4s ease; }
.document-apercu a:hover img { transform: translateY(-4px); box-shadow: 0 1rem 1.8rem -1rem rgb(42 34 30 / 0.5); }
.document-apercu__titre { display: block; margin-top: 0.7rem; font: 600 0.95rem var(--sans); color: var(--jade); }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre-2); border-top: 1px solid var(--trait); }
.pied__interieur {
  max-width: var(--largeur); margin: 0 auto; padding: 3rem var(--gouttiere) 1.5rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem 3rem;
}
.pied h2 { font: 600 0.78rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte); margin: 0 0 0.7rem; padding: 0; }
.pied h2::before { display: none; }
.pied p, .pied ul { margin: 0; font-size: 0.98rem; }
.pied__bas {
  max-width: var(--largeur); margin: 0 auto; padding: 1.2rem var(--gouttiere) 2rem;
  border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 0.5rem 2rem; font: 500 0.85rem var(--sans); color: var(--sourd);
}

/* ---------- Apparitions au défilement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .apparition { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.7s ease, transform 0.7s ease; }
  .js .apparition.vue { opacity: 1; transform: none; }
}

/* ---------- Écrans étroits ---------- */
@media (max-width: 62rem) {
  .corps { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .texte, .lateral { max-width: var(--mesure); }
  .hero__interieur, .hero__interieur--embleme { grid-template-columns: 1fr; }
  .hero__embleme { justify-self: start; width: 7rem; }
  /* idéogrammes : verticaux comme sur ordinateur, à droite du titre */
  .hero__interieur, .hero__interieur--embleme { grid-template-columns: minmax(0, 1fr) auto; }
  .hero__embleme { grid-column: 1 / -1; }
  .sceau { writing-mode: vertical-rl; font-size: clamp(1.35rem, 0.9rem + 2.2vw, 1.9rem); letter-spacing: 0.08em; }
}
@media (max-width: 40rem) {
  .js .bouton-menu { display: inline-block; }
  .js .navigation[data-ouvert="false"] { display: none; }
  .navigation { flex-basis: 100%; }
  .navigation ul { flex-direction: column; justify-content: flex-start; }
  .navigation a { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--trait); }
  .illustration, .illustration--gauche { float: none; max-width: 100%; margin: 0 0 1.25rem; }
  .champ { grid-template-columns: 1fr; gap: 0.25rem; }
  .yinyang { width: clamp(9rem, 42vw, 14rem); }
}

@media print {
  body { background: #fff; color: #000; }
  .bandeau, .hero__photo, .yinyang-piste, .bouton, .respiration, .navigation, .lien-evitement { display: none; }
  .corps { display: block; }
}


/* ---------- Pensée du jour ---------- */
.pensee {
  position: relative;
  margin: 2.6rem 0 1.6rem;
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.6rem, 4vw, 3rem) 2.4rem;
  background: linear-gradient(180deg, var(--surface-haute), var(--surface));
  border: 1px solid var(--trait);
  border-radius: 2px;
  text-align: center;
  overflow: hidden;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.pensee::before {
  content: ""; position: absolute; inset: 0.45rem;
  border: 1px solid var(--trait); opacity: 0.45; pointer-events: none;
}
.pensee--sortie { opacity: 0; transform: translateY(0.4rem); }

.pensee__illustration { margin: -0.4rem -0.6rem 1.4rem; }
.pensee__illustration img {
  display: block; width: 100%; height: auto; max-height: 22rem; object-fit: contain;
  background: var(--encre-2); border-radius: 2px;
  filter: saturate(0.92) contrast(0.97);
}
.pensee__credit {
  display: block; margin-top: 0.45rem; font-size: 0.72rem; line-height: 1.4;
  color: var(--sourd); text-decoration: none; opacity: 0.85;
}
.pensee__credit:hover, .pensee__credit:focus-visible { text-decoration: underline; color: var(--jade); }
.pensee__ornement { color: var(--jade); line-height: 0; }
.pensee__motif {
  width: clamp(4.6rem, 10vw, 6.6rem); height: auto; opacity: 0.55;
  animation: respirer 9s ease-in-out infinite;
}
@keyframes respirer {
  0%, 100% { opacity: 0.44; transform: scale(0.98); }
  50% { opacity: 0.62; transform: scale(1.03); }
}

.pensee__texte { margin: 1.6rem auto 0; max-width: 46ch; }
.pensee__texte p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.62; color: var(--texte); text-wrap: balance;
}
.pensee figcaption { margin-top: 1.8rem; display: grid; gap: 0.25rem; }
.pensee__auteur { font-weight: 600; color: var(--jade); }
.pensee__dates, .pensee__source { font-size: 0.86rem; color: var(--texte); opacity: 0.7; }
.pensee__source { font-style: italic; }

.pensee__barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem;
  margin-bottom: 2.2rem;
}
.pensee__date { font-size: 0.85rem; opacity: 0.65; }
.bouton--discret {
  background: none; border: 1px solid var(--trait); color: var(--texte);
  padding: 0.45rem 1.1rem; font-size: 0.9rem; cursor: pointer; border-radius: 2px;
}
.bouton--discret:hover, .bouton--discret:focus, .bouton--discret:active {
  background: none; border-color: var(--jade); color: var(--jade);
}

@media (prefers-reduced-motion: reduce) {
  .pensee__motif { animation: none; }
  .pensee { transition: none; }
}


/* ---------- Stages : encarts, inscription, administration ---------- */
.stage { position: relative; }
.stage__annee { margin-top: 2rem; color: var(--jade); }
.stage__dates { margin-bottom: 0.3rem; }
.stage__lieu { margin-top: 0; color: var(--sourd); }
.stage__action { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }
.stage__inscrits { font-family: var(--sans); font-size: 0.9rem; color: var(--jade); }

.dialogue {
  width: min(92vw, 34rem); border: 1px solid var(--trait); border-radius: 4px;
  padding: clamp(1.2rem, 4vw, 2rem); background: var(--surface-haute); color: var(--texte);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.25);
}
.dialogue::backdrop { background: rgb(28 20 14 / 0.55); }
.dialogue form { position: relative; }
.dialogue__fermer {
  position: absolute; top: -0.4rem; right: -0.4rem; width: 2.2rem; height: 2.2rem; z-index: 2;
  border: 1px solid var(--trait); border-radius: 50%; background: var(--surface-haute);
  color: var(--sourd); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.dialogue__fermer:hover, .dialogue__fermer:focus-visible { color: var(--cinabre); border-color: var(--cinabre); }
.dialogue__titre { margin-top: 0; font-size: 1.35rem; }
.dialogue__dates { margin-top: -0.6rem; color: var(--sourd); font-style: italic; }
.dialogue__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.dialogue select, .champ select { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--trait); border-radius: 3px; background: var(--surface-haute); font: inherit; }
.etat--erreur { color: var(--cinabre); }
.bouton--danger { color: var(--cinabre); border-color: var(--cinabre); }
.bouton--danger:hover { color: #fff; background: var(--cinabre); }

.admin-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin: 1rem 0 2rem; }
.admin-barre input { width: 7rem; padding: 0.45rem 0.6rem; border: 1px solid var(--trait); border-radius: 3px; font: inherit; }
.admin-annee__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.admin-annee__tete h2 { margin: 0 auto 0 0; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.admin-stage textarea { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--trait); border-radius: 3px; font: inherit; }
.admin-mdp { margin-top: 3rem; }

.tableau-defilant { overflow-x: auto; max-width: 100%; margin: 1rem 0; padding-bottom: 0.4rem; }
.corps--large .texte { min-width: 0; }
.participants { border-collapse: collapse; width: 100%; min-width: 64rem; font-size: 0.85rem; }
.participants th, .participants td { padding: 0.3rem 0.35rem; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: middle; }
.participants th { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jade); }
.participants input, .participants select { width: 100%; min-width: 7rem; padding: 0.3rem 0.4rem; border: 1px solid var(--trait); border-radius: 3px; font: inherit; font-size: 0.85rem; }
.participants .num { width: 2rem; text-align: right; color: var(--sourd); }
.participants .montant { width: 5.5rem; }
.participants .commentaire { min-width: 9rem; }
.participants input[type="email"] { min-width: 9rem; }
.participants input[type="tel"] { min-width: 6.5rem; }
.participants__retirer { min-width: 2.2rem; padding: 0.3rem 0.5rem; font-size: 1.1rem; line-height: 1; white-space: nowrap; }
.participants__bilan { font-size: 0.95rem; }

/* --- Communications ------------------------------------------------------ */
.communications__annee { margin: 1.5rem 0 2.5rem; }
.communications__annee > summary { display: flex; align-items: baseline; gap: 1rem; cursor: pointer; list-style: none; border-bottom: 1px solid var(--trait); padding: 0.4rem 0; }
.communications__annee > summary::-webkit-details-marker { display: none; }
.communications__annee > summary::before { content: "▸"; font: 700 1rem var(--sans); color: var(--jade); transition: transform 0.25s; }
.communications__annee[open] > summary::before { transform: rotate(90deg); }
.communications__annee > summary h2 { margin: 0; padding: 0; border: 0; }
.communications__annee > summary h2::before { display: none; }
.communications__nombre { font: 500 0.9rem var(--sans); color: var(--sourd); margin-left: auto; }
.communication__tete { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1.5rem; align-items: baseline; border-bottom: 1px dashed var(--trait); padding-bottom: 0.6rem; margin-bottom: 1rem; }
.communication__titre { margin: 0; grid-column: 1; }
.communication__date { grid-column: 2; grid-row: 1; font: 600 0.85rem var(--sans); color: var(--jade); white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase; }
.communication__commentaire { grid-column: 1 / -1; margin: 0; font: italic 400 1rem var(--serif); color: var(--sourd); }
.communication__corps { overflow-wrap: anywhere; }
.communication__corps::after { content: ""; display: block; clear: both; }
.communication__corps img { max-width: 100%; height: auto; border-radius: 3px; }
.communication__corps img.img--gauche { float: left; margin: 0.3rem 1.2rem 0.6rem 0; }
.communication__corps img.img--droite { float: right; margin: 0.3rem 0 0.6rem 1.2rem; }
.communication__corps img.img--centre { display: block; margin: 0.8rem auto; }
.communication__corps h3 { margin-top: 1.4rem; }
.communication__corps blockquote { margin: 1rem 0; padding: 0.4rem 1.2rem; border-left: 3px solid var(--jade-sombre); color: var(--sourd); }
.communication__corps table { border-collapse: collapse; margin: 1rem 0; }
.communication__corps th, .communication__corps td { border: 1px solid var(--trait); padding: 0.3rem 0.6rem; }
@media (max-width: 40rem) {
  .communication__tete { grid-template-columns: 1fr; }
  .communication__date { grid-column: 1; grid-row: auto; }
  .communication__corps img.img--gauche, .communication__corps img.img--droite { float: none; display: block; margin: 0.8rem auto; }
}

/* --- Éditeur des communications ------------------------------------------ */
.champ--bloc { grid-template-columns: 1fr; margin-bottom: 0.3rem; }
.champ__libelle { font: 500 0.95rem var(--sans); }
.champ input[type="date"] { max-width: 12rem; }
.editeur { position: relative; border: 1px solid var(--trait); border-radius: 3px; background: var(--surface-haute); margin-bottom: 1rem; }
.editeur__barre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--trait); background: var(--surface); }
.editeur__barre--image { background: #eef2df; }
.editeur__groupe { display: inline-flex; align-items: center; gap: 0.15rem; padding-right: 0.5rem; border-right: 1px solid var(--trait); }
.editeur__groupe:last-child { border-right: 0; }
.editeur__outil { min-width: 2rem; height: 2rem; padding: 0 0.45rem; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--texte); font: 600 0.95rem var(--sans); cursor: pointer; line-height: 1; }
.editeur__outil:hover, .editeur__outil:focus-visible { border-color: var(--jade-sombre); background: var(--surface-haute); }
.editeur__outil--gras { font-weight: 800; }
.editeur__outil--italique { font-style: italic; font-family: var(--serif); }
.editeur__outil--souligne { text-decoration: underline; }
.editeur__outil--barre { text-decoration: line-through; }
.editeur__outil--droite { transform: scaleX(-1); }
.editeur__outil--danger { color: var(--cinabre); }
.editeur__liste, .editeur__largeur { height: 2rem; padding: 0 0.4rem; border: 1px solid var(--trait); border-radius: 3px; background: var(--surface-haute); font: 500 0.85rem var(--sans); }
.editeur__largeur { width: 5.5rem; }
.editeur__libelle { font: 500 0.85rem var(--sans); color: var(--sourd); }
.editeur__zone { min-height: 14rem; max-height: 70vh; overflow: auto; padding: 1rem 1.2rem; outline: none; }
.editeur__zone:focus-visible { box-shadow: inset 0 0 0 2px var(--jade-sombre); }
.editeur__zone img { cursor: pointer; }
.editeur__zone img.img-selectionnee { outline: 2px solid var(--jade); outline-offset: 2px; }
.editeur__poignee { position: absolute; width: 16px; height: 16px; border: 2px solid var(--jade); background: var(--surface-haute); border-radius: 2px; cursor: nwse-resize; touch-action: none; z-index: 2; }
.editeur__etat { margin: 0; padding: 0.2rem 0.8rem; min-height: 1.4em; font-size: 0.85rem; }
.admin-form .champ input[type="text"] { width: 100%; }

/* --- Accès Staff ----------------------------------------------------------- */
.onglets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; border-bottom: 1px solid var(--trait); margin: 0.5rem 0 1.2rem; }
.onglets__bouton { padding: 0.6rem 1.2rem; border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; background: transparent; color: var(--sourd); font: 600 0.95rem var(--sans); cursor: pointer; margin-bottom: -1px; }
.onglets__bouton:hover, .onglets__bouton:focus-visible { color: var(--jade); }
.onglets__bouton--actif { color: var(--jade); background: var(--surface-haute); border-color: var(--trait); }
.onglets__deconnexion { margin-left: auto; margin-bottom: 0.4rem; }
.onglet__cadre { display: block; width: 100%; min-height: 60vh; border: 1px solid var(--trait); border-radius: 3px; background: var(--surface-haute); }
/* pages de gestion intégrées dans l'espace staff : sans bandeau, sans héros, sans pied de page */
.integre .bandeau, .integre .hero, .integre .pied, .integre .lien-evitement { display: none; }
.integre body { background: var(--surface-haute); }
.integre .corps { padding-top: 0.5rem; padding-bottom: 1rem; }
.integre .admin-annee__tete h2 { padding-top: 0; }
.integre #deconnexion { display: none; }   /* la déconnexion se fait depuis la page staff */

/* --- Pièces jointes et dernière communication ------------------------------ */
.communication__pieces-titre { font: 600 0.8rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sourd); margin: 1.4rem 0 0.4rem; }
.communication__pieces { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.communication__pieces li { padding: 0.3rem 0 0.3rem 1.5rem; position: relative; }
.communication__pieces li::before { content: "📎"; position: absolute; left: 0; top: 0.3rem; font-size: 0.9em; }
.communication__pieces .format { font: 500 0.85rem var(--sans); color: var(--sourd); }
.admin-pieces li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.admin-pieces li.note::before { display: none; }
.admin-pieces li.note { padding-left: 0; }
.derniere__nouveau { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--cinabre); color: #fff; font: 700 0.65rem var(--sans); letter-spacing: 0.08em; vertical-align: middle; }
.derniere__titre { font: 600 1.05rem var(--sans); margin: 0 0 0.2rem; }
.derniere__date { font: 600 0.8rem var(--sans); color: var(--jade); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.4rem; }
.derniere__commentaire { font: italic 400 0.95rem var(--serif); color: var(--sourd); margin: 0 0 0.6rem; }
.derniere__commentaire:empty { display: none; }
.derniere__nouveau[hidden] { display: none; }