/* =========================================================================
   SQUELETTE « portail-rubriques »
   Feuille de style unique. Aucune ressource distante.
   Champ lexical des classes : le quaderno (leggio, testata, insegna, percorso,
   smistamento, filare, partenza, briciole, rimandi, colofone...).
   -------------------------------------------------------------------------
   TOUT LE RHABILLAGE SE FAIT DANS LE BLOC :root CI-DESSOUS.
   En dessous du bloc :root, on ne touche qu'en connaissance de cause.
   ========================================================================= */

:root {

  /* ---- 1. COULEURS ---------------------------------------------------
     Quaderno del Subasio : palette claire « pietra calcarea, verde
     ulivo, ocra del grano, inchiostro d’archivio ». */
  --fond:            #f4f1e7;   /* carta: pietra calcarea del Subasio      */
  --fond-appui:      #ffffff;   /* pannelli posati sul fondo             */
  --fond-relief:     #e9e3d3;   /* fasce scavate, ocra chiara            */
  --encre:           #232720;   /* inchiostro d’archivio                  */
  --encre-douce:     #5c6650;   /* verde ulivo secondario                 */
  --filet:           #cfc6b0;   /* filetti pietra                         */
  --accent:          #7a5c1e;   /* ocra del grano scura                   */
  --accent-clair:    #4a5d23;   /* verde ulivo per il passaggio            */
  --accent-froid:    #4a5d23;   /* verde ulivo controcanto                */
  --sur-accent:      #f4f1e7;   /* testo su campitura d’accento           */
  --focus: var(--accent-froid); /* contour de focus clavier                */
  --fond-sombre:     #2e3626;   /* colofone verde bosco                    */
  --encre-inverse:   #f4f1e7;   /* testo del colofone                      */

  /* ---- 2. TEINTES DE RUBRIQUE ---------------------------------------
     Une teinte par rubrique. C'est le seul endroit a modifier pour
     rehabiller la couleur des embranchements (classes .csn-via-1 a .csn-via-7). */
  --csn-via-1: #7a5c1e;   /* ocra del grano */
  --csn-via-2: #4a5d23;   /* verde ulivo    */
  --csn-via-3: #6b4a2a;   /* terra cotta    */
  --csn-via-4: #8a4a2a;   /* mattone  */
  --csn-via-5: #5d6e2e;   /* olivo    */
  --csn-via-6: #6d5a3a;   /* noce     */
  --csn-via-7: #96522f;   /* cotto    */
  --csn-via-teinte: var(--accent);  /* valeur courante, surchargee par .csn-via-N */

  /* ---- 3. POLICES (piles systeme, aucun fichier a charger) ---------- */
  --titre-police: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  --texte-police: "Segoe UI", Verdana, Geneva, Tahoma, sans-serif;
  --regie-police: "Andale Mono", Consolas, "DejaVu Sans Mono", "Courier New", monospace;

  /* ---- 4. RYTHME ----------------------------------------------------- */
  --corps:       1rem;      /* taille du texte courant                    */
  --interligne:  1.7;
  --mesure:      36rem;     /* largeur de lecture d'un article            */
  --halle:       72rem;     /* largeur maximale du site                   */
  --gouttiere:   clamp(1rem, 4vw, 2.5rem);
  --respiration: clamp(2.5rem, 6vw, 4.5rem);
  --rail:        6.5rem;    /* colonne de gauche des numeros de rubrique  */
  --trait:       1px;
  --arrondi:     0;         /* le squelette est a angles vifs par defaut  */
}

/* =========================================================================
   BASE
   ========================================================================= */

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

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte-police);
  font-size: var(--corps);
  line-height: var(--interligne);
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--titre-police);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .6em;
  letter-spacing: .01em;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p, ul, ol, figure, table, blockquote { margin: 0 0 1.2em; }

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-clair); }

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

hr {
  border: 0;
  border-top: var(--trait) solid var(--filet);
  margin: var(--respiration) 0;
}

/* Lien d'evitement clavier */
.csn-salto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--sur-accent);
  padding: .7rem 1.1rem;
  z-index: 50;
}
.csn-salto:focus {
  left: .75rem;
  top: .75rem;
}

/* =========================================================================
   CONTENEURS
   ========================================================================= */

