/* =========================================================================
   OTCOVSKY KOMPAS (tataweb.cz) — feuille unique, source de verite.
   SQUELETTE « guide-sommaire » : sommaire ancre collant a gauche, sections
   numerotees a droite, bloc de synthese en fin de section.
   DIRECTION : 11. The Clinical Notebook, posee sur la matiere signal-jaune.

   METAPHORE : le carnet de bord d'un pere tcheque. On y ecrit a l'encre
   bleu-ardoise sur du papier creme de journal ; chaque dispositif
   (otcovska, rodicovska, stridava pece) porte une languette jaune collee
   dans la marge ; chaque affirmation dit ce que la page officielle ne
   precise pas.

   VOCABULAIRE DE CLASSES : prefixe cn- (carnet/notes). Les noms de blocs
   viennent du SPEC.md du squelette (cadre, pupitre, fil, corps, lecon,
   retenir, encart, index, socle, fil-ariane...) et les composants propres a
   ce site portent des noms tires de la metaphore : zalozka (languette),
   vek-pas (reglette d'age), nevime (le filet de reserve), denik (journal
   des revisions), obraceny (section retournee), zdroje (renvois).

   REGLE NEGATIVE (elle gouverne tout le fichier) : aucune couleur rouge,
   aucune couleur verte. Le sujet touche aux allocations, aux tribunaux et a
   la garde d'enfant ; un feu rouge/vert ferait croire a un verdict
   juridique « mate/nemate narok ». Jamais.
   REGLE NEGATIVE 2 : --znacka (#C6D600) ne se pose qu'en APLAT, sur 2 % de
   la surface de page au maximum : languettes, graduation courante de la
   reglette, soulignement de l'entree active. Jamais en fond de paragraphe,
   jamais en couleur de texte, jamais en degrade.
   REGLE NEGATIVE 3 : pas de mode sombre. La matiere du site est du papier ;
   inverser detruirait la reglure et ferait virer la languette au fluo.

   PILES DE POLICES : trois roles, aucun fichier de police, aucune requete
   distante. Titres Charter (diacritiques tcheques sur macOS et Windows),
   texte Verdana (lisibilite sur telephone le soir), et un troisieme role
   MONO qui porte EXCLUSIVEMENT quatre choses et rien d'autre : la barre de
   position de section (.cn-oddil), le titre du bloc de reserve
   (.cn-nevime__klic), les graduations de la reglette d'age
   (.cn-vek-pas__dil) et les numeros de renvoi avec leur date de
   consultation (.cn-odkaz, .cn-zdroje). Aucun titre, aucun lien de
   navigation et aucun corps de texte ne sont en mono.
   ========================================================================= */

:root {
  /* ---- Jetons de couleur, nommes par la matiere ------------------------ */
  --novinovy: #FAFAF7;   /* papier journal creme : fond de page, rien d'autre */
  --blok:     #FFFFFC;   /* bloc-notes neuf : reserve, tableaux, passerelle */
  --karton:   #EFEFE8;   /* carton de chemise : sommaire, pied, sections retournees */
  --inkoust:  #1A1C14;   /* encre de stylo bleu-ardoise : texte, titres, filet de reserve */
  --tuzka:    #5A5C4E;   /* mine de crayon : chapeaux, legendes, mentions, reserve */
  --znacka:   #C6D600;   /* languette adhesive jaune : APLAT seulement (cf. regle 2) */
  --lepidlo:  #A9B800;   /* colle seche de la languette : ombre plate, survol */
  --linkovani:#E2E3DA;   /* ligne imprimee du bloc : tous les filets de 1 px */
  --razitko:  #2E4A57;   /* tampon d'administration : liens, renvois, focus */
  --vyber:    #EDF2C9;   /* surligneur passe : selection, entree active */

  /* ---- Piles de polices ------------------------------------------------ */
  --titre-police: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --text-police: Verdana, "DejaVu Sans", Tahoma, "Segoe UI", sans-serif;
  --mono-police: "Andale Mono", Consolas, "DejaVu Sans Mono", ui-monospace, monospace;

  /* ---- Rythme, mesures, ratios ---------------------------------------- */
  --mesure: 66ch;          /* largeur de lecture bornee (Verdana est large) */
  --marge-largeur: 17rem;  /* colonne du sommaire collant */
  --pas: 1.5rem;           /* unite d'espacement, gouverne le rythme vertical */
  --interligne: 1.7;       /* interligne du texte courant */
  --filet: 1px;
  --rayon: 2px;            /* phrase de palette : coins a 2 px */
  --page-max: 62rem;       /* colonne de composition */
  --cadre-pas: clamp(1rem, 4vw, 2.5rem);
  --gouttiere: clamp(1.4rem, 3.6vw, 3.2rem);      /* ecart entre sommaire et lecture */
  --decalage: calc((var(--marge-largeur) + var(--gouttiere)) / 2); /* demi-colonne de sommaire */

  --t1: clamp(1.85rem, 1.34rem + 2.2vw, 2.85rem);
  --t2: clamp(1.32rem, 1.10rem + 0.95vw, 1.74rem);
  --t3: clamp(1.06rem, 0.99rem + 0.35vw, 1.22rem);
  --texte: clamp(1rem, 0.94rem + 0.28vw, 1.06rem);

  /* ---- Trois ratios d'image, chacun avec un role exclusif -------------- */
  --pomer-scena: 16 / 9;   /* plan large documentaire : tete de page, section retournee */
  --pomer-detail: 4 / 5;   /* portrait vertical : figure de rubrique, plan rapproche */
  --pomer-znamka: 1 / 1;   /* vignette carree serree : entrees du programme */

  color-scheme: only light; /* le carnet est en papier : aucune inversion auto */
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--novinovy);
  color: var(--inkoust);
  font-family: var(--text-police);
  font-size: var(--texte);
  line-height: var(--interligne);
  overflow-wrap: break-word;
  overflow-x: clip;         /* l'echo plein du bloc retourne ne cree jamais de defilement */
}

