/* ==========================================================================
   JEDS' 2026 — feuille de style
   Construite sur Open Props (design tokens) : assets/vendor/open-props.min.css
   Les échelles --size-*, --font-weight-*, --border-size-* viennent de la
   librairie ; tout le reste est spécifique à l'événement.

   Parti pris (v6, novembre 2026) : un programme de colloque typographié.
   Papier blanc, encre chaude, une seule couleur : le vert du logo de
   l'université, employé comme une encre — numéros de section, soulignés de
   liens, italiques de rubrique — et jamais comme une surface (pas de bouton
   plein, pas de bandeau, pas de pied de page vert : c'est ce qui rendait la
   v5 « comme tous les sites »). Le texte courant est composé dans une romaine de publication
   de lecture longue à axe optique (Literata : dessinée pour lire des livres
   à l'écran, les grands corps s'affinent d'eux-mêmes), la signalétique dans
   une linéale conçue pour la lisibilité (Atkinson Hyperlegible). Les sections
   sont numérotées dans la marge, comme dans un article.

   Il n'y a ni pastille, ni étiquette en capitales espacées, ni trame, ni
   dégradé, ni ombre, ni angle arrondi (hors la vignette ronde de
   l'intervenant, demandée). Les portraits sont en noir et blanc.
   ========================================================================== */

/* Mise en page : une seule colonne de lecture (1000 px), les numéros de
   section pendent dans la marge gauche dès que l'écran laisse la place. */
:root {
  /* --- Papier et encres ------------------------------------------------- */
  --paper:    #FFFFFF;
  --paper-2:  #F4F2ED;   /* ouverture + un rang de section sur deux */
  --ink:      #1C1A17;   /* titres */
  --ink-2:    #3B3733;   /* texte courant */
  --muted:    #6B655C;   /* secondaire */
  --rule:     #D3CEC4;
  --rule-soft:#E6E2DA;

  /* --- Le vert du logo Université Oran 1, en encre seulement -------------
     numéros de section, soulignés, sigles, type de séance, ligne de rubrique */
  --green:      #0C743C;   /* valeur dominante relevée dans le logo */
  --green-deep: #0A5C36;   /* survol */

  /* --- Emplacements à compléter : gris, sans fond, en pointillés -------- */
  --ph-line: #B5AFA5;    /* le pointillé, entre filet et gris secondaire */
  --ph-ink:  var(--muted);

  /* --- Typographie ------------------------------------------------------ */
  --font-text: "Literata", Georgia, "Times New Roman", serif;
  --font-ui:   "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1000px;      /* colonne unique : mesure de lecture confortable */
  --text-size: 1.12rem;  /* texte courant : même corps et même interligne partout */
  --text-leading: 1.75;
  --gutter: 4.5rem;    /* marge où pendent les numéros de section */

  /* Le site assume un seul monde visuel : on épingle color-scheme pour que
     le normalize d'Open Props ne bascule pas la page selon le système. */
  color-scheme: light;
}

/* ==========================================================================
   Base
   ========================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-text);
  font-size: 1.15rem;          /* ~18.5px — public étudiant et enseignant */
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-text);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: 0;
  font-weight: var(--font-weight-4);
  text-wrap: balance;
  margin: 0;
}

/* Open Props borne la mesure de li, dd, dt, small et des titres (45ch, 20ch…).
   Ici ces éléments servent aussi de conteneurs de mise en page : on annule la
   borne, et la mesure de lecture est fixée explicitement là où elle compte. */
:where(li, dd, dt, small, h1, h2, h3, h4, h5, h6) { max-inline-size: none; }
p { margin: 0; max-inline-size: 68ch; }

/* Texte courant — une seule règle pour tous les paragraphes à lire : À propos,
   biographies, résumés, LITIO, atelier, Participer. Pleine colonne, justifié,
   avec césure (lang="fr" sur la page, lang="en" sur les résumés), même corps
   et même interligne : chaque bloc s'aligne sur les deux bords de la colonne.
   Sous 40 rem, la justification creuse des lézardes : alignement à gauche. */
.lead, .prose p, .versant p, .abstract-body, .litio-grid p,
.participer p, .section-head .lede, .footer p {
  text-align: justify; hyphens: auto;
}
.prose p:not(.lead), .versant p, .abstract-body p, .litio-grid p, .participer p {
  max-inline-size: none; font-size: var(--text-size); line-height: var(--text-leading);
}
.lead, .section-head .lede { max-inline-size: none; }
@media (width < 40rem) {
  .lead, .prose p, .versant p, .abstract-body, .litio-grid p,
  .participer p, .section-head .lede, .footer p { text-align: start; }
}

