/* ==================================================================
   Section « Projet » (snt-projet) — feuille de style autonome
   Ne dépend d'aucune autre feuille du site (sauf prism.css).

   POLICES — les deux sont libres (SIL Open Font License 1.1) :
     · Montserrat      (Julieta Ulanovsky)  — titres, interface
     · Source Serif 4  (Adobe)              — texte courant, très lisible
                                              à l'écran comme au papier
   Pour tout passer en sans-serif : mettre --texte à la même valeur
   que --titre, ci-dessous.
   ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

:root {

  /* ---- Polices ---- */
  --titre: 'Montserrat', system-ui, sans-serif;
  --texte: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* ---- TAILLES À L'ÉCRAN — c'est ici qu'on ajuste ---- */
  --t-texte:        1.02rem;   /* texte courant */
  --t-intro:        0.97rem;   /* paragraphe d'introduction de la séance */
  --t-h1:           1.5rem;    /* titres de partie */
  --t-h2:           1.22rem;
  --t-h3:           1.05rem;
  --t-encadre-titre:0.95rem;   /* bandeau « À faire » */
  --t-tableau:      0.90rem;
  --t-code:         0.88rem;
  --t-legende:      0.86rem;
  --t-bandeau:      2.1rem;    /* titre de la séance */

  /* ---- TAILLES À L'IMPRESSION ---- */
  --p-texte:        10.5pt;
  --p-intro:        10pt;
  --p-h1:           13pt;
  --p-h2:           11.5pt;
  --p-h3:           10.5pt;
  --p-encadre-titre:10.5pt;
  --p-tableau:      9pt;
  --p-code:         8.5pt;
  --p-bandeau:      17pt;

  /* ---- Couleurs ---- */
  --projet:        #0e7c76;
  --projet-clair:  #e4f2f1;
  --theme:         #5641c9;
  --theme-clair:   #ecebfb;
  --avenir:        #8a8f98;

  --encre:         #1b1d1f;
  --encre-douce:   #55595e;
  --filet:         #e2e4e7;
  --fond-doux:     #f7f8f9;

  --rouge:         #c8324b;
  --rouge-clair:   #fdecef;
  --bleu:          #1d6fa5;
  --bleu-clair:    #e9f3fa;

  --largeur: 1080px;
  --accent: var(--projet);
  --accent-clair: var(--projet-clair);
}

body.theme { --accent: var(--theme); --accent-clair: var(--theme-clair); }

/* ---------- Base ---------------------------------------------- */

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

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-texte);
  line-height: 1.7;
}

a { color: var(--accent); }
img { max-width: 100%; height: auto; }
hr { border: none; border-top: 1px solid var(--filet); margin: 2.5em 0; }

/* ---------- En-tête et navigation ------------------------------ */

#bloc_header { width: 100%; background-color: #fff; border-bottom: 1px solid var(--filet); }

