/*
 * Charte SEARCH — volontairement sobre.
 *
 * Le logo évoque la diversité des disciplines par une profusion de couleurs ;
 * l'interface prend le parti inverse : une seule couleur d'accent, beaucoup de
 * blanc, et de la typographie. La richesse thématique s'exprime par le
 * contenu, pas par le décor.
 *
 * Écrite à la main, sans outil de compilation : sur un hébergement mutualisé,
 * on dépose le fichier et c'est terminé.
 */

:root {
  --brand-50:  #f0fdfa;
  --brand-100: #ccfbf1;
  --brand-200: #99f6e4;
  --brand-300: #5eead4;
  --brand-600: #0d9488;
  --brand-700: #0f766e;
  --brand-800: #115e59;
  --brand-900: #134e4a;

  --ink-50:  #f8f9fa;
  --ink-100: #f1f3f5;
  --ink-200: #e6e9ec;
  --ink-300: #d3d8dd;
  --ink-400: #9aa3ad;
  --ink-500: #6b747e;
  --ink-600: #4b535c;
  --ink-700: #343a40;
  --ink-800: #212529;
  --ink-900: #14171a;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-lift: 0 8px 24px rgba(16, 24, 40, .06);
}

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

/*
 * « hidden » l'emporte sur toute mise en page.
 *
 * L'attribut ne vaut que « display: none » dans la feuille du navigateur, que
 * la moindre règle d'auteur écrase. Une carte en « display: flex » masquée par
 * le script restait donc affichée — c'est ce qui laissait les boutons d'envoi
 * visibles dès la première étape du formulaire du colloque.
 *
 * « !important » se justifie ici : masquer est une décision du code, pas une
 * suggestion de style, et il n'existe aucun cas où l'on veuille afficher un
 * élément porteur de cet attribut.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ink-50);
  color: var(--ink-800);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 { color: var(--ink-900); line-height: 1.25; text-wrap: balance; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; }

a { color: var(--brand-700); }

/* Anneau de focus unique et bien visible : accessibilité au clavier. */
:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--ink-500); }
.small { font-size: .875rem; }

.skip {
  position: absolute; left: -9999px;
  background: var(--brand-700); color: #fff;
  padding: 8px 16px; border-radius: var(--radius); z-index: 50;
}
.skip:focus { left: 16px; top: 16px; }

/* --- Bandeau de démonstration --------------------------------------------- */
.demo-banner {
  background: #fef3c7; border-bottom: 1px solid #fcd34d;
  color: #78350f; text-align: center; padding: 8px 16px; font-size: .875rem;
}

/* --- En-tête --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-200);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.brand-name { font-size: 1.125rem; font-weight: 600; color: var(--brand-800); letter-spacing: -.01em; }
.brand-place { font-size: .75rem; color: var(--ink-500); }

.main-nav { display: flex; gap: 4px; flex: 1; }
.nav-link {
  padding: 8px 12px; border-radius: 6px; font-size: .875rem;
  color: var(--ink-600); text-decoration: none;
}
.nav-link:hover { background: var(--ink-100); color: var(--ink-900); }
.nav-link.is-active { background: var(--brand-50); color: var(--brand-800); font-weight: 500; }

/* Sous-menu d'un onglet. Ouvert au survol et au focus clavier, sans
   JavaScript. Le décalage se fait par un padding sur le conteneur plutôt que
   par une marge sur le panneau : avec une marge, le curseur traverse un vide
   entre l'onglet et le menu, qui se referme au passage. */
.nav-item { position: relative; display: inline-flex; }
.nav-caret { font-size: .625rem; margin-left: 4px; opacity: .6; }
.nav-menu {
  display: none; position: absolute; left: 0; top: 100%; z-index: 45;
  min-width: 160px; padding: 6px;
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { display: block; }
.nav-menu a {
  display: block; padding: 8px 12px; border-radius: 6px;
  font-size: .875rem; color: var(--ink-700); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.nav-menu a:hover { background: var(--ink-100); color: var(--ink-900); }

.header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* Regroupés pour pouvoir disparaître d'un bloc sur téléphone, où ils rejoignent
   le menu. Le conteneur reste flex, sinon les deux liens se recollent. */
.header-auth { display: flex; align-items: center; gap: 12px; }

/* Espaces privés : encadrés et séparés, ce sont des outils de travail. */
.private-nav { display: flex; align-items: center; gap: 4px; padding-right: 12px; border-right: 1px solid var(--ink-200); }
.pill {
  padding: 6px 12px; border: 1px solid var(--ink-200); border-radius: 6px;
  font-size: .875rem; color: var(--ink-600); text-decoration: none;
}
.pill:hover { border-color: var(--ink-300); background: var(--ink-50); }

.lang { display: flex; align-items: center; font-size: .875rem; }
.lang-sep { padding: 0 4px; color: var(--ink-300); }
.lang-link { text-decoration: none; color: var(--ink-500); text-transform: uppercase; padding: 2px 4px; }
.lang-link.is-active { color: var(--ink-900); font-weight: 600; }

.inline-form { display: inline; }
.link-button {
  background: none; border: 0; padding: 8px 12px; border-radius: 6px;
  font: inherit; font-size: .875rem; color: var(--ink-600); cursor: pointer; text-decoration: none;
}
.link-button:hover { background: var(--ink-100); color: var(--ink-900); }

/* --- Menu de téléphone ------------------------------------------------------ */

/* Un <details> plutôt qu'un bouton et du JavaScript : l'ouverture, la
   fermeture, le clavier et les lecteurs d'écran sont pris en charge par le
   navigateur. Le menu fonctionne donc même si le JavaScript ne charge pas — or
   c'est la navigation du site, la dernière chose qui puisse se permettre de
   manquer. */
.menu { display: none; position: relative; }
.menu > summary {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; cursor: pointer; list-style: none;
  border: 1px solid var(--ink-200); border-radius: 6px; color: var(--ink-700);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--ink-50); }
.menu[open] > summary { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-800); }