img, svg, video { max-width: 100%; height: auto; }
img { filter: saturate(.94); }  /* le jaune de la languette reste la seule couleur vive */

::selection { background: var(--vyber); }

a { color: var(--razitko); }
a:hover { color: var(--inkoust); }

:focus-visible {
  outline: 3px solid var(--razitko);
  outline-offset: 2px;
  border-radius: var(--rayon);
}

/* ---- Utilitaires ------------------------------------------------------ */
.cn-preskok {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--inkoust);
  color: var(--novinovy);
  padding: .6rem 1rem;
  z-index: 20;
}
.cn-preskok:focus { left: .5rem; top: .5rem; }

.cn-hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cn-cadre {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--cadre-pas);
}

/* ---- En-tete ---------------------------------------------------------- */
.cn-bandeau {
  border-bottom: var(--filet) solid var(--linkovani);
  background: var(--novinovy);
}

.cn-bandeau__rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem var(--pas);
  padding-block: 1.05rem .95rem;
}

.cn-marque {
  font-family: var(--titre-police);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--inkoust);
  text-decoration: none;
}
.cn-marque span {
  display: block;
  font-family: var(--text-police);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tuzka);
  margin-top: .2rem;
}

.cn-parcours { margin-left: auto; }
.cn-parcours ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cn-parcours a {
  color: var(--inkoust);
  text-decoration: none;
  font-size: .92rem;
  padding-bottom: .15rem;
  border-bottom: 2px solid transparent;
}
.cn-parcours a:hover,
.cn-parcours a[aria-current="page"] { border-bottom-color: var(--znacka); }

/* Les deux etats de la navigation, sans script : case a cocher + label.
   Au-dessus de 58rem le declencheur disparait et la liste tient en barre ;
   en dessous la liste est repliee et le declencheur porte le menu. */
.cn-parcours__prepinac {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cn-parcours__tlacitko {
  display: none;
  font-family: var(--mono-police);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inkoust);
  border: var(--filet) solid var(--inkoust);
  border-radius: var(--rayon);
  padding: .45rem .7rem;
  cursor: pointer;
}
.cn-parcours__tlacitko::after { content: " +"; color: var(--razitko); }
.cn-parcours__prepinac:checked ~ .cn-parcours__tlacitko::after { content: " \2212"; }
.cn-parcours__prepinac:focus-visible ~ .cn-parcours__tlacitko { outline: 3px solid var(--razitko); outline-offset: 2px; }

@media (max-width: 58rem) {
  .cn-parcours { margin-left: 0; width: 100%; }
  .cn-parcours__tlacitko { display: inline-block; }
  .cn-parcours ul { display: none; }
  .cn-parcours__prepinac:checked ~ ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-top: .6rem;
    border-top: var(--filet) solid var(--linkovani);
  }
  .cn-parcours__prepinac:checked ~ ul li { border-bottom: var(--filet) solid var(--linkovani); }
  .cn-parcours__prepinac:checked ~ ul a { display: block; padding: .55rem .2rem; }
}

/* ---- Entree de page --------------------------------------------------- */
.cn-entree {
  padding-block: clamp(1.7rem, 4.6vw, 2.9rem) var(--pas);
  border-bottom: var(--filet) solid var(--linkovani);
}

.cn-fil-ariane {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tuzka);
  margin: 0 0 .7rem;
}
.cn-fil-ariane a { color: var(--tuzka); }
.cn-fil-ariane span { padding-inline: .35rem; }

.cn-titre {
  font-family: var(--titre-police);
  font-size: var(--t1);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.012em;
  margin: 0 0 .65rem;
  max-width: 24ch;
}