.csn-leggio {
  width: 100%;
  max-width: var(--halle);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.csn-leggio--lettura { max-width: calc(var(--mesure) + 2 * var(--gouttiere)); }

.csn-scaffale { padding-block: var(--respiration); }
.csn-scaffale + .csn-scaffale { border-top: var(--trait) solid var(--filet); }
.csn-scaffale--incavato { background: var(--fond-relief); }

.csn-scaffale__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  margin-bottom: 1.8rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--encre);
}
.csn-scaffale__testa h2 { margin: 0; }

.csn-scaffale__nota {
  font-family: var(--regie-police);
  font-size: .85rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* =========================================================================
   FRONTON (en-tete du site)
   ========================================================================= */

.csn-testata {
  background: var(--fond-appui);
  border-bottom: 2px solid var(--filet);
}

.csn-testata__corpo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.1rem;
}

.csn-insegna { text-decoration: none; color: inherit; display: block; }
.csn-insegna__nome {
  font-family: var(--titre-police);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  display: block;
}
.csn-insegna__nota {
  font-family: var(--regie-police);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  display: block;
  margin-top: .25rem;
}

.csn-percorso ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.csn-percorso a {
  font-family: var(--regie-police);
  font-size: .92rem;
  letter-spacing: .04em;
  color: var(--encre);
  text-decoration: none;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
}
.csn-percorso a:hover,
.csn-percorso a[aria-current="page"] {
  border-bottom-color: var(--csn-via-teinte);
  color: var(--encre);
}

/* =========================================================================
   PANCARTE (titre de page)
   ========================================================================= */

.csn-cartiglio {
  padding-block: clamp(2rem, 5vw, 3.6rem);
  border-bottom: var(--trait) solid var(--filet);
}
.csn-cartiglio--via { border-bottom: 4px solid var(--csn-via-teinte); }

.csn-cartiglio__surtitre {
  font-family: var(--regie-police);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--csn-via-teinte);
  margin: 0 0 .8rem;
}

.csn-cartiglio h1 { max-width: 22ch; }
.csn-cartiglio--largo h1 { max-width: 30ch; }

.csn-cartiglio__intro {
  max-width: var(--mesure);
  font-size: 1.08rem;
  color: var(--encre-douce);
  margin-bottom: 0;
}

.csn-cartiglio__numero {
  font-family: var(--titre-police);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1;
  color: var(--csn-via-teinte);
  font-variant-numeric: lining-nums tabular-nums;
  display: block;
  margin-bottom: .4rem;
}

/* Mentions courtes : date, duree, nombre d'articles */
.csn-cartiglio__nota {
  font-family: var(--regie-police);
  font-size: .86rem;
  letter-spacing: .05em;
  color: var(--encre-douce);
  margin: 0;
}
.csn-cartiglio__note {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.4rem;
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
}

/* =========================================================================
   JALONS (fil d'ariane)
   ========================================================================= */

.csn-briciole { padding-top: 1.2rem; }
.csn-briciole ol {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--regie-police);
  font-size: .84rem;
  color: var(--encre-douce);
}
.csn-briciole li + li::before { content: "/"; margin-right: .55rem; color: var(--filet); }
.csn-briciole a { color: var(--encre-douce); }

/* =========================================================================
   AIGUILLAGE : la liste des rubriques sur l'accueil
   Rythme propre au squelette : pas de cartes, une suite de rangees
   asymetriques (colonne de numero a gauche, contenu a droite).
   ========================================================================= */

.csn-smistamento {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--encre);
}

.csn-filare {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--gouttiere);
  padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
  border-bottom: var(--trait) solid var(--filet);
}

.csn-filare__segnale { grid-column: 1; }

.csn-filare__indice {
  font-family: var(--titre-police);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1;
  color: var(--csn-via-teinte);
  font-variant-numeric: lining-nums tabular-nums;
  display: block;
}
.csn-filare__sbarra {
  display: block;
  width: 2.4rem;
  height: 4px;
  background: var(--csn-via-teinte);
  margin-top: .7rem;
}

.csn-filare__corpo { grid-column: 2; min-width: 0; }

.csn-filare__titolo { margin-bottom: .5rem; }
.csn-filare__titolo a {
  color: var(--encre);
  text-decoration: none;
  background-image: linear-gradient(var(--csn-via-teinte), var(--csn-via-teinte));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .18s ease-out;
}
.csn-filare__titolo a:hover,
.csn-filare__titolo a:focus-visible { background-size: 100% 2px; }