.menu-icon { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.menu-icon::before, .menu-icon::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.menu-icon::before { top: -6px; }
.menu-icon::after  { top: 6px; }

.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 45;
  min-width: 220px; max-width: min(320px, calc(100vw - 32px));
  display: grid; gap: 2px; padding: 8px;
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.menu-panel a, .menu-panel .link-button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 6px; font-size: .9375rem;
  color: var(--ink-700); text-decoration: none;
}
.menu-panel a:hover, .menu-panel .link-button:hover { background: var(--ink-100); color: var(--ink-900); }
.menu-panel a.is-active { background: var(--brand-50); color: var(--brand-800); font-weight: 500; }
.menu-panel .btn { width: 100%; }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--ink-200); }
/* Éditions du colloque dans le menu de téléphone : décalées et en plus petit,
   pour se lire comme des sous-entrées et non comme des rubriques de plus. */
.menu-panel .menu-sub {
  padding-left: 28px; font-size: .875rem; color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 780px) {
  .main-nav { display: none; }
  .private-nav { display: none; }
  /* Connexion et inscription rejoignent le menu : à trois éléments côte à côte,
     l'en-tête débordait déjà sur un écran de 360 px. */
  .header-auth { display: none; }
  .menu { display: block; }
  .header-inner { gap: 12px; }
}

/* --- Boutons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 6px; border: 1px solid transparent;
  font-size: .875rem; font-weight: 500; text-decoration: none; cursor: pointer;
  font-family: inherit; transition: background-color .15s, border-color .15s;
}
.btn-sm { height: 32px; padding: 0 12px; }
.btn-primary { background: var(--brand-700); color: #fff; }
.btn-primary:hover { background: var(--brand-800); }
.btn-secondary { background: #fff; color: var(--ink-800); border-color: var(--ink-300); }
.btn-secondary:hover { background: var(--ink-100); border-color: var(--ink-400); }
.btn-danger { background: #b91c1c; color: #fff; }
.btn-danger:hover { background: #991b1b; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* --- Messages -------------------------------------------------------------- */
.flashes { padding-top: 16px; display: grid; gap: 8px; }
.alert { border: 1px solid; border-radius: var(--radius); padding: 12px 16px; font-size: .875rem; }
.alert-info    { border-color: var(--brand-200); background: var(--brand-50); color: var(--brand-900); }
.alert-success { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; }
.alert-warning { border-color: #fcd34d; background: #fffbeb; color: #78350f; }
.alert-error   { border-color: #fecaca; background: #fef2f2; color: #991b1b; }

/* --- Cartes ---------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.card-header { margin-bottom: 20px; }
.card-header h2 { font-size: 1.125rem; font-weight: 600; }
.card-header p { margin-top: 4px; font-size: .875rem; color: var(--ink-500); }

/* --- Formulaires ----------------------------------------------------------- */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: .875rem; font-weight: 500; color: var(--ink-800); }
.field .required { color: var(--brand-700); margin-left: 2px; }
.field .hint { font-size: .75rem; color: var(--ink-500); }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="tel"], input[type="file"], select, textarea {
  width: 100%; padding: 8px 12px; font: inherit; font-size: .875rem;
  color: var(--ink-900); background: #fff;
  border: 1px solid var(--ink-300); border-radius: 6px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600);
}
.grid-2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* --- Écrans de compte ------------------------------------------------------ */
.auth-shell { max-width: 460px; margin: 0 auto; padding: 56px 16px; }
.auth-shell h1 { font-size: 1.5rem; font-weight: 600; }
.auth-shell > p { margin-top: 8px; font-size: .875rem; color: var(--ink-600); }
.auth-shell .card { margin-top: 32px; }
.auth-footer { margin-top: 24px; text-align: center; font-size: .875rem; color: var(--ink-600); }

/* --- Accueil --------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-900), var(--brand-800) 45%, var(--ink-900));
  color: #fff;
}
/* Padding vertical seul, jamais le raccourci : ces blocs se portent sur le même
   élément que « .wrap », et « padding: 96px 0 » remettrait à zéro les 16 px
   horizontaux qu'elle pose. Invisible sur grand écran, où .wrap est de toute
   façon centrée dans 1120 px ; sur téléphone, le texte touche les bords. */
.hero-inner { padding-top: 96px; padding-bottom: 96px; position: relative; z-index: 1; }