header {
  max-width: var(--largeur);
  margin: auto;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#logo_header { margin-right: 45px; }
#logo_header img { display: block; width: 210px; height: auto; }

nav { flex: 1; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; }

nav a {
  display: block;
  padding: 6px 14px;
  font-family: var(--titre);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--encre-douce);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

nav a:hover:not(.active) { color: var(--encre); }
nav a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

#menu-responsive[type=checkbox] { display: none; }
nav label { display: none; }

@media all and (max-width: 800px) {
  .menu-responsive { display: block; text-align: right; font-size: 22px; cursor: pointer; }
  nav ul { display: none; }
  #logo_header { margin-right: 20px; }
  #logo_header img { width: 170px; }
  #menu-responsive[type=checkbox]:checked ~ nav ul { display: block; }
  #menu-responsive[type=checkbox]:checked ~ nav label { visibility: hidden; }
  #menu-responsive[type=checkbox]:checked ~ nav label:after { content: "\2716"; color: #666; visibility: visible; }
}

/* ---------- Bandeau -------------------------------------------- */

.conteneur-bandeau { width: 100%; background-color: var(--accent); color: #fff; }

.arborescence {
  max-width: var(--largeur);
  margin: auto;
  padding: 14px 20px 0 20px;
  font-family: var(--titre);
  font-size: 0.78rem;
  opacity: 0.9;
}

.arborescence a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); }
.arborescence a:hover { border-bottom-color: #fff; }

.bandeau {
  max-width: var(--largeur);
  margin: auto;
  padding: 22px 20px 26px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.titre-bandeau { flex: 1 1 380px; }

.titre-bandeau h1 {
  margin: 0;
  font-family: var(--titre);
  font-size: var(--t-bandeau);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.badge-seance {
  display: inline-block;
  margin-right: 14px;
  padding: 2px 12px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 6px;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: 0.18em;
}

.image-bandeau { flex: 0 0 auto; }
.image-bandeau img { height: 150px; width: auto; }

.outils-bandeau { flex: 0 0 auto; }

.btn-imprimer {
  font-family: var(--titre);
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}

.btn-imprimer:hover { background-color: rgba(255,255,255,.16); border-color: #fff; }
.btn-imprimer::before { content: "\2399"; margin-right: 7px; }

.date-maj {
  flex: 1 1 100%;
  text-align: right;
  font-family: var(--titre);
  font-size: 0.75rem;
  opacity: 0.85;
}

/* ---------- Corps de page -------------------------------------- */

.conteneur-global {
  max-width: var(--largeur);
  width: 100%;
  margin: 0 auto;
  padding: 34px 20px 50px 20px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

#seance { order: -1; flex: 1 1 auto; min-width: 0; max-width: 760px; }

#right-panel {
  flex: 0 0 240px;
  position: sticky;
  top: 20px;
  max-height: 88vh;
  overflow-y: auto;
  scrollbar-width: none;
  font-family: var(--titre);
}

#right-panel::-webkit-scrollbar { display: none; }

#toc #toc-title {
  display: block;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--filet);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--encre-douce);
}

.sidenav { list-style: none; margin: 12px 0 0 0; padding-left: 0; border-left: 2px solid var(--filet); font-size: 0.82rem; line-height: 1.35; }
.sidenav a { display: block; padding: 6px 12px; color: #45494e; text-decoration: none; }
.sidenav a:hover { background-color: var(--fond-doux); color: var(--encre); }
.sidenav .current { position: relative; font-weight: 600; color: var(--accent); }
.sidenav .current::after { content: ""; position: absolute; top: 0; bottom: 0; left: -2px; width: 2px; background-color: var(--accent); }
.sidenav__sublist { list-style: none; margin: 0; padding-left: 0; }
.sidenav__sublist a { padding-left: 26px; }

/* ---------- Contenu d'une séance -------------------------------- */

#contenu h1, .autres-contenus h1 {
  margin: 2.2em 0 0.7em 0;
  padding-bottom: 0.25em;
  border-bottom: 2px solid var(--accent);
  font-family: var(--titre);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.3;
}

#contenu h1:first-child { margin-top: 0; }
#contenu h2 { margin: 1.8em 0 0.5em 0; font-family: var(--titre); font-size: var(--t-h2); font-weight: 600; line-height: 1.35; }
#contenu h3 { margin: 1.4em 0 0.4em 0; font-family: var(--titre); font-size: var(--t-h3); font-weight: 600; }

#contenu p { margin: 0.85em 0; }
#contenu ul, #contenu ol { margin: 0.85em 0; padding-left: 1.5em; }
#contenu li { margin: 0.3em 0; }
#contenu li::marker { color: var(--encre-douce); }

#contenu .description-seance {
  margin: 0 0 2em 0;
  padding: 16px 20px;
  background-color: var(--accent-clair);
  border-left: 4px solid var(--accent);
  border-radius: 0 4px 4px 0;
  font-size: var(--t-intro);
  color: #2c3033;
}

/* Bloc « À faire » — le rembourrage est porté par le conteneur,
   le bandeau de titre déborde en négatif : les tableaux et les blocs
   de code larges restent ainsi à l'intérieur des marges. */

