/* =========================================================================
   cc-cagnes.com  /  Cagnes Cote Cours
   Feuille de style unique, aucune ressource distante, aucun script.
   Champ lexical des classes : le plateau de theatre
   (scene, facade, affiche, rampe, cartouche, sequence, repertoire, entree,
    feuille, ligne, jeton, conduite, replique, encart, coulisse, renvois).
   Prefixe : scn-
   ========================================================================= */

:root {

  /* ---- 1. COULEURS ---------------------------------------------------
     Papier paille, encre bleu nuit, accent outremer. Site clair. */
  --fond:          #f4eedb;   /* papier paille                            */
  --fond-appui:    #fbf7ea;   /* panneaux poses sur le fond               */
  --fond-relief:   #e9e0c5;   /* bandes creusees                          */
  --encre:         #1b2a33;   /* texte principal   (12,7:1 sur le fond)   */
  --encre-douce:   #55636c;   /* texte secondaire  ( 5,3:1 sur le fond)   */
  --filet:         #d3c6a2;   /* traits de separation                     */
  --accent:        #33409b;   /* outremer          ( 7,7:1 sur le fond)   */
  --accent-clair:  #202a72;   /* survol : plus fonce, pas plus clair      */
  --sur-accent:    #fbf7ea;   /* texte pose SUR un aplat d'accent         */
  --focus:         #9c2f2a;   /* contour de focus clavier                 */
  --fond-sombre:   #17203f;   /* pied de page                             */
  --encre-inverse: #f4eedb;   /* texte du pied de page (13,7:1)           */

  /* ---- 2. TEINTES DE RUBRIQUE (les cinq actes) ----------------------
     Toutes verifiees a plus de 6:1 sur --fond ET sur --fond-appui. */
  --acte-1: #33409b;   /* outremer      : danse et corps        */
  --acte-2: #9c2f2a;   /* rouge rideau  : theatre et parole     */
  --acte-3: #245c3f;   /* vert bouteille: arts plastiques       */
  --acte-4: #6a2a63;   /* prune         : langues vivantes      */
  --acte-5: #7a5312;   /* bronze        : saison et spectacles  */
  --acte-teinte: var(--accent);   /* valeur courante, surchargee par .scn-acte-N */

  /* ---- 3. POLICES (piles systeme, aucun fichier a charger) ---------- */
  --police-titre: Baskerville, "Baskerville Old Face", "Libre Baskerville", Garamond, "URW Bookman L", serif;
  --police-texte: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", sans-serif;
  --police-regie: "Courier New", "Nimbus Mono PS", "Liberation Mono", monospace;

  /* ---- 4. RYTHME ----------------------------------------------------- */
  --corps:       1.02rem;
  --interligne:  1.62;
  --mesure:      33rem;     /* largeur de lecture d'une fiche            */
  --scene:       65rem;     /* largeur maximale du site                  */
  --gouttiere:   clamp(1.1rem, 4vw, 2.25rem);
  --respiration: clamp(2.2rem, 5.5vw, 4rem);
  --rail:        5.25rem;   /* colonne de gauche : numero ou date         */
  --trait:       1px;
  --arrondi:     0;
}

/* =========================================================================
   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(--police-texte);
  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(--police-titre);
  font-weight: 700;
  line-height: 1.16;
  margin: 0 0 .55em;
  letter-spacing: -.004em;
}

h1 { font-size: clamp(2rem, 1.15rem + 3.1vw, 3.35rem); }
h2 { font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.85rem); }
h3 { font-size: clamp(1.1rem, 1rem + .45vw, 1.28rem); }
h4 { font-size: 1.02rem; }

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

a { color: var(--accent); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-clair); }

strong { font-weight: 700; }

: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 */
.scn-saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--sur-accent);
  padding: .7rem 1.1rem;
  z-index: 50;
}
.scn-saut:focus { left: .75rem; top: .75rem; }

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

.scn-plateau {
  width: 100%;
  max-width: var(--scene);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

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

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

/* En-tete de section : la note passe AU DESSUS du titre, pas a cote,
   et le titre porte un filet epais a gauche. Rythme propre au site. */
.scn-sequence__tete { margin-bottom: 1.7rem; }
.scn-sequence__tete h2 {
  margin: 0;
  padding-left: .85rem;
  border-left: 5px solid var(--acte-teinte);
}
.scn-sequence__note {
  font-family: var(--police-regie);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 .5rem;
  padding-left: .85rem;
}

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

.scn-facade { background: var(--fond-appui); }
.scn-facade::after {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(to right,
    var(--acte-1) 0 20%, var(--acte-2) 20% 40%, var(--acte-3) 40% 60%,
    var(--acte-4) 60% 80%, var(--acte-5) 80% 100%);
}

.scn-facade__corps {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .9rem 2rem;
  padding-block: 1.15rem .95rem;
}

.scn-affiche { text-decoration: none; color: inherit; display: block; }
.scn-affiche__nom {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  display: block;
}
.scn-affiche__mention {
  font-family: var(--police-regie);
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--encre-douce);
  display: block;
  margin-top: .35rem;
}