/* Avec une photo : elle couvre le fond, un dégradé sombre passe par-dessus
   pour que le titre reste lisible même sur une image claire. */
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,23,26,.9), rgba(20,23,26,.7) 45%, rgba(19,78,74,.5));
}
.hero.has-photo { background: var(--ink-900); }
.hero-eyebrow {
  font-size: .875rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand-200);
}
.hero h1 { margin-top: 16px; max-width: 760px; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 600; color: #fff; }
.hero p { margin-top: 24px; max-width: 620px; font-size: 1.125rem; color: rgba(240, 253, 250, .9); }
.hero-actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn-ghost-light { border-color: rgba(255, 255, 255, .3); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .1); }

.section { padding-top: 56px; padding-bottom: 56px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.section-head h2 { font-size: 1.75rem; font-weight: 600; }

.cards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

.post-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--ink-200); border-radius: 12px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.post-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-lift); }
.post-cover { aspect-ratio: 16 / 9; background: var(--ink-100); position: relative; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Aplats de repli : la teinte varie selon la position, pour que plusieurs
   cartes côte à côte restent distinguables sans image. */
.post-cover-0 { background: linear-gradient(135deg, var(--brand-700), var(--brand-900)); }
.post-cover-1 { background: linear-gradient(135deg, var(--brand-600), var(--ink-800)); }
.post-cover-2 { background: linear-gradient(135deg, var(--ink-700), var(--brand-800)); }
.post-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-date { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }
.post-card h3 { font-size: 1rem; font-weight: 600; }
.post-card:hover h3 { color: var(--brand-800); }
.post-excerpt { font-size: .875rem; color: var(--ink-600); }
.badge-pinned {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255, 255, 255, .95); color: var(--brand-800);
  font-size: .75rem; font-weight: 500; padding: 4px 10px; border-radius: 999px;
}

.missions { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) { .missions { grid-template-columns: 1fr; } }
.mission { background: #fff; border: 1px solid var(--ink-200); border-radius: 12px; padding: 24px; }
.mission h3 { margin-top: 12px; font-size: 1.125rem; font-weight: 600; }
.mission p { margin-top: 8px; font-size: .875rem; color: var(--ink-600); }
.mission-mark { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--brand-50); color: var(--brand-700); font-size: 1.25rem; }

/* --- Contenu éditorial ------------------------------------------------------ */
.prose { color: var(--ink-700); }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-size: 1.375rem; font-weight: 600; margin-top: 32px; }
.prose h3 { font-size: 1.125rem; font-weight: 600; margin-top: 24px; }
.prose ul, .prose ol { padding-left: 24px; margin-top: 16px; }
.prose li + li { margin-top: 4px; }
.prose blockquote {
  border-left: 3px solid var(--brand-200); padding-left: 16px; color: var(--ink-600);
}
/* Une image d'article occupe sa propre ligne, centrée, et ne dépasse jamais la
   colonne de texte : sur un téléphone, une photo de 4000 px se réduit au lieu
   d'imposer un défilement horizontal à tout l'article. */
.prose img { display: block; max-width: 100%; height: auto; margin: 24px auto; border-radius: var(--radius); }
.prose code { background: var(--ink-100); padding: 2px 5px; border-radius: 4px; font-size: .9em; }
/* Un exemple de code garde ses espaces et ses retours à la ligne, sinon la
   syntaxe qu'il montre ne veut plus rien dire. S'il est trop large, il défile
   dans son cadre : la page, elle, ne bouge pas. */
.prose pre {
  background: var(--ink-100); border: 1px solid var(--ink-200); border-radius: var(--radius);
  padding: 12px 14px; overflow-x: auto; font-size: .875rem; line-height: 1.5;
}
.prose pre code { background: none; padding: 0; font-size: inherit; white-space: pre; }

.article { max-width: 720px; margin: 0 auto; padding: 48px 16px; }
.article h1 { font-size: 2rem; font-weight: 600; margin-top: 24px; }
.article-meta { margin-top: 12px; font-size: .875rem; color: var(--ink-500); }
/* Bannière de tête : même rapport que .post-cover, pour que l'image ouvrant
   l'article soit cadrée comme la vignette d'où l'on vient. */
.article-cover {
  display: block; width: 100%; max-width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  margin-top: 32px; border-radius: 12px; background: var(--ink-100);
}
@media (max-width: 640px) { .article-cover { margin-top: 24px; border-radius: 8px; } }

/* --- Carte du lieu ---------------------------------------------------------- */

/* Rapport fixe plutôt qu'une hauteur : la carte s'adapte à la largeur sans
   devenir une meurtrière sur téléphone ni un panorama sur grand écran. */
.map {
  margin-top: 24px; aspect-ratio: 16 / 9; max-height: 380px;
  border: 1px solid var(--ink-200); border-radius: var(--radius); overflow: hidden;
  background: var(--ink-100);
}
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-links { margin-top: 8px; }

/* --- Pagination ------------------------------------------------------------- */
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; font-size: .875rem; }

