/* =========================================================================
   ville-chasseneuil-du-poitou.fr — feuille unique, statique, aucune ressource
   distante. Structure issue du squelette « portail-rubriques », identite
   propre : panneau petrole sombre, accent curcuma, champ lexical de la
   riviere et du bourg (berge, levee, ecluse, flux, cale...), prefixe cln-.
   ========================================================================= */

:root {

  /* ---- 1. COULEURS : petrole profond, ecru, curcuma ------------------- */
  --fond:            #0e2f36;   /* fond general (petrole profond)          */
  --fond-appui:      #153e46;   /* panneaux poses sur le fond              */
  --fond-relief:     #092228;   /* bandes creusees, plus sombres           */
  --encre:           #f0eee0;   /* texte principal (ecru)                  */
  --encre-douce:     #a9c0bb;   /* texte secondaire, dates, mentions       */
  --filet:           #2a525a;   /* traits de separation                    */
  --accent:          #dfa93e;   /* liens et signes forts (curcuma)         */
  --accent-clair:    #eec169;   /* survol de l'accent                      */
  --accent-froid:    #63c2b2;   /* second signe, contrepoint turquoise     */
  --sur-accent:      #0e2f36;   /* texte pose SUR un aplat d'accent        */
  --focus: var(--accent-froid); /* contour de focus clavier                */
  --fond-sombre:     #071a1e;   /* pied de page                            */
  --encre-inverse:   #f0eee0;   /* texte du pied de page                   */

  /* ---- 2. TEINTES DE RUBRIQUE (une par rubrique, classes .cln-t1 a t7) */
  --teinte-1: #dfa93e;   /* curcuma    : Tourisme        */
  --teinte-2: #63c2b2;   /* turquoise  : Hebergement     */
  --teinte-3: #e07a52;   /* terracotta : Restaurants     */
  --teinte-4: #87b7da;   /* ciel       : Vie pratique    */
  --teinte-5: #a9c46f;   /* sauge      : Economie        */
  --teinte-6: #b79ad9;   /* lilas      : Sport & loisirs */
  --teinte-7: #e095a8;   /* rose       : Annuaire        */
  --cln-teinte: var(--accent);  /* valeur courante, surchargee par .cln-tN */

  /* ---- 3. POLICES (piles systeme, aucun fichier a charger) ------------ */
  --titre-police: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --texte-police: Candara, "Gill Sans Nova", "Gill Sans MT", "Segoe UI", "Noto Sans", Tahoma, sans-serif;
  --regie-police: "Andale Mono", "Lucida Console", Monaco, "Nimbus Mono PS", "Courier New", monospace;

  /* ---- 4. RYTHME ------------------------------------------------------- */
  --corps:       1rem;
  --interligne:  1.72;
  --mesure:      37rem;     /* largeur de lecture d'un article            */
  --berge:       70rem;     /* largeur maximale du site                   */
  --gouttiere:   clamp(1rem, 4vw, 2.5rem);
  --respiration: clamp(2.4rem, 6vw, 4.2rem);
  --rail:        5.5rem;    /* colonne de gauche des numeros et des dates */
  --trait:       1px;
  --arrondi:     3px;
}

/* =========================================================================
   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.22;
  margin: 0 0 .6em;
  letter-spacing: .005em;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 1.95rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.38rem); }
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 */
.cln-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--sur-accent);
  padding: .7rem 1.1rem;
  z-index: 50;
}
.cln-evitement:focus {
  left: .75rem;
  top: .75rem;
}

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

.cln-berge {
  width: 100%;
  max-width: var(--berge);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.cln-berge--lecture { max-width: calc(var(--mesure) + 2 * var(--gouttiere)); }

.cln-secteur { padding-block: var(--respiration); }
.cln-secteur + .cln-secteur { border-top: var(--trait) solid var(--filet); }
.cln-secteur--creuse { background: var(--fond-relief); }

.cln-secteur__tete {
  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);
}
.cln-secteur__tete h2 { margin: 0; }

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

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

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

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

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

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

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

.cln-affiche {
  padding-block: clamp(2rem, 5vw, 3.4rem);
  border-bottom: var(--trait) solid var(--filet);
}
.cln-affiche--teinte { border-bottom: 4px solid var(--cln-teinte); }

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

.cln-affiche h1 { max-width: 24ch; }
.cln-affiche--large h1 { max-width: 30ch; }

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

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

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

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

.cln-fil { padding-top: 1.2rem; }
.cln-fil 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);
}
.cln-fil li + li::before { content: "/"; margin-right: .55rem; color: var(--filet); }
.cln-fil a { color: var(--encre-douce); }

/* =========================================================================
   ECLUSES : la liste des rubriques sur l'accueil
   Rythme : pas de cartes, une suite de rangees asymetriques (colonne de
   numero a gauche, contenu a droite, filets entre les rangees).
   ========================================================================= */

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

.cln-ecluse {
  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);
}