#contenu .a-faire {
  margin: 1.8em 0;
  padding: 0 18px 14px 18px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background-color: #fff;
}

#contenu .a-faire.titre > h3:first-child,
#contenu .a-faire > p:first-child {
  margin: 0 -18px 12px -18px;
  padding: 8px 18px;
  background-color: var(--accent);
  color: #fff;
  border-radius: 5px 5px 0 0;
  font-family: var(--titre);
  font-size: var(--t-encadre-titre);
  font-weight: 600;
}

#contenu .a-faire > *:last-child { margin-bottom: 0; }

#contenu .a-lire {
  margin: 1.8em 0;
  padding: 14px 18px;
  border: 1px dashed var(--accent);
  border-radius: 6px;
  background-color: var(--accent-clair);
}
#contenu .a-lire > *:first-child { margin-top: 0; }
#contenu .a-lire > *:last-child { margin-bottom: 0; }

#contenu .important {
  margin: 1.6em 0;
  padding: 12px 18px;
  border-left: 4px solid var(--rouge);
  border-radius: 0 4px 4px 0;
  background-color: var(--rouge-clair);
}
#contenu .important > *:first-child { margin-top: 0; }
#contenu .important > *:last-child { margin-bottom: 0; }

/* Citations et encadrés */

blockquote { margin: 1.5em 0; padding: 12px 18px; border-radius: 0 4px 4px 0; }
#contenu blockquote > *:first-child { margin-top: 0; }
#contenu blockquote > *:last-child { margin-bottom: 0; }

blockquote:not([class]) { background-color: var(--fond-doux); border-left: 4px solid var(--filet); }
blockquote[class*="information"] { background-color: var(--bleu-clair); border-left: 4px solid var(--bleu); }
blockquote[class*="attention"] { background-color: var(--rouge-clair); border-left: 4px solid var(--rouge); }

/* Tableaux */

#contenu table {
  border-collapse: collapse;
  margin: 1.5em 0;
  width: 100%;
  font-size: var(--t-tableau);
  font-family: var(--titre);
}

#contenu th, #contenu td { border: 1px solid var(--filet); padding: 7px 10px; vertical-align: top; text-align: left; }
#contenu th { background-color: var(--accent-clair); font-weight: 600; }
#contenu tbody tr:nth-child(even) { background-color: #fcfcfd; }

/* Code */

#contenu pre {
  margin: 1.4em 0;
  padding: 12px 14px;
  background-color: var(--fond-doux);
  border: 1px solid var(--filet);
  border-radius: 4px;
  overflow-x: auto;
  font-size: var(--t-code);
  line-height: 1.5;
}

#contenu :not(pre) > code {
  padding: 1px 5px;
  background-color: var(--fond-doux);
  border: 1px solid var(--filet);
  border-radius: 3px;
  font-size: 0.88em;
}

/* Images et divers */

.centre { display: block; margin-left: auto!important; margin-right: auto!important; }
.image-responsive { max-width: 100%; height: auto; margin: 1.4em 0; }
#contenu p.legende { margin-top: -0.8em; text-align: center; font-size: var(--t-legende); color: var(--encre-douce); font-style: italic; }

.video-responsive { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 1.5em 0; }
.video-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.impression { display: none; }


/* ---------- Médias embarqués (diaporamas, audio, H5P) ---------- */

.a-supprimer { display: none; }

.pdf-responsive { margin: 1.5em 0; }
.pdf-responsive iframe { max-width: 100%; border: 1px solid var(--filet); border-radius: 4px; }

@media all and (max-width: 860px) {
  .pdf-responsive { position: relative; height: 0; padding-bottom: 75%; overflow: hidden; }
  .pdf-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
}

.podcast-container {
  margin: 1.2em 0;
  padding: 12px;
  background-color: var(--fond-doux);
  border: 1px solid var(--filet);
  border-radius: 6px;
}

.podcast-container img { margin: 0 auto 8px auto; display: block; }
.podcast-container audio { display: block; margin: 0 auto; width: 100%; max-width: 420px; border-radius: 5px; }