/* Liens : encre, souligné vert — le lien ne change pas de couleur, il est
   simplement souligné, comme dans un document composé. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { color: var(--green); text-decoration-color: var(--green-deep); }
img { display: block; max-inline-size: 100%; }
/* [hidden] l'emporte toujours : sans cela, un display (grid, flex) déclaré plus bas le
   réafficherait — c'est le cas du formulaire, masqué une fois les inscriptions closes. */
[hidden] { display: none !important; }
ul, ol { margin: 0; padding: 0; }
sup { font-size: .6em; line-height: 0; }

.wrap { inline-size: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--size-3);
  z-index: 20; background: var(--paper); color: var(--ink);
  padding: var(--size-2) var(--size-4); border: var(--border-size-1) solid var(--ink);
  font-family: var(--font-ui);
}
.skip:focus { inset-block-start: var(--size-3); }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--green); outline-offset: 3px;
}

/* --- Sections ----------------------------------------------------------- */
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* ---- Alternance de fond (retirable d'un bloc) --------------------------
   Une teinte papier un rang sur deux, pour se repérer dans la page sans
   ajouter de couleur. L'ouverture compte comme première <section>, donc les
   rangs pairs sont : À propos, Intervenants, Préparer l'atelier, LITIO, Participer. */
main > .section:nth-of-type(even) { background: var(--paper-2); }
/* ---- fin de l'alternance ---------------------------------------------- */

/* Titre de section numéroté. Le numéro pend dans la marge gauche quand
   l'écran laisse au moins --gutter de chaque côté de la colonne ; sinon il
   précède simplement le titre. */
.section-head { position: relative; margin-block-end: clamp(2rem, 4vw, 3rem); }
.section-head h2 {
  font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.6rem);
  display: flex; align-items: baseline; gap: .55em;
}
.num {
  color: var(--green);
  font-variant-numeric: tabular-nums;
  flex: none;
}
@media (width >= 76rem) {
  .num { position: absolute; inset-inline-start: calc(-1 * var(--gutter)); }
}
.section-head .lede {
  color: var(--muted); font-style: italic;
  margin-block-start: var(--size-3); font-size: 1.1rem;
}

/* Pictogrammes — trait fin vert, au poids des filets de la page (option 1
   retenue le 6 novembre). Figuratifs, toujours décoratifs (aria-hidden) : le
   texte qui suit dit tout. Taille par --ico ; .f pour les petites parties pleines. */
.ico {
  inline-size: var(--ico, 1.5em); block-size: var(--ico, 1.5em); flex: none; overflow: visible;
  fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter;
}
.ico .f { fill: var(--green); stroke: none; }

/* Ligne « intervenant » : vignette ronde + nom. Même traitement dans le
   programme et dans les résumés ; seules la taille de la vignette (--face)
   et celle du nom (--byline-name) changent selon le contexte. */
.byline { display: flex; align-items: center; gap: var(--size-3); flex-wrap: wrap; max-inline-size: none; }
.byline img {
  inline-size: var(--face, 2.75rem); block-size: var(--face, 2.75rem);
  border-radius: 50%; object-fit: cover; object-position: center top;
  filter: grayscale(1);
}
.byline b { font-size: var(--byline-name, 1.15rem); font-weight: var(--font-weight-6); color: var(--ink); }
.byline span { font-family: var(--font-ui); font-size: .9rem; color: var(--muted); }

/* ==========================================================================
   Navigation — logo de l'université + titre de l'édition
   ========================================================================== */
.nav {
  position: sticky; inset-block-start: 0; z-index: 10;
  background: var(--paper); border-block-end: var(--border-size-1) solid var(--rule);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--size-4);
  min-block-size: 4.5rem; padding-block: var(--size-2); position: relative;
}