.cln-ecluse__repere { grid-column: 1; }

.cln-ecluse__indice {
  font-family: var(--titre-police);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1;
  color: var(--cln-teinte);
  font-variant-numeric: lining-nums tabular-nums;
  display: block;
}
.cln-ecluse__barre {
  display: block;
  width: 2.4rem;
  height: 4px;
  background: var(--cln-teinte);
  margin-top: .7rem;
  border-radius: var(--arrondi);
}

.cln-ecluse__corps { grid-column: 2; min-width: 0; }

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

.cln-ecluse__apercu {
  max-width: 54ch;
  color: var(--encre-douce);
  margin-bottom: 1rem;
}

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

@media (max-width: 46rem) {
  .cln-ecluse { grid-template-columns: 1fr; }
  .cln-ecluse__repere {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .6rem;
  }
  .cln-ecluse__indice { font-size: 1.9rem; }
  .cln-ecluse__barre { margin-top: 0; width: 1.6rem; }
  .cln-ecluse__corps { grid-column: 1; }
}

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

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

.cln-suite--plein {
  background: var(--cln-teinte);
  color: var(--sur-accent);
  border: 0;
  padding: .7rem 1.2rem;
  border-radius: var(--arrondi);
}
.cln-suite--plein:hover { background: var(--encre); color: var(--fond); }

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

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

.cln-passage {
  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);
}

.cln-passage__date {
  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;
}

.cln-passage__corps { min-width: 0; }

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

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

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

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

/* =========================================================================
   ENCADRE : bloc de reperes
   ========================================================================= */

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

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

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

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

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

/* les titres des blocs poses dans l'article ne prennent pas le filet des h2 */
.cln-lecture .cln-encadre h2,
.cln-lecture .cln-sommaire h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.cln-chapo {
  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;
}

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

.cln-figure { margin: 1.8rem 0; }
.cln-figure img { width: 100%; background: var(--fond-relief); border-radius: var(--arrondi); }
.cln-figure 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 */
.cln-sommaire {
  background: var(--fond-relief);
  border-radius: var(--arrondi);
  padding: 1.1rem 1.3rem;
  margin-bottom: 2rem;
}
.cln-sommaire h2 {
  font-family: var(--regie-police);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .6rem;
  border: 0;
  padding: 0;
}
.cln-sommaire ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: .96rem;
}
.cln-sommaire li { margin-bottom: .3rem; }
.cln-sommaire a { color: var(--encre); }

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

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

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

.cln-rebonds { padding-block: var(--respiration); }

.cln-rebonds__liste {
  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));
}
.cln-rebonds__liste li { background: var(--fond-appui); }
.cln-rebonds__liste a {
  display: block;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--encre);
  border-top: 4px solid var(--cln-teinte);
  height: 100%;
}
.cln-rebonds__liste a:hover { background: var(--fond-relief); }
.cln-rebonds__quoi {
  display: block;
  font-family: var(--regie-police);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: .3rem;
}
.cln-rebonds__titre {
  display: block;
  font-family: var(--titre-police);
  font-size: 1.08rem;
  line-height: 1.3;
}

/* Pagination : navigation entre pages d'une rubrique */
.cln-pagination {
  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;
}
.cln-pagination__etat { color: var(--encre-douce); }

/* =========================================================================
   CALE : pied de page
   ========================================================================= */

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

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

.cln-cale__bas {
  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 .cln-ecluse, .cln-affiche, .cln-passage
   ou sur <body> pour teinter toute une page.
   ========================================================================= */

.cln-t1 { --cln-teinte: var(--teinte-1); }
.cln-t2 { --cln-teinte: var(--teinte-2); }
.cln-t3 { --cln-teinte: var(--teinte-3); }
.cln-t4 { --cln-teinte: var(--teinte-4); }
.cln-t5 { --cln-teinte: var(--teinte-5); }
.cln-t6 { --cln-teinte: var(--teinte-6); }
.cln-t7 { --cln-teinte: var(--teinte-7); }

/* =========================================================================
   UTILITAIRES
   ========================================================================= */

.cln-invisible {
  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;
}

.cln-sans-marge { margin-bottom: 0; }

/* =========================================================================
   RUBRIQUES ANNONCEES NON ENCORE PUBLIEES (25/08/2026) : les entrees de
   navigation et de pied de page sans page cible sont des <span> sans lien.
   ========================================================================= */

.cln-rives li > span {
  font-family: var(--regie-police);
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--encre-douce);
  padding: .25rem 0;
  display: inline-block;
}

span.cln-suite { color: var(--encre-douce); border-bottom: none; }
span.cln-suite::after { content: ""; }

.cln-rebonds__liste .cln-rebonds__carte {
  display: block;
  padding: 1rem 1.1rem;
  border-top: 4px solid var(--cln-teinte);
  height: 100%;
  color: var(--encre);
}

.cln-cale li > span { opacity: .7; }