.csn-filare__estratto {
  max-width: 52ch;
  color: var(--encre-douce);
  margin-bottom: 1rem;
}

/* Liens d'articles poses sous chaque rubrique : c'est l'etoile du portail */
.csn-filare__servito {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.csn-filare__servito li { position: relative; padding-left: 1.1rem; }
.csn-filare__servito li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: 2px;
  background: var(--csn-via-teinte);
}
.csn-filare__servito a {
  color: var(--encre);
  text-decoration: none;
  border-bottom: var(--trait) solid var(--filet);
}
.csn-filare__servito a:hover { border-bottom-color: var(--csn-via-teinte); }

@media (max-width: 46rem) {
  .csn-filare { grid-template-columns: 1fr; }
  .csn-filare__segnale {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .6rem;
  }
  .csn-filare__indice { font-size: 1.9rem; }
  .csn-filare__sbarra { margin-top: 0; width: 1.6rem; }
  .csn-filare__corpo { grid-column: 1; }
}

/* =========================================================================
   ACCES : les liens d'action
   ========================================================================= */

.csn-tasto {
  display: inline-block;
  font-family: var(--regie-police);
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--csn-via-teinte);
  text-decoration: none;
  border-bottom: 2px solid var(--csn-via-teinte);
  padding-bottom: .15rem;
}
.csn-tasto:hover { color: var(--encre); border-bottom-color: var(--encre); }
.csn-tasto::after { content: " \2192"; }

.csn-tasto--pieno {
  background: var(--csn-via-teinte);
  color: var(--sur-accent);
  border: 0;
  padding: .7rem 1.2rem;
  border-radius: var(--arrondi);
}
.csn-tasto--pieno:hover { background: var(--encre); color: var(--fond); }

/* =========================================================================
   DESSERTE : liste d'articles (accueil « derniers ajouts » et page rubrique)
   ========================================================================= */

.csn-corsa {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--trait) solid var(--filet);
}

.csn-partenza {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: .2rem var(--gouttiere);
  padding-block: 1.3rem;
  border-bottom: var(--trait) solid var(--filet);
}

.csn-partenza__orario {
  font-family: var(--regie-police);
  font-size: .84rem;
  letter-spacing: .05em;
  color: var(--encre-douce);
  font-variant-numeric: lining-nums tabular-nums;
  padding-top: .3rem;
}

.csn-partenza__corpo { min-width: 0; }

.csn-partenza__titolo {
  font-family: var(--titre-police);
  font-size: 1.22rem;
  line-height: 1.3;
  margin: 0 0 .35rem;
}
.csn-partenza__titolo a { color: var(--encre); text-decoration: none; }
.csn-partenza__titolo a:hover { color: var(--csn-via-teinte); }

.csn-partenza__estratto {
  margin: 0;
  color: var(--encre-douce);
  max-width: 60ch;
}

.csn-etichetta {
  display: inline-block;
  font-family: var(--regie-police);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--csn-via-teinte);
  border: var(--trait) solid var(--csn-via-teinte);
  padding: .12rem .5rem;
  margin-bottom: .5rem;
  text-decoration: none;
}
a.csn-etichetta:hover { background: var(--csn-via-teinte); color: var(--sur-accent); }

@media (max-width: 46rem) {
  .csn-partenza { grid-template-columns: 1fr; }
  .csn-partenza__orario { padding-top: 0; margin-bottom: .3rem; }
}

/* =========================================================================
   CONSIGNE : encadre lateral ou bloc de reperes
   ========================================================================= */

.csn-avviso {
  background: var(--fond-appui);
  border-left: 4px solid var(--csn-via-teinte);
  padding: 1.3rem 1.4rem;
  margin-block: 1.8rem;
}
.csn-avviso h2, .csn-avviso h3 { margin-bottom: .5rem; }
.csn-avviso p:last-child, .csn-avviso ul:last-child { margin-bottom: 0; }
.csn-avviso ul { padding-left: 1.1rem; }
.csn-avviso li { margin-bottom: .35rem; }

/* =========================================================================
   PARCOURS : corps d'un article
   ========================================================================= */