/* Le chapeau ouvre sur une lettrine Charter de trois lignes. */
.cn-chapeau {
  max-width: 58ch;
  font-size: 1.06rem;
  color: var(--tuzka);
  margin: 0;
}
.cn-chapeau > p { margin: 0 0 .7rem; }
.cn-chapeau > p:last-child { margin-bottom: 0; }
.cn-chapeau > p:first-child::first-letter,
.cn-chapeau::first-letter {
  float: left;
  font-family: var(--titre-police);
  font-size: 3.05em;
  font-weight: 700;
  line-height: .82;
  padding: .04em .1em 0 0;
  color: var(--inkoust);
}
.cn-chapeau--bez-lettriny::first-letter {
  float: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  color: inherit;
}

/* La phrase d'auteur : ce que le site refuse d'ecrire. */
.cn-chapeau__odmitnuti {
  display: block;
  margin-top: .9rem;
  padding-left: .95rem;
  border-left: 2px solid var(--znacka);
  font-style: italic;
  color: var(--inkoust);
  font-size: .98rem;
}

.cn-mention {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  list-style: none;
  margin: var(--pas) 0 0;
  padding: 0;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tuzka);
}
.cn-mention li { display: flex; align-items: center; gap: .4rem; }
.cn-mention li::before {
  content: "";
  width: .42rem; height: .42rem;
  background: var(--znacka);
  flex: none;
}

/* ---- Pupitre : sommaire collant a gauche, lecture a droite ------------ */
.cn-pupitre {
  display: grid;
  grid-template-columns: var(--marge-largeur) minmax(0, 1fr);
  gap: var(--gouttiere);
  /* PAS align-items:start : la colonne de gauche doit s'etirer sur toute la
     hauteur, sinon le sommaire collant n'a aucune course pour suivre la lecture. */
  align-items: stretch;
  padding-block: clamp(1.6rem, 3.6vw, 2.6rem) clamp(2.4rem, 6vw, 4.2rem);
}

/* La colonne de gauche porte elle-meme le collant, et non plus le seul panneau
   du sommaire : elle se mesure donc sur la hauteur de son contenu et ne laisse
   plus une boite vide de plusieurs milliers de pixels en face de l'article.
   La course du collant reste celle de la rangee entiere : la zone de grille de
   cet item est la rangee etiree par align-items: stretch, conserve ci-dessus. */
.cn-marge {
  min-width: 0;
  align-self: start;
  position: sticky;
  top: var(--pas);
  max-height: calc(100vh - var(--pas) * 2);
  overflow-y: auto;
}
.cn-corps { min-width: 0; max-width: var(--mesure); }

/* Le <main> porte TOUTE la matiere editoriale : entree, bande d'age, pupitre,
   section retournee, passerelle. Les liens de la matrice interne vivent dedans,
   hors nav, aside et footer : c'est la zone que le controle de liens lit. */
.cn-page { display: block; min-width: 0; }

/* ---- Renvois de la matrice interne, poses dans le corps ---------------- */
/* Une phrase par page liee, avec l'ancre exacte prevue. On ne repete jamais un
   lien deja present dans le texte livre : ce bloc ne montre que les manquants. */
.cn-souvisi {
  margin: calc(var(--pas) * 1.2) 0 0;
  padding-top: var(--pas);
  border-top: var(--filet) solid var(--linkovani);
  font-size: .96rem;
  color: var(--tuzka);
}
.cn-souvisi a {
  color: var(--razitko);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.cn-souvisi a:hover { background: var(--vyber); }

/* ---- Sommaire collant : la reglure de bloc-notes ---------------------- */
/* La reglure est la texture identitaire du carnet. Elle se pose sur le fond
   du sommaire et sur la section retournee, jamais sous du texte courant. */
.cn-marge .cn-fil,
.cn-obraceny {
  background-image: repeating-linear-gradient(to bottom, transparent 0 1.69rem, var(--linkovani) 1.69rem 1.7rem);
  background-color: var(--karton);
}

.cn-fil {
  position: static;
  max-height: none;
  overflow: visible;
  border: var(--filet) solid var(--linkovani);
  border-left: 3px solid var(--inkoust);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 1rem 1.05rem 1.15rem;
}

.cn-fil__cle {
  font-family: var(--mono-police);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--inkoust);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.cn-fil__cle::-webkit-details-marker { display: none; }
.cn-fil__cle::after { content: "\2212"; color: var(--razitko); }
.cn-fil:not([open]) .cn-fil__cle::after { content: "+"; }

.cn-fil__liste {
  list-style: none;
  margin: .85rem 0 0;
  padding: 0;
  counter-reset: jalon;
}
.cn-fil__jalon { border-top: var(--filet) solid var(--linkovani); }
.cn-fil__jalon:first-child { border-top: 0; }
.cn-fil__jalon > a {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: .35rem;
  align-items: baseline;
  padding: .5rem .35rem .5rem .55rem;
  color: var(--inkoust);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.35;
  border-left: 3px solid transparent;
  margin-left: -1.05rem;
}
.cn-fil__jalon > a::before {
  counter-increment: jalon;
  content: counter(jalon, decimal-leading-zero);
  font-family: var(--mono-police);
  font-size: .74rem;
  color: var(--tuzka);
}
.cn-fil__jalon > a:hover { background: var(--blok); }
.cn-fil__jalon > a[aria-current="true"] {
  background: var(--vyber);
  border-left-color: var(--znacka);
  font-weight: 700;
}

.cn-fil__brins {
  list-style: none;
  margin: 0 0 .45rem;
  padding: 0 0 0 2.3rem;
}
.cn-fil__brins a {
  display: block;
  padding: .22rem 0;
  font-size: .84rem;
  color: var(--tuzka);
  text-decoration: none;
}
.cn-fil__brins a:hover { color: var(--inkoust); }

.cn-marge__note {
  margin: var(--pas) 0 0;
  padding: .85rem .95rem;
  font-size: .84rem;
  color: var(--tuzka);
  background: var(--blok);
  border: var(--filet) solid var(--linkovani);
  border-top: 3px solid var(--inkoust);
  border-radius: 0 0 var(--rayon) var(--rayon);
}
.cn-marge__note .cn-zdroje { margin: 0; padding-left: 1.1rem; }

/* ---- Sections numerotees ---------------------------------------------- */
.cn-lecon { padding-block: 0 clamp(1.1rem, 2.5vw, 1.7rem); scroll-margin-top: var(--pas); }
.cn-lecon + .cn-lecon {
  border-top: var(--filet) solid var(--linkovani);
  padding-top: clamp(1.1rem, 2.5vw, 1.7rem);
}

/* La barre de position de section — mono, minuscule, au-dessus du h2. */
.cn-oddil {
  font-family: var(--mono-police);
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tuzka);
  margin: 0 0 .55rem;
  padding-left: 3.1rem;
}
.cn-lecon--bez-cisla .cn-oddil { padding-left: 0; }