.brand { display: flex; align-items: center; gap: var(--size-3); text-decoration: none; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
.brand-logo { block-size: 2.6rem; inline-size: auto; }
.brand-text {
  display: grid; gap: .05rem; line-height: 1.15; font-family: var(--font-ui);
  padding-inline-start: var(--size-3); border-inline-start: var(--border-size-1) solid var(--rule);
  white-space: nowrap;
}
.brand-text b { font-weight: var(--font-weight-7); font-size: 1.05rem; }
.brand-text span { font-size: .82rem; color: var(--muted); }

@media (width < 34rem) {
  .brand-logo { block-size: 2.5rem; }
  .brand-text { padding-inline-start: var(--size-3); }
  .brand-text b { font-size: .95rem; }
}

/* La barre mesurait 1 018 px pour une colonne de 1 000 : elle passait à la ligne sur tous les
   écrans de bureau. Resserrée à ~965 px (mesuré avec la police réelle), et jamais de retour à la
   ligne dans un libellé ; en dessous de 66 rem, le menu replié prend le relais. */
.nav-links { display: flex; align-items: center; gap: 1rem; list-style: none; font-family: var(--font-ui); }
.nav-links a {
  color: var(--ink-2); text-decoration: none; font-size: .9rem; white-space: nowrap;
  padding-block: .25rem; border-block-end: var(--border-size-1) solid transparent;
}
.nav-links a:hover { color: var(--green); border-block-end-color: var(--green); }
/* « Participer » : l'appel à l'action de la barre — un cadre vert, pas un aplat */
.nav-links .nav-cta a {
  color: var(--green); font-weight: var(--font-weight-7);
  padding: .4rem .75rem; border: var(--border-size-1) solid var(--green);
}
.nav-links .nav-cta a:hover { color: var(--green-deep); border-color: var(--green-deep); background: var(--paper-2); }

.nav-toggle { display: none; background: none; border: var(--border-size-1) solid var(--rule); color: var(--ink); padding: .4rem; cursor: pointer; }

@media (width < 66rem) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute; inset-inline: 0; inset-block-start: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-block-end: var(--border-size-1) solid var(--rule);
  }
  .nav-links.is-open { display: flex; }
  .nav-links li + li { border-block-start: var(--border-size-1) solid var(--rule-soft); }
  .nav-links a { padding: var(--size-3) var(--size-4); border: 0; font-size: 1.05rem; }
  .nav-links .nav-cta a { border: 0; padding: var(--size-3) var(--size-4); }
}

/* ==========================================================================
   Ouverture — la couverture du programme
   ========================================================================== */
.hero {
  background: var(--paper-2);
  border-block-end: var(--border-size-1) solid var(--ink);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
}
/* En-tête de l'ouverture : le sigle de l'édition et le laboratoire, comme le
   « JEDS' 2024 » et le logo LITIO de l'édition précédente. Le logo est celui du
   site 2024, recoloré dans le vert du site (il était blanc, pour un fond sombre). */
.hero-masthead {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-3) var(--size-6);
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}
.hero-sigle { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1; color: var(--ink); max-inline-size: none; }
.hero-lab {
  display: flex; align-items: center; gap: var(--size-3); max-inline-size: none;
  padding-inline-start: var(--size-6); border-inline-start: var(--border-size-1) solid var(--rule);
  font-family: var(--font-ui); font-size: .9rem; line-height: 1.35; color: var(--muted);
}
.hero-lab img { block-size: 3.2rem; inline-size: auto; }
.hero-lab span { white-space: nowrap; }   /* deux lignes, coupées par le <br> */
@media (width < 34rem) { .hero-lab { padding-inline-start: 0; border-inline-start: 0; } .hero-lab span { white-space: normal; } }

/* La ligne de rubrique de la couverture : en vert, comme un titre courant */
.hero-kicker {
  font-style: italic; color: var(--green);
  font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem); max-inline-size: none;
}
.hero h1 {
  font-size: clamp(2.3rem, 1.1rem + 4.2vw, 4.3rem);
  font-weight: 450; font-optical-sizing: auto;
  line-height: 1.04; letter-spacing: -.01em;
  max-inline-size: 25ch; margin-block: var(--size-5) var(--size-4);
}
/* L'ombrelle du titre (« Intelligence Artificielle : ») sur sa propre ligne,
   plus petite : les deux sujets qui suivent gardent la taille d'affiche. */
.hero h1 .h1-umbrella { display: block; font-size: .52em; letter-spacing: 0; margin-block-end: .3em; }

/* Le titre en trois lignes centrées : les deux sujets en demi-gras, reliés par un « et »
   discret, en italique vert — la seule couleur du site. L'en-tête JEDS' 2026 / LITIO, le
   surtitre et les deux liens de l'ouverture sont centrés avec lui, comme une page de titre ;
   la bande des faits (dates, lieu, intervenants) garde ses trois colonnes. */
.hero-masthead { justify-content: center; }
.hero h1, .hero-kicker { text-align: center; margin-inline: auto; }
.hero h1 { max-inline-size: none; }
.hero h1 > span { display: block; }
.hero h1 .h1-line { font-weight: 600; letter-spacing: -.015em; }
.hero h1 .h1-et { font-size: .5em; font-style: italic; font-weight: 400; color: var(--green); margin-block: .12em .08em; }