.csn-quaderno { max-width: var(--mesure); }
.csn-quaderno > * { max-width: 100%; }

.csn-quaderno h2 {
  margin-top: 2.2rem;
  padding-top: .9rem;
  border-top: 2px solid var(--csn-via-teinte);
}
.csn-quaderno h3 { margin-top: 1.8rem; }

.csn-quaderno ul, .csn-quaderno ol { padding-left: 1.3rem; }
.csn-quaderno li { margin-bottom: .45rem; }

/* les titres des blocs poses dans l'article ne prennent pas le filet des h2 */
.csn-quaderno .csn-avviso h2,
.csn-quaderno .csn-indice h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.csn-presentazione {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--encre);
  border-bottom: var(--trait) solid var(--filet);
  padding-bottom: 1.3rem;
  margin-bottom: 1.6rem;
}

.csn-citazione {
  margin: 1.8rem 0;
  padding: .4rem 0 .4rem 1.3rem;
  border-left: 4px solid var(--csn-via-teinte);
  font-family: var(--titre-police);
  font-size: 1.16rem;
  line-height: 1.45;
}
.csn-citazione p:last-child { margin-bottom: 0; }
.csn-citazione cite {
  display: block;
  margin-top: .6rem;
  font-family: var(--regie-police);
  font-size: .84rem;
  font-style: normal;
  letter-spacing: .06em;
  color: var(--encre-douce);
}

.csn-tavola { margin: 1.8rem 0; }
.csn-tavola img { width: 100%; background: var(--fond-relief); }
.csn-tavola figcaption {
  font-family: var(--regie-police);
  font-size: .84rem;
  color: var(--encre-douce);
  padding-top: .5rem;
  border-top: var(--trait) solid var(--filet);
  margin-top: .5rem;
}

/* Sommaire interne a l'article */
.csn-indice {
  background: var(--fond-relief);
  padding: 1.1rem 1.3rem;
  margin-bottom: 2rem;
}
.csn-indice h2 {
  font-family: var(--regie-police);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .6rem;
  border: 0;
  padding: 0;
}
.csn-indice ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: .96rem;
}
.csn-indice li { margin-bottom: .3rem; }
.csn-indice a { color: var(--encre); }

/* =========================================================================
   TABLEAUX : toujours dans un conteneur a defilement
   ========================================================================= */

.csn-tabella-scorre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.4rem;
  border: var(--trait) solid var(--filet);
}
.csn-tabella-scorre table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  margin: 0;
  font-size: .95rem;
}
.csn-tabella-scorre th,
.csn-tabella-scorre td {
  text-align: left;
  padding: .6rem .8rem;
  border-bottom: var(--trait) solid var(--filet);
  vertical-align: top;
}
.csn-tabella-scorre thead th {
  font-family: var(--regie-police);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--fond-relief);
}
.csn-tabella-scorre caption {
  caption-side: top;
  text-align: left;
  font-family: var(--regie-police);
  font-size: .84rem;
  color: var(--encre-douce);
  padding: .6rem .8rem;
}

/* =========================================================================
   CORRESPONDANCE : les renvois croises (le coeur de l'etoile)
   ========================================================================= */

.csn-rimandi { padding-block: var(--respiration); }

.csn-rimandi__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--trait);
  background: var(--filet);
  border: var(--trait) solid var(--filet);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.csn-rimandi__lista li { background: var(--fond-appui); }
.csn-rimandi__lista a {
  display: block;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--encre);
  border-top: 4px solid var(--csn-via-teinte);
  height: 100%;
}
.csn-rimandi__lista a:hover { background: var(--fond-relief); }
.csn-rimandi__cosa {
  display: block;
  font-family: var(--regie-police);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: .3rem;
}
.csn-rimandi__titolo {
  display: block;
  font-family: var(--titre-police);
  font-size: 1.08rem;
  line-height: 1.3;
}

/* Relais : navigation entre pages d'une rubrique */
.csn-relais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  padding-block: 1.6rem;
  border-top: var(--trait) solid var(--filet);
  font-family: var(--regie-police);
  font-size: .92rem;
}
.csn-relais__stato { color: var(--encre-douce); }

/* =========================================================================
   MARCHEPIED : pied de page
   ========================================================================= */