.cn-lecon__palier {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  align-items: start;
  gap: .2rem;
  font-family: var(--titre-police);
  font-size: var(--t2);
  line-height: 1.26;
  font-weight: 700;
  letter-spacing: -.012em;
  margin: 0 0 .8rem;
}
.cn-lecon__rang {
  font-family: var(--mono-police);
  font-size: .95rem;
  font-weight: 400;
  color: var(--tuzka);
  letter-spacing: .04em;
  padding-top: .32em;
}

.cn-lecon > p,
.cn-lecon > ul,
.cn-lecon > ol,
.cn-lecon > dl,
.cn-lecon > figure,
.cn-lecon > div,
.cn-lecon > aside,
.cn-lecon > nav,
.cn-lecon > blockquote,
.cn-lecon > h3 { margin-left: 3.1rem; }

.cn-lecon > h3 {
  font-family: var(--titre-police);
  font-size: var(--t3);
  margin-top: calc(var(--pas) * 1.1);
  margin-bottom: .45rem;
  scroll-margin-top: var(--pas);
}
.cn-lecon p { margin-top: 0; margin-bottom: 1rem; }
.cn-lecon > ul, .cn-lecon > ol { margin-bottom: 1.05rem; padding-left: 1.15rem; }
.cn-lecon > ul > li, .cn-lecon > ol > li { margin-bottom: .4rem; }
.cn-lecon > .cn-programme, .cn-lecon > .cn-index, .cn-lecon > .cn-etapes, .cn-lecon > .cn-kroky { padding-left: 0; }
.cn-lecon > .cn-programme > li, .cn-lecon > .cn-index > li { margin-bottom: 0; }

/* ---- Le dl d'exposition : Premier geste / A verifier / Ou est la limite */
.cn-vyklad {
  margin: 0 0 1.1rem;
  border-top: 3px solid var(--inkoust);
}
.cn-vyklad dt {
  font-family: var(--mono-police);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--inkoust);
  padding-top: .7rem;
}
.cn-vyklad dd {
  margin: .18rem 0 .7rem;
  padding-bottom: .7rem;
  border-bottom: var(--filet) solid var(--linkovani);
  font-size: .95rem;
  color: var(--tuzka);
}
.cn-vyklad dd:last-of-type { border-bottom: 0; }

/* ---- Etapes ordonnees ------------------------------------------------- */
.cn-etapes, .cn-kroky {
  list-style: none;
  counter-reset: etape;
  padding-left: 0;
}
.cn-etapes > li, .cn-kroky > li {
  counter-increment: etape;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: .8rem;
}
.cn-etapes > li::before, .cn-kroky > li::before {
  content: counter(etape);
  position: absolute;
  left: 0; top: .08rem;
  width: 1.6rem; height: 1.6rem;
  display: grid;
  place-items: center;
  font-family: var(--mono-police);
  font-size: .78rem;
  color: var(--inkoust);
  background: var(--znacka);   /* aplat plat, jamais un degrade */
  border-radius: var(--rayon);
}

/* ---- SIGNATURE A : la languette collee dans la marge ----------------- */
/* Un pere qui prepare une demande d'otcovska corne sa page : la languette
   n'est pas un ornement, c'est le geste de celui qui doit y revenir. Elle ne
   se pose QUE sur un dispositif ou une etape nommee, jamais sur du texte
   decoratif, et toujours en aplat plat. */