/* « Machine Learning Quantique » sur une seule ligne, téléphone compris : la taille du titre
   suit la largeur de la colonne (unités cqi, la colonne de l'ouverture étant le conteneur).
   La ligne mesure 14,2 em en Literata demi-gras ; diviser par 14,6 laisse ~3 % de marge
   (crénage, police de secours). Sur grand écran, le clamp() précédent reste le plus petit et
   rien ne change. L'ombrelle et le « et » gardent une taille lisible quand le titre rapetisse.
   Sans unités de conteneur, la déclaration est ignorée : le titre revient à la ligne, comme avant. */
.hero > .wrap { container-type: inline-size; }
.hero h1 { font-size: min(clamp(2.3rem, 1.1rem + 4.2vw, 4.3rem), 100cqi / 14.6); }
.hero h1 .h1-umbrella { font-size: max(.52em, 1rem); }
.hero h1 .h1-et { font-size: max(.5em, 1rem); }
.hero-actions { justify-content: center; }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--size-3) var(--size-6);
  margin-block-start: var(--size-7); font-family: var(--font-ui); max-inline-size: none;
}
.hero-actions a { font-weight: var(--font-weight-7); font-size: 1.05rem; }

/* Bandeau d'informations : trois colonnes séparées par des filets */
.facts {
  display: grid; margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  border-block-start: var(--border-size-1) solid var(--ink);
}
@media (width >= 48rem) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact { padding-block: var(--size-4) 0; }
@media (width >= 48rem) {
  .fact { padding-inline-end: var(--size-5); }
  .fact + .fact { padding-inline-start: var(--size-5); border-inline-start: var(--border-size-1) solid var(--rule); }
}
@media (width < 48rem) {
  .fact { padding-block: var(--size-4); }
  .fact + .fact { border-block-start: var(--border-size-1) solid var(--rule-soft); }
}
.fact dt { font-family: var(--font-ui); font-size: .88rem; color: var(--muted); margin-block-end: .35rem; }
.fact dd { margin: 0; font-size: 1.3rem; color: var(--ink); line-height: 1.3; }
.fact dd span { display: block; font-size: 1rem; font-style: italic; color: var(--muted); margin-block-start: .2rem; }
.fact dd + dd { margin-block-start: var(--size-3); }   /* un intervenant par entrée */

/* ==========================================================================
   À propos
   ========================================================================== */
/* La thématique en deux colonnes, une par versant du titre — donc par cours.
   Deux colonnes se justifient ici : ce sont deux sujets parallèles. */
.versants {
  display: grid; margin-block-start: var(--size-6);
  border-block-start: var(--border-size-1) solid var(--ink);
}
.versant { display: grid; gap: var(--size-3); align-content: start; padding-block: var(--size-5); }
@media (width >= 48rem) {
  .versants { grid-template-columns: 1fr 1fr; }
  .versant { padding-inline-end: var(--size-6); }
  .versant + .versant { padding-inline: var(--size-6) 0; border-inline-start: var(--border-size-1) solid var(--rule); }
}
@media (width < 48rem) { .versant + .versant { border-block-start: var(--border-size-1) solid var(--rule-soft); } }
.versant h3 { font-size: 1.5rem; display: flex; align-items: center; gap: .5em; }
.versant h3 .ico { --ico: 1.45em; }
.versant strong { color: var(--ink); font-weight: var(--font-weight-6); }
.versant .versant-cours { font-family: var(--font-ui); font-size: .95rem; color: var(--muted); text-align: start; }

/* Les objectifs, repliés sous un titre qu'on ouvre d'un clic. Le normalize
   d'Open Props fait du <details> un bloc gris arrondi et du <summary> un
   bouton gras décalé par des marges négatives : tout est remis à plat. */
.pli {
  margin-block-start: var(--size-2); padding: 0; border-radius: 0; background: none;
  border-block: var(--border-size-1) solid var(--rule);
}
.pli summary {
  margin: 0; padding: var(--size-4) 0; border-radius: 0; background: none;
  font-size: 1.3rem; font-weight: var(--font-weight-4); color: var(--ink); cursor: pointer;
}
.pli[open] > summary { margin: 0; }
.pli summary::marker { color: var(--green); }
.pli summary:hover { color: var(--green); }
.pli > .prose { padding-block-end: var(--size-5); }
/* le pli a déjà son filet du bas : pas de second filet au-dessus des mots clés */
.pli + .prose .keywords { border-block-start: 0; padding-block-start: 0; }

.lead { font-size: 1.32rem; color: var(--ink); line-height: 1.45; }
.prose p + p { margin-block-start: var(--size-4); }
.prose h3 { font-size: 1.3rem; margin-block: var(--size-6) var(--size-3); }
.prose strong { color: var(--ink); font-weight: var(--font-weight-6); }
/* Mots clés : libellé en italique, liste en italique gras — comme sur JEDS' 2024 */
.keywords { margin-block-start: var(--size-6); padding-block-start: var(--size-4); border-block-start: var(--border-size-1) solid var(--rule); font-size: 1.05rem; }
.keywords i { color: var(--muted); }
.keywords b { font-style: italic; font-weight: var(--font-weight-6); color: var(--ink-2); }