.csn-colofone {
  background: var(--fond-sombre);
  color: var(--encre-inverse);
  margin-top: var(--respiration);
  padding-block: var(--respiration) 2rem;
}
.csn-colofone a { color: var(--encre-inverse); }
.csn-colofone a:hover { color: var(--accent-clair); }

.csn-colofone__griglia {
  display: grid;
  gap: 2rem var(--gouttiere);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.csn-colofone__colonna h2 {
  font-family: var(--regie-police);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .8rem;
  color: var(--encre-inverse);
  opacity: .75;
}
.csn-colofone ul { list-style: none; margin: 0; padding: 0; }
.csn-colofone li { margin-bottom: .45rem; }

.csn-colofone__base {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: var(--trait) solid var(--filet);
  font-family: var(--regie-police);
  font-size: .84rem;
  opacity: .8;
}

/* =========================================================================
   TEINTES DE RUBRIQUE : a poser sur .csn-filare, .csn-cartiglio, .csn-scaffale,
   .csn-partenza, ou sur <body> pour teinter toute une page.
   ========================================================================= */

.csn-via-1 { --csn-via-teinte: var(--csn-via-1); }
.csn-via-2 { --csn-via-teinte: var(--csn-via-2); }
.csn-via-3 { --csn-via-teinte: var(--csn-via-3); }
.csn-via-4 { --csn-via-teinte: var(--csn-via-4); }
.csn-via-5 { --csn-via-teinte: var(--csn-via-5); }
.csn-via-6 { --csn-via-teinte: var(--csn-via-6); }
.csn-via-7 { --csn-via-teinte: var(--csn-via-7); }

/* =========================================================================
   UTILITAIRES (peu nombreux, volontairement)
   ========================================================================= */

.csn-fuori-schermo {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.csn-senza-margine { margin-bottom: 0; }

/* =========================================================================
   QUADERNO DEL SUBASIO : blocs propres au generateur (nav 2 etats,
   heros, grilles de schede, righe di rubrica, corps d'article)
   ========================================================================= */

/* Navigation a 2 etats : menu horizontal sur grand ecran, tiroir
   details/summary sous 62rem, sans JS externe. */
.csn-percorso__sportello { margin: 0; }
.csn-percorso__sportello > summary { list-style: none; cursor: pointer; }
.csn-percorso__sportello > summary::-webkit-details-marker { display: none; }
.csn-percorso__maniglia {
  display: none;
  font-family: var(--regie-police);
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre);
  border: var(--trait) solid var(--filet);
  background: var(--fond-appui);
  padding: .6rem 1rem;
}
@media (max-width: 62rem) {
  .csn-percorso__maniglia { display: inline-block; }
  .csn-percorso__sportello > ul { display: none; }
  .csn-percorso__sportello[open] > ul {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .8rem;
    padding: 1rem 1.2rem;
    background: var(--fond-appui);
    border: var(--trait) solid var(--filet);
  }
}
@media (min-width: 62.01rem) {
  .csn-percorso__sportello > ul { display: flex; }
}

/* Heros d'accueil : photo pleine largeur, voile, titre pose dessus.
   Les trois couches se superposent en absolu : pas de colonnes, pas de vide mesure. */
.csn-eroe {
  position: relative;
  background: var(--fond-sombre);
  color: var(--encre-inverse);
  overflow: hidden;
  min-height: clamp(26rem, 60vw, 38rem);
}
.csn-eroe__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.csn-eroe__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,26,18,.28), rgba(20,26,18,.62)); }
.csn-eroe__dentro { position: relative; padding-block: clamp(2rem, 5vw, 3.5rem); padding-top: clamp(10rem, 30vw, 20rem); }
.csn-eroe__dentro h1 { color: var(--encre-inverse); max-width: 24ch; }
.csn-eroe__sovratitolo {
  font-family: var(--regie-police);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-inverse);
  opacity: .85;
  margin: 0 0 .7rem;
}
.csn-eroe__riga { width: 3rem; height: 4px; background: #e8e0cd; margin-bottom: 1rem; }
.csn-eroe__presentazione { max-width: 52ch; font-size: 1.08rem; }
.csn-eroe .csn-tasto--pieno { background: #e8e0cd; color: #232720; }
.csn-eroe .csn-tasto--pieno:hover { background: #ffffff; color: #232720; }

/* Grille de schede (accueil « ogni articolo ») : vignette >= 25 %. */
.csn-griglia {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.6rem var(--gouttiere);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.csn-scheda {
  background: var(--fond-appui);
  border: var(--trait) solid var(--filet);
  border-top: 4px solid var(--csn-via-teinte);
  display: flex;
  flex-direction: column;
}
.csn-scheda__figura { margin: 0; }
.csn-scheda__figura img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fond-relief); }
.csn-scheda__figura figcaption {
  font-family: var(--regie-police);
  font-size: .8rem;
  color: var(--encre-douce);
  padding: .45rem .9rem 0;
}
.csn-scheda__testo { padding: .6rem 1rem 1.2rem; display: grid; gap: .4rem; }
.csn-scheda__data { font-family: var(--regie-police); font-size: .82rem; color: var(--encre-douce); margin: 0; }
.csn-scheda__titolo { font-size: 1.18rem; margin: 0; }
.csn-scheda__titolo a { color: var(--encre); text-decoration: none; }
.csn-scheda__titolo a:hover { color: var(--csn-via-teinte); }
.csn-scheda__estratto { margin: 0; color: var(--encre-douce); }

/* Righe di rubrica (hub) : texte >= 65 %, vignette a droite. */
.csn-elenco { list-style: none; margin: 0; padding: 0; border-top: var(--trait) solid var(--filet); }
.csn-rigo {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 0 var(--gouttiere);
  padding-block: 1.4rem;
  border-bottom: var(--trait) solid var(--filet);
  align-items: start;
}
.csn-rigo__testo { min-width: 0; }
.csn-rigo__data { font-family: var(--regie-police); font-size: .82rem; color: var(--encre-douce); margin: 0 0 .3rem; }
.csn-rigo__titolo { font-size: 1.25rem; margin: 0 0 .35rem; }
.csn-rigo__titolo a { color: var(--encre); text-decoration: none; }
.csn-rigo__titolo a:hover { color: var(--csn-via-teinte); }
.csn-rigo__estratto { margin: 0; color: var(--encre-douce); max-width: 60ch; }
.csn-rigo__figura { margin: 0; }
.csn-rigo__figura img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fond-relief); }
.csn-rigo__figura figcaption { font-family: var(--regie-police); font-size: .8rem; color: var(--encre-douce); padding-top: .4rem; }
@media (max-width: 46rem) {
  .csn-rigo { grid-template-columns: 1fr; }
  .csn-rigo__figura { order: -1; margin-bottom: .8rem; }
}