.cn-zalozka { position: relative; padding-left: 1.15rem; }
.cn-zalozka::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: .42rem;
  height: 1.55em;
  background: var(--znacka);
  border-radius: var(--rayon) 0 0 var(--rayon);
}
.cn-zalozka--vysoka::before {
  height: 2.9em;
  box-shadow: .18rem .18rem 0 var(--lepidlo);
}
.cn-tabulka .cn-zalozka { display: inline-block; }
.cn-mustek .cn-zalozka { display: block; }
a.cn-zalozka:hover::before { background: var(--lepidlo); }

/* ---- SIGNATURE B : la reglette d'age (5 graduations) ------------------ */
/* Le site est organise par age de l'enfant : c'est sa colonne vertebrale. La
   reglette rend visible en permanence ou on se trouve dans la vie de
   l'enfant. Elle remplace la bascule metric/imperial de la direction. */
.cn-vek-pas {
  display: flex;
  gap: 0;
  border-top: var(--filet) solid var(--linkovani);
  border-bottom: var(--filet) solid var(--linkovani);
  font-family: var(--mono-police);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.cn-vek-pas__dil {
  flex: 1;
  padding: .55rem .3rem .5rem;
  color: var(--tuzka);
  border-left: var(--filet) solid var(--linkovani);
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
}
.cn-vek-pas__dil:first-child { border-left: 0; }
.cn-vek-pas__dil:hover { background: var(--blok); color: var(--inkoust); }
.cn-vek-pas__dil[aria-current] {
  color: var(--inkoust);
  box-shadow: inset 0 3px 0 var(--znacka);   /* la graduation courante, jamais supprimee */
}

/* ---- SIGNATURE C : le filet de reserve -------------------------------- */
/* « Co tahle stranka netvrdi » : filet superieur de 3 px en encre (pas en
   jaune : on ne confond pas un repere et une reserve), titre en mono
   capitales interlettre, deux ou trois phrases au maximum. */
/* Le filet de reserve ferme la section : il n'a pas besoin d'une marge
   basse en plus du padding de section, qui creusait un blanc de 130 px
   entre deux sections et vidait la colonne de lecture. */
.cn-nevime {
  border-top: 3px solid var(--inkoust);
  background: var(--blok);
  padding: calc(var(--pas) * .7) calc(var(--pas) * .9);
  margin: calc(var(--pas) * .8) 0 0;
}
.cn-nevime__klic {
  font-family: var(--mono-police);
  font-size: .72rem;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inkoust);
  margin: 0 0 .5rem;
}
.cn-nevime p { font-size: .94rem; color: var(--tuzka); margin: 0 0 .45rem; }
.cn-nevime p:last-child { margin-bottom: 0; }

/* ---- Bloc de synthese de fin de section ------------------------------- */
.cn-retenir {
  background: var(--karton);
  border: var(--filet) solid var(--linkovani);
  border-top: 3px solid var(--znacka);
  border-radius: 0 0 var(--rayon) var(--rayon);
  padding: 1rem 1.15rem 1.1rem;
  margin-top: calc(var(--pas) * 1.1);
}
.cn-retenir__cle {
  font-family: var(--mono-police);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--inkoust);
  margin: 0 0 .55rem;
}
.cn-retenir__points { list-style: none; margin: 0; padding: 0; }
.cn-retenir__points li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: .4rem;
  font-size: .96rem;
}
.cn-retenir__points li:last-child { margin-bottom: 0; }
.cn-retenir__points li::before {
  content: "";
  position: absolute;
  left: 0; top: .66em;
  width: .65rem; height: var(--filet);
  background: var(--inkoust);
}

/* ---- Encart d'appui --------------------------------------------------- */
.cn-encart {
  background: var(--blok);
  border: var(--filet) solid var(--linkovani);
  border-left: 3px solid var(--inkoust);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: .95rem 1.1rem;
  margin: calc(var(--pas) * .85) 0;
}
.cn-encart__cle {
  font-family: var(--mono-police);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--inkoust);
  margin: 0 0 .4rem;
}
.cn-encart p:last-child { margin-bottom: 0; }

/* ---- Le journal des revisions (l'idee inattendue) --------------------- */
/* Denik revizi ne parle pas du sujet : il parle de l'etat de verification de
   la page elle-meme. Trois etats : Overeno / Zmeneno / Zatim nejasne. */
.cn-denik {
  margin: calc(var(--pas) * 1.2) 0 0;
  border-top: var(--filet) solid var(--linkovani);
}
.cn-denik dt {
  font-family: var(--mono-police);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inkoust);
  padding-top: .8rem;
}
.cn-denik dd {
  margin: .2rem 0 .8rem;
  padding-bottom: .8rem;
  border-bottom: var(--filet) solid var(--linkovani);
  font-size: .93rem;
  color: var(--tuzka);
}
.cn-denik dd:last-of-type { border-bottom: 0; padding-bottom: .2rem; }
.cn-denik time, .cn-programme time, .cn-zdroje time {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono-police);
  font-size: .78rem;
  letter-spacing: .04em;
}