/* ==========================================================================
   Programme — les deux journées à la suite, pas d'onglet
   ========================================================================== */
.day + .day { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }
.day-title {
  font-size: 1.55rem; margin-block-end: var(--size-4);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--size-2) var(--size-4);
}
.day-venue { font-family: var(--font-ui); font-size: .95rem; color: var(--muted); }

.timeline { list-style: none; border-block-start: var(--border-size-1) solid var(--ink); }
.slot {
  display: grid; gap: var(--size-2) var(--size-6); padding-block: var(--size-5);
  border-block-end: var(--border-size-1) solid var(--rule-soft);
}
@media (width >= 48rem) { .slot { grid-template-columns: 9rem 1fr; } }
/* « .slot .slot-time » et non « .slot-time » : la règle générale « .slot p »
   plus bas est plus spécifique qu'une classe seule et grisait l'heure. */
.slot .slot-time {
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  font-size: 1rem; color: var(--ink); padding-block-start: .3rem; max-inline-size: none;
}
.slot-time .ph { display: inline-block; margin-block-start: .35rem; }
.slot-body { display: grid; gap: var(--size-2); justify-items: start; }
.slot-body > * { max-inline-size: 100%; }
.slot h4 { font-size: 1.35rem; font-weight: var(--font-weight-5); }
/* le type de séance (Cours, Atelier…) : plus grand que le texte courant, pour se lire d'abord */
.slot .slot-kind { font-style: italic; color: var(--green); font-size: 1.3rem; display: flex; align-items: center; gap: .45em; }
.slot-kind .ico { --ico: 1.35em; }
.slot .who { --face: 1.6rem; --byline-name: 1.05rem; gap: .55rem; }
.slot p { font-size: 1.02rem; color: var(--muted); }
/* « Lire le résumé de l'intervention » et liens voisins : plus visibles que le texte gris
   qui les entoure — vert, gras, un peu plus grands */
.slot .slot-links { font-family: var(--font-ui); font-size: 1.08rem; font-weight: var(--font-weight-7); color: var(--green); }
.slot .slot-links a { color: var(--green); text-decoration-thickness: 1.5px; }
.slot .slot-links a:hover { color: var(--green-deep); }
.slot--break h4 { font-size: 1.05rem; font-weight: var(--font-weight-4); font-style: italic; color: var(--muted); display: flex; align-items: center; gap: .45em; }
.slot--break h4 .ico { --ico: 1.35em; }
.slot--ph h4 { color: var(--ph-ink); font-weight: var(--font-weight-4); }

/* ==========================================================================
   Intervenants
   ========================================================================== */
/* Une fiche par intervenant : portrait à gauche, faits en lignes libellé /
   valeur (comme « Préparer l'atelier »), biographie complète repliée. */
.fiches { border-block-start: var(--border-size-1) solid var(--ink); }
.fiche-speaker {
  display: grid; gap: var(--size-4) var(--size-6);
  padding-block: var(--size-6); border-block-end: var(--border-size-1) solid var(--rule);
}
@media (width >= 42rem) { .fiche-speaker { grid-template-columns: 8rem 1fr; } }
.fiche-photo {
  inline-size: 8rem; block-size: 10rem;
  object-fit: cover; object-position: center top;
  background: var(--paper-2); filter: grayscale(1);
}
.fiche-body { min-inline-size: 0; }
.fiche-body h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); margin-block-end: var(--size-3); }

.fiche-facts { margin: 0; border-block-start: var(--border-size-1) solid var(--rule-soft); }
.fiche-facts > div {
  display: grid; gap: var(--size-1) var(--size-5);
  padding-block: var(--size-3); border-block-end: var(--border-size-1) solid var(--rule-soft);
}
@media (width >= 42rem) { .fiche-facts > div { grid-template-columns: 9rem 1fr; } }
.fiche-facts dt { font-family: var(--font-ui); font-size: .9rem; color: var(--muted); padding-block-start: .2rem; }
.fiche-facts dd { margin: 0; font-size: 1.05rem; color: var(--ink); line-height: 1.5; }
.fiche-links { display: flex; flex-wrap: wrap; gap: var(--size-1) var(--size-4); font-family: var(--font-ui); }
.fiche-links a { font-size: .95rem; }
/* le pli s'appuie sur le filet de la dernière ligne : pas de double filet */
.fiche-body .pli { margin-block-start: 0; border-block-start: 0; }