/* Corps d'article : colonne de lecture, figures a pleine mesure. */
.csn-leggio--lettura { max-width: calc(var(--mesure) + 2 * var(--gouttiere)); }
.csn-corpo > * { max-width: 100%; }
.csn-partenza__figura { margin: 0; }
.csn-partenza__figura img { width: 100%; max-width: 22rem; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fond-relief); }
.csn-partenza__figura figcaption { font-family: var(--regie-police); font-size: .8rem; color: var(--encre-douce); padding-top: .4rem; }
.csn-cartiglio__intro { max-width: var(--mesure); font-size: 1.08rem; color: var(--encre-douce); margin-bottom: 0; }
.csn-cartiglio__note { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; list-style: none; padding: 0; margin: 1.2rem 0 0; font-family: var(--regie-police); font-size: .86rem; letter-spacing: .05em; color: var(--encre-douce); }
.csn-cartiglio__sovratitolo { font-family: var(--regie-police); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--csn-via-teinte); margin: 0 0 .8rem; }
.csn-scaffale__sovratitolo { font-family: var(--regie-police); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); margin: 0 0 .4rem; }
.csn-rimandi { padding-block: 0; }
.csn-rimandi__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--trait); background: var(--filet); border: var(--trait) solid var(--filet); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.csn-rimandi__lista li { background: var(--fond-appui); }
.csn-rimandi__lista a { display: block; padding: 1rem 1.1rem; text-decoration: none; color: var(--encre); border-top: 4px solid var(--csn-via-teinte); height: 100%; }
.csn-rimandi__lista a:hover { background: var(--fond-relief); }
.csn-rimandi__cosa { display: block; font-family: var(--regie-police); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); margin-bottom: .3rem; }
.csn-rimandi__titolo { display: block; font-family: var(--titre-police); font-size: 1.08rem; line-height: 1.3; }