.h5p {
  padding: 1rem;
  border: 0.5px solid var(--filet);
}

/* .h5p-container, .h5p { 
  font-family: var(--titre); 
  margin: 1rem;
} */

.youtube_player { max-width: 100%; }

@media print {
  .pdf-responsive,
  .podcast-container,
  .h5p,
  .h5p-container { display: none !important; }
}

/* ==================================================================
   Page d'accueil : la liste des séances
   ================================================================== */

.conteneur-global.accueil { display: block; }

.conteneur-introduction {
  /* max-width: 760px; */
  margin: 0 auto 34px auto;
  padding: 18px 22px;
  background-color: var(--fond-doux);
  border-left: 4px solid var(--projet);
  border-radius: 0 4px 4px 0;
  font-size: var(--t-intro);
}
.conteneur-introduction p:first-child { margin-top: 0; }
.conteneur-introduction p:last-child { margin-bottom: 0; font-weight: 600; }

.legende-seances {
  /* max-width: 760px; */
  margin: 0 auto 26px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  justify-content: center;
  font-family: var(--titre);
  font-size: 0.82rem;
  color: var(--encre-douce);
}

.legende-seances span::before {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: -1px;
}
.legende-seances .l-projet::before { background-color: var(--projet); }
.legende-seances .l-theme::before  { background-color: var(--theme); }
.legende-seances .l-avenir::before { background-color: var(--avenir); }

ul.liste-seances { 
  /* max-width: 760px;  */
  margin: 0 auto; 
  padding: 0; 
  list-style: none; 
}

li.seance {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
  padding: 14px 18px;
  border: 1px solid var(--filet);
  border-left: 5px solid var(--fam);
  border-radius: 0 5px 5px 0;
  background-color: #fff;
  transition: background-color .15s, box-shadow .15s, transform .15s;
}

li.seance.projet { --fam: var(--projet); --fam-clair: var(--projet-clair); }
li.seance.theme  { --fam: var(--theme);  --fam-clair: var(--theme-clair); }

li.seance:hover { background-color: var(--fam-clair); box-shadow: 0 1px 6px rgba(0,0,0,.07); transform: translateX(2px); }

.lien-seance { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lien-seance:focus-visible { outline: 3px solid var(--fam); outline-offset: 2px; }

li.seance .numero {
  flex: 0 0 46px;
  text-align: center;
  padding: 3px 0;
  border-radius: 4px;
  background-color: var(--fam);
  color: #fff;
  font-family: var(--titre);
  font-size: 0.86rem;
  font-weight: 700;
}

li.seance .corps { flex: 1 1 auto; min-width: 0; }

li.seance .etiquette {
  display: inline-block;
  margin-bottom: 5px;
  font-family: var(--titre);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fam);
}