/* Les interventions d'un intervenant : type et date au-dessus, titre dessous */
.talk-list { list-style: none; display: grid; gap: var(--size-3); }
.talk-list li { padding-inline-start: 0; }   /* normalize décale chaque li */
.talk-list small { display: block; font-family: var(--font-ui); font-size: .88rem; color: var(--muted); margin-block-end: .15rem; }
.talk-list strong { font-size: 1.1rem; font-weight: var(--font-weight-5); color: var(--ink); line-height: 1.35; }

/* ==========================================================================
   Résumés
   ========================================================================== */
.abstracts { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.abstract { border-block-start: var(--border-size-1) solid var(--ink); padding-block-start: var(--size-5); }
.abstract h3 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); }

/* Intervenant : vignette ronde + nom, comme sur JEDS' 2024 */
.abstract .by { margin-block: var(--size-4) var(--size-5); }

/* Texte large, aéré, justifié — mots clés en gras, comme sur JEDS' 2024 */
.abstract-body p + p { margin-block-start: var(--size-4); }
.abstract-body strong { color: var(--ink); font-weight: var(--font-weight-6); }
.abstract-body .abstract-keywords { font-size: 1.02rem; color: var(--muted); text-align: start; }
.abstract-keywords b { font-style: italic; font-weight: var(--font-weight-6); color: var(--ink-2); margin-inline-end: .35em; }

/* ==========================================================================
   Préparer l'atelier — une phrase et le guide
   ========================================================================== */
/* Le lien vers le guide PDF : le seul appel à l'action de la section */
.guide-doc {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--size-1) var(--size-4);
  margin-block-start: var(--size-5); max-inline-size: none; font-family: var(--font-ui);
}
.guide-doc a { font-weight: var(--font-weight-7); font-size: 1.08rem; }
.guide-doc span { font-size: .95rem; color: var(--muted); }
.guide-doc .ico { --ico: 1.6em; align-self: center; }

/* ==========================================================================
   Posters des doctorants — liste numérotée par compteur CSS
   ========================================================================== */
.posters { list-style: none; counter-reset: poster; border-block-start: var(--border-size-1) solid var(--ink); }
.poster {
  display: grid; grid-template-columns: 3rem 1fr; column-gap: var(--size-4); align-items: start;
  padding-block: var(--size-4); border-block-end: var(--border-size-1) solid var(--rule-soft);
}
.poster::before {
  counter-increment: poster; content: counter(poster);
  grid-row: 1 / span 4; padding-block-start: .3rem;
  font-family: var(--font-ui); font-variant-numeric: tabular-nums; color: var(--green); font-size: 1rem;
}
.poster > p { grid-column: 2; max-inline-size: none; }
.poster-title { font-size: 1.2rem; color: var(--ink); }
.poster-who { font-size: 1rem; color: var(--ink-2); margin-block-start: .3rem; }
/* la forme de la présentation : italique vert, comme le type de séance du programme */
.poster-kind { font-style: italic; color: var(--green); font-size: 1rem; }
.poster-sup { font-family: var(--font-ui); font-size: .9rem; color: var(--muted); }

/* ==========================================================================
   LITIO + équipes
   ========================================================================== */
.litio-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }

.litio-facts { list-style: none; margin-block-start: var(--size-6); border-block-start: var(--border-size-1) solid var(--rule); }
.litio-facts li { display: grid; gap: var(--size-1) var(--size-5); padding-block: var(--size-3); border-block-end: var(--border-size-1) solid var(--rule); }
@media (width >= 34rem) { .litio-facts li { grid-template-columns: 14rem 1fr; align-items: baseline; } }
.litio-facts .k { font-family: var(--font-ui); font-size: .88rem; color: var(--muted); }
.litio-facts .v { font-weight: var(--font-weight-6); color: var(--ink); font-size: 1.05rem; }

.teams { list-style: none; border-block-start: var(--border-size-1) solid var(--ink); margin-block-start: var(--size-4); }
.team { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--size-4); align-items: baseline; padding-block: var(--size-4); border-block-end: var(--border-size-1) solid var(--rule); }
.team-sigle { font-family: var(--font-ui); font-size: 1.05rem; font-weight: var(--font-weight-7); color: var(--green); }
.team h4 { font-size: 1.15rem; font-weight: var(--font-weight-5); margin-block-end: .2rem; }
.team small { font-family: var(--font-ui); font-size: .9rem; color: var(--muted); }
.team small b { color: var(--ink-2); font-weight: var(--font-weight-4); }