/* --- Pied de page ----------------------------------------------------------- */
.site-footer { margin-top: auto; background: #fff; border-top: 1px solid var(--ink-200); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 32px 48px; justify-content: space-between; padding: 40px 16px; }
.footer-name { font-weight: 600; color: var(--ink-800); }

/* Largeur bornée, sans quoi la mention sur les données personnelles s'étale sur
   toute la page et repousse les liens à la ligne suivante. « ch » plutôt que
   des pixels : la limite suit la taille du texte, et une ligne de cette
   longueur reste confortable à lire. */
.footer-identity { flex: 1 1 360px; display: flex; align-items: flex-start; gap: 20px; }

/* Le logo de l'association, à gauche de son identité. Largeur fixe et
   « flex: 0 0 auto » : il ne se laisse ni étirer ni comprimer quand le texte
   à côté s'allonge. */
.footer-logo { flex: 0 0 auto; width: 120px; height: auto; border-radius: 8px; }

/* La largeur bornée passe du bloc au texte : sans cela le logo mangeait la
   place et la mention sur les données personnelles se serrait en colonne
   étroite. « ch » plutôt que des pixels : la limite suit la taille du texte,
   et une ligne de cette longueur reste confortable à lire.
   « min-width: 0 » autorise le texte à rétrécir sous sa largeur naturelle,
   sans quoi une adresse longue ferait déborder la colonne. */
.footer-identity-text { min-width: 0; max-width: 62ch; }

.footer-links { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; font-size: .875rem; }
.footer-links a { color: var(--ink-500); text-decoration: none; }
.footer-links a:hover { color: var(--ink-800); }

/* Identité légale. « address » arrive en italique par défaut dans les
   navigateurs, ce qui n'a pas de sens pour une raison sociale. */
.footer-legal {
  margin-top: 16px; font-style: normal;
  font-size: .75rem; line-height: 1.6; color: var(--ink-500);
}
/* Deux blocs « footer-legal » se suivent — identité puis données personnelles.
   Le second se distingue par un gris plus léger : c'est une information de
   second rang, pas une coordonnée. */
.footer-legal + .footer-legal { color: var(--ink-400); }
.footer-legal a { color: var(--ink-500); }

/* Crédit de réalisation, rangé sous la signature de l'association. La mention
   au-dessus du logo plutôt qu'à côté : côte à côte, un logo vingt fois plus
   large que haut écrasait le texte et débordait de la colonne. */
.footer-credit {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--ink-100);
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-400);
}
.footer-credit a { display: inline-flex; max-width: 100%; text-decoration: none; color: inherit; }
/* Hauteur imposée, largeur libre : le logo garde ses proportions quel que soit
   le fichier déposé. 11 px plutôt que 14 : c'est un crédit, il doit se lire
   sans peser plus que la signature de l'association juste au-dessus.
   « max-width » couvre les écrans très étroits — au pire il se réduit, il ne
   déborde jamais. */
.footer-credit img { height: 11px; width: auto; max-width: 100%; opacity: .6; }
.footer-credit img:hover { opacity: 1; }
/* Repli sans logo : un cran plus appuyé que la mention, pour que le nom se
   détache comme le ferait le logo qu'il remplace. */
.footer-credit-name { color: var(--ink-500); font-weight: 500; letter-spacing: .04em; }