/* ---- Definitions ------------------------------------------------------ */
.cn-glose, .cn-vyklad { }
.cn-glose {
  margin: 0;
  border-top: var(--filet) solid var(--linkovani);
}
.cn-glose dt { font-weight: 700; padding-top: .7rem; }
.cn-glose dd {
  margin: .2rem 0 .7rem;
  padding-bottom: .7rem;
  border-bottom: var(--filet) solid var(--linkovani);
  color: var(--tuzka);
}

/* ---- Tableau a defilement propre -------------------------------------- */
.cn-tabulka {
  overflow-x: auto;
  border: var(--filet) solid var(--linkovani);
  border-radius: var(--rayon);
  background: var(--blok);
  margin: calc(var(--pas) * .85) 0;
}
.cn-tabulka table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: .93rem;
}
.cn-tabulka caption {
  text-align: left;
  padding: .7rem .85rem;
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tuzka);
  border-bottom: var(--filet) solid var(--linkovani);
}
.cn-tabulka th, .cn-tabulka td {
  text-align: left;
  padding: .6rem .85rem;
  border-bottom: var(--filet) solid var(--linkovani);
  vertical-align: top;
}
.cn-tabulka thead th {
  background: var(--karton);
  font-family: var(--mono-police);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cn-tabulka tbody tr:last-child td { border-bottom: 0; }

/* ---- Figures ---------------------------------------------------------- */
/* Aucun filtre de couleur, aucune duotone : une bordure d'un pixel et un
   decalage de papier en aplat dur (pas de flou). */
.cn-snimek { margin: calc(var(--pas) * .9) 0; }
.cn-snimek img {
  display: block;
  width: 100%;
  aspect-ratio: var(--pomer-scena);
  object-fit: cover;
  border: var(--filet) solid var(--linkovani);
  border-radius: var(--rayon);
  background: var(--blok);
  box-shadow: .3rem .3rem 0 var(--karton);
}
.cn-snimek figcaption {
  font-size: .84rem;
  color: var(--tuzka);
  margin-top: .6rem;
}
.cn-snimek--detail img { aspect-ratio: var(--pomer-detail); }
.cn-snimek--znamka img { aspect-ratio: var(--pomer-znamka); }

/* Sur grand ecran, le plan rapproche flotte dans la marge de lecture. */
@media (min-width: 60rem) {
  .cn-snimek--okraj {
    float: right;
    width: 15rem;
    margin: .2rem 0 1rem 1.4rem;
  }
}

/* ---- Programme d'accueil (liste datee, jamais une grille de cartes) --- */
.cn-programme {
  list-style: none;
  counter-reset: chapitre;
  margin: 0;
  padding: 0;
  border-top: var(--filet) solid var(--linkovani);
}
.cn-programme > li {
  counter-increment: chapitre;
  border-bottom: var(--filet) solid var(--linkovani);
}
.cn-programme a {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: .2rem .7rem;
  padding: .95rem .3rem 1rem 0;
  text-decoration: none;
  color: var(--inkoust);
}
.cn-programme a:hover .cn-programme__titre { text-decoration: underline; }
.cn-programme a::before {
  content: counter(chapitre, decimal-leading-zero);
  grid-row: 1 / span 4;
  font-family: var(--mono-police);
  font-size: .8rem;
  color: var(--tuzka);
  padding-top: .25rem;
}
.cn-programme img {
  grid-column: 2;
  width: 5.5rem;
  aspect-ratio: var(--pomer-znamka);
  object-fit: cover;
  border: var(--filet) solid var(--linkovani);
  border-radius: var(--rayon);
  margin-bottom: .45rem;
}
.cn-programme__titre {
  font-family: var(--titre-police);
  font-size: var(--t3);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.012em;
}
.cn-programme__resume {
  color: var(--tuzka);
  font-size: .93rem;
  margin-top: .15rem;
}
.cn-programme__reperes {
  margin-top: .35rem;
  font-size: .76rem;
  letter-spacing: .05em;
  color: var(--tuzka);
}
.cn-programme__reperes b { font-weight: 400; color: var(--razitko); }

/* ---- Index de rubrique (liste dense) ---------------------------------- */
.cn-index { list-style: none; margin: 0; padding: 0; }
.cn-index > li { padding: .9rem 0; border-bottom: var(--filet) solid var(--linkovani); }
.cn-index__titre {
  font-family: var(--titre-police);
  font-size: var(--t3);
  letter-spacing: -.012em;
  margin: 0 0 .25rem;
}
.cn-index__titre a { text-decoration: none; color: var(--inkoust); }
.cn-index__titre a:hover { text-decoration: underline; }
.cn-index__resume { margin: 0; color: var(--tuzka); font-size: .93rem; }
.cn-index__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .9rem;
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  font-size: .76rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tuzka);
}

/* ---- Section retournee : fond plein qui deborde des marges ----------- */
/* C'est le contraste de densite qui fait le geste : trois lignes longues,
   aucun liste, aucune image, un padding vertical nettement plus grand. */