/* ==========================================================================
   Comité de pilotage
   ========================================================================== */
/* 22 noms : en colonnes de journal (deux, puis trois), lues de haut en bas comme une liste
   imprimée — l'ordre reçu (professeurs, puis docteurs) reste lisible. */
.comite {
  list-style: none; columns: 1; column-gap: clamp(1.5rem, 4vw, 3rem);
  border-block-start: var(--border-size-1) solid var(--ink);
}
@media (width >= 44rem) { .comite { columns: 2; } }
@media (width >= 60rem) { .comite { columns: 3; } }
.comite li {
  padding-block: var(--size-3); padding-inline-start: 0; break-inside: avoid;
  border-block-end: var(--border-size-1) solid var(--rule-soft);
}
.comite b { display: block; font-size: 1.12rem; font-weight: var(--font-weight-6); color: var(--ink); }
/* sous le nom : le rôle éventuel, puis l'établissement, chacun sur sa ligne */
.comite small { display: block; font-family: var(--font-ui); font-size: .88rem; color: var(--muted); }
.comite small + small { margin-block-start: .1rem; }

/* ==========================================================================
   Participer
   ========================================================================== */
.participer p + p { margin-block-start: var(--size-4); }
/* L'attestation : une information que les participants cherchent. Encadrée d'un filet vert,
   comme le bouton « Participer » de la navigation — trait, pas d'aplat de couleur —, sur fond
   blanc, texte plus grand, mention en gras vert. */
.participer .certificat {
  display: flex; align-items: center; gap: var(--size-4); text-align: start;
  inline-size: fit-content; max-inline-size: 100%;
  margin-block-start: var(--size-5); padding: var(--size-4) var(--size-5);
  border: var(--border-size-1) solid var(--green); background: var(--paper);
  font-size: 1.2rem; line-height: 1.45; color: var(--ink);
  hyphens: manual;                 /* jamais « participa-tion » */
}
.certificat strong { color: var(--green); font-weight: var(--font-weight-7); }
.certificat .ico { --ico: 2.6rem; flex: none; }
@media (width < 34rem) {
  .participer .certificat { gap: var(--size-3); padding: var(--size-3) var(--size-4); font-size: 1.12rem; }
  .certificat .ico { --ico: 2.1rem; }
}
.contact { margin-block-start: var(--size-7); padding-block-start: var(--size-5); border-block-start: var(--border-size-1) solid var(--rule); font-size: 1rem; max-inline-size: none; }

/* Formulaire d'inscription — les champs de JEDS' 2024 (nom, e-mail,
   établissement, laboratoire) et les jours de présence. Champs à angles
   droits, filet d'un pixel, fond blanc sur le papier teinté ; le bouton est un
   cadre d'encre, pas un aplat. Tout est déclaré explicitement : le normalize
   d'Open Props arrondit les champs, les grise, et les passe en quasi-noir
   quand le système est en mode sombre. */
.inscription {
  display: grid; gap: var(--size-5);
  margin-block-start: var(--size-7); padding-block-start: var(--size-5);
  border-block-start: var(--border-size-1) solid var(--ink);
}
@media (width >= 42rem) { .inscription { grid-template-columns: 1fr 1fr; } }
.inscription > :not(.field), .field--wide { grid-column: 1 / -1; }

.form-head { display: grid; gap: var(--size-1); }
.form-head h3 { font-size: 1.3rem; }
.form-head p { font-family: var(--font-ui); font-size: .92rem; color: var(--muted); }

.field { display: grid; gap: var(--size-2); min-inline-size: 0; }
.field label, .choices legend { font-family: var(--font-ui); font-weight: var(--font-weight-7); font-size: .98rem; color: var(--ink); }
.field input {
  inline-size: 100%; padding: .7rem .85rem;
  font-family: var(--font-ui); font-size: 1.05rem; color: var(--ink);
  background: var(--paper); border: var(--border-size-1) solid var(--rule); border-radius: 0;
}
.field input:hover { border-color: var(--muted); }
.field input:focus-visible { border-color: var(--green); outline-offset: 0; }