.scn-rampe ul {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.scn-rampe a {
  font-family: var(--police-regie);
  font-size: .86rem;
  letter-spacing: .02em;
  color: var(--encre);
  text-decoration: none;
  padding: .2rem 0;
  border-bottom: 3px solid transparent;
  display: inline-block;
}
.scn-rampe a:hover,
.scn-rampe a[aria-current="page"] { border-bottom-color: var(--acte-teinte); }

/* =========================================================================
   CARTOUCHE (bloc de titre de page)
   ========================================================================= */

.scn-cartouche {
  padding-block: clamp(1.8rem, 4.5vw, 3.2rem);
  border-bottom: var(--trait) solid var(--filet);
}
.scn-cartouche--acte { border-bottom: 5px solid var(--acte-teinte); }

.scn-cartouche__surtitre {
  font-family: var(--police-regie);
  font-size: .78rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--acte-teinte);
  margin: 0 0 .75rem;
}

.scn-cartouche h1 { max-width: 20ch; }
.scn-cartouche--large h1 { max-width: 28ch; }

.scn-cartouche__amorce {
  max-width: var(--mesure);
  font-size: 1.06rem;
  color: var(--encre-douce);
  margin-bottom: 0;
}

.scn-cartouche__numero {
  font-family: var(--police-regie);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  letter-spacing: .1em;
  line-height: 1;
  color: var(--acte-teinte);
  display: block;
  margin-bottom: .6rem;
}

/* Mentions courtes : date, duree, comptage */
.scn-mention {
  font-family: var(--police-regie);
  font-size: .8rem;
  letter-spacing: .03em;
  color: var(--encre-douce);
  margin: 0;
}
.scn-mention--groupe {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.3rem;
  list-style: none;
  padding: 0;
  margin: 1.15rem 0 0;
}

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

.scn-fil { padding-top: 1.1rem; }
.scn-fil ol {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--police-regie);
  font-size: .79rem;
  color: var(--encre-douce);
}
.scn-fil li + li::before { content: "\203A"; margin-right: .5rem; color: var(--filet); }
.scn-fil a { color: var(--encre-douce); }

/* =========================================================================
   REPERTOIRE : la liste des rubriques sur l'accueil
   Pas de cartes : des rangees asymetriques, colonne de numero a gauche.
   ========================================================================= */

.scn-repertoire {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 3px solid var(--encre);
}

.scn-entree {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--gouttiere);
  padding-block: clamp(1.5rem, 3.4vw, 2.3rem);
  border-bottom: var(--trait) solid var(--filet);
}

.scn-entree__reperage { grid-column: 1; }

.scn-entree__numero {
  font-family: var(--police-regie);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: .16em;
  line-height: 1;
  color: var(--acte-teinte);
  display: block;
}
/* Double filet a la place de la barre pleine du squelette */
.scn-entree__barre {
  display: block;
  width: 100%;
  max-width: 3.4rem;
  height: 5px;
  border-top: 2px solid var(--acte-teinte);
  border-bottom: 1px solid var(--acte-teinte);
  margin-top: .75rem;
}

.scn-entree__corps { grid-column: 2; min-width: 0; }

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

.scn-entree__apercu {
  max-width: 54ch;
  color: var(--encre-douce);
  margin-bottom: .95rem;
}

/* Les fiches montrees directement sous chaque rubrique : l'etoile du portail */
.scn-entree__liens {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: .32rem;
}
.scn-entree__liens li { position: relative; padding-left: 1.05rem; }
.scn-entree__liens li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: .45rem;
  height: .45rem;
  background: var(--acte-teinte);
}
.scn-entree__liens a {
  color: var(--encre);
  text-decoration: none;
  border-bottom: var(--trait) solid var(--filet);
}
.scn-entree__liens a:hover { border-bottom-color: var(--acte-teinte); }

@media (max-width: 46rem) {
  .scn-entree { grid-template-columns: 1fr; }
  .scn-entree__reperage {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .55rem;
  }
  .scn-entree__barre { margin-top: 0; width: 2rem; }
  .scn-entree__corps { grid-column: 1; }
}

/* =========================================================================
   BOUTONS ET LIENS D'ACTION
   ========================================================================= */