li.seance h3 { margin: 0 0 4px 0; font-family: var(--titre); font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
li.seance:hover h3 { color: var(--fam); }
li.seance p { margin: 0; font-size: 0.93rem; line-height: 1.55; color: var(--encre-douce); }

li.seance.a-venir { --fam: var(--avenir); --fam-clair: #f4f5f6; border-left-style: dashed; background-color: #fcfcfd; }
li.seance.a-venir:hover { transform: none; box-shadow: none; }
li.seance.a-venir h3 { font-weight: 500; color: #6a6f75; }

li.hors-classe {
  max-width: 760px;
  margin: 18px auto;
  padding: 12px 18px;
  border: 1px dashed var(--projet);
  border-radius: 5px;
  background-color: var(--projet-clair);
  text-align: center;
  font-size: 0.92rem;
  color: #2c4a48;
}
li.hors-classe strong { color: var(--projet); }

/* ---------- Pied de page --------------------------------------- */

#bloc_footer {
  width: 100%;
  margin-top: auto;
  background-color: var(--fond-doux);
  border-top: 1px solid var(--filet);
  padding: 24px 20px 14px 20px;
}

footer { max-width: var(--largeur); margin: auto; }

#infos_licence { text-align: center; font-size: 0.82rem; line-height: 1.6; color: var(--encre-douce); }
#infos_licence img { margin-top: 10px; }
#infos_licence a { color: var(--encre-douce); }

#bloc_footer hr { margin: 16px 0 0 0; }

#cookies-cgu { display: flex; justify-content: center; gap: 22px; margin: 14px auto 0 auto; font-family: var(--titre); font-size: 0.78rem; }
#cookies-cgu a, #cookies-cgu #openCookiesManager { color: var(--encre-douce); text-decoration: underline; cursor: pointer; }

/* ---------- Responsive ----------------------------------------- */

@media all and (max-width: 1000px) {
  .conteneur-global { display: block; }
  #right-panel { display: none; }
  #seance { max-width: none; }
  .image-bandeau img { height: 150px; }
  .titre-bandeau h1 { font-size: 1.7rem; }
}

@media all and (max-width: 620px) {
  body { font-size: 0.97rem; }
  .titre-bandeau h1 { font-size: 1.4rem; }
  .image-bandeau { display: none; }
  li.seance { flex-direction: column; gap: 8px; }
  li.seance .numero { flex: none; align-self: flex-start; padding: 2px 14px; }
  #contenu .a-faire { padding-left: 12px; padding-right: 12px; }
  #contenu .a-faire.titre > h3:first-child,
  #contenu .a-faire > p:first-child { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}

/* ==================================================================
   Impression / export PDF — les couleurs sont conservées
   ================================================================== */

@page { size: A4; margin: 15mm 15mm 16mm 15mm; }

@media print {

  body {
    font-size: var(--p-texte);
    line-height: 1.5;
    display: block;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #bloc_header,
  #bloc_footer,
  #right-panel,
  .image-bandeau,
  .outils-bandeau,
  .date-maj,
  .video-responsive,
  .effacer-impression { display: none !important; }

  .impression { display: block; }

  /* Titre de la séance : pas d'aplat pleine page (économie d'encre),
     mais le numéro et le filet restent en couleur. */
  .conteneur-bandeau {
    background: none !important;
    color: var(--encre);
    border-bottom: 2.5pt solid var(--accent);
    margin-bottom: 7mm;
  }

  .arborescence {
    padding: 0 0 2mm 0;
    color: var(--accent);
    font-size: 8pt;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 1;
  }
  .arborescence a { color: var(--accent); border: none; }

  .bandeau { display: block; padding: 0 0 3mm 0; max-width: none; }
  .titre-bandeau h1 { font-size: var(--p-bandeau); }

  .badge-seance {
    background-color: var(--accent) !important;
    border-color: var(--accent);
    color: #fff !important;
    padding: 1px 10px;
  }

  .conteneur-global { display: block; max-width: none; width: auto; padding: 0; }
  #seance { max-width: none; }

  a { color: var(--accent); text-decoration: none; }
  a[href]:after { content: ""; }

  #contenu h1 { font-size: var(--p-h1); margin-top: 7mm; border-bottom: 1.5pt solid var(--accent); }
  #contenu h2 { font-size: var(--p-h2); margin-top: 5mm; }
  #contenu h3 { font-size: var(--p-h3); }
  #contenu h1, #contenu h2, #contenu h3 { break-after: avoid; page-break-after: avoid; }

  #contenu .a-lire,
  #contenu .important,
  #contenu blockquote,
  #contenu table,
  #contenu pre,
  img { break-inside: avoid; page-break-inside: avoid; }

  /* un encadré « À faire » peut se couper si nécessaire,
     mais jamais juste après son bandeau de titre */
  #contenu .a-faire > *:first-child { break-after: avoid; page-break-after: avoid; }

  #contenu .description-seance { font-size: var(--p-intro); }
  #contenu .a-faire.titre > h3:first-child,
  #contenu .a-faire > p:first-child { font-size: var(--p-encadre-titre); }
  #contenu table { font-size: var(--p-tableau); }
  #contenu pre { font-size: var(--p-code); }

  ul.liste-seances li.seance { break-inside: avoid; }
}