.choices { display: grid; gap: var(--size-2); margin: 0; padding: 0; border: 0; border-radius: 0; min-inline-size: 0; }
.choices legend { padding: 0; margin-block-end: var(--size-2); }
/* case + un seul bloc de texte : sans le <span>, chaque mot en gras deviendrait un élément flex */
.choices label { display: flex; align-items: baseline; gap: var(--size-3); font-size: var(--text-size); cursor: pointer; }
.choices label b { color: var(--ink); font-weight: var(--font-weight-6); }
.choices input { flex: none; inline-size: 1.15rem; block-size: 1.15rem; margin: 0; accent-color: var(--green); translate: 0 .18rem; }
.choices .choices-hint { font-family: var(--font-ui); font-size: .92rem; color: var(--muted); }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-3) var(--size-5); }
.form-actions button {
  padding: .75rem 1.5rem; cursor: pointer;
  font-family: var(--font-ui); font-weight: var(--font-weight-7); font-size: 1.05rem;
  color: var(--ink); background: transparent; border: var(--border-size-1) solid var(--ink); border-radius: 0;
}
.form-actions button:hover { color: var(--green); border-color: var(--green); }
.form-actions button:disabled { color: var(--muted); border-color: var(--rule); cursor: progress; }
.form-status { font-family: var(--font-ui); font-size: .98rem; color: var(--muted); max-inline-size: none; }
.form-status:empty { display: none; }
.form-status[data-state="ok"] { color: var(--green); font-weight: var(--font-weight-7); }
.form-status[data-state="err"] { color: var(--ink); font-weight: var(--font-weight-7); }
/* À la place du formulaire, une fois l'échéance passée (assets/app.js) */
.form-closed {
  margin-block-start: var(--size-7); padding-block-start: var(--size-5); max-inline-size: none;
  border-block-start: var(--border-size-1) solid var(--ink); font-size: 1.2rem; color: var(--ink);
}

/* Programme : la mention du certificat, sous les deux journées */
.programme-note { margin-block-start: var(--size-6); font-style: italic; color: var(--muted); display: flex; align-items: center; gap: .55em; max-inline-size: none; }
.programme-note .ico { --ico: 1.6em; }
.programme-note strong { color: var(--green); font-weight: var(--font-weight-6); font-style: normal; }

/* ==========================================================================
   Pied de page — même papier, un filet d'encre
   ========================================================================== */
.footer { border-block-start: var(--border-size-1) solid var(--ink); color: var(--muted); padding-block: var(--size-8) var(--size-6); font-size: 1rem; }
.footer-grid { display: grid; gap: var(--size-7); }
@media (width >= 48rem) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer a { color: var(--ink-2); }
.footer h4 { font-family: var(--font-ui); font-size: .88rem; color: var(--muted); font-weight: var(--font-weight-4); margin-block-end: var(--size-3); }
.footer p { max-inline-size: 40ch; }
.footer .footer-brand { font-size: 1.25rem; color: var(--ink); margin-block-end: var(--size-3); }
.footer ul { list-style: none; display: grid; gap: var(--size-2); }
.footer-bottom {
  margin-block-start: var(--size-8); padding-block-start: var(--size-4);
  border-block-start: var(--border-size-1) solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: var(--size-3); justify-content: space-between;
  font-family: var(--font-ui); font-size: .85rem;
}

/* ==========================================================================
   Impression — le programme doit tenir sur papier
   ========================================================================== */
@media print {
  .nav-links, .nav-toggle, .hero-actions, .inscription { display: none !important; }
  /* à l'impression, le logo reste : il identifie le document */
  .nav { position: static; border-block-end: 1px solid #000; }
  body { font-size: 11pt; }
  .hero, main > .section:nth-of-type(even) { background: #fff !important; }
  .section { padding-block: 1.2rem; break-inside: avoid; }
  .slot, .fiche-speaker, .poster, .versant { break-inside: avoid; }
  /* les plis s'ouvrent à l'impression : voir « beforeprint » dans app.js */
  .num { position: static; }
}

/* ==========================================================================
   Emplacements à compléter — tout ce qui n'est pas encore fourni par les
   enseignants est matérialisé, jamais rédigé à leur place. En gris et sans
   fond, pour ne pas peser sur le style de la page.
   ========================================================================== */
.ph {
  font-family: var(--font-ui); font-size: .82em; color: var(--ph-ink);
  background: transparent; border: 1px dashed var(--ph-line);
  padding: .05rem .4rem; white-space: nowrap;
}
.ph-block {
  border: 1px dashed var(--ph-line); background: transparent;
  padding: var(--size-4) var(--size-5); color: var(--ph-ink); max-inline-size: 68ch;
}
.ph-block + .ph-block { margin-block-start: var(--size-4); }
.ph-block .ph-label { font-family: var(--font-ui); font-size: .85rem; color: var(--ph-ink); margin-block-end: var(--size-2); }
.ph-block p { font-size: 1rem; max-inline-size: none; }
.ph-block .quote { font-style: italic; }

/* Titres de sous-partie en colonne unique */
.litio-grid h3 { font-size: 1.3rem; margin-block: var(--size-6) var(--size-3); }
.litio-grid > div > h3:first-child { margin-block-start: 0; }