.scn-bouton {
  display: inline-block;
  font-family: var(--police-regie);
  font-size: .84rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--acte-teinte);
  text-decoration: none;
  border-bottom: 2px solid var(--acte-teinte);
  padding-bottom: .12rem;
}
.scn-bouton:hover { color: var(--encre); border-bottom-color: var(--encre); }
.scn-bouton::after { content: " \2192"; }

.scn-bouton--plein {
  background: var(--acte-teinte);
  color: var(--sur-accent);
  border: 0;
  padding: .65rem 1.1rem;
  border-radius: var(--arrondi);
}
.scn-bouton--plein:hover { background: var(--encre); color: var(--fond); }

/* =========================================================================
   FEUILLE : liste de fiches datee (pages de rubrique)
   ========================================================================= */

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

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

.scn-ligne__date {
  font-family: var(--police-regie);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--encre-douce);
  padding-top: .35rem;
}

.scn-ligne__corps { min-width: 0; }

.scn-ligne__intitule {
  font-family: var(--police-titre);
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 .3rem;
}
.scn-ligne__intitule a { color: var(--encre); text-decoration: none; }
.scn-ligne__intitule a:hover { color: var(--acte-teinte); }

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

/* Jeton de rubrique : aplat plein, et non un contour */
.scn-jeton {
  display: inline-block;
  font-family: var(--police-regie);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sur-accent);
  background: var(--acte-teinte);
  padding: .18rem .55rem;
  margin-bottom: .5rem;
  text-decoration: none;
}
a.scn-jeton:hover { background: var(--encre); color: var(--fond); }

@media (max-width: 46rem) {
  .scn-ligne { grid-template-columns: 1fr; }
  .scn-ligne__date { padding-top: 0; margin-bottom: .25rem; }
}

/* =========================================================================
   ENCART : double filet haut et bas, sans barre laterale
   ========================================================================= */

.scn-encart {
  background: var(--fond-appui);
  border-top: 4px double var(--acte-teinte);
  border-bottom: 4px double var(--acte-teinte);
  padding: 1.2rem 1.25rem;
  margin-block: 1.8rem;
}
.scn-encart h2, .scn-encart h3 {
  margin-bottom: .5rem;
  font-family: var(--police-regie);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acte-teinte);
}
.scn-encart p:last-child, .scn-encart ul:last-child, .scn-encart dl:last-child { margin-bottom: 0; }
.scn-encart ul { padding-left: 1.05rem; }
.scn-encart li { margin-bottom: .35rem; }

/* =========================================================================
   TEXTE : corps d'une fiche
   ========================================================================= */

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

/* Filet court au dessus du h2, et non un filet pleine largeur */
.scn-texte h2 { margin-top: 2.4rem; }
.scn-texte h2::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 3px;
  background: var(--acte-teinte);
  margin-bottom: .8rem;
}
.scn-texte h3 { margin-top: 1.7rem; }

.scn-texte ul, .scn-texte ol { padding-left: 1.25rem; }
.scn-texte li { margin-bottom: .42rem; }

.scn-texte .scn-encart h2::before,
.scn-texte .scn-conduite h2::before { content: none; }
.scn-texte .scn-encart h2,
.scn-texte .scn-conduite h2 { margin-top: 0; }

/* Definitions courtes, extractables */
.scn-glose { margin: 0 0 1.3rem; }
.scn-glose dt {
  font-weight: 700;
  font-family: var(--police-titre);
  font-size: 1.06rem;
  margin-top: .9rem;
}
.scn-glose dd { margin: .15rem 0 0; color: var(--encre-douce); }

.scn-chapo {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--encre);
  border-bottom: var(--trait) solid var(--filet);
  padding-bottom: 1.2rem;
  margin-bottom: 1.5rem;
}

.scn-replique {
  margin: 1.9rem 0;
  padding: 0;
  font-family: var(--police-titre);
  font-size: 1.2rem;
  line-height: 1.4;
  font-style: italic;
  position: relative;
  padding-left: 2.1rem;
}
.scn-replique::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -.15em;
  font-size: 3rem;
  line-height: 1;
  color: var(--acte-teinte);
  font-style: normal;
}
.scn-replique p:last-child { margin-bottom: 0; }
.scn-replique cite {
  display: block;
  margin-top: .55rem;
  font-family: var(--police-regie);
  font-size: .78rem;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.scn-figure { margin: 1.9rem 0; }
.scn-figure img {
  width: 100%;
  background: var(--fond-relief);
  border: var(--trait) solid var(--filet);
}
.scn-figure figcaption {
  font-family: var(--police-regie);
  font-size: .78rem;
  line-height: 1.45;
  color: var(--encre-douce);
  padding-top: .5rem;
  margin-top: .1rem;
}

/* Conduite : le sommaire interne, presente comme une feuille de regie */
.scn-conduite {
  border-top: 2px solid var(--encre);
  border-bottom: 2px solid var(--encre);
  padding: .95rem 0 1rem;
  margin-bottom: 2rem;
}
.scn-conduite h2 {
  font-family: var(--police-regie);
  font-size: .78rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  margin: 0 0 .6rem;
  color: var(--encre-douce);
}
.scn-conduite ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: conduite;
  font-size: .96rem;
}
.scn-conduite li {
  counter-increment: conduite;
  margin-bottom: .28rem;
  padding-left: 2.2rem;
  position: relative;
}
.scn-conduite li::before {
  content: counter(conduite, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--police-regie);
  font-size: .82rem;
  color: var(--acte-teinte);
}
.scn-conduite a { color: var(--encre); }

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