.cn-obraceny {
  margin-inline: calc(50% - 50vw);
  padding: 7rem calc(50vw - 50% + var(--pas));
  max-width: 100vw;
  margin-block: clamp(1.6rem, 4vw, 2.6rem);
}
/* A partir de 60rem le sommaire decale la colonne de lecture : le debord et
   le calage interieur sont corriges de la demi-colonne de sommaire, sans quoi
   la bande partirait de travers. */
@media (min-width: 60rem) {
  .cn-obraceny {
    margin-left: calc(50% - 50vw - var(--decalage));
    margin-right: calc(50% - 50vw + var(--decalage));
  }
}
.cn-obraceny > * { max-width: 74ch; margin-inline: auto; }
.cn-obraceny h2 {
  font-family: var(--titre-police);
  font-size: var(--t2);
  line-height: 1.26;
  letter-spacing: -.012em;
  margin: 0 auto .9rem;
}
.cn-obraceny p { color: var(--tuzka); font-size: 1.04rem; margin: 0 auto .9rem; }
.cn-obraceny p:last-child { margin-bottom: 0; }

/* ---- Passerelle de fin de page ---------------------------------------- */
/* La passerelle est une liste reglee, pas une grille de cartes egales : trois
   rangees separees par le filet d'imprime, etiquette de rubrique a gauche,
   titre a droite. Chaque rangee se mesure sur son contenu, sans boite vide. */
.cn-mustek {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  margin-top: calc(var(--pas) * 1.4);
  border-top: var(--filet) solid var(--linkovani);
  padding-top: 0;
}
.cn-mustek a {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .15rem 1rem;
  align-items: baseline;
  padding: .8rem .4rem;
  border-top: var(--filet) solid var(--linkovani);
  text-decoration: none;
  color: var(--inkoust);
}
.cn-mustek a:first-child { border-top: 0; }
.cn-mustek a:hover { background: var(--blok); }
.cn-mustek small {
  display: block;
  font-family: var(--mono-police);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tuzka);
  margin: 0;
}
.cn-mustek b {
  display: block;
  font-family: var(--titre-police);
  font-weight: 700;
  line-height: 1.32;
}

/* ---- Renvois de source (rail numerote, en pied d'article) ------------- */
/* Le renvoi est numerote en exposant dans le texte et resolu dans une liste
   ordonnee, chaque entree portant le nom de la page officielle et la date de
   consultation en chiffres tabulaires. */
.cn-odkaz {
  font-family: var(--mono-police);
  font-size: .68rem;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  color: var(--razitko);
  padding-left: .1em;
}
.cn-odkaz:hover { text-decoration: underline; }

.cn-zdroje {
  list-style: decimal;
  margin: calc(var(--pas) * 1.2) 0 0;
  padding-left: 1.4rem;
  border-top: 3px solid var(--inkoust);
  padding-top: .8rem;
  font-size: .88rem;
  color: var(--tuzka);
}
.cn-zdroje li { margin-bottom: .5rem; }
.cn-zdroje a { color: var(--razitko); }