/* --- Espaces membre et gestion ----------------------------------------------- */
.section-layout { padding: 40px 16px; display: grid; gap: 32px; grid-template-columns: 200px 1fr; align-items: start; }
.section-title { grid-column: 1 / -1; }
.section-title h1 { font-size: 1.5rem; font-weight: 600; }
.section-title p { margin-top: 4px; font-size: .875rem; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-link { padding: 8px 12px; border-radius: 6px; font-size: .875rem; color: var(--ink-600); text-decoration: none; }
.side-link:hover { background: var(--ink-100); color: var(--ink-900); }
.side-link.is-active { background: var(--brand-50); color: var(--brand-800); font-weight: 500; }
.section-body { min-width: 0; }
@media (max-width: 780px) {
  .section-layout { grid-template-columns: 1fr; }
  /* La navigation de section devient une bande, qui passe à la ligne plutôt
     que de défiler : six entrées au maximum côté gestion, quatre côté membre,
     elles tiennent sur deux lignes. Le défilement horizontal coupait le dernier
     onglet en plein mot, sans rien qui laisse deviner qu'il en restait à
     droite — on ne fait pas glisser une barre dont on ignore l'existence. */
  .side-nav {
    flex-direction: row; flex-wrap: wrap; gap: 4px;
    padding-bottom: 16px; border-bottom: 1px solid var(--ink-200);
  }
  .side-link { flex: 0 0 auto; }
}

.data-list { margin: 0; display: grid; }
.data-list > div { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 12px 0; border-top: 1px solid var(--ink-100); font-size: .875rem; }
.data-list > div:first-child { border-top: 0; }
.data-list dt { color: var(--ink-500); margin: 0; }
.data-list dd { margin: 0; }

.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px; font-size: .75rem; font-weight: 500; }
.badge-draft, .badge-archived, .badge-cancelled { background: var(--ink-100); color: var(--ink-600); }
.badge-published, .badge-active { background: #ecfdf5; color: #065f46; }
.badge-pending { background: #fffbeb; color: #78350f; }
.badge-rejected { background: #fef2f2; color: #991b1b; }
.badge-none   { background: var(--ink-100); color: var(--ink-500); }
.badge-exempt { background: var(--brand-50); color: var(--brand-800); }

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 780px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 16px; text-decoration: none; color: inherit; display: block; }
.tile:hover { border-color: var(--brand-300); }
.tile-label { display: block; font-size: .75rem; color: var(--ink-500); }
.tile-value { display: block; margin-top: 4px; font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile-value.is-zero { color: var(--ink-400); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.toolbar h2 { font-size: 1.125rem; font-weight: 600; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li { border-top: 1px solid var(--ink-100); }
.row-link { display: flex; align-items: center; gap: 12px; padding: 14px 20px; text-decoration: none; color: inherit; }
.row-link:hover { background: var(--ink-50); }
.row-main { flex: 1; min-width: 0; font-weight: 500; }
.row-pin { color: var(--brand-700); }
.row-date { font-size: .75rem; color: var(--ink-500); white-space: nowrap; }

.stack { display: grid; gap: 16px; }

/* --- Adhésion : règlement en ligne ------------------------------------------ */
/* Un encart de réglages regroupés, pour qu'on voie d'un coup d'œil que ces
   champs vont ensemble et ne concernent que le paiement. */
.field-group {
  border: 1px solid var(--ink-200); border-radius: var(--radius);
  padding: 16px; margin-top: 16px; display: grid; gap: 12px;
}
.field-group legend { padding: 0 6px; font-size: .875rem; font-weight: 600; color: var(--ink-600); }
/* Le cadre du module distant : hauteur fixée par le bureau, largeur pleine.
   Le fond gris se voit pendant le chargement — une zone blanche laisserait
   croire à une page cassée. */
.payment-frame {
  border: 1px solid var(--ink-200); border-radius: var(--radius);
  background: var(--ink-50); overflow: hidden;
}
.payment-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --- Documentation ---------------------------------------------------------- */
.doc-list { display: grid; gap: 8px; }
.doc-card {
  display: flex; gap: 14px; align-items: baseline; padding: 14px 16px;
  border: 1px solid var(--ink-200); border-radius: var(--radius);
  text-decoration: none; color: inherit; background: #fff;
}
.doc-card:hover { border-color: var(--brand-300); }
.doc-card-number {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-400);
  min-width: 18px;
}
.doc-card-text { display: grid; gap: 2px; }
/* Le guide se lit comme un article : une colonne étroite, parce qu'une ligne
   de cent caractères se relit mal. */
.doc-page .prose { max-width: 68ch; }
.doc-page .prose > :first-child { margin-top: 0; }
.doc-steps {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 16px;
  font-size: .875rem;
}
.check-box {
  display: flex; align-items: flex-start; gap: 12px; font-size: .875rem;
  padding: 12px 10px; margin: 0 -10px; border-radius: 8px; cursor: pointer;
}
.check-box:hover { background: var(--ink-50); }
.check-box span span { display: block; }
.danger-zone { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ink-200); }
.cover-preview { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.cover-preview img { width: 128px; height: 80px; object-fit: cover; border: 1px solid var(--ink-200); border-radius: 6px; }

/* --- Événements ---------------------------------------------------------------- */
.event-head { display: flex; gap: 12px; align-items: flex-start; }
.event-mark {
  display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px;
  align-items: center; justify-content: center; border-radius: 10px;
  background: var(--brand-700); color: #fff; font-size: 1.125rem;
}
.event-foot { margin-top: auto; padding-top: 12px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; border: 0; padding-left: 0; padding-right: 0; margin: 0; }
.choices-column { flex-direction: column; gap: 4px; }

/* Toute la ligne est cliquable, et le dit : la cible ne se limite plus à une
   case de 13 px. Les marges négatives élargissent la zone sans décaler le
   texte par rapport aux champs voisins. */
.choice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; margin: 0 -10px;
  border-radius: 8px; font-size: .875rem; cursor: pointer;
}
.choice:hover { background: var(--ink-50); }
.choice:has(input:checked) { color: var(--ink-900); font-weight: 500; }
.choice:has(input:checked) .hint { font-weight: 400; }
.choice:has(input:disabled) { cursor: default; }
.choice:has(input:disabled):hover { background: none; }

/* Les cases prennent la couleur de marque et une taille confortable. Elles
   restent natives : le clavier, la synthèse vocale et les préférences système
   continuent de fonctionner sans qu'on ait à les réimplémenter. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--brand-700);
  width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--brand-600); outline-offset: 2px;
}
.question-row {
  border: 1px solid var(--ink-200); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px;
}

/* --- Bandeau d'adhésion -------------------------------------------------------- */
.cta { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; border: 1px solid; border-radius: 12px; padding: 24px; }
.cta-text { flex: 1; min-width: 240px; }
.cta h2 { font-size: 1.25rem; font-weight: 600; }
.cta p { margin-top: 6px; font-size: .875rem; opacity: .9; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-invite    { border-color: var(--brand-200); background: var(--brand-50); color: var(--brand-900); }
.cta-confirmed { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; }
.cta-warning   { border-color: #fcd34d; background: #fffbeb; color: #78350f; }
.cta-neutral   { border-color: var(--ink-200); background: #fff; color: var(--ink-700); }
.cta h2, .cta-confirmed h2, .cta-warning h2 { color: inherit; }

/* Éditions du colloque dans l'espace membre : une carte par édition, portant
   son état d'inscription. Elles s'enroulent plutôt que de défiler — à quelques
   éditions par association, deux lignes suffisent et tout reste visible. */
.edition-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.edition-card {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  min-width: 160px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius);
  text-decoration: none; color: inherit;
}
.edition-card:hover { border-color: var(--brand-300); }
.edition-card strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
/* L'édition affichée se distingue par sa bordure, pas par un fond : les cartes
   portent déjà un badge de couleur, un aplat de plus les rendrait illisibles. */
.edition-card.is-current { border-color: var(--brand-700); box-shadow: inset 0 0 0 1px var(--brand-700); }

.season-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) { .grid-3 { grid-template-columns: 1fr; } }
.ink { color: var(--ink-800); }

/* --- Éditeur Markdown --------------------------------------------------------- */
.md-editor { position: relative; border: 1px solid var(--ink-300); border-radius: 6px; overflow: hidden; background: #fff; }
.md-editor:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600); }
.md-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: var(--ink-50); border-bottom: 1px solid var(--ink-200); }
.md-tool { min-width: 32px; padding: 4px 8px; font: inherit; font-size: .75rem; background: none; border: 0; border-radius: 4px; color: var(--ink-700); cursor: pointer; }
.md-tool:hover { background: var(--ink-200); }
.md-file { display: none; }
.md-tabs { margin-left: auto; display: flex; gap: 2px; }
.md-tab { padding: 4px 10px; font: inherit; font-size: .75rem; background: none; border: 0; border-radius: 4px; color: var(--ink-600); cursor: pointer; }
.md-tab[aria-pressed="true"] { background: var(--brand-700); color: #fff; }
.md-source { border: 0; border-radius: 0; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .8125rem; }
.md-source:focus { box-shadow: none; }
.md-preview { min-height: 160px; padding: 12px; }
.md-status { margin: 0; padding: 8px 12px; font-size: .75rem; background: var(--ink-50); color: var(--ink-600); border-top: 1px solid var(--ink-200); }
.md-status-error { background: #fef2f2; color: #991b1b; border-top-color: #fecaca; }
.md-hint { margin: 0; padding: 6px 12px; font-size: .75rem; color: var(--ink-500); background: var(--ink-50); border-top: 1px solid var(--ink-200); }

/* Cible du glisser-déposer : le cadre se dessine par-dessus, sans déplacer la
   zone de saisie — un décalage d'un pixel au survol donnerait l'impression que
   le texte saute. */
.md-editor.is-dragover { border-color: var(--brand-600); }
.md-editor.is-dragover::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px dashed var(--brand-600);
  border-radius: 4px;
  background: var(--brand-50);
  opacity: .55;
  pointer-events: none;
}

/* --- Pages d'erreur ---------------------------------------------------------- */
.error-page { max-width: 560px; margin: 0 auto; padding: 96px 16px; text-align: center; }
.error-page h1 { font-size: 1.75rem; font-weight: 600; }
.error-page p { margin-top: 12px; color: var(--ink-600); }
.error-page .btn { margin-top: 32px; }

/* --- Colloque ------------------------------------------------------------- */

/* Formulaire en étapes. Sans JavaScript, aucune de ces règles ne masque quoi
   que ce soit : les sections s'enchaînent simplement les unes sous les autres. */
/* Chaque étape est une carte, comme les blocs de « Mon profil ». Sans
   JavaScript elles s'empilent et le fond blanc sépare les sujets bien mieux
   qu'un filet ; avec, la carte donne à l'étape courante un cadre net au lieu
   de flotter sur le fond de page. */
.stepper .step {
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
  margin-top: 16px;
}
.stepper .step:first-of-type { margin-top: 0; }
.stepper .step h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: 16px; }
.stepper-enhanced .step { display: none; margin-top: 0; }
.stepper-enhanced .step.is-current { display: block; }

.stepper-progress { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; }
.stepper-progress:empty { display: none; }
.stepper-progress li {
  flex: 1 1 0; min-width: 96px; padding: 8px 4px 0;
  border-top: 3px solid var(--ink-200);
  font-size: .8125rem; color: var(--ink-500);
}
.stepper-progress li.is-done { border-color: var(--brand-300); color: var(--ink-600); cursor: pointer; }
.stepper-progress li.is-current { border-color: var(--brand-700); color: var(--brand-800); font-weight: 500; }

.stepper-nav { display: flex; gap: 12px; margin-top: 24px; }
.stepper-nav:empty { display: none; }
.stepper-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Choix de format : une carte cliquable plutôt qu'un bouton radio perdu. */
.choice-card {
  align-items: flex-start; gap: 12px; border: 1px solid var(--ink-200);
  border-radius: 10px; padding: 14px 16px; margin: 0; cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.choice-card:hover { border-color: var(--brand-300); background: var(--ink-50); }
/* Deux marques pour l'option retenue plutôt qu'une : la teinte se voit d'un
   coup d'œil, le liseré à gauche survit à un écran mal réglé ou à un daltonisme. */
.choice-card:has(input:checked) {
  border-color: var(--brand-700); background: var(--brand-50);
  box-shadow: inset 3px 0 0 var(--brand-700);
}
.choice-card:has(input:checked):hover { background: var(--brand-50); }
.choice-card strong { display: block; }
.choice-card .hint { margin-top: 2px; }

/* Mention A2U : le logo à gauche du texte, aligné en haut pour que la première
   ligne parte à sa hauteur même quand la phrase passe sur deux lignes. */
.a2u-notice { display: flex; align-items: flex-start; gap: 14px; }
.a2u-notice img { flex: 0 0 auto; width: 200px; height: auto; border-radius: 4px; }
@media (max-width: 640px) {
  .a2u-notice img { width: 100px; }
}

.word-count.is-over { color: #991b1b; font-weight: 500; }

/* Quatre colonnes de saisie : en dessous de cette largeur, les champs se
   réduisent à deux ou trois caractères visibles. Le cadre défile plutôt. */
.authors-table { min-width: 560px; }
.authors-table input { width: 100%; }
.authors-table th { font-weight: 500; font-size: .8125rem; color: var(--ink-600); }

/* Programme : composé à partir des données, jamais retapé. */
.presentation h3 { font-size: 1.0625rem; font-weight: 600; }
.presentation-authors { margin-top: 8px; font-size: .9375rem; }
.presentation-authors .is-presenter { font-weight: 600; }
.presentation-authors sup { color: var(--brand-700); }
.presentation-labs {
  margin: 8px 0 0; padding: 0; list-style: none;
  font-size: .8125rem; color: var(--ink-600);
}
.presentation-body { margin-top: 12px; }

/* --- Écrans de gestion ----------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--ink-200); }
.tabs a {
  padding: 8px 14px; font-size: .875rem; color: var(--ink-600);
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none;
}
.tabs a:hover { color: var(--ink-900); }
.tabs a.is-active { color: var(--brand-800); border-color: var(--brand-700); font-weight: 500; }

.grid-4 { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 780px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-value { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Un tableau large défile dans son propre cadre, plutôt que d'imposer un
   défilement horizontal à la page entière — auquel cas c'est tout le texte de
   la page qui sort de l'écran pour quelques colonnes de trop. */
.table-scroll { overflow-x: auto; }
.table-scroll > .table { min-width: 520px; }

.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th, .table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--ink-100); }
.table thead th { font-size: .8125rem; color: var(--ink-600); font-weight: 500; }
.table tfoot th { border-bottom: 0; font-weight: 600; }

.decision-card summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
}
.decision-card summary::-webkit-details-marker { display: none; }
.decision-card summary .row-main { flex: 1; min-width: 0; }
.decision-card[open] summary { border-bottom: 1px solid var(--ink-100); padding-bottom: 12px; }

.row-static { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: .875rem; }
.row-static .row-main { flex: 1; min-width: 0; }

.badge-confirmed { background: #ecfdf5; color: #065f46; }
.badge-waitlisted { background: #eff6ff; color: #1e40af; }
.badge-submitted, .badge-under_review { background: #fffbeb; color: #78350f; }
.badge-accepted_oral, .badge-accepted_poster { background: #ecfdf5; color: #065f46; }
.badge-withdrawn, .badge-closed { background: var(--ink-100); color: var(--ink-600); }
/* --- Mode aperçu ------------------------------------------------------------ */

/* Bandeau distinct du bandeau de démonstration : on doit pouvoir dire d'un
   coup d'oeil dans lequel des deux états on se trouve. */
.preview-banner {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  flex-wrap: wrap;
  background: var(--brand-800); border-bottom: 1px solid var(--brand-700);
  color: #fff; text-align: center; padding: 6px 16px; font-size: .875rem;
}
.preview-banner .link-button { color: #fff; text-decoration: underline; padding: 2px 6px; }
.preview-banner .link-button:hover { background: rgba(255, 255, 255, .15); color: #fff; }

.eye {
  background: none; border: 1px solid var(--ink-200); border-radius: 6px;
  padding: 5px 9px; font-size: 1rem; line-height: 1; cursor: pointer;
  color: var(--ink-500); filter: grayscale(1); opacity: .65;
}
.eye:hover { border-color: var(--ink-300); background: var(--ink-50); opacity: 1; }
.eye.is-on { border-color: var(--brand-700); background: #f0fdfa; filter: none; opacity: 1; }

/* Repère de brouillon posé sur une vignette, symétrique du repère d'épingle. */
.badge-preview {
  position: absolute; top: 12px; right: 12px;
  background: var(--brand-800); color: #fff;
  font-size: .75rem; font-weight: 500; padding: 4px 10px; border-radius: 999px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* --- Matrice des permissions ------------------------------------------------ */
.matrix { min-width: 720px; }
.matrix th, .matrix td { vertical-align: middle; }

/* Colonnes de cases resserrées : le nom doit garder la place, les cases n'ont
   besoin que de leur largeur. */
.matrix-col { width: 88px; text-align: center; font-size: .75rem; line-height: 1.3; }
.matrix-cell { text-align: center; }
.matrix-cell input { width: 18px; height: 18px; cursor: pointer; }
.matrix select { min-width: 150px; }
.matrix-actions { white-space: nowrap; text-align: right; }
.matrix-actions form { display: inline; }
.matrix tr.is-inactive td { opacity: .55; }
.matrix tr:hover td { background: var(--ink-50); }
/* --- Barre d'édition contextuelle ------------------------------------------- */

/* Discrète et collée sous l'en-tête : c'est un outil de travail posé sur la
   page, pas un élément du site. */
.edit-bar { background: var(--ink-50); border-bottom: 1px solid var(--ink-200); }
.edit-bar-inner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 16px; font-size: .8125rem;
}
.edit-bar-label {
  text-transform: uppercase; letter-spacing: .1em; font-weight: 500;
  color: var(--ink-500); font-size: .6875rem;
}
.edit-bar a { color: var(--brand-800); text-decoration: none; }

/* --- Petits écrans ----------------------------------------------------------
 *
 * Les règles ci-dessus font déjà passer les grilles sur une colonne. Ce bloc
 * traite ce qui reste : les espacements calculés pour un écran large, qui
 * mangent la moitié d'un téléphone, et les rangées trop serrées pour le doigt.
 */
@media (max-width: 640px) {
  /* 24 px de marge de chaque côté sur 360 px de large, il ne reste plus grand
     chose pour le contenu. */
  .card { padding: 16px; }

  .hero-inner { padding-top: 56px; padding-bottom: 56px; }
  .hero p { margin-top: 16px; font-size: 1rem; }
  .hero-actions { margin-top: 28px; }
  /* Deux boutons côte à côte sur 360 px se réduisent à des étiquettes coupées :
     pleine largeur, l'un sous l'autre. */
  .hero-actions .btn { flex: 1 1 100%; }

  .section { padding-top: 40px; padding-bottom: 40px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-head h2 { font-size: 1.375rem; }

  .article { padding: 32px 16px; }
  .article h1 { font-size: 1.625rem; }

  .section-layout { padding: 24px 16px; gap: 20px; }
  .toolbar { flex-wrap: wrap; }

  /* Le couple libellé / valeur passe l'un sous l'autre : à 1fr 2fr, la colonne
     de gauche tombait à une soixantaine de pixels et coupait chaque libellé. */
  .data-list > div { grid-template-columns: 1fr; gap: 2px; }
  .data-list dt { font-size: .8125rem; }

  .pager { flex-wrap: wrap; gap: 12px; }
  .footer-inner { padding: 32px 16px; gap: 20px; }
  .footer-logo { width: 56px; }
  .cover-preview img { width: 96px; height: 60px; }
  .row-link { padding: 12px 16px; }

  /* Cases à cocher au doigt : 18 px est une cible confortable à la souris,
     beaucoup moins au pouce. */
  .matrix-cell input, .choice input, .check-box input { width: 22px; height: 22px; }
}
.edit-bar a:hover { text-decoration: underline; }
/* --- Temps de parole --------------------------------------------------------- */

/* Sur la carte de format : l'information décisive du choix, distinguée de
   l'explication qui la précède. */
.choice-timing {
  display: block; margin-top: 4px;
  font-size: .8125rem; font-weight: 500; color: var(--brand-800);
}
.choice-card:has(input:checked) .choice-timing { color: var(--brand-900, var(--brand-800)); }

.timings .data-list dd strong { font-variant-numeric: tabular-nums; }

/* --- Récapitulatif de confirmation ------------------------------------------ */

/* Deux colonnes : la question, puis la réponse. La réponse est ce qu'on vient
   vérifier, elle prend donc le poids visuel. */
.summary { display: grid; grid-template-columns: minmax(140px, 32%) 1fr; gap: 0; margin: 0; }
.summary dt,
.summary dd {
  margin: 0; padding: 10px 0;
  border-top: 1px solid var(--ink-100);
  font-size: .875rem;
}
.summary dt { color: var(--ink-500); padding-right: 16px; }
.summary dd { color: var(--ink-900); font-weight: 500; overflow-wrap: anywhere; }
.summary dt:first-of-type,
.summary dt:first-of-type + dd { border-top: 0; }

/* Sous 560 px, deux colonnes écraseraient les réponses longues : on empile,
   et la bordure ne sépare plus que les paires. */
@media (max-width: 560px) {
  .summary { grid-template-columns: 1fr; }
  .summary dt { padding-bottom: 0; border-top-width: 1px; }
  .summary dd { padding-top: 2px; border-top: 0; }
}


/* --- Page du colloque -------------------------------------------------------- */
.conference-hero { border-bottom: 1px solid var(--ink-200); background: #fff; }
.conference-hero .wrap { max-width: 840px; padding: 56px 16px; }

.conference-eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-700);
}
.conference-title { margin-top: 12px; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; line-height: 1.15; }
.conference-subtitle { margin-top: 16px; font-size: 1.125rem; color: var(--ink-600); }

/* Date et lieu en vis-à-vis, sur un aplat qui les détache du titre : ce sont
   les deux renseignements qu'on vient chercher en premier. */
.conference-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px; margin-top: 32px; padding: 20px;
  background: var(--ink-50); border-radius: var(--radius);
}
.conference-facts dt {
  font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-500);
}
.conference-facts dd { margin: 6px 0 0; font-weight: 500; color: var(--ink-900); }
.conference-facts dd.muted { font-weight: 400; }
@media (max-width: 560px) { .conference-facts { grid-template-columns: 1fr; } }

.conference-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* Un seul pas entre les cartes, décidé ici : les marges posées carte par carte
   donnaient 24 px ici, 40 px là, sans raison lisible. */
.conference-body { max-width: 840px; padding: 40px 16px 56px; display: grid; gap: 20px; }
.conference-body .prose > :first-child { margin-top: 0; }

/* --- Relecture avant dépôt ---------------------------------------------------- */

/* Les étapes restent dans la page pour que leurs champs repartent avec la
   confirmation ; seul l'affichage les replie. « display: none » plutôt que
   l'attribut « hidden » : un champ masqué est toujours envoyé, un champ
   désactivé ne l'est pas. */
.stepper.is-confirming .step,
.stepper.is-confirming .stepper-progress { display: none; }

.confirm-panel {
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.confirm-panel h2 { font-size: 1.125rem; font-weight: 600; }
.confirm-panel .hint { display: block; margin-top: 4px; margin-bottom: 4px; }