.scn-grille-defile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.4rem;
  border: var(--trait) solid var(--filet);
  background: var(--fond-appui);
}
.scn-grille-defile table {
  border-collapse: collapse;
  width: 100%;
  min-width: 28rem;
  margin: 0;
  font-size: .93rem;
}
.scn-grille-defile th,
.scn-grille-defile td {
  text-align: left;
  padding: .58rem .75rem;
  border-bottom: var(--trait) solid var(--filet);
  vertical-align: top;
}
.scn-grille-defile tbody tr:last-child th,
.scn-grille-defile tbody tr:last-child td { border-bottom: 0; }
.scn-grille-defile thead th {
  font-family: var(--police-regie);
  font-size: .76rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  background: var(--fond-relief);
  border-bottom: 2px solid var(--encre);
}
.scn-grille-defile tbody th { font-weight: 700; }
.scn-grille-defile caption {
  caption-side: top;
  text-align: left;
  font-family: var(--police-regie);
  font-size: .78rem;
  color: var(--encre-douce);
  padding: .55rem .75rem;
  background: var(--fond-relief);
}

/* =========================================================================
   RENVOIS : les liens croises (le coeur de l'etoile)
   ========================================================================= */

.scn-renvois { padding-block: var(--respiration); }

.scn-renvois__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(14rem, 1fr));
}
.scn-renvois__liste li { background: var(--fond-appui); }
.scn-renvois__liste a {
  display: block;
  padding: .95rem 1rem;
  text-decoration: none;
  color: var(--encre);
  border-top: 5px solid var(--acte-teinte);
  height: 100%;
}
.scn-renvois__liste a:hover { background: var(--fond-relief); }
.scn-renvois__quoi {
  display: block;
  font-family: var(--police-regie);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: .3rem;
}
.scn-renvois__titre {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.06rem;
  line-height: 1.25;
}

/* Navette : navigation en bas d'une rubrique */
.scn-navette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.4rem;
  padding-block: 1.5rem;
  border-top: var(--trait) solid var(--filet);
  font-family: var(--police-regie);
  font-size: .86rem;
}
.scn-navette__etat { color: var(--encre-douce); }

/* =========================================================================
   COULISSE : pied de page
   ========================================================================= */

.scn-coulisse {
  background: var(--fond-sombre);
  color: var(--encre-inverse);
  margin-top: var(--respiration);
  padding-block: var(--respiration) 1.9rem;
}
.scn-coulisse a { color: var(--encre-inverse); }
.scn-coulisse a:hover { color: #d8b96a; }

.scn-coulisse__grille {
  display: grid;
  gap: 1.9rem var(--gouttiere);
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}
.scn-coulisse__colonne h2 {
  font-family: var(--police-regie);
  font-size: .76rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: .8rem;
  color: #c3ccd8;
}
.scn-coulisse ul { list-style: none; margin: 0; padding: 0; }
.scn-coulisse li { margin-bottom: .42rem; }

.scn-coulisse__bas {
  margin-top: 2.2rem;
  padding-top: 1.1rem;
  border-top: var(--trait) solid #3a4467;
  font-family: var(--police-regie);
  font-size: .78rem;
  color: #c3ccd8;
}

/* =========================================================================
   TEINTES D'ACTE : a poser sur .scn-entree, .scn-cartouche, .scn-sequence,
   .scn-ligne, ou sur <body> pour teinter toute une page.
   ========================================================================= */

.scn-acte-1 { --acte-teinte: var(--acte-1); }
.scn-acte-2 { --acte-teinte: var(--acte-2); }
.scn-acte-3 { --acte-teinte: var(--acte-3); }
.scn-acte-4 { --acte-teinte: var(--acte-4); }
.scn-acte-5 { --acte-teinte: var(--acte-5); }

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

.scn-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;
}

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