/* ---- Socle ------------------------------------------------------------ */
.cn-socle {
  border-top: var(--filet) solid var(--linkovani);
  background: var(--karton);
  padding-block: clamp(1.6rem, 4vw, 2.4rem) clamp(1rem, 2.5vw, 1.5rem);
  font-size: .9rem;
}
.cn-socle__rangee {
  display: grid;
  gap: var(--pas);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.cn-socle h2 {
  font-family: var(--mono-police);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 .55rem;
  color: var(--inkoust);
}
.cn-socle ul { list-style: none; margin: 0; padding: 0; }
.cn-socle li { margin-bottom: .3rem; }
.cn-socle a { color: var(--tuzka); }
.cn-socle a:hover { color: var(--inkoust); }
.cn-socle__kolofon, .cn-socle__poznamka { margin: .7rem 0 0; color: var(--tuzka); font-size: .86rem; }
.cn-socle__poznamka { max-width: 74ch; }
.cn-socle__bas {
  margin-top: var(--pas);
  padding-top: .85rem;
  border-top: var(--filet) solid var(--linkovani);
  color: var(--tuzka);
  font-size: .82rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  justify-content: space-between;
}

/* =========================================================================
   Petites largeurs : le sommaire passe au-dessus du contenu et cesse
   d'etre collant ; la reglette d'age et la languette survivent.
   ========================================================================= */
@media (max-width: 60rem) {
  .cn-pupitre { grid-template-columns: minmax(0, 1fr); }
  .cn-marge { position: static; max-height: none; overflow: visible; }
  .cn-marge__note { margin-top: 1rem; }
}

@media (max-width: 34rem) {
  :root { --pas: 1.15rem; }
  .cn-lecon__palier { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .cn-oddil { padding-left: 2.2rem; font-size: .68rem; }
  .cn-lecon > p, .cn-lecon > ul, .cn-lecon > ol, .cn-lecon > dl,
  .cn-lecon > figure, .cn-lecon > div, .cn-lecon > aside,
  .cn-lecon > nav, .cn-lecon > blockquote, .cn-lecon > h3 { margin-left: 0; }
  .cn-programme a { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .cn-mustek a { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  /* La reglette d'age ne tient pas en cinq colonnes sous 34rem : les libelles
     tombaient sur trois ou quatre lignes. Elle devient une bande qui defile
     horizontalement, un libelle par ligne, sans rien couper. */
  .cn-vek-pas {
    font-size: .72rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cn-vek-pas::-webkit-scrollbar { display: none; }
  .cn-vek-pas__dil {
    flex: 0 0 auto;
    padding: .5rem .8rem .45rem;
    text-align: left;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .cn-vek-pas__dil span { display: inline; }
  .cn-vek-pas__dil span:first-child {
    margin-right: .45rem;
    color: var(--razitko);
    font-weight: 700;
  }
  .cn-zalozka { padding-left: .9rem; }
  .cn-zalozka::before { width: .35rem; }
  .cn-nevime { padding: 1rem; }
  .cn-obraceny { padding-block: 3.2rem; }
  .cn-snimek img { box-shadow: none; }
}

/* Sous 390 px, la vignette du programme reste : la regle du reseau du 16/09/2026
   veut que tout encart qui renvoie vers un article porte la photo de cet article.
   Elle se resserre au lieu de disparaitre. La date en chiffres tabulaires, elle,
   ne bouge jamais. */
@media (max-width: 24.4rem) {
  .cn-programme img { width: 4.4rem; }
  .cn-snimek--okraj { float: none; width: auto; margin: 0 0 1rem; }
}

/* ---- Impression ------------------------------------------------------- */
@media print {
  .cn-marge, .cn-parcours, .cn-preskok { display: none; }
  .cn-pupitre { display: block; }
  body { background: #fff; color: #000; }
  .cn-obraceny { margin-inline: 0; padding: 1rem 0; background: none; }
}

/* ---- Entree en deux colonnes : lecture a gauche, tirage a droite -------
   Corrige le premier ecran qui laissait la moitie droite vide a 1440 :
   la tirage (redaction, revision, contact) occupe desormais cette colonne
   et devient lisible sur chaque page, sans toucher au squelette. */
.cn-entree__rangee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16.5rem;
  gap: var(--gouttiere);
  align-items: start;
}
.cn-entree__hlavni { min-width: 0; }

/* La ligne de redaction, juste sous le chapeau : un nom et un role. */
.cn-podpis {
  margin: var(--pas) 0 0;
  padding-top: .7rem;
  border-top: 2px solid var(--znacka);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--tuzka);
  max-width: 58ch;
}
.cn-podpis span {
  font-family: var(--titre-police);
  font-weight: 700;
  color: var(--inkoust);
}

/* Tirage : cartouche d'ours, meme grammaire que les encarts du site. */
.cn-stitek {
  min-width: 0;
  border: var(--filet) solid var(--linkovani);
  border-top: 3px solid var(--znacka);
  border-radius: var(--rayon);
  padding: .95rem 1rem 1.1rem;
  background: var(--papir, #FFFFFF);
}
.cn-stitek__cle {
  margin: 0 0 .6rem;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tuzka);
}
.cn-stitek__radky {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .15rem;
  font-size: .84rem;
  line-height: 1.5;
}
.cn-stitek__radky dt {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tuzka);
  margin-top: .5rem;
}
.cn-stitek__radky dt:first-of-type { margin-top: 0; }
.cn-stitek__radky dd {
  margin: 0;
  color: var(--inkoust);
  overflow-wrap: anywhere;
}

/* ---- Vignette des listes d'articles (ratio znamka du brief) ----------- */
.cn-index__radek {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: .2rem .9rem;
  align-items: start;
}
.cn-index__text { min-width: 0; }
.cn-index__snimek {
  display: block;
  line-height: 0;
  border: var(--filet) solid var(--linkovani);
  border-radius: var(--rayon);
  overflow: hidden;
}
.cn-index__snimek img {
  display: block;
  width: 100%;
  aspect-ratio: var(--pomer-znamka);
  object-fit: cover;
}

/* Sous 60 rem, la tirage passe sous le chapeau et cesse d'etre une colonne. */
@media (max-width: 60rem) {
  .cn-entree__rangee { grid-template-columns: minmax(0, 1fr); }
  .cn-stitek { margin-top: var(--pas); }
}

/* Sous 390 px la vignette de liste reste (une liste d'articles montre l'article),
   mais la colonne se resserre. Elle ne tombe qu'en dessous de 22 rem. */
@media (max-width: 24.4rem) {
  .cn-index__radek { grid-template-columns: 4.2rem minmax(0, 1fr); gap: .2rem .7rem; }
}
@media (max-width: 22rem) {
  .cn-index__radek { grid-template-columns: minmax(0, 1fr); }
  .cn-index__snimek { display: none; }
}