/* La synthèse : l'accueil et les cartes de la 06 (la tentacule comme thème), l'agenda de la 03 relié à la carte, les
   trois entrées nées des portes de la 04, et pour chaque spectacle un univers de compagnie (le dossier scolaire de
   Bérénice, les pages d'adrienvada.fr) où revient l'effet de la 10. Tout le texte visible vient de D, tel quel. */
:root {
  --papier: #f6f2eb; --papier-2: #ece5da; --carte: #e4dccf; --encre: #1d1418; --gris: #5f565a; --filet: #dcd3c6;
  --magenta: #bc3e80; --magenta-texte: #a3306b; --nuit: #1d1418; --blanc: #fffdf9; --magenta-vif: #bc3e80;
  /* les polices de la compagnie (celles de crescite.fr et de sa charte) : Ubuntu pour les titres, Open Sans pour le texte,
     Raleway pour les étiquettes en capitales espacées (--serif et --sans : leurs anciens noms, les titres et le texte) */
  --titre: "Ubuntu", system-ui, sans-serif; --texte: "Open Sans", system-ui, sans-serif; --etiq: "Raleway", "Open Sans", system-ui, sans-serif;
  --serif: var(--titre); --sans: var(--texte);
  --gout: clamp(16px, 4vw, 56px); --haut: 64px; --onglets: 0px;
  /* le menu flottant (une ligne) : sa hauteur ; --haut, la place qu'il prend en haut de l'écran une fois arrimé (8 px, lui, 8 px) */
  --barre-h: 48px;
  /* le mouvement (la 10, rangée) : une seule famille de courbes souples, des durées courtes, des distances égales. --k-souple :
     un rien de rebond (ce qui répond : les ventouses, les flèches, l'arrimage du menu) ; --k-doux : souple, sans rebond (ce qui
     arrive : les titres, les lignes, l'encre). Survol 180 ms, pression 60 ms, page 440 ms au plus ; tout monte de 10 px */
  --k-souple: cubic-bezier(.3, 1.25, .5, 1); --k-doux: cubic-bezier(.22, .8, .24, 1);
  --k-survol: .18s; --k-presse: .06s; --k-page: .44s; --k-lent: .6s; --k-monte: 10px;
  --mv-courbe: var(--k-doux);
  /* le bras qui souligne un titre et s'enroule au bout (la boucle de la 10) */
  --boucle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M0 28.5H11C17.08 28.5 22 23.58 22 17.5C22 12.81 18.19 9 13.5 9C10.19 9 7.5 11.69 7.5 15C7.5 17.21 9.29 19 11.5 19' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  /* les tentacules (tentacules.js) : la pieuvre du logo guide ; ici elles ont la couleur et les ventouses des bras de la tournée */
  --tt-encre: #bc3e80; --tt-accent: #1d1418; --tt-neutre: #bc3e80; --tt-epaisseur: 2.4;
  /* l'édition sur place (EDITION) : la barre, la connexion et le panneau des dates sur le papier de la synthèse */
  --ed-fond: #fffdf9; --ed-encre: #1d1418; --ed-accent: #bc3e80; --ed-sur-accent: #ffffff;
  --ed-police: "Open Sans", system-ui, sans-serif; --ed-rayon: 10px; --ed-trait: #dcd3c6;
}
/* ———— la nuit (règle 19, THEME) : la salle quand la lumière baisse ————
   Le même papier, retourné : une aubergine presque noire, l'encre claire et chaude, la magenta de la compagnie (assez
   sombre pour porter un texte blanc, assez vive pour se lire sur la nuit), son texte plus clair ; la France devient une
   terre sombre où les bras gardent leurs couleurs. Les couleurs des spectacles s'éclaircissent (--sp-*, couleursSp), les
   univers clairs passent dans leur propre nuit (--un-*, uVars), les univers sombres restent eux-mêmes. AA partout :
   encre 15,8:1, gris 7,8:1, magenta-texte 7,3:1 sur le papier ; blanc sur magenta 4,7:1. */
html[data-theme="jour"] { color-scheme: light; }
html[data-theme="nuit"] {
  color-scheme: dark;
  --papier: #1b1117; --papier-2: #23171e; --carte: #2e2128; --encre: #f3eee9; --gris: #b7b0ae; --filet: #3b3036;
  --magenta: #c44386; --magenta-texte: #f07ab6; --nuit: #0f090d; --blanc: #24181f; --magenta-vif: #e0559a;
  --tt-encre: #e0559a; --tt-accent: #f2eae4; --tt-neutre: #e0559a;
  --ed-fond: #24181f; --ed-encre: #f3eee9; --ed-accent: #e0559a; --ed-sur-accent: #1b1117; --ed-trait: #3e3138;
}
html[data-theme="nuit"] .evitement { background: var(--blanc); color: var(--encre); }
html[data-theme="nuit"] .champ input, html[data-theme="nuit"] .champ textarea, html[data-theme="nuit"] .calcul input { background: var(--blanc); }
html[data-theme="nuit"] footer { border-top: 1px solid var(--filet); }
/* ce qui s'écrit dans la couleur d'une entrée prend sa couleur vive (la sombre ne se lirait pas sur la nuit) */
html[data-theme="nuit"] .ct-k { color: var(--ev, var(--magenta-texte)); }
@media (hover: hover) { html[data-theme="nuit"] .et-rac button:hover { border-color: var(--ev); color: var(--ev); } }
/* les fiches des spectacles se détachent de la nuit par un filet de leur univers */
html[data-theme="nuit"] .fu, html[data-theme="nuit"] .fp, html[data-theme="nuit"] .ac, html[data-theme="nuit"] .dos-appel { box-shadow: 0 0 0 1px color-mix(in srgb, var(--u-texte) 16%, transparent), 0 24px 44px -28px #000; }
/* les univers clairs dans leur nuit (leurs couleurs de D, retournées) ; ce qui reste sur papier blanc garde l'encre du jour */
html[data-theme="nuit"] .u.u-clair { --u-fond: var(--un-fond) !important; --u-fond2: var(--un-fond2) !important; --u-texte: var(--un-texte) !important;
  --u-texte2: var(--un-texte2) !important; --u-vif: var(--un-vif) !important; }
html[data-theme="nuit"] .u-arene .u-onglets { background: var(--u-fond); }
/* dans la nuit d'un univers clair, ce qui s'écrivait dans son accent (le rouge de Bérénice) prend sa couleur vive (le
   saumon), qui se lit sur le fond sombre ; les aplats gardent l'accent, et les feuilles blanches leurs encres du jour */
html[data-theme="nuit"] .u.u-clair { --ac: var(--u-vif); }
html[data-theme="nuit"] .u-arene .chap-t,
html[data-theme="nuit"] .u-arene .u-affirm,
html[data-theme="nuit"] .u-arene .sp-cit p,
html[data-theme="nuit"] .u-arene .u-ac-type,
html[data-theme="nuit"] .u-arene .u-avec,
html[data-theme="nuit"] .u-arene :is(.suivant b),   /* (le lien vers le spectacle suivant porte lui-même son univers) */
html[data-theme="nuit"] .u-arene .fu-t,
html[data-theme="nuit"] .u-arene .dos-h3,
html[data-theme="nuit"] .u-arene .dos-h4,
html[data-theme="nuit"] .u-arene .dos-fiche dt,
html[data-theme="nuit"] .u-arene .dos-fiche-t { color: var(--u-vif); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; scroll-padding-top: calc(var(--haut) + 16px); }   /* (manipulation : pas de zoom au double toucher, qui sortait le menu fixe de l'écran ; le zoom à deux doigts reste) */
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 1.0625rem/1.6 var(--sans); }
/* (un mot plus long que la ligne, un titre en capitales à 320 px ou l'espacement du texte agrandi (WCAG 1.4.10, 1.4.12), se coupe
   plutôt que de sortir de l'écran ; sinon, rien ne change) */
h1, h2, h3, h4 { overflow-wrap: break-word; }
main { display: block; overflow-x: clip; min-height: 100svh; margin-top: 8px; }   /* sa place est gardée pendant la lecture de D : le pied de page ne saute pas ; (8 px sous le menu flottant) */
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--saison-vive, var(--magenta)); outline-offset: 3px; }   /* (la vive de la saison : 3:1 au moins sur la nuit ; --magenta, la saison sombre, n’y était qu’à 2,9:1) */
[tabindex="-1"]:focus { outline: none; }
.evitement { position: absolute; left: 8px; top: -80px; z-index: 80; background: #fff; padding: 8px 14px; border-radius: 6px; }
.evitement:focus { top: 8px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gout); }
[hidden] { display: none !important; }

/* le motif : une onde qui s'enroule au bout, sous les titres ; elle se dessine à l'arrivée */
.trait { display: block; width: 92px; height: 16px; margin-top: 10px; overflow: visible; }
.trait path { fill: none; stroke: var(--c, var(--saison-texte)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
@keyframes dessine { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ———— l'en-tête : le menu de la 05, flottant, sur une seule ligne ————
   Sur l'aplat de la saison (règle 22), la marque (la pieuvre blanche) et le menu, toute la navigation première, en quatre
   pièces de capitales espacées (les saisons, les spectacles, la compagnie, l'espace pro) : la pièce de la vue est une pastille
   blanche, celle dont on lit une page (un spectacle, une page de l'espace pro) un cadre. Une seule ligne à toutes les largeurs
   (les noms courts quand la place manque, ajuste()), détachée des bords, arrondie, son ombre dessous : elle flotte. Sur
   l'accueil, elle est d'abord en bas, sous la liste des spectacles de la scène (Scene la place : la cale avant l'en-tête, et
   <main> remonte d'autant) : au bas du premier écran ; au téléphone, où la liste dépasse l'écran, collée au bas de l'écran
   tant que sa place est plus bas (sticky, bottom). On descend, ou on touche une de ses pièces (la page descend d'elle-même,
   puis s'en va) : elle monte avec la page et s'arrime en haut de l'écran (position: sticky, rien ne se calcule au
   défilement) ; arrimée, sa marque se déplie et son ombre se creuse (.est-arrime, posée par un IntersectionObserver).
   Ailleurs, elle est arrimée d'emblée. Au téléphone, elle ne garde que la marque et la loupe, en haut partout (l'accueil
   compris : posée sur la scène) ; le menu y est la barre d'onglets du bas (.entrees.en-bas). */
body { display: flow-root; }   /* (la cale et la marge de l'en-tête restent dans le corps : sur l'accueil, elles posent le menu sous la scène) */
/* (la cale, et non une marge de l'en-tête : sa marge compte dans ce que sticky garde dans le corps, il ne pourrait plus monter
   se coller au bas de l'écran) */
.top-cale { height: 0; }
.sans-glisse, .sans-glisse * { transition: none !important; }   /* (une bande posée arrimée d'emblée : coller()) */
.top { position: sticky; top: calc(8px + env(safe-area-inset-top)); z-index: 40; width: fit-content; max-width: calc(100% - 16px); margin: 8px auto 0;
  border-radius: 999px; background: var(--saison); color: #fff; --focus: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 26px -14px rgba(0, 0, 0, .8); transition: box-shadow var(--k-survol) var(--k-doux); }
.top.est-arrime { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 18px 38px -14px rgba(0, 0, 0, .95); }
.top-in { display: flex; align-items: center; gap: 2px; height: var(--barre-h); padding: 0 5px; white-space: nowrap; }
.top :focus-visible { outline-color: #fff; outline-offset: 2px; }
.marque { flex: none; display: inline-flex; align-items: center; gap: 8px; max-width: 20rem; height: 38px; padding: 0 12px 0 6px; overflow: hidden; border-radius: 999px; color: #fff;
  text-decoration: none; font: 700 1.05rem/1 var(--titre); letter-spacing: .01em;
  transition: max-width .3s var(--k-doux), padding .3s var(--k-doux), opacity var(--k-survol) var(--k-doux), visibility 0s; }
.marque .l { display: block; flex: none; width: 32px; transition: scale var(--k-survol) var(--k-souple); }
.marque svg { width: 100%; height: auto; display: block; }
@media (hover: hover) { .marque:hover .l { scale: 1.08; } }
/* sur l'accueil, en bas, la marque est repliée (la grande pieuvre est au-dessus) ; arrimée, elle se déplie */
.top.sous-pieuvre { bottom: calc(8px + env(safe-area-inset-bottom)); }
/* (repliée, elle n'est plus une escale de la touche Tab : le focus s'y posait sans rien montrer ; la pieuvre de la scène, au-dessus,
   mène déjà à l'accueil) */
.top.sous-pieuvre:not(.est-arrime):not(.mesure) .marque { max-width: 0; padding: 0; opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0s, var(--k-survol); }
.top.sous-pieuvre:not(.est-arrime):not(.mesure) .marque .l { width: 0; }   /* (la créature, qui mesure la marque, se tait) */
.entrees { flex: none; display: flex; align-items: center; gap: 2px; }
.entrees a { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px 0 12px; border: 2px solid transparent; border-radius: 999px; color: #fff;
  text-decoration: none; font: 700 .76rem/1 var(--etiq); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
/* (le point de chaque pièce est une ventouse : un anneau et son cœur ; au survol elle se gonfle, la pièce de la vue la remplit) */
.entrees .pt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, currentColor 0 1.6px, transparent 2.1px); box-shadow: inset 0 0 0 1.5px currentColor;
  opacity: .7; transition: opacity var(--k-survol) var(--k-doux), scale var(--k-survol) var(--k-souple), background-color var(--k-survol) var(--k-doux); }
@media (hover: hover) { .entrees a:hover { background-color: rgba(255, 255, 255, .13); } }
.entrees a:is(:focus-visible) .pt { opacity: 1; scale: 1.3; }
@media (hover: hover) { .entrees a:is(:hover) .pt { opacity: 1; scale: 1.3; } }
.entrees a[aria-current] .pt { opacity: 1; background-color: currentColor; }
.entrees a[aria-current="page"] { background-color: #fff; color: var(--saison); }
.entrees a[aria-current="true"] { border-color: #fff; }
.entrees .court { display: none; }
.top.serre .entrees .long { display: none; }
.top.serre .entrees .court { display: inline; }
.top.compact #nom { display: none; }
.top.compact .marque { padding-right: 6px; }
.top.compact .entrees a { gap: 7px; padding: 0 11px 0 9px; letter-spacing: .07em; }
.top.mince .entrees .pt { display: none; }
.top.mince .entrees a { padding: 0 9px; letter-spacing: .05em; }
@media (min-width: 760px) { .top.mince .marque { display: none; } }
.top.fin .top-in, .top.fin .entrees { gap: 0; }
.top.fin .top-in { padding: 0 3px; }
.top.fin .entrees a { padding: 0 7px; font-size: .64rem; letter-spacing: .02em; }
/* (la loupe tient encore : les pièces sans leur filet transparent, leur anneau d'élément lu dessiné en dedans ; sinon, dernier
   recours, la loupe quitte la ligne : la recherche reste à « / » et Ctrl K) */
.top.fin.etroit .top-in { padding: 0; }
.top.fin.etroit .entrees a { border-width: 0; }
.top.fin.etroit .entrees a[aria-current="true"] { box-shadow: inset 0 0 0 2px #fff; }
.top.fin.etroit.tasse .entrees a { padding: 0 3px; letter-spacing: 0; }
.top.sans-loupe .loupe-b { display: none; }
/* (sur l'accueil, en haut, pas de loupe : elle ne paraît que dans la barre qui vient en descendant (au téléphone, la barre
   qui prend son fond ; au bureau, le menu arrimé) ; le raccourci (/ ou Ctrl K) reste là) */
.top.sur-scene .loupe-b, .top.sous-pieuvre:not(.est-arrime):not(.mesure) .loupe-b { width: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity var(--k-survol) ease, visibility 0s var(--k-survol); }
/* la loupe du menu (CHERCHE) : un rond à la suite des pièces, la boîte de recherche ouverte, il se remplit */
.loupe-b { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.loupe-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: scale var(--k-survol) var(--k-souple); }
@media (hover: hover) { .loupe-b:hover { background-color: rgba(255, 255, 255, .13); } }
.loupe-b:is(:focus-visible) svg { scale: 1.12; }
@media (hover: hover) { .loupe-b:is(:hover) svg { scale: 1.12; } }
.loupe-b[aria-expanded="true"] { background: #fff; color: var(--saison); }
/* le menu au téléphone, sous le pouce : la barre d'onglets du bas, comme une application (la pilule du haut, à 360 px, ne tenait
   plus la pieuvre, quatre pièces et la loupe). Les pièces du menu (#entrees, déplacé hors de l'en-tête par placerEntrees) s'y
   posent en quatre cases égales : une icône simple et le nom court ; celle de la vue a son icône dans une ventouse blanche,
   celle dont la vue dépend (un spectacle, une page de l'espace pro) un anneau. La barre reste quand le haut se range
   (Range) ; elle prend la place de la barre d'accueil de l'iPhone (safe-area). --tab : la place qu'elle prend en bas de
   l'écran (0 au bureau) ; --bas : ce que ce qui se pose en bas de l'écran laisse sous lui (les filtres des saisons,
   l'indicateur de section, le haut de page) : la barre et la safe-area au téléphone, la safe-area seule au bureau.
   L'édition sur place (EDITION) pose sa barre juste au-dessus de la barre d'onglets (--ed-bas) ; tant qu'elle est là, elle dit
   la place qu'elle prend (--ed-barre-h) et ce qui se pose en bas de l'écran monte au-dessus d'elle : rien ne se recouvre
   (--bas0 : ce qui est tout en bas, la barre d'onglets ou celle de l'édition ; --bas : ce qui s'y ajoute, la barre « Réserver »
   d'un spectacle au téléphone) */
:root { --tab-h: 58px; --tab: 0px; --bas0: env(safe-area-inset-bottom, 0px); --bas: var(--bas0); --ed-bas: var(--tab); }
html.ed-actif { --bas0: var(--ed-barre-h, var(--tab)); }
html.ed-actif body { padding-bottom: var(--bas0); }
.entrees .ic { display: none; }
@media (max-width: 759px) {
  :root { --tab: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); --bas0: var(--tab); }
  html { scroll-padding-bottom: calc(var(--bas) + 12px); }
  body { padding-bottom: var(--tab); }
  .entrees.en-bas { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; gap: 0;
    height: var(--tab); padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left)); background: var(--saison); color: #fff;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .16), 0 -14px 30px -18px rgba(0, 0, 0, .95); }
  .entrees.en-bas a { flex-direction: column; justify-content: center; gap: 4px; min-width: 0; height: var(--tab-h); padding: 0 2px; border: 0; border-radius: 0; background: none; color: #fff;
    font: 700 min(.66rem, 3.1vw)/1.1 var(--etiq); letter-spacing: .05em; text-align: center; -webkit-tap-highlight-color: transparent; }
  .entrees.en-bas a[aria-current="page"] { background: none; color: #fff; }
  @media (hover: hover) { .entrees.en-bas a:hover { background: none; color: #fff; } }
  .entrees.en-bas .pt, .entrees.en-bas .long { display: none; }
  .entrees.en-bas .court { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .entrees.en-bas .ic { display: grid; place-items: center; width: 54px; height: 28px; border-radius: 999px; transition: background-color var(--k-survol) var(--k-doux), color var(--k-survol) var(--k-doux), box-shadow var(--k-survol) var(--k-doux); }
  .entrees.en-bas .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: scale var(--k-survol) var(--k-souple); }
  .entrees.en-bas a:is(:focus-visible) .ic svg { scale: 1.1; }
  @media (hover: hover) { .entrees.en-bas a:is(:hover) .ic svg { scale: 1.1; } }
  .entrees.en-bas a[aria-current="page"] .ic { background: #fff; color: var(--saison); }
  .entrees.en-bas a[aria-current="true"] .ic { box-shadow: inset 0 0 0 2px #fff; }
  .entrees.en-bas a:focus-visible { outline: 2px solid #fff; outline-offset: -3px; border-radius: 12px; }
  /* (l'accueil : le haut posé sur la scène, sans fond, sa marque repliée sous le nom de la scène ; la loupe d'un anneau, comme
     la pause de la scène, qui passe à gauche, en face d'elle ; le nom de la scène entre les deux) */
  .top { transition: box-shadow var(--k-survol) var(--k-doux), background-color var(--k-survol) var(--k-doux); }
  .top.sur-scene { background-color: transparent; box-shadow: none; pointer-events: none; }   /* (rien à toucher en elle : le mot, dessous, se caresse) */
  .top.sur-scene .marque { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0s, var(--k-survol); }
  .top.sur-scene .loupe-b { background: color-mix(in srgb, var(--sc-c, var(--saison)) 50%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 60%, transparent); }
  .scene .sc-h { padding: calc(22px + env(safe-area-inset-top)) 64px 0; }
  .scene .sc-pause { left: 12px; right: auto; top: calc(8px + env(safe-area-inset-top)); }
  .rc { --rc-bas: var(--tab); }   /* (le cadre d'un récit, à l'écran entre les menus : au-dessus de la barre) */
  @media (forced-colors: active) { .entrees.en-bas { border-top: 1px solid CanvasText; } .entrees.en-bas a[aria-current] .ic { outline: 2px solid LinkText; } }
}
/* la boîte de recherche (CHERCHE) : le papier de nuit sur un voile, posée haut ; ses propositions par groupe, celle qu'on vise
   teintée de la saison et marquée d'un filet ; au téléphone, tout l'écran. Elle monte de 10 px en s'ouvrant (posée d'emblée
   avec moins d'animations) */
.cs { position: fixed; inset: 0; z-index: 70; }
.cs-voile { position: absolute; inset: 0; background: rgba(6, 3, 5, .66); }
.cs-boite { position: absolute; left: 50%; top: max(9vh, 72px); translate: -50% 0; display: flex; flex-direction: column; width: min(680px, calc(100vw - 32px)); max-height: min(74vh, 700px);
  overflow: hidden; border-radius: 20px; background: var(--papier-2); color: var(--encre); box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 14%, transparent), 0 30px 70px -20px rgba(0, 0, 0, .95); }
html:not(.still) .cs-voile { animation: fm7-parait .24s var(--k-doux) backwards; }
html:not(.still) .cs-boite { animation: cs-monte .26s var(--k-doux) backwards; }
@keyframes cs-monte { from { opacity: 0; transform: translateY(var(--k-monte, 10px)); } }
.cs-tete { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--filet); transition: box-shadow var(--k-survol) var(--k-doux); }
.cs-tete:focus-within { box-shadow: inset 0 -2px 0 var(--saison-vive); }
.cs-champ { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.cs-champ svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--saison-vive); stroke-width: 2; stroke-linecap: round; }
.cs-champ input { flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; background: none; color: var(--encre); font: 400 1.2rem/1.2 var(--texte); outline: none; -webkit-appearance: none; appearance: none; }
.cs-champ input::placeholder { color: var(--gris); }
.cs-champ input::-webkit-search-cancel-button { display: none; }
.cs-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--encre); cursor: pointer; }
@media (hover: hover) { .cs-x:hover { background: color-mix(in srgb, var(--encre) 10%, transparent); } }
.cs-x .croix { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cs-l { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 14px; }
.cs-g { margin: 14px 12px 6px; color: var(--gris); font: 700 .72rem/1.3 var(--etiq); letter-spacing: .14em; text-transform: uppercase; }
.cs-o { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 48px; padding: 6px 12px; border-radius: 10px; color: var(--encre); text-decoration: none; cursor: pointer; }
.cs-o i { grid-row: 1 / span 2; width: 9px; height: 9px; border-radius: 50%; background: var(--c, transparent); box-shadow: inset 0 0 0 1.5px var(--c, var(--gris)); }
.cs-ot { min-width: 0; font: 500 1.02rem/1.25 var(--titre); overflow-wrap: anywhere; }
.cs-os { grid-column: 2; min-width: 0; color: var(--gris); font-size: .86rem; line-height: 1.3; }
.cs-o[aria-selected="true"] { background: color-mix(in srgb, var(--saison-vive) 20%, transparent); box-shadow: inset 3px 0 0 var(--saison-vive); }
@media (forced-colors: active) { .cs-o[aria-selected="true"] { outline: 2px solid Highlight; } }
.cs-vide { margin: 18px 12px; color: var(--gris); }
/* (ce que la recherche a trouvé, dans ses propositions et dans celles de la recherche des saisons : le passage en gras, souligné
   de la vive de la saison sur un aplat léger ; le texte garde sa couleur, AA) */
:is(.cs-o, .s7-prop) mark { padding: 0 1px; border-radius: 2px; background: color-mix(in srgb, var(--saison-vive) 18%, transparent); color: inherit; font-weight: 700; box-shadow: inset 0 -2px 0 var(--saison-vive); }
@media (forced-colors: active) { :is(.cs-o, .s7-prop) mark { background: Mark; color: MarkText; } }
html.cs-ouvert { overflow: hidden; }
@media (max-width: 759px) {
  .cs-voile { display: none; }
  .cs-boite { inset: 0; translate: none; width: auto; max-height: none; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); border-radius: 0; box-shadow: none; }
  .cs-tete { padding-left: 16px; }
}
/* (mesuré marque dépliée, ajuste()) */
.top.mesure .marque { transition: none; }

/* ———— blocs communs ———— */
section.bloc { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--filet); }
section.bloc.sans-filet { border-top: 0; padding-top: clamp(28px, 4vw, 48px); }
.page-titre { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(24px, 3vw, 40px); }
.page-titre h1 { margin: 0; font: 500 clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem)/1.05 var(--titre); text-wrap: balance; }
/* (le bras du titre d'une page, sur l'aplat de l'espace pro : blanc) */
.ep-h1 .fleur { --trait: #fff; }
.surtitre { margin: 0 0 14px; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.surtitre a { text-decoration: none; }
@media (hover: hover) { .surtitre a:hover { color: var(--magenta-texte); } }
.titre-bloc { margin: 0 0 30px; font: 500 clamp(2rem, 1.4rem + 1.8vw, 2.8rem)/1.05 var(--titre); text-wrap: balance; }
.rubrique { margin: 28px 0 10px; font: 600 .78rem/1.3 var(--etiq); letter-spacing: .09em; text-transform: uppercase; color: var(--magenta-texte); }
/* ———— les boutons : une seule échelle, partout ————
   Trois rangs : le principal (.bouton, .bu.plein, .ep-bt : un aplat de la couleur, le texte dessus), le secondaire (.bu,
   .bouton.second-b, .lc-b, .btn-geo : un filet de la couleur du texte) et le discret (.ft7-tout, .bf7-tout, .rs-agenda : le
   texte souligné). Les mêmes mesures pour tous : 44 px de haut au moins (52 px pour .grand, .ep-bt, l'appel d'une page), une
   pilule, Open Sans 600 à .95rem, en minuscules ; les mêmes états : au survol, un anneau de la couleur (principal), le filet
   plein et un lavis (secondaire), le trait épaissi (discret) ; pressé, la pièce s'enfonce d'un rien (.mv-presse, :active) ;
   au clavier, le contour vif ; désactivé, à demi éteint, sans survol (occupé, aria-busy, il reste net : son onde travaille).
   La couleur vient du lieu, jamais d'ici : la saison sur le papier (--ec, sinon la saison), l'univers dans un spectacle
   (--u-*), le blanc sur un aplat (l'espace pro, l'appel du dossier). --bt-a : l'aplat ; --bt-sur : le texte posé dessus ;
   --bt-t : le texte et le filet du secondaire et du discret ; --bt-vif : le contour du focus, le trait survolé. */
:is(.bouton, .ep-bt, .lc-b, .btn-geo, .ft7-tout, .bf7-tout) { --bt-a: var(--ec, var(--saison)); --bt-sur: #fff; --bt-t: var(--encre); --bt-vif: var(--saison-vive); --bt-lueur: transparent; }
:is(.bu, .lc-b, .rs-agenda) { --bt-a: var(--u-accent, var(--magenta)); --bt-sur: var(--u-sur-accent, #fff); --bt-t: var(--u-texte, var(--encre)); --bt-vif: var(--u-vif, var(--saison-vive)); --bt-lueur: var(--u-lueur, transparent); }
:is(.bouton, .bu, .ep-bt, .lc-b, .btn-geo) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--bt-a); border-radius: 999px;
  background: var(--bt-a); color: var(--bt-sur); font: 600 .95rem/1.2 var(--texte); letter-spacing: normal; text-transform: none; text-align: center; text-decoration: none; cursor: pointer;
  transition: box-shadow var(--k-survol) var(--k-doux), background-color var(--k-survol) var(--k-doux), border-color var(--k-survol) var(--k-doux), color var(--k-survol) var(--k-doux), scale var(--k-presse) var(--k-doux); }
:is(.bouton, .bu, .ep-bt, .lc-b, .btn-geo) .fleche { width: 18px; height: 18px; }
:is(.bouton.grand, .ep-bt) { min-height: 52px; padding: 0 26px; font-size: 1.05rem; }
/* (le secondaire : un filet) */
:is(.bu:not(.plein), .bouton.second-b, .lc-b, .btn-geo:not(.actif)) { border-color: color-mix(in srgb, var(--bt-t) 55%, transparent); background: transparent; color: var(--bt-t); }
/* (le discret : le texte souligné, sans boîte) */
:is(.ft7-tout, .bf7-tout, .rs-agenda) { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--bt-t); font: 600 .95rem/1.2 var(--texte);
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: 4px; cursor: pointer;
  transition: text-decoration-color var(--k-survol) var(--k-doux), color var(--k-survol) var(--k-doux), scale var(--k-presse) var(--k-doux); }
/* les états */
@media (hover: hover) {
  :is(.bouton, .bu.plein, .ep-bt, .btn-geo.actif):not(:disabled, [aria-disabled="true"]):hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bt-a) 30%, transparent), 0 0 36px var(--bt-lueur); }
  :is(.bu:not(.plein), .bouton.second-b, .lc-b, .btn-geo:not(.actif)):not(:disabled, [aria-disabled="true"]):hover { border-color: var(--bt-t); background: color-mix(in srgb, var(--bt-t) 9%, transparent); }
  :is(.ft7-tout, .bf7-tout, .rs-agenda):not(:disabled):hover { text-decoration-thickness: 2px; text-decoration-color: var(--bt-vif); }
}
:is(.bouton, .bu, .ep-bt, .lc-b, .btn-geo, .ft7-tout, .bf7-tout, .rs-agenda):focus-visible { outline: 2px solid var(--bt-vif); outline-offset: 3px; }
:is(.bouton, .bu, .ep-bt, .lc-b, .btn-geo, .ft7-tout, .bf7-tout, .rs-agenda):not(:disabled, [aria-disabled="true"]):active { scale: .96; }
:is(.bouton, .bu, .ep-bt, .lc-b, .btn-geo, .ft7-tout, .bf7-tout, .rs-agenda):is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { opacity: .5; cursor: not-allowed; }
.boutons { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.fleche { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.plein-ico { fill: currentColor; stroke: none; }
.tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; font: normal 600 .66rem/1.5 var(--etiq); letter-spacing: .08em; text-transform: uppercase; vertical-align: .12em; }

/* ———— la carte des tournées : des bras effilés qui partent de Rouen, une spirale au bout ————
   Elle paraît comme une tache d'encre qui se pose depuis Rouen (opacité et échelle de tout le dessin : un seul mouvement,
   composé, quand elle arrive à l'écran) ; dedans, rien ne transite que la ventouse d'une commune qu'on survole ou qu'on
   choisit : elle se gonfle, souple. Chaque changement d'un dessin d'encre se repeint une fois, pas à chaque image. */
.carte { display: block; width: 100%; height: auto; overflow: visible; transform-origin: var(--ox, 50%) var(--oy, 50%); }
/* (en attendant qu'on s'en approche : .mv-attente, la convention du mouvement commun pour ce qui paraît au défilement) */
.carte.mv-attente { opacity: 0; }
.carte.pousse { animation: k-tache .52s var(--k-doux) both; }
@keyframes k-tache { from { opacity: 0; transform: scale(.94); } }
.carte .pays { fill: var(--carte); }
.carte .voisin { fill: var(--papier-2); }
.carte .encart { fill: none; stroke: var(--gris); stroke-opacity: .5; stroke-dasharray: 3 4; }
.carte.serre { overflow: hidden; }
.carte .passe path { fill: none; stroke: color-mix(in srgb, var(--encre) 22%, transparent); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.carte .bras-trait { fill: none; stroke: var(--kc, var(--saison-texte)); stroke-width: 1.3px; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: .85; }
.carte .bras { fill: var(--kc, var(--saison-texte)); }
.carte .bout { fill: none; stroke: var(--kc, var(--saison-texte)); stroke-width: 1.7; stroke-linecap: round; }
/* (chaque commune, une ventouse : survolée, choisie ou allumée depuis sa ligne, elle se gonfle) */
.carte .point { fill: var(--kc, var(--saison-texte)); stroke: var(--papier); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transition: scale var(--k-survol) var(--k-souple); }
.carte .carte-lieu:is(:focus-visible, .on, .est-allume, .est-choisi) .point { scale: 1.5; }
@media (hover: hover) { .carte .carte-lieu:is(:hover) .point { scale: 1.5; } }
.carte .cible { fill: transparent; }
.carte .carte-lieu { cursor: pointer; outline: none; transition: opacity var(--k-survol) var(--k-doux); }
.carte .carte-lieu:focus-visible .point { stroke: var(--encre); stroke-width: 2.6; }
.carte .carte-lieu.eteint { opacity: .12; }
.carte.surligne .carte-lieu:not(.on) { opacity: .18; }
.carte .rouen { fill: var(--encre); }
.carte .rouen-nom, .carte .nom { font: 500 calc(16px * var(--k, 1)) var(--titre); fill: var(--encre); paint-order: stroke; stroke: var(--papier); stroke-width: calc(4px * var(--k, 1)); stroke-linejoin: round; }
.carte .nom { display: none; font: 600 calc(13px * var(--k, 1)) var(--sans); }
/* (« Rouen » un peu à l'écart de son point, qui bat quand la carte attend une tournée : la même distance à l'écran, quelle que
   soit la taille de la carte) */
.carte .rouen-nom { transform: translate(calc(4px * var(--k, 1)), calc(-3px * var(--k, 1))); }
.carte .nom.on { display: inline; }
/* (une carte qui attend sa tournée, en création : le cœur de Rouen bat, deux coups puis un repos) */
.carte.attente .rouen { transform-box: fill-box; transform-origin: center; animation: k-bat 2.4s var(--k-doux) infinite; }
@keyframes k-bat { 0%, 46%, 100% { scale: 1; } 10% { scale: 1.7; } 20% { scale: 1.15; } 30% { scale: 1.5; } }
.carte.tout .point { stroke-width: .8; }
.bulle { position: absolute; left: 0; bottom: 3%; max-width: min(340px, 52%); margin: 0; padding: 10px 14px; background: color-mix(in srgb, var(--blanc) 95%, transparent); border: 1px solid var(--filet); border-left: 3px solid var(--magenta); font-size: .88rem; line-height: 1.4; opacity: 0; transform: translateY(6px); transition: opacity var(--k-survol) var(--k-doux), transform var(--k-survol) var(--k-doux); pointer-events: none; }
.bulle.on { opacity: 1; transform: none; }
.bulle b { display: block; font: 500 1.15rem var(--titre); }
.bulle ul { list-style: none; margin: 4px 0 0; padding: 0; }
.bulle li { display: flex; flex-wrap: wrap; gap: 0 8px; }
.bulle .t { font-weight: 600; }

/* ———— l'accueil, composé par le client : l'ouverture de la 04 devient la pieuvre de la 10, puis le menu, puis les spectacles
   un par écran (les chapitres de la 09), chacun avec l'effet de son motif ; puis la saison sur la carte, les donateurs ————
   Les couleurs de la saison (règle 22) viennent de D.site.couleurSaison, écrites par le script (couleursSaison) : --saison
   (la couleur, qui porte la pieuvre blanche), --saison-vive, --saison-texte (lisible sur le papier, de jour comme de nuit) et
   la nuit bleue de la scène (--sc-a, --sc-b, --sc-c ; --sc-terne : le blanc atténué, qui reste AA, photo comprise). Rien
   n'est écrit en dur : une nouvelle création colore l'accueil sans toucher au code. Dans l'accueil, plus de magenta. */
.acc { --magenta: var(--saison-texte); --magenta-texte: var(--saison-texte); --magenta-vif: var(--saison-vive); }
/* (un texte pour les lecteurs d'écran seuls : ce que l'œil lit ailleurs, une coche, une teinte, un nombre) */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* le premier écran : la nuit bleue de la saison, la pieuvre au milieu (une toile), les titres autour ; derrière elle, à peine,
   les photos des spectacles qui s'enchaînent en fondu (celle du spectacle qu'on regarde passe devant) */
/* (contain : la scène a sa hauteur à elle, posée par mise() ; ce qui change dedans ne remet en page qu'elle. overflow: clip,
   pas hidden : pas un conteneur de défilement, la photo de fond (.sc-cadre, sticky) reste à l'écran le long d'une scène plus
   haute que lui, la liste du téléphone) */
.scene { position: relative; isolation: isolate; overflow: hidden; overflow: clip; min-height: 100svh; contain: size layout style; color: #fff; user-select: none; -webkit-user-select: none;
  background: radial-gradient(78% 88% at 50% 40%, var(--sc-a) 0%, var(--sc-b) 58%, var(--sc-c) 100%); }
/* (la poursuite de la caresse : un faisceau de lumière chaude, du haut de la scène à une flaque sous la pieuvre, derrière elle ;
   un calque posé par mise(), qui ne fait que s'allumer et s'éteindre (son opacité), absent éteint : rien à repeindre) */
.sc-poursuite { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 1.4s ease, visibility 0s 1.4s;
  background: radial-gradient(var(--rx) var(--ry) at 50% var(--yf), rgba(255, 238, 206, .4), rgba(255, 238, 206, .15) 60%, transparent) no-repeat,
    conic-gradient(at 50% calc(-1 * var(--h0)), transparent calc(180deg - var(--a)), rgba(255, 238, 206, .15) calc(180deg - .5 * var(--a)) calc(180deg + .5 * var(--a)), transparent calc(180deg + var(--a)));
  -webkit-mask-image: linear-gradient(#000 var(--yf), transparent); mask-image: linear-gradient(#000 var(--yf), transparent); }
.sc-poursuite.est-allumee { opacity: var(--v, .8); visibility: visible; transition: opacity .25s ease; }
.sc-diapo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sc-cadre { position: sticky; top: 0; height: 100svh; max-height: 100%; overflow: hidden; }
.sc-image { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--k-doux); }
.sc-image.est-vu { opacity: .22; }
.sc-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: saturate(.8) brightness(.8); transform: scale(1.07); transition: transform 9s linear; }
.sc-image.est-vu img { transform: none; }
/* (les bords restent la nuit de la scène : les titres s'y lisent) */
.sc-cadre::after { content: ""; position: absolute; inset: 0; background: radial-gradient(72% 78% at 50% 44%, transparent 28%, color-mix(in srgb, var(--sc-c) 72%, transparent) 100%); }
.sc-toile { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sc-h { position: relative; z-index: 2; margin: 0; padding: 26px var(--gout) 0; text-align: center; font: 600 .8rem/1.3 var(--etiq); letter-spacing: .32em; text-transform: uppercase; color: var(--sc-terne); }
/* (en haut de l'accueil, pas de nom en barre : le titre de la page reste à sa place, pour les lecteurs d'écran et la mise en
   page, mais ne se voit pas ; c'est « crescite », sous la pieuvre (.sc-mot), qui le dit, et qui devient le nom de la barre
   quand on descend) */
.scene .sc-h { color: transparent; }
.sc-mot { position: absolute; left: 0; top: 0; z-index: 3; display: block; width: 0; height: auto; margin: 0; padding: 0; border: 0; background: none; color: #fff; opacity: 0; cursor: pointer; will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent; }
/* (lettre à lettre : chacune son calque, sa boîte coupée dans celle du mot (--x, --w, en % de sa largeur), son ombre peinte
   une fois ; elles bougent sans rien repeindre) */
.sc-mot .m { position: relative; display: block; aspect-ratio: 827 / 163; }
.sc-mot .l { position: absolute; top: 0; left: var(--x); width: var(--w); height: 100%; }
.sc-mot svg { display: block; width: 100%; height: 100%; fill: currentColor; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px rgba(0, 0, 0, .4)); }
.sc-mot:focus-visible { outline: 2px solid #fff; outline-offset: 8px; border-radius: 6px; }
/* (il flotte, à peine ; ses lettres se balancent chacune à son tour, une vague qui le traverse ; caressé, il fait la gelée, ou
   se trémousse, ou bondit) */
html:not(.still) .sc-mot > span { display: block; animation: mot-flotte 5.2s ease-in-out infinite; }
html:not(.still) .sc-mot .l { animation: mot-lettre 3.4s ease-in-out calc(var(--i) * .24s - 6s) infinite; }
html:not(.still) .sc-mot.c-0 .m { animation: mot-gelee .8s cubic-bezier(.3, .7, .4, 1); }
html:not(.still) .sc-mot.c-1 .m { animation: mot-calin 1.1s ease-in-out; }
html:not(.still) .sc-mot.c-2 .m { animation: mot-ronron 1.1s linear; }
html:not(.still) .sc-mot.c-3 .m { animation: mot-bond .9s cubic-bezier(.3, .7, .4, 1); }
@keyframes mot-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.5px; } }
@keyframes mot-lettre { 0%, 100% { translate: 0 .6px; rotate: -2deg; } 50% { translate: 0 -2.2px; rotate: 2deg; } }
@keyframes mot-gelee { 0% { scale: 1; } 15% { scale: 1.18 .82; } 32% { scale: .88 1.12; } 50% { scale: 1.07 .94; } 70% { scale: .97 1.03; } 100% { scale: 1; } }
@keyframes mot-calin { 0%, 100% { rotate: 0deg; } 25% { rotate: -6deg; } 55% { rotate: 5deg; } 80% { rotate: -2deg; } }
@keyframes mot-ronron { 0%, 100% { translate: 0 0; } 10%, 30%, 50%, 70%, 90% { translate: -1.5px .5px; } 20%, 40%, 60%, 80% { translate: 1.5px -.5px; } }
@keyframes mot-bond { 0% { translate: 0 0; scale: 1; } 18% { translate: 0 3px; scale: 1.1 .88; } 45% { translate: 0 -14px; scale: .94 1.08; } 72% { translate: 0 0; scale: 1.06 .94; } 100% { translate: 0 0; scale: 1; } }
.sc-pause { position: absolute; z-index: 4; right: var(--gout); top: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid color-mix(in srgb, #fff 60%, transparent); border-radius: 50%;
  background: color-mix(in srgb, var(--sc-c) 50%, transparent); color: #fff; cursor: pointer; }
@media (hover: hover) { .sc-pause:hover { border-color: #fff; } }
.sc-pause:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sc-pause svg { width: 15px; height: 15px; fill: currentColor; }
.sc-pause .i-l, .sc-pause[aria-pressed="true"] .i-p { display: none; }
.sc-pause[aria-pressed="true"] .i-l { display: block; }
html.still .sc-pause { display: none; }   /* rien ne bouge de lui-même : rien à arrêter */
/* (masqué : il ne paraît qu'au clavier, quand on y arrive (le moyen d'arrêter ce qui bouge de soi-même reste là, WCAG 2.2.2) ;
   la pause se fait aussi d'elle-même pour qui a demandé moins d'animations) */
.sc-pause:not(:focus-visible) { opacity: 0; pointer-events: none; }
.sc-titres { list-style: none; margin: 0; padding: 0; }
.sc-t { position: absolute; left: 0; top: 0; z-index: 3; display: block; min-height: 44px; color: #fff; text-decoration: none; opacity: 0; will-change: transform, opacity; transition: color var(--k-survol) var(--k-doux);
  -webkit-user-drag: none; -webkit-touch-callout: none; }
.sc-t.droite { text-align: right; }
.sc-tl { display: inline-flex; align-items: center; gap: 10px; font: 500 clamp(1.15rem, .9rem + .62vw, 1.6rem)/1.15 var(--titre); text-wrap: balance;
  text-shadow: 0 0 2px color-mix(in srgb, var(--sc-c) 70%, transparent), 0 0 7px color-mix(in srgb, var(--sc-c) 60%, transparent), 0 1px 16px color-mix(in srgb, var(--sc-c) 85%, transparent); }
.sc-t.droite .sc-tl { flex-direction: row-reverse; }
.sc-med { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--sc-b); border: 1.5px solid var(--c); box-shadow: 0 0 0 3px var(--sc-c);
  transition: transform var(--k-survol) var(--k-souple), box-shadow var(--k-survol) var(--k-doux); }
.sc-med img { width: 100%; height: 100%; object-fit: cover; }
.sc-q { position: absolute; top: calc(100% + 9px); left: 0; width: max-content; max-width: 260px; font: 400 .82rem/1.3 var(--sans); color: var(--sc-terne);
  text-shadow: 0 0 2px color-mix(in srgb, var(--sc-c) 75%, transparent), 0 0 6px color-mix(in srgb, var(--sc-c) 60%, transparent); opacity: 0; transform: translateY(-4px); transition: opacity var(--k-survol) var(--k-doux), transform var(--k-survol) var(--k-doux); }
.sc-t.droite .sc-q { left: auto; right: 0; }
.sc-t.est-actif { color: var(--c); }
.sc-t.est-actif .sc-med { transform: scale(1.14); box-shadow: 0 0 0 3px var(--sc-c), 0 0 0 4.5px var(--c); }
.sc-t.est-actif .sc-q { opacity: 1; transform: none; }
.scene.a-actif .sc-t:not(.est-actif) { color: var(--sc-terne); }
.sc-t:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 4px; }
/* l'indication du premier écran (indiceScene) : en bas de l'écran, au-dessus du menu (au téléphone, de la barre d'onglets),
   hors de la scène ; une pastille de nuit, le texte blanc (AA sur toute photo). La phrase du geste s'efface au premier geste ;
   celle du clavier paraît quand un titre de la scène a le focus */
.sc-indice { position: fixed; z-index: 30; left: 50%; bottom: calc(var(--bas) + 84px); display: grid; width: max-content; max-width: min(40rem, calc(100vw - 32px)); translate: -50% 0; pointer-events: none; }
.sc-indice p { grid-area: 1 / 1; justify-self: center; margin: 0; padding: 2px 18px; border-radius: 22px; background: color-mix(in srgb, #0b0710 93%, transparent); color: #fff;
  font: 600 .8rem/1.35 var(--etiq); letter-spacing: .03em; text-align: center; box-shadow: 0 6px 24px rgb(0 0 0 / .35);
  opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity .24s var(--k-doux), translate .24s var(--k-doux), visibility 0s .24s; }
.sc-indice p:not(:has(a)) { padding-block: 12px; }
.sc-ind-g { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: .3em; }
.sc-indice.est-vu:not(.au-clavier) .sc-ind-g, .sc-indice.au-clavier .sc-ind-k { opacity: 1; visibility: visible; translate: none; transition: opacity .24s var(--k-doux), translate .24s var(--k-doux); }
.sc-ind-g a { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; margin-left: .3em; padding: 0 4px; color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; pointer-events: auto; }
.sc-ind-g a .fleche { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sc-indice:not(.est-vu) .sc-ind-g a { pointer-events: none; }
html.intro-active .sc-indice, html.ed-actif .sc-indice { display: none; }
@media (max-width: 759px) { .sc-indice { bottom: calc(var(--bas) + 12px); } .sc-indice p { padding: 10px 14px 0; border-radius: 16px; font-size: .78rem; } .sc-indice p:not(:has(a)) { padding-block: 12px; } .sc-ind-g a { margin: 0; } }
@media (prefers-reduced-motion: reduce) { .sc-indice p { transition: none !important; translate: none; } }
@media (forced-colors: active) { .sc-indice p { border: 1px solid CanvasText; background: Canvas; color: CanvasText; } }
.scene.mobile .sc-tl { font-size: 1.25rem; }
.scene.mobile .sc-med { width: 32px; height: 32px; }
.scene.mobile .sc-q { opacity: 1; transform: none; max-width: calc(100vw - 92px); }
/* les spectacles, un par écran, chacun dans son univers et pleine page : au bureau, épinglé, il prend la place du précédent
   (qui s'assombrit dessous) ; son motif joue son effet avec la lecture. --p : son arrivée, --r : sa lecture (épinglé),
   --q : recouvert par le suivant (0 → 1, posées par le script ; sans mouvement : arrivé, lu, jamais recouvert) */
.df-pile { position: relative; }
.df { --p: 1; --r: 1; --q: 0; --m: calc((var(--p) + var(--r)) / 2); --cx: 71%; --cy: 50%; --sens: 1;
  --bord: calc((100% - min(1240px, 100%)) / 2 + var(--gout) + min(42rem, (min(1240px, 100%) - 2 * var(--gout)) * .5));
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: calc(100svh - var(--haut)); font-family: var(--u-corps); }
.df[data-cote="droite"] { --cx: 29%; --sens: -1; }
/* (le visible d'abord : un écran de spectacle loin de la vue n'est ni mis en page ni peint, sa place gardée ; de même ce qui
   suit le défilé) */
.df { content-visibility: auto; contain-intrinsic-size: auto calc(100svh - var(--haut)); }
.acc > section.bloc { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.df-photo { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: var(--u-fond2); }
.df-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; transform-origin: var(--cx) 50%; transform: scale(calc(1.14 - var(--p) * .14)); }
.df[data-cote="droite"] .df-photo img { object-position: 38% 40%; }
/* (CADRAGE, règle 24 : la zone d'intérêt de la photo du côté libre, loin de la colonne de texte et de son voile) */
.df-photo img { --cadre-x: .71; --cadre-y: .5; }
.df[data-cote="droite"] .df-photo img { --cadre-x: .29; }
/* (le voile : uni sous toute la colonne de texte, --bord, pour que tout s'y lise, AA, quelle que soit la photo ; puis il s'efface) */
.df-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--u-fond) 0, var(--u-fond) calc(var(--bord) + 16px), color-mix(in srgb, var(--u-fond) 70%, transparent) calc(var(--bord) + 7%), color-mix(in srgb, var(--u-fond) 25%, transparent) calc(var(--bord) + 16%), transparent calc(var(--bord) + 26%)),
    linear-gradient(0deg, color-mix(in srgb, var(--u-fond) 60%, transparent), transparent 32%); }
.df[data-cote="droite"] .df-photo::after { background: linear-gradient(270deg, var(--u-fond) 0, var(--u-fond) calc(var(--bord) + 16px), color-mix(in srgb, var(--u-fond) 70%, transparent) calc(var(--bord) + 7%), color-mix(in srgb, var(--u-fond) 25%, transparent) calc(var(--bord) + 16%), transparent calc(var(--bord) + 26%)),
    linear-gradient(0deg, color-mix(in srgb, var(--u-fond) 60%, transparent), transparent 32%); }
.df-effet { position: absolute; z-index: -2; left: var(--cx); top: var(--cy); translate: -50% -50%; pointer-events: none; color: var(--u-vif); }
.df-voile { position: absolute; inset: 0; z-index: 6; background: #000; opacity: calc(var(--q) * .55); pointer-events: none; }
.df-texte { position: relative; z-index: 1; width: 100%; padding-top: clamp(28px, 5vh, 64px); padding-bottom: clamp(28px, 5vh, 64px); }
.df-in { position: relative; width: min(42rem, 50%); }
.df[data-cote="droite"] .df-in { margin-left: auto; }
.df-in > * { --e: clamp(0, calc(var(--p) * 3.33 - 1.33 - var(--k, 0) * .2), 1); opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 28px)); }
/* au clavier, l'écran du lien qui a le focus est arrivé tout entier, même avant que le script l'amène à sa place */
.df:has(:focus-visible) { --p: 1 !important; }
.df-sur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 clamp(10px, 2vh, 20px); font: 600 .76rem/1.4 var(--u-etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--u-vif); }
.df-lt { color: var(--u-texte2); }
.df-badge { padding: 2px 10px; border: 1px solid currentColor; border-radius: 999px; letter-spacing: .1em; }
.df-titre { position: relative; margin: 0; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(2.2rem, min(5.4vw, 9.4vh), 5.8rem); line-height: .98; letter-spacing: -.01em; color: var(--u-texte); text-wrap: balance; }
.df-titre.long { font-size: clamp(1.9rem, min(3.9vw, 6.6vh), 4.2rem); }
.df-l { display: block; }
.u-arene .df-titre { text-transform: uppercase; color: var(--u-accent); }
html[data-theme="nuit"] .u-arene .df-titre { color: var(--u-vif); }
/* l'accroche garde ses retours à la ligne (\n, de l'administration ou de l'édition sur place) ; sa colonne est assez large
   pour qu'un vers entier tienne sur une ligne (60 caractères au plus, la largeur de la colonne sinon) */
.df-acc, .fu-acc, .tdm-acc, .pil-acc, .une-acc { white-space: pre-line; }
.df-acc { margin: clamp(12px, 2.2vh, 24px) 0 0; max-width: 60ch; font-size: clamp(1.05rem, min(1.45vw, 2.5vh), 1.4rem); line-height: 1.45; }
.df-dates { margin: clamp(16px, 3vh, 30px) 0 0; max-width: 30rem; }
.df-k { margin: 0 0 8px; font: 600 .72rem/1.3 var(--u-etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--u-vif); }
.df-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--u-filet); }
.df-liste li { border-bottom: 1px solid var(--u-filet); }
.df-date { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); align-items: baseline; gap: 0 16px; padding: 8px 6px; color: inherit; text-decoration: none; transition: background-color var(--k-survol) var(--k-doux); }
@media (hover: hover) { a.df-date:hover { background: color-mix(in srgb, var(--u-vif) 13%, transparent); } }
a.df-date:focus-visible { outline: 2px solid var(--u-vif); outline-offset: -2px; }
.df-q b { display: block; font: 600 1.12rem/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.df-q small { display: block; font-size: .82rem; color: var(--u-texte2); }
.df-o { font-size: .98rem; }
.df-o .tag { color: var(--u-vif); }
.df-annonce, .df-bilan { margin: 0; font-size: 1.05rem; line-height: 1.45; }
.df-bilan .gros { font-size: 1.7em; }
.df-cta { margin: clamp(16px, 3vh, 30px) 0 0; }
/* (la fiche est tout entière le lien vers l'univers du spectacle : au survol, « découvrir » répond comme sous le pointeur) */
.df { cursor: pointer; }
.ed-actif .df { cursor: auto; }
@media (hover: hover) { .df:hover .df-cta .bu.plein { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bt-a) 30%, transparent), 0 0 36px var(--bt-lueur); } }
.df-credit { position: absolute; z-index: 2; right: 12px; bottom: 10px; max-width: 60%; margin: 0; padding: 2px 8px; border-radius: 3px; background: color-mix(in srgb, var(--u-fond) 78%, transparent);
  font: 400 .72rem/1.4 var(--sans); color: var(--u-texte2); text-align: right; }
.df[data-cote="droite"] .df-credit { right: auto; left: 12px; text-align: left; }
/* les motifs de la 10, en grand, qui réagissent à la lecture (--m) : l'arène tourne, les jumeaux se rejoignent, les notes et le
   fil s'écrivent, les aiguilles tournent, le curseur file de 1850 à 2077 (Ci-gisait Cyrano : la lune seule, sans le dessin
   du nez, à la demande du client) */
.df-m { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.df-m text { fill: currentColor; stroke: none; font: 600 17px var(--sans); letter-spacing: .04em; }
.df-m * { transform-box: view-box; }
.dm-tourne { transform-origin: 200px 200px; transform: rotate(calc(var(--m) * 150deg)); }
.dm-g { transform: translateX(calc(var(--m) * 14px)); }
.dm-d { transform: translateX(calc(var(--m) * -14px)); }
.dm-ecrit { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--m)); }
.dm-heure { transform-origin: 120px 120px; transform: rotate(calc(-50deg + var(--m) * 90deg)); }
.dm-minute { transform-origin: 120px 120px; transform: rotate(calc(var(--m) * 720deg)); }
.dm-curseur { transform: translateX(calc(var(--m) * 1120px)); }
/* Bérénice, l'arène : la photo s'ouvre en cercle et l'arène tourne autour */
.df[data-motif="arene"] .df-photo::after { content: none; }
.df[data-motif="arene"] .df-photo { background: var(--u-fond); }
.df[data-motif="arene"] .df-photo img { clip-path: circle(calc(var(--p) * min(25vw, 37vh)) at var(--cx) 50%); }
.df[data-motif="arene"] .df-effet { width: calc(min(25vw, 37vh) * 2.36); opacity: calc(.15 + var(--p) * .85); color: var(--u-accent); }
html[data-theme="nuit"] .df[data-motif="arene"] .df-effet { color: var(--u-vif); }
.df-arene .gradin { stroke-width: 9; opacity: .4; }
/* Cléophène, les jumeaux : les deux moitiés de la photo se rejoignent ; deux couronnes */
.df[data-motif="jumeaux"] .df-photo img { clip-path: inset(0 50% 0 0); transform: translateX(calc((1 - var(--p)) * -12vw)) scale(calc(1.08 - var(--p) * .08)); }
.df[data-motif="jumeaux"] .df-photo .df-jumeau { clip-path: inset(0 0 0 50%); transform: translateX(calc((1 - var(--p)) * 12vw)) scale(calc(1.08 - var(--p) * .08)); }
.df[data-motif="jumeaux"] .df-effet { width: min(26vw, 40vh); opacity: calc(var(--p) * .55); }
/* L'imaginaire forcé, les annotations : le titre se souligne à la main (comme sur sa page, sans passer sur les lettres), les
   notes s'écrivent dans la marge */
.df-souligne { display: block; width: min(100%, 380px); height: 22px; margin: 8px 0 -6px -6px; overflow: visible; fill: none; stroke: var(--u-vif); stroke-width: 2.4; stroke-linecap: round; pointer-events: none; }
.df-souligne path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--p) * 1.6 - .5, 1)); }
.df[data-motif="annotations"] .df-effet { width: min(30vw, 46vh); opacity: .6; }
/* Mon Royaume, le paperboard : le texte est une feuille qui tombe du chevalet ; le feutre dessine */
.df[data-motif="paperboard"] .df-in { padding: clamp(26px, 4vh, 44px) clamp(22px, 3vw, 40px) clamp(22px, 3.4vh, 36px); background: #fffdf8 repeating-linear-gradient(transparent 0 2.25rem, #d7e3f4 2.25rem calc(2.25rem + 1px));
  border: 1px solid #d9d0bf; box-shadow: 0 26px 50px -26px rgba(20, 20, 50, .45); transform-origin: 50% 0; transform: perspective(1600px) rotateX(calc((1 - var(--p)) * -78deg)) rotate(-.5deg); }
.df[data-motif="paperboard"] .df-in::before { content: ""; position: absolute; left: 10%; right: 10%; top: -13px; height: 20px; border-radius: 6px; background: linear-gradient(#585d72, #353849); box-shadow: 0 3px 6px rgba(0, 0, 0, .25); }
.df[data-motif="paperboard"] .df-in > * { --e: clamp(0, calc(var(--p) * 3.33 - 1.9 - var(--k, 0) * .12), 1); }
html[data-theme="nuit"] .df[data-motif="paperboard"] .df-in { --u-texte: var(--uj-texte); --u-texte2: var(--uj-texte2); --u-vif: var(--uj-vif); --u-filet: color-mix(in srgb, var(--uj-texte) 15%, transparent); color: var(--u-texte); }
.df[data-motif="paperboard"] .df-effet { width: min(28vw, 44vh); opacity: .7; }
/* Ci-gisait Cyrano : la photo entre de profil, la lune se lève */
.df[data-motif="nez"] .df-photo img { transform: translateX(calc((1 - var(--p)) * var(--sens) * 14%)) scale(calc(1.1 - var(--p) * .1)); }
.df-lune { position: absolute; z-index: -2; left: calc(var(--cx) + min(14vw, 22vh)); top: 12%; width: clamp(60px, 8vw, 120px); fill: var(--u-accent); opacity: .85; pointer-events: none; transform: translateY(calc((1 - var(--m)) * 34vh)); }
.df[data-cote="droite"] .df-lune { left: calc(var(--cx) - min(14vw, 22vh) - clamp(60px, 8vw, 120px)); }
/* La Folle Idée, l'horloge : le temps du huis clos, les aiguilles tournent avec la lecture */
.df[data-motif="horloge"] .df-effet { width: min(30vw, 50vh); opacity: .55; color: var(--u-accent); }
.df[data-motif="horloge"] .df-m { stroke-width: 2.2; }
/* Macbeth – Fatum, le fil rouge : il traverse l'écran, tiré par la lecture, et passe sous la colonne de texte (il s'efface
   avant elle : rien ne passe sous les lettres) */
.df-fil { inset: 0; left: 0; top: 0; translate: none; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--bord) + 8px), #000 calc(var(--bord) + 12%)); mask-image: linear-gradient(90deg, transparent calc(var(--bord) + 8px), #000 calc(var(--bord) + 12%)); }
.df-fil svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; }
.df[data-cote="droite"] .df-fil { -webkit-mask-image: linear-gradient(270deg, transparent calc(var(--bord) + 8px), #000 calc(var(--bord) + 12%)); mask-image: linear-gradient(270deg, transparent calc(var(--bord) + 8px), #000 calc(var(--bord) + 12%)); }
.df-fil path { stroke: var(--u-scene); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--m)); }
/* Cassandres, la chronologie : la photo se découvre comme le temps passe, de 1850 à 2077, le curseur file sur la frise */
.df[data-motif="chronologie"] .df-photo img { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.df-chrono { left: 4%; right: 4%; top: auto; bottom: clamp(18px, 4vh, 40px); width: auto; translate: none; }
.df-chrono .df-m { stroke-width: 1.6; }
.df-chrono path { opacity: .8; }
.df-an { position: absolute; top: calc(100% + 2px); left: 3.33%; font: 500 13px/1 var(--u-etiq); letter-spacing: .1em; color: var(--u-texte); text-shadow: 0 0 3px var(--u-fond), 0 0 9px var(--u-fond); }
.df-an-fin { left: auto; right: 3.33%; }
.df-chrono .dm-curseur { fill: var(--u-vif); stroke: none; }
/* épinglés, au bureau, quand le mouvement est permis : le suivant monte sur celui qu'on lit ; un écran de défilement par
   spectacle (sans repos entre deux : --r suit alors --p) */
@media (min-width: 900px) and (min-height: 620px) {
  html:not(.still) .df { position: sticky; top: var(--haut); height: calc(100svh - var(--haut)); min-height: 0; margin-bottom: var(--df-repos); }
  /* (scrollytelling) un temps de lecture par spectacle : sous chaque écran épinglé, --df-repos de défilement pendant lequel il
     reste seul à l'écran ; --r (0 → 1) le parcourt : le motif continue (--m), les dates arrivent l'une après l'autre, puis le
     lien. 0 pour revenir à un écran par spectacle, sans repos */
  html:not(.still) .df-pile { --df-repos: 40vh; }
  html:not(.still) .df-liste > li { --e: clamp(0, calc(var(--r) * 2.6 - var(--j, 0) * .55), 1); opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 12px)); }
  html:not(.still) .df-in > .df-cta { --e: clamp(0, calc(var(--r) * 2.2 - .2), 1); }
}
/* au téléphone et sur un écran étroit : la photo en haut, le texte dessous ; l'effet joue sur la photo */
@media (max-width: 899px) {
  .df { --cx: 50%; --cy: 25svh; display: block; min-height: 0; padding-top: 44svh; contain-intrinsic-size: auto 480px; }
  .df[data-cote="droite"] { --cx: 50%; }
  .df-photo { bottom: auto; height: 54svh; }
  .df-photo img, .df[data-cote="droite"] .df-photo img { --cadre-x: .5; --cadre-y: .42; }
  .df-photo::after, .df[data-cote="droite"] .df-photo::after { background: linear-gradient(0deg, var(--u-fond) 4%, color-mix(in srgb, var(--u-fond) 55%, transparent) 30%, transparent 62%); }
  .df-in, .df[data-cote="droite"] .df-in { width: 100%; margin-left: 0; }
  .df[data-motif="arene"] .df-photo img { clip-path: circle(calc(var(--p) * min(36vw, 21svh)) at 50% 25svh); }
  .df[data-motif="arene"] .df-effet { width: calc(min(36vw, 21svh) * 2.36); }
  .df[data-motif="jumeaux"] .df-effet, .df[data-motif="annotations"] .df-effet, .df[data-motif="paperboard"] .df-effet, .df[data-motif="horloge"] .df-effet { width: min(52vw, 34svh); }
  .df-lune { left: auto; right: 6%; top: 4%; } .df[data-cote="droite"] .df-lune { left: auto; }
  .df-chrono { bottom: auto; top: calc(44svh - 34px); }
  .df-fil, .df[data-cote="droite"] .df-fil { -webkit-mask-image: linear-gradient(#000 30svh, transparent 42svh); mask-image: linear-gradient(#000 30svh, transparent 42svh); }
  .df-credit, .df[data-cote="droite"] .df-credit { top: 8px; bottom: auto; right: 8px; left: auto; text-align: right; }
}
/* la saison sur la carte, puis les donateurs */
.acc-saison .une-grille { padding-top: clamp(8px, 2vw, 24px); }
.acc-saison .titre-bloc { margin-bottom: 8px; }
.acc-lien { margin: 18px 0 26px; }
.acc-lien a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--saison-texte); text-decoration: none; }
@media (hover: hover) { .acc-lien a:hover { text-decoration: underline; } }
.une-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "tete carte" "liste carte"; grid-template-rows: auto 1fr; column-gap: clamp(24px, 4vw, 64px); }
.une-tete { grid-area: tete; padding-top: clamp(16px, 4vh, 44px); }
.une-liste { grid-area: liste; }
.prochaines { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--encre); }
.prochaines a, .prochaines .pl { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 0 14px; align-items: baseline; padding: 10px 8px; border-bottom: 1px solid var(--filet); text-decoration: none; transition: background-color var(--k-survol) var(--k-doux); }
.prochaines time { grid-row: span 2; }
.prochaines time b { display: block; font: 600 1rem/1.25 var(--sans); font-variant-numeric: tabular-nums; }
.prochaines time small { display: block; font-size: .8rem; color: var(--gris); }
.prochaines .t { font: 500 1.15rem/1.2 var(--titre); }
.prochaines .t::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: .15em; }
.prochaines .ou { font-size: .9rem; color: var(--gris); }
.prochaines li.on a { background: color-mix(in srgb, var(--magenta) 8%, transparent); }
@media (hover: hover) { .prochaines a:hover { background: color-mix(in srgb, var(--magenta) 8%, transparent); } }
.une-carte { grid-area: carte; align-self: center; position: relative; margin: 0; }
.une-carte .carte { max-height: calc(100svh - 110px); }
.merci { padding: 34px 0 56px; border-top: 1px solid var(--filet); }
.merci p { margin: 12px 0 0; max-width: 112ch; font-size: .82rem; line-height: 1.65; color: var(--gris); }

/* ———— la tête des pages d'entrée ———— */
.et { position: relative; overflow: clip; padding: clamp(36px, 5vw, 64px) 0 clamp(26px, 3vw, 40px); background: linear-gradient(180deg, color-mix(in srgb, var(--ev) 16%, var(--papier)), var(--papier)); border-bottom: 1px solid var(--filet); }
.et::after { content: ""; position: absolute; right: -8vw; top: -16vw; width: 40vw; height: 40vw; border-radius: 50%; border: clamp(14px, 2.2vw, 30px) solid color-mix(in srgb, var(--ec) 16%, transparent); pointer-events: none; }
.et h1 { position: relative; margin: 0; max-width: 18ch; font: 500 clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem)/1.04 var(--titre); text-wrap: balance; }
.et .trait { width: 130px; height: 22px; margin-top: 14px; }
.et-rac { position: relative; list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.et-rac button { padding: 8px 15px; border: 1.5px solid color-mix(in srgb, var(--ec) 40%, var(--filet)); border-radius: 999px; background: var(--blanc); color: var(--encre); font: 500 .92rem var(--sans); cursor: pointer; }
@media (hover: hover) { .et-rac button:hover { border-color: var(--ec); color: var(--ec); } }

/* ———— l'agenda : la recherche, les spectacles, la liste par mois, la carte qui suit ———— */
.ag-outils { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-bottom: 26px; }
.recherche { position: relative; flex: 1 1 260px; max-width: 360px; }
.recherche input { width: 100%; padding: 11px 14px 11px 40px; border: 1.5px solid var(--filet); border-radius: 999px; background: var(--blanc); font: 400 1rem var(--sans); color: var(--encre); }
.recherche input:focus { border-color: var(--encre); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 25%, transparent); }
.recherche svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--gris); stroke-width: 2; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--filet); background: transparent; font: 500 .93rem var(--sans); color: var(--encre); cursor: pointer; text-align: left; }
@media (hover: hover) { .puce:hover { border-color: var(--encre); } }
.puce[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.puce i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.puce .croix { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.puce.choisi { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.ag-corps, .sa-corps, .e-dates { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ag-carte, .sa-carte, .e-carte { position: sticky; top: calc(var(--haut) + 16px); margin: 0; }
.e-carte { top: calc(var(--haut) + var(--onglets) + 16px); }
.ag-carte .carte, .sa-carte .carte, .e-carte .carte { max-height: calc(100svh - var(--haut) - 40px); }
.mois { margin: 30px 0 8px; font: 500 1.55rem/1.2 var(--titre); }
.mois::first-letter { text-transform: uppercase; }
.ag-liste .mois:first-child { margin-top: 0; }
.dates { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
.dates > li { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: 4px 18px; padding: 14px 8px; border-bottom: 1px solid var(--filet); transition: background-color var(--k-survol) var(--k-doux); }
.dates time b { display: block; font: 600 1.05rem/1.25 var(--sans); font-variant-numeric: tabular-nums; }
.dates time small { display: block; font-size: .85rem; color: var(--gris); }
.dates .t { font: 500 1.25rem/1.2 var(--titre); text-decoration: none; }
.dates .t::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 10px; vertical-align: .15em; }
@media (hover: hover) { .dates .t:hover { color: var(--magenta-texte); } }
.dates .ou { display: block; font-weight: 500; }
.dates > li.on, .sa-dates > li.on { background: color-mix(in srgb, var(--magenta) 8%, transparent); }
.det { list-style: none; margin: 4px 0 0; padding: 0; font-size: .9rem; color: var(--gris); overflow-wrap: anywhere; }
.det a { color: var(--magenta-texte); }
.vignette { display: block; width: 100%; height: auto; }
.vignette use { fill: var(--carte); }
.vignette path { fill: none; stroke: var(--saison-texte); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 1; }
.vignette circle { fill: var(--encre); }
.etat { margin-left: 6px; font: normal 600 .74rem var(--etiq); letter-spacing: .05em; text-transform: uppercase; color: var(--magenta-texte); }

/* ———— les saisons passées (#/saisons, composées comme la 04 : trois portes) ————
   La frise des saisons dans une embrasure (une arche par saison, à la hauteur de sa densité) ; la bande des saisons, qui reste
   en haut de l'écran (un onglet en arche par saison et son nombre de dates ; tout ouvrir, tout fermer ; les filtres actifs à
   effacer) ; puis chaque saison sous son arche, fermée au départ, sa petite carte dedans (des bras d'encre de Rouen à chaque
   commune, une ventouse au bout) : au survol, les ventouses se gonflent, souples ; ouverte, l'arche prend l'encre de la
   saison et ses dates se déroulent, mois par mois, à côté de sa carte, posée dans une grande arche. L'encre vive est la
   couleur de la saison (--saison-vive), le noir celui de la synthèse. */
.p4 { padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); border-top: 1px solid var(--filet); }
.p4-titre { margin: 0 0 clamp(24px, 3vw, 40px); font: 400 clamp(2rem, 1.5rem + 1.6vw, 2.75rem)/1.05 var(--titre); letter-spacing: -.015em; }
.p4-frise { min-height: 132px; margin: 0 0 18px; padding: 18px clamp(8px, 1.6vw, 20px) 6px; border-radius: 30px 30px 12px 12px; background: radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--saison) 34%, var(--papier-2)), var(--nuit) 80%); }
.ag-index { position: sticky; top: var(--haut); z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 0; margin-bottom: 6px; background: var(--papier); border-bottom: 1px solid var(--filet); }
/* (arrimée, .colle : la bande prend le haut de l'écran, de bord à bord, derrière le menu flottant ; une ombre pleine et
   rognée, qui ne fait déborder rien) */
.ag-index.colle { box-shadow: 0 0 0 100vmax var(--papier); clip-path: inset(calc(-1 * var(--haut)) -100vmax 0 -100vmax); }
.p4 .p4-index { position: sticky; }   /* (au téléphone aussi, la bande reste en haut de l'écran) */
.ag-index ul { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; margin: 0; padding: 3px 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.ag-index ul::-webkit-scrollbar { display: none; }
.ag-index li { flex: none; }
.idx, .idx-tout { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid color-mix(in srgb, var(--encre) 30%, transparent); background: transparent; color: var(--encre); font: 500 .9rem/1.2 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.idx { padding: 7px 13px 6px; border-radius: 999px 999px 8px 8px; letter-spacing: .03em; }
.idx small { color: var(--gris); font-size: .78rem; letter-spacing: 0; }
@media (hover: hover) { .idx:hover, .idx-tout:hover { border-color: var(--encre); } }
.idx[aria-expanded="true"] { border-color: var(--saison-vive); background: color-mix(in srgb, var(--saison-vive) 12%, transparent); }
.idx-actif { background: var(--magenta); border-color: var(--magenta); color: #fff; }
@media (hover: hover) { .idx-actif:hover { background: var(--magenta-texte); border-color: var(--magenta-texte); color: var(--papier); } }
.idx .croix { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.idx-tout { flex: none; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.idx-tout .fleche { width: 18px; height: 18px; }
.saisons-ag { margin-top: 4px; }
.sai { border-bottom: 1px solid var(--filet); scroll-margin-top: 64px; }   /* (juste sous la bande des saisons) */
.sai > summary { display: grid; grid-template-columns: clamp(72px, 8vw, 104px) minmax(0, 1fr) auto; align-items: center; gap: 4px clamp(16px, 2.6vw, 34px); padding: 18px 8px; list-style: none; cursor: pointer; transition: background-color var(--k-survol) var(--k-doux); }
.sai > summary::-webkit-details-marker { display: none; }
.sai[open] > summary { background: color-mix(in srgb, var(--saison-vive) 6%, transparent); }
@media (hover: hover) { .sai > summary:hover { background: color-mix(in srgb, var(--saison-vive) 6%, transparent); } }
/* l'arche : la petite carte de la saison (la France, un bras d'encre de Rouen à chaque commune, une ventouse au bout) ; au
   survol, les bras prennent toute leur encre et les ventouses se gonflent ; ouverte, l'arche s'encre de la saison (un lavis
   qui monte du seuil, posé d'un fondu : opacité seule) */
.p4-arche { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 5; padding: 16% 8% 5%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--saison-vive) 24%, var(--filet)); border-radius: 999px 999px 0 0;
  background: radial-gradient(90% 70% at 50% 60%, color-mix(in srgb, var(--saison) 30%, var(--papier-2)), var(--nuit) 78%); transition: border-color var(--k-survol) var(--k-doux); }
.p4-arche::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--saison-vive) 42%, transparent), transparent 70%); opacity: 0; transition: opacity var(--k-page) var(--k-doux); pointer-events: none; }
.sai[open] .p4-arche { border-color: var(--saison-vive); }
@media (hover: hover) { .sai > summary:hover .p4-arche { border-color: var(--saison-vive); } }
.sai[open] .p4-arche::after { opacity: 1; }
.sai > summary.mv-presse .p4-arche { scale: .96; transition: scale var(--k-presse); }
.p4-mini { display: block; width: 100%; height: auto; overflow: hidden; }
.p4-arche { content-visibility: auto; }   /* (la petite carte d'une saison, loin sous le pli : mise en forme quand elle arrive à l'écran ; l'arche garde sa taille, son rapport 4 / 5) */
.p4-mini use { fill: color-mix(in srgb, var(--encre) 9%, transparent); stroke: color-mix(in srgb, var(--encre) 30%, transparent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.p4-mini path { fill: var(--saison-vive); opacity: .7; transition: opacity var(--k-survol) var(--k-doux); }
.p4-mini .p4-v { fill: var(--saison-vive); stroke: var(--nuit); stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: scale var(--k-survol) var(--k-souple); }
.p4-mini .p4-rouen { fill: var(--encre); }
.sai[open] .p4-mini path { opacity: 1; }
@media (hover: hover) { .sai > summary:hover .p4-mini path { opacity: 1; } }
.sai[open] .p4-mini .p4-v { scale: 1.35; }
@media (hover: hover) { .sai > summary:hover .p4-mini .p4-v { scale: 1.35; } }
.sai-c { min-width: 0; }
.sai-t { margin: 0; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.1 var(--titre); }
.sai-sp { display: block; margin-top: 6px; color: var(--gris); font-size: .9375rem; line-height: 1.45; }
.sai-sp span:not(:last-child)::after { content: "\00a0·"; }
.sai-n { display: inline-flex; align-items: center; gap: 10px; font: 500 1.45rem var(--titre); font-variant-numeric: tabular-nums; }
.sai-n .chev { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--k-page) var(--k-souple); }
.sai[open] .sai-n .chev { transform: rotate(180deg); }
/* une saison ouverte : ses dates à côté de sa carte, posée dans une grande arche qui suit la lecture */
.sai-corps { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding: 14px 8px 48px; }
.sai-corps:empty { display: none; }
/* d'une saison passée à l'autre : au bout de la saison ouverte, sous ses dates (la carte, arrimée, descend dans l'autre
   colonne), la précédente à gauche, la suivante à droite, deux liens en cartes discrètes (leur sens, puis le titre de la
   saison) ; au téléphone, l'une sous l'autre */
.sai-voisins { grid-column: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 18px; border-top: 1px solid var(--filet); }
.sai-v { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 18px; border: 1px solid var(--filet); border-radius: 14px; color: var(--encre); text-decoration: none;
  transition: border-color var(--k-survol) var(--k-doux), background-color var(--k-survol) var(--k-doux); }
.sai-v.sai-ap { margin-left: auto; text-align: right; }
.sai-v > span { display: grid; gap: 2px; }
.sai-vk { font: 700 .7rem/1.2 var(--etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.sai-vt { font: 500 1.08rem/1.2 var(--titre); }
.sai-v svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--saison-vive); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--k-survol) var(--k-souple); }
@media (hover: hover) { .sai-v:hover { border-color: var(--saison-vive); background: color-mix(in srgb, var(--saison-vive) 8%, transparent); } }
.sai-av:is(:focus-visible) svg { translate: -3px 0; }
@media (hover: hover) { .sai-av:is(:hover) svg { translate: -3px 0; } }
.sai-ap:is(:focus-visible) svg { translate: 3px 0; }
@media (hover: hover) { .sai-ap:is(:hover) svg { translate: 3px 0; } }
@media (max-width: 559px) { .sai-v { flex: 1 1 100%; } }
.sai-carte { position: sticky; top: calc(var(--haut) + 76px); margin: 0; }
.p4-carte { padding: clamp(34px, 4vw, 56px) clamp(14px, 2vw, 28px) clamp(16px, 2vw, 26px); border-radius: min(220px, 40%) min(220px, 40%) 24px 24px; overflow-x: clip;
  background: radial-gradient(80% 60% at 45% 35%, color-mix(in srgb, var(--saison) 26%, var(--papier-2)) 0%, var(--nuit) 72%); }
.p4-carte:empty { display: none; }
.sai-carte .carte { max-height: calc(100svh - var(--haut) - 210px); }
.p4-groupe + .p4-groupe { margin-top: 36px; }
.p4-mois { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--encre); font: 600 .8125rem/1.3 var(--etiq); letter-spacing: .12em; text-transform: uppercase; color: var(--saison-texte); }
.p4-dates { list-style: none; margin: 0; padding: 0; }
/* une date : le jour et l'heure ; le lieu, le spectacle derrière sa petite porte (à la couleur de son spectacle ; une
   résidence : un carré évidé), « Scolaire », « Résidence », l'état, les précisions */
.dl { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: 4px 28px; padding: 20px 0; border-bottom: 1px solid var(--filet); transition: background-color var(--k-survol) var(--k-doux); }
.dl p { margin: 0; }
.dl-quand { display: flex; flex-direction: column; }
.dl-jour { font: 400 1.5rem/1.1 var(--titre); }
.dl-heure { margin-top: 2px; font-size: .9375rem; color: var(--gris); }
.dl-c { min-width: 0; }
.dl-ou { font-weight: 600; line-height: 1.4; }
.dl-ou a { text-decoration: none; }
@media (hover: hover) { .dl-ou a:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* (la flèche d'un lien qui s'ouvre dans un nouvel onglet : petite, de la couleur du lien, collée à son dernier mot) */
.ext { display: inline-block; flex: none; width: .72em; height: .72em; margin-left: .3em; vertical-align: .02em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dl .dl-quoi { margin-top: 2px; }
.dl-quoi a, .dl-sp { font: 400 1.3rem/1.25 var(--titre); text-decoration: none; }
@media (hover: hover) { .dl-quoi a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } }
.dl-porte { display: inline-block; width: 9px; height: 13px; margin-right: 9px; border-radius: 999px 999px 1px 1px; background: var(--c); vertical-align: -.05em; }
.dl.est-res .dl-porte { width: 10px; height: 10px; border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 2px var(--c); vertical-align: 0; }
.p4-etiq { display: inline-block; margin-left: 10px; padding: 0 9px; border: 1px solid currentColor; border-radius: 999px; color: var(--gris); font: 600 .68rem/1.6 var(--etiq); letter-spacing: .08em; text-transform: uppercase; vertical-align: .15em; }
.p4-res { display: inline-flex; align-items: center; gap: 6px; border-style: dashed; }
.p4-res i { flex: none; width: 8px; height: 8px; border-radius: 1.5px; box-shadow: inset 0 0 0 1.5px currentColor; }
.dl .dl-etat { margin-top: 4px; font: 600 .74rem/1.3 var(--etiq); letter-spacing: .06em; text-transform: uppercase; color: var(--saison-texte); }
.dl .det { margin-top: 6px; }
.dl.suite { display: block; color: var(--gris); }
.dl.annule :is(.dl-ou, .dl-quoi) { color: var(--gris); }
.dl.on, .dl.est-allume { background: linear-gradient(90deg, color-mix(in srgb, var(--saison-vive) 10%, transparent), transparent 85%); }
.dl.est-vise { animation: vise 1.4s var(--k-doux); }
@media (max-width: 1000px) {
  .p4-carte { width: 100%; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .dl { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dl-quand { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
}
/* (les lignes de l'agenda d'un spectacle et d'un établissement : leur lieu en lien, leur état, une ligne qui suit la sienne) */
.dates a.ou { text-decoration-color: color-mix(in srgb, var(--encre) 30%, transparent); text-underline-offset: 3px; }
@media (hover: hover) { .dates a.ou:hover { color: var(--saison-texte); } }
.dates .qui .etat { margin: 0 0 0 4px; }
.dates > li.suite { display: block; color: var(--gris); }

/* ———— je souhaite programmer (la 05) : le catalogue, puis les lieux de diffusion sur l'aplat de la saison ————
   Sous l'en-tête d'aplat (voir l'espace pro), le catalogue : une fiche par spectacle dans son univers (voir les fiches) ;
   « Accueillir un spectacle » ; puis, sur l'aplat de la saison, la grande capitale des lieux de diffusion, la diffusion saison
   par saison et « Écrire à la compagnie », à côté de la carte de tous les lieux, en blanc sur l'aplat (les partenaires : au
   pied de page seulement). */
.ep-cat { display: grid; gap: clamp(20px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
/* le catalogue d'un regard, avant les fiches : un tableau net (celui du dossier), un spectacle par ligne, son titre dans sa
   police et sa couleur ; au téléphone, une carte compacte par spectacle (ses faits en deux colonnes) */
.rec { margin: 0 0 clamp(44px, 5.4vw, 80px); }
.rec-t { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.4; }
.rec-t th, .rec-t td { padding: 10px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--filet); }
.rec-t thead th { padding-block: 0 10px; border-bottom-color: color-mix(in srgb, var(--encre) 55%, transparent); color: var(--gris); font: 700 .72rem/1.3 var(--etiq); letter-spacing: .12em; text-transform: uppercase; }
.rec-t tbody th { width: 30%; font-weight: 400; }
.rec-t td { color: color-mix(in srgb, var(--encre) 86%, transparent); }
.rec-t td:nth-child(3) { white-space: nowrap; }   /* (la durée d'un tenant : « 55 minutes ») */
.rec-t td b, .rec-c dd b { color: var(--encre); font: 700 1.05em var(--titre); }
.rec-t tbody tr { transition: background-color var(--k-survol) var(--k-doux); }
@media (hover: hover) { .rec-t tbody tr:hover { background: color-mix(in srgb, var(--c) 8%, transparent); } }
.rec-a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--c); font: var(--rec-g, 600) 1.22rem/1.15 var(--rec-f, var(--titre));
  text-align: left; text-decoration: underline transparent; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; transition: text-decoration-color var(--k-survol) var(--k-doux); }
@media (hover: hover) { .rec-a:hover { text-decoration-color: currentColor; } }
.rec-tag { display: inline-block; margin-left: 4px; padding: 0 9px; border: 1px solid currentColor; border-radius: 999px; color: var(--gris); font: 600 .68rem/1.6 var(--etiq); letter-spacing: .08em; text-transform: uppercase; vertical-align: .15em; }
.rec-c { display: none; }
@media (max-width: 759px) {
  .rec-t { display: none; }
  .rec-c { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .rec-c li { padding: 4px 14px 12px; border: 1px solid var(--filet); border-left: 3px solid var(--c); border-radius: 6px; background: var(--papier-2); }
  .rec-ct { margin: 0; }
  .rec-c dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 2px 0 0; }
  .rec-c dl > div { min-width: 0; }
  .rec-c .rec-long { grid-column: 1 / -1; }
  .rec-c dt { color: var(--gris); font: 700 .66rem/1.3 var(--etiq); letter-spacing: .12em; text-transform: uppercase; }
  .rec-c dd { margin: 1px 0 0; font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
}
.ep-diff { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4.4vw, 80px); align-items: center; }
.ep-diff-t > p:not(.ep-k):not(.ep-ecrire) { max-width: 52ch; margin: 0 0 18px; font-size: 1.02rem; line-height: 1.6; }
.ep-diff .p-diff { max-width: none; min-height: 118px; margin: clamp(18px, 2vw, 26px) 0; }
.ep-ecrire { margin: clamp(22px, 2.6vw, 32px) 0 0; }
.ep-diff-carte { position: relative; margin: 0; }
.ep-diff-carte .carte { max-height: calc(100svh - 120px); }
/* la diffusion de la compagnie sur l'aplat : ses barres en blanc, leurs noms lisibles */
.ep-aplat .frise-compagnie .frise-bande-barre { background: #fff; }
.ep-aplat .frise-diffusion .frise-bande-nom { opacity: 1; }
/* le contact diffusion, le dossier PDF et les documents (règle 13) */
.ct-prg { position: relative; display: grid; gap: 3px; max-width: 540px; margin-top: 26px; padding: 18px 22px 16px; border: 1px solid var(--filet); border-left: 4px solid var(--ec, var(--magenta)); border-radius: 6px; background: var(--blanc); box-shadow: 0 18px 36px -28px rgba(29, 20, 24, .45); }
.ct-prg p { margin: 0; }
.ct-k { font: 600 .74rem/1.3 var(--etiq); letter-spacing: .12em; text-transform: uppercase; color: var(--ec, var(--magenta-texte)); }
.ct-nom b { display: block; font: 500 1.55rem/1.15 var(--titre); }
.ct-role { display: block; font-size: .95rem; color: var(--gris); }
.ct-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px !important; }
.ct-tel { font-weight: 600; text-decoration: none; }
html:not(.ed-actif) .ct-tel.vide { display: none; }
.ct-cond { margin-top: 8px !important; font-size: .82rem; color: var(--gris); }
.u .ct-prg { border-color: var(--u-filet); border-left-color: var(--u-vif); background: transparent; box-shadow: none; color: var(--u-texte); }   /* sans voile : la couleur vive y reste AA (Macbeth) */
.u .ct-k { color: var(--u-vif); }
.u .ct-role, .u .ct-cond { color: var(--u-texte2); }
.u-contact { padding: clamp(18px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--u-filet); background: var(--u-fond2); }
.ct-prg.compact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px; max-width: none; margin: 0; padding: 14px 20px; }
.ct-prg.compact .ct-nom b { font-size: 1.3rem; }
.ct-prg.compact .ct-liens, .ct-prg.compact .ct-cond { margin-top: 0 !important; }
.ct-prg.compact .ct-cond { margin-left: auto !important; }
.dos-bt { position: relative; overflow: hidden; }
.u-faits-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.u-docs { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.u-docs li { display: flex; align-items: center; gap: 10px; }
.u-docs .fleche { width: 18px; height: 18px; color: var(--u-vif); }
.u-docs a { color: var(--u-vif); }
.u-docs--ft { margin-top: clamp(18px, 2vw, 28px); }
/* (le contact diffusion de #/espace-pro/programmer, sur l'aplat de l'en-tête : un cadre blanc, la grande capitale du nom, le
   courriel en pastille blanche) */
.ep-tete .ct-prg { max-width: 600px; margin-top: clamp(22px, 2.6vw, 36px); padding: 22px 26px 20px; border: 2px solid #fff; border-radius: 0; background: rgba(0, 0, 0, .16); box-shadow: none; color: #fff; }
.ep-tete .ct-prg .ct-k { font: 700 .76rem/1.3 var(--etiq); letter-spacing: .14em; color: #fff; }
.ep-tete .ct-prg .ct-nom b { margin-top: 4px; font: 700 clamp(1.4rem, 1.1rem + 1vw, 1.95rem)/1.05 var(--titre); letter-spacing: -.005em; text-transform: uppercase; }
.ep-tete .ct-prg :is(.ct-role, .ct-cond) { color: #fff; }
.ep-tete .ct-prg .ct-role { font-weight: 600; }
.ep-tete .ct-prg .ct-liens { gap: 12px 24px; margin-top: 14px !important; }
.ep-tete .ct-prg .ct-liens a.bouton { --bt-a: #fff; --bt-sur: var(--e, var(--saison)); --bt-t: #fff; --bt-vif: #fff; min-height: 52px; padding: 0 26px; font-size: 1.05rem; }
.ep-tete .ct-prg .ct-cond { margin-top: 12px !important; font-weight: 600; }

/* ———— je représente un établissement scolaire (la 05) ————
   La position de la compagnie en tête (sa lettrine à la couleur de la saison), les spectacles par lieu en fiches d'univers
   (voir les fiches), les actions culturelles sur le papier teinté (leurs photos en mosaïque), puis les dates scolaires à côté
   de leur carte, en blanc sur l'aplat de la saison, et l'appel final. */
.ep-ecole { max-width: 62ch; margin: 0; font: 400 clamp(1.2rem, 1rem + .7vw, 1.6rem)/1.5 var(--texte); }
.ep-ecole::first-letter { color: var(--saison-texte); font: 700 2.4em/.8 var(--titre); }
.acs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
/* choisir une action culturelle : les puces des filtres des saisons, par groupe (le lieu, le public), et au bout le nombre de
   spectacles gardés ; au téléphone, les groupes l'un sous l'autre, les puces passent à la ligne */
.ef-in { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px clamp(24px, 3vw, 44px); padding: 18px 0; border-block: 1px solid var(--filet); }
.ef-g { min-width: 0; max-width: 100%; }
.ef-k { margin: 0 0 8px; color: var(--gris); font: 700 .72rem/1.3 var(--etiq); letter-spacing: .12em; text-transform: uppercase; }
.ef-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.ef-bout { display: flex; align-items: center; gap: 14px; min-height: 44px; margin-left: auto; }
.ef-n { margin: 0; font: 500 1.06rem/1.2 var(--titre); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 759px) {
  .ef-in { flex-direction: column; align-items: stretch; }
  .ef-bout { justify-content: space-between; margin-left: 0; }
}
.ep-act { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.ep-prose { max-width: 68ch; overflow-wrap: break-word; }
.ep-prose p, .ep-prose ul { margin: 0 0 1em; }
.ep-prose h3 { margin: 1.6em 0 .55em; color: var(--saison-texte); font: 700 clamp(1.15rem, 1rem + .7vw, 1.5rem)/1.1 var(--titre); text-transform: uppercase; }
.ep-prose > :first-child h3, .ep-prose > h3:first-child { margin-top: 0; }
.ep-prose ul { padding-left: 1.15em; }
.ep-prose li + li { margin-top: .55em; }
.ep-prose li::marker { color: var(--saison-texte); }
.ep-prose a { color: var(--saison-texte); }
.ep-act-ph { position: sticky; top: calc(var(--haut) + var(--onglets) + 24px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ep-act-ph > span { display: block; overflow: hidden; border-radius: 3px; background: var(--carte); }
.ep-act-ph .g { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.ep-act-ph .p { aspect-ratio: 1; }
.ep-act-ph img { width: 100%; height: 100%; object-fit: cover; }
.ep-act-ph figcaption { grid-column: 1 / -1; margin-top: 4px; }
/* les dates scolaires : leur carte sur l'aplat de la saison, comme les lieux de diffusion */
.ep-carte { padding: clamp(14px, 1.8vw, 24px); background: var(--saison); color: #fff; }
figcaption { margin-top: 6px; font-size: .8rem; color: var(--gris); }
.galerie { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }

/* ———— la compagnie ———— */
.compagnie, .directeur { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.directeur { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.paragraphes p { max-width: 68ch; margin: 0 0 1.1em; }
.compagnie .paragraphes > p:first-child, .chapo { font: 300 clamp(1.2rem, 1rem + .7vw, 1.5rem)/1.5 var(--texte); }
/* « En quelques dates » (la 06) : la frise historique, puis la liste des années, chacune son titre (on l'édite sur place) ; au
   téléphone, la liste descend le long d'un bras à la couleur de la saison */
.compagnie { grid-template-columns: minmax(0, 1fr); }
.c-frise { min-height: 170px; margin: 0 0 8px; }
/* (scrollytelling) la frise résume, le récit raconte : sous la frise, la liste des années devient un récit en chapitres, une
   étape par date de D (l'année en grand, le titre, qui mène au spectacle), chacune s'allume quand elle traverse le milieu de
   l'écran (une animation liée au défilement) ; à côté, un panneau épinglé prend la photo et la couleur du spectacle de
   l'étape lue (.recit-vue.est-vue, posée par le script, ligne de lecture). Au téléphone, le panneau reste en haut, les étapes
   passent dessous. En édition sur place, la frise s'efface et la liste reste, annotée */
.recit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.recit-panneau { position: sticky; top: calc(var(--haut) + var(--onglets) + 24px); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); height: min(68svh, 640px); overflow: hidden; border-radius: 8px; background: var(--papier-2); isolation: isolate; }
/* (une seule case, à la hauteur du panneau : sans elle, la case prenait la hauteur de la plus haute photo, chaque photo
   débordait du panneau, qui n'en montrait que le haut, et son cadrage (CADRAGE) se calculait sur ce qu'on ne voyait pas) */
.recit-vue { grid-area: 1 / 1; position: relative; min-height: 0; margin: 0; opacity: 0; transition: opacity var(--k-page) var(--k-doux); }
.recit-vue.est-vue { opacity: 1; }
.recit-vue img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.85); transform: scale(1.04); transition: transform .9s var(--k-doux); }
.recit-vue.est-vue img { transform: none; }
.recit-vue::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--c) 45%, #000) 0, transparent 58%), color-mix(in srgb, var(--c) 14%, transparent); }
.recit-vue.sans { display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, var(--papier-2)); }
.recit-vue.sans svg { width: 56%; height: auto; color: var(--c); }
.recit-an { position: absolute; left: clamp(16px, 3vw, 28px); bottom: 14px; z-index: 1; font: 500 clamp(3rem, 6vw, 5.6rem)/1 var(--titre); color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.recit-credit { position: absolute; right: 12px; top: 10px; z-index: 1; margin: 0; font: 400 .72rem/1.3 var(--sans); color: rgba(255, 255, 255, .8); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
/* (les étapes pendent à un bras d'encre qui s'effile en descendant ; chacune, une ventouse à la couleur de son spectacle :
   vide en attendant, pleine et gonflée quand on la lit, souple) */
.frise-l { list-style: none; margin: 0; padding: 0; position: relative; }
.frise-l::before { content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; border-radius: 3px; background: color-mix(in srgb, var(--saison-texte) 55%, transparent); clip-path: polygon(0 0, 100% 0, 67% 100%, 33% 100%); }
.frise-l > li { position: relative; display: grid; gap: 10px; align-content: center; min-height: 38svh; padding: 6vh 0 6vh 34px; }
.frise-l > li::before { content: ""; position: absolute; left: -8px; top: 50%; width: 16px; height: 16px; margin-top: -9px; border-radius: 50%;
  background: radial-gradient(circle, var(--papier) 0 3.6px, var(--c, var(--saison-texte)) 4.3px); box-shadow: 0 0 0 3px var(--papier); transition: scale var(--k-survol) var(--k-souple); }
.frise-l > li:is(.lu)::before { background: radial-gradient(circle, var(--c, var(--saison-texte)) 0 2.8px, var(--papier) 3.4px 4.4px, var(--c, var(--saison-texte)) 5px); scale: 1.3; }
@media (hover: hover) { .frise-l > li:is(:has(a:hover))::before { background: radial-gradient(circle, var(--c, var(--saison-texte)) 0 2.8px, var(--papier) 3.4px 4.4px, var(--c, var(--saison-texte)) 5px); scale: 1.3; } }
.frise-l .an { display: block; font: 500 clamp(2.4rem, 2rem + 2vw, 3.8rem)/1 var(--titre); color: var(--c, var(--saison-texte)); font-variant-numeric: tabular-nums; }
.frise-l .ti, .frise-l a { display: block; font: 500 clamp(1.4rem, 1.1rem + 1.2vw, 2.3rem)/1.18 var(--titre); color: var(--encre); text-decoration: none; text-wrap: balance; }
@media (hover: hover) { .frise-l a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } }
html.ed-actif .c-frise { display: none; }
@media (max-width: 899px) {
  .recit { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .recit-panneau { top: calc(var(--haut) + var(--onglets)); z-index: 3; height: 34svh; border-radius: 0 0 8px 8px; }
  .frise-l > li { min-height: 30svh; padding: 5vh 0 5vh 26px; }
  .recit-an { font-size: clamp(2.4rem, 10vw, 3.6rem); }
}
/* la troupe (règle 20, TROUPE) : la pieuvre de la compagnie, vivante (CREATURE.creer, ses vraies tentacules), en tête de la
   troupe ; quand la lecture descend, elle nage dans la marge de gauche, à hauteur de lecture, et une tentacule attrape le
   médaillon du métier qu'on lit (son icône dans un rond, son titre) ; les personnes sont des pastilles : leur visage quand
   sa publication est accordée (sinon le nom seul), leur nom, leur métier précis. Survoler ou choisir une personne allume
   toutes ses places et les relie (TROUPE.relier, à la couleur de la saison). Sans mouvement, le dessin de la pieuvre reste
   en tête, immobile */
section.bloc.troupe { padding-top: 0; content-visibility: auto; contain-intrinsic-size: auto 1400px; }   /* hors de l'écran : ni style ni mise en page */
.tr6 { --g: clamp(72px, 8vw, 120px); --troupe-lien: var(--saison-texte); --troupe-ic-fond: var(--papier); --troupe-ventouse-fond: var(--papier);
  position: relative; display: grid; gap: clamp(18px, 2.4vw, 30px); margin-top: 18px; padding-left: var(--g); }
.tr6-coeur { position: relative; z-index: 2; width: clamp(104px, 12vw, 150px); margin-left: calc(var(--g) * -1 + 2px); margin-bottom: 30px; color: var(--saison-texte); }
.tr6.est-vivante .tr6-coeur { visibility: hidden; }   /* la créature (CREATURE) dessine la pieuvre à sa place, puis se balade */
/* la personne choisie : ce sont les tentacules de la créature, lumineuses, qui relient ses places ; les fils des liens se taisent */
.troupe-liens { transition: opacity .35s; }
.tr6.est-vivante.est-reliee .troupe-liens { opacity: 0; }
/* le métier que la créature tient s'allume : son médaillon grandit d'un rien dans une auréole, son titre prend la couleur de la saison */
.tr6-ic { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
.tr6-cat.est-tenue .tr6-ic { transform: scale(1.1); box-shadow: inset 0 0 0 2px var(--saison-texte), 0 0 0 5px color-mix(in srgb, var(--saison-texte) 26%, transparent); }
.tr6-t > span:last-child { transition: color .45s; }
.tr6-cat.est-tenue .tr6-t > span:last-child { color: var(--saison-texte); }
.tr6-coeur svg { display: block; width: 100%; height: auto; }
.tr6-cat { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); gap: 10px 24px; align-items: start; }
.tr6-t { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 1.25rem/1.15 var(--titre); }
.tr6-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 2px var(--saison-texte); color: var(--saison-texte); font-size: 13px; }
.tr6-places { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 4px 0 0; }
.tr6-p { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 16px 4px 4px; border: 1.5px solid var(--filet); border-radius: 999px; background: var(--blanc); color: var(--encre);
  font: inherit; text-align: left; cursor: pointer; transition: border-color var(--k-survol) var(--k-doux), background-color var(--k-survol) var(--k-doux), color var(--k-survol) var(--k-doux), scale .12s var(--k-doux); }
.tr6-p:not(.a-photo) { padding-left: 14px; }
.tr6-p.est-allume { border-color: var(--saison-texte); background: color-mix(in srgb, var(--saison-texte) 10%, var(--blanc)); }
@media (hover: hover) { .tr6-p:hover { border-color: var(--saison-texte); background: color-mix(in srgb, var(--saison-texte) 10%, var(--blanc)); } }
.tr6-p[aria-pressed="true"] { border-color: var(--saison-texte); background: var(--saison-texte); color: var(--papier); }
.tr6-p:focus-visible { outline: 2px solid var(--saison-texte); outline-offset: 2px; }
.tr6-v { flex: none; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: var(--carte); }
.tr6-v img { width: 100%; height: 100%; object-fit: cover; }
.tr6-pt { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--saison-texte); }
.tr6-p[aria-pressed="true"] .tr6-pt { box-shadow: inset 0 0 0 2px var(--papier); }
.tr6-qui { display: grid; line-height: 1.2; }
.tr6-nom { font: 600 .95rem/1.2 var(--texte); }
.tr6-m { font-size: .8rem; color: var(--gris); }
.tr6-m span + span::before { content: " · "; }
.tr6-p:is(.est-allume) .tr6-m { color: var(--encre); }
@media (hover: hover) { .tr6-p:is(:hover) .tr6-m { color: var(--encre); } }
.tr6-p[aria-pressed="true"] .tr6-m { color: inherit; }
@media (max-width: 700px) {
  section.bloc.troupe { contain-intrinsic-size: auto 3600px; }
  .tr6 { --g: 72px; }
  .tr6-coeur { width: 96px; }
  .tr6-cat { grid-template-columns: minmax(0, 1fr); }
  .tr6-ic { width: 44px; height: 44px; font-size: 11px; }
  .tr6-p { min-width: 0; max-width: 100%; }
  .tr6-qui { min-width: 0; overflow-wrap: anywhere; }
}
/* la fiche d'une personne (une place de la troupe, un portrait, son nom dans une page) : posée par-dessus, son portrait sur la
   photo, dont elle naît (un cercle qui s'ouvre) ; ses métiers, ses spectacles, les prochaines dates de ceux qui tournent.
   Dans la couche du dessus (popover), gardée dans l'écran utile (--fiche-marges : le menu arrimé, la barre du bas) */
.trf { position: fixed; inset: auto; left: 0; top: 0; width: min(360px, calc(100vw - 24px)); height: auto; max-height: min(620px, calc(100dvh - var(--fiche-marges, 120px))); margin: 0; overflow: auto; overscroll-behavior: contain;
  box-sizing: border-box; padding: 16px 18px 18px; border: 0; border-radius: 24px; background: var(--blanc); color: var(--encre); text-align: left;
  font: 400 1rem/1.5 var(--texte); letter-spacing: normal; text-transform: none;
  box-shadow: 0 0 0 1.5px var(--saison-texte), 0 26px 60px -24px rgb(0 0 0 / .55); }
.trf-sans-popover { z-index: 2147483005; }
.trf:focus { outline: none; }
.trf:focus-visible { outline: 2px solid var(--saison-texte); outline-offset: 3px; }
.trf-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--encre); cursor: pointer; transition: background-color var(--k-survol) var(--k-doux); }
.trf-x .croix { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (hover: hover) { .trf-x:hover { background: var(--carte); } }
.trf-x:focus-visible { outline: 2px solid var(--saison-texte); outline-offset: 1px; }
.trf-tete { display: flex; align-items: center; gap: 14px; min-height: 40px; padding-right: 32px; }
.trf-v { flex: none; width: 88px; height: 88px; overflow: hidden; border-radius: 50%; background: var(--carte); box-shadow: 0 0 0 2px var(--blanc), 0 0 0 4px var(--saison-texte); }
.trf-v img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trf-qui { min-width: 0; overflow-wrap: anywhere; }
.trf-nom { margin: 0; font: 500 1.35rem/1.15 var(--titre); }
.trf-m { margin: 4px 0 0; font-size: .85rem; line-height: 1.35; color: var(--gris); }
.trf-m span + span::before { content: " · "; }
.trf-cr { display: block; margin-top: 4px; font-size: .7rem; color: var(--gris); }
/* son site personnel : un bouton plein, du ton de la saison, sous son nom (le texte écrit par l'administration, l'adresse du site en petit) */
.trf-site { margin: 14px 0 0; }
.trf-site-a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 16px; border-radius: 999px; box-sizing: border-box;
  background: var(--saison-texte); color: var(--blanc); text-decoration: none; transition: background-color var(--k-survol) var(--k-doux); }
.trf-site-t { display: grid; min-width: 0; line-height: 1.2; }
.trf-site-t b { font: 600 .95rem/1.2 var(--texte); overflow-wrap: anywhere; }
.trf-site-t small { font-size: .72rem; opacity: .85; overflow-wrap: anywhere; }
.trf-site-a .ext { flex: none; width: 14px; height: 14px; }
@media (hover: hover) { .trf-site-a:hover { background: color-mix(in srgb, var(--saison-texte) 82%, var(--encre)); } }
.trf-site-a:focus-visible { outline: 2px solid var(--saison-texte); outline-offset: 3px; }
.trf-k { margin: 18px 0 8px; font: 600 .7rem/1.3 var(--etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--saison-texte); }
.trf-l { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
.trf-l a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 8px 4px 4px; border-radius: 12px; color: inherit; text-decoration: none;
  transition: background-color var(--k-survol) var(--k-doux); }
@media (hover: hover) { .trf-l a:hover { background: color-mix(in srgb, var(--c, var(--saison-texte)) 12%, var(--blanc)); } }
.trf-l a:focus-visible { outline: 2px solid var(--c, var(--saison-texte)); outline-offset: 0; }
.trf-ph { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 10px; background: var(--c); }
.trf-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trf-sp { display: grid; min-width: 0; line-height: 1.25; }
.trf-sp b { font: 600 .95rem/1.25 var(--texte); color: var(--c); }
.trf-sp b .tag { color: var(--encre); }
.trf-sp small { font-size: .78rem; color: var(--gris); }
.trf-sp small span + span::before { content: " · "; }
.trf-q { flex: none; display: grid; place-items: center; align-content: center; width: 78px; padding: 3px 2px; box-sizing: border-box; min-height: 44px; border-radius: 10px; text-align: center;
  background: color-mix(in srgb, var(--c) 16%, var(--blanc)); box-shadow: inset 3px 0 0 var(--c); }
.trf-q b { font: 600 .82rem/1.15 var(--titre); }
.trf-q small { font-size: .66rem; color: var(--gris); }
.trf-tout { margin: 10px 0 0; font-size: .85rem; }
.trf-tout a { color: var(--saison-texte); }
.trf-tout .fleche { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }
/* ce qui l'ouvre ailleurs que dans la troupe : un nom écrit dans une page (le même texte, souligné de points, à la couleur du
   texte), un portrait de la distribution (tout le portrait) ; en mode édition, le texte et la photo reprennent le clic */
.nomme { display: inline; margin: 0; padding: 0; border: 0; border-radius: 2px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit;
  cursor: pointer; text-decoration: underline dotted 1.5px; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: .2em;
  transition: text-decoration-color var(--k-survol) var(--k-doux); }
@media (hover: hover) { .nomme:hover { text-decoration-style: solid; text-decoration-color: currentColor; } }
.nomme[aria-expanded="true"] { text-decoration-style: solid; text-decoration-color: currentColor; }
.nomme:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ed-actif .nomme { pointer-events: none; text-decoration: none; }
/* dans la distribution, un nom dont la photo est publiée la porte en vignette ronde devant lui (au moins 28 px) */
.nomme-ph { display: inline-block; width: max(28px, 1.15em); height: max(28px, 1.15em); margin: 0 .3em 0 0; border-radius: 50%; object-fit: cover; vertical-align: middle;
  background: var(--u-filet, rgb(127 127 127 / .2)); box-shadow: 0 0 0 1.5px color-mix(in srgb, currentColor 35%, transparent); }
.u-pt { position: relative; }
.u-pt-ouvrir { position: absolute; inset: 0; z-index: 1; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 3px; background: none; cursor: pointer; }
.u-pt-ouvrir:focus-visible { outline: 2px solid var(--u-vif, currentColor); outline-offset: 4px; }
.u-pt-cadre img { transition: scale .45s var(--k-doux); }
@media (hover: hover) { .u-pt:has(.u-pt-ouvrir:hover) .u-pt-cadre img { scale: 1.04; } }
.ed-actif .u-pt-ouvrir { display: none; }

/* ———— le contact, les pages légales ———— */
.champ { margin: 0 0 16px; }
.champ label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .92rem; }
.champ input, .champ textarea, .calcul input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--filet); border-radius: 6px; background: #fff; font: 400 1rem var(--sans); color: var(--encre); }
.champ input:focus, .champ textarea:focus, .calcul input:focus { border-color: var(--encre); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 25%, transparent); }
.contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.formulaire .large, .formulaire .case, .formulaire .calcul, .formulaire .envoi { grid-column: 1 / -1; }
.case { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; }
.case input { flex: none; width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--magenta); }
.case a { color: var(--magenta-texte); }
.calcul { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; }
.calcul label { font-weight: 600; white-space: nowrap; }
.calcul input { width: 4.5em; padding: 8px 10px; }
.envoi { margin: 0; }
.coord { font-style: normal; line-height: 1.7; padding: 22px 24px; border-left: 3px solid var(--magenta); background: var(--papier-2); }
/* (la page de contact : les coordonnées d'abord, à côté du formulaire au bureau, au-dessus au téléphone) */
.contact > .ct-coord { grid-column: 2; grid-row: 1; display: grid; gap: 18px; }
.contact > .formulaire { grid-column: 1; grid-row: 1; }
.ct-coord .coord { margin: 0; }
.ct-ecrire { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.ct-courriel { color: var(--gris); font-size: .92rem; overflow-wrap: anywhere; }
.legal { max-width: 78ch; overflow-wrap: anywhere; }
.legal h2 { margin: 1.6em 0 .5em; font: 500 1.6rem/1.2 var(--titre); }
.legal h2:first-child { margin-top: 0; }
.legal a { color: var(--magenta-texte); }

/* ———— l'espace pro (règles 16 et 21) : celui de la 05, l'aplat et la capitale, à la couleur de la saison ————
   #/espace-pro : sur l'aplat de la saison (la suite de l'en-tête), la ligne-tentacule, la grande capitale et son texte ; ses
   deux pages en grandes portes photographiques, chacune dans la couleur de son parcours (D.site.entrees) ; puis les trois
   espaces réservés en aplats numérotés (la saison, la saison profonde, la nuit). Ses deux pages (programmer, établissements
   scolaires) : le même en-tête d'aplat, dans la couleur du parcours, sa photo à droite et le retour vers l'espace pro. Les
   grandes capitales tiennent toujours dans leur boîte (cqi : leur mot le plus long y entre, quelle que soit la largeur). */
.ep-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* la ligne-tentacule de la 05 : une onde longue qui s'enroule au bout ; elle se trace à l'arrivée */
.ep-sep { display: flex; align-items: center; width: 100%; max-width: 440px; height: 26px; margin: 0 0 clamp(14px, 1.8vw, 24px); color: var(--ep-sep, var(--saison-texte)); transform-origin: 0 50%; }
.ep-sep svg { display: block; height: 26px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ep-sep path { vector-effect: non-scaling-stroke; }
.ep-sep .v { flex: 1 1 0; min-width: 0; }
.ep-sep .b { flex: none; width: 46px; }
.ep-sep[data-mv="trace"].mv-attente { transition: transform var(--k-lent) var(--k-doux); }
/* l'en-tête : l'aplat (la saison ; sur ses deux pages, la couleur du parcours, --e) */
.ep-tete { position: relative; isolation: isolate; overflow: hidden; padding: clamp(36px, 4.6vw, 68px) 0 clamp(48px, 5.6vw, 84px); background: var(--e, var(--saison)); color: #fff; --ep-sep: #fff; }
.ep-tete :focus-visible, .ep-aplat :focus-visible, .ep-cta :focus-visible { outline-color: #fff; }
.ep-tete-ph { position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; width: min(48%, 680px); background: var(--e); }
.ep-tete-ph img { width: 100%; height: 100%; object-fit: cover; }
.ep-tete-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--e), color-mix(in srgb, var(--e) 0%, transparent) 62%); }
.ep-c { position: relative; container-type: inline-size; }
.ep-retour { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(16px, 2vw, 26px); color: #fff; font: 700 .8rem/1.3 var(--etiq); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.ep-retour .fleche { scale: -1 1; }
@media (hover: hover) { .ep-retour:hover { text-decoration: underline; text-underline-offset: 4px; } }
.ep-h1 { max-width: min(100%, 1100px); margin: 0; font: 700 min(clamp(38px, 6.6vw, 104px), 11.6cqi)/.94 var(--titre); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.ep-lead { max-width: 40ch; margin: 18px 0 0; font: 400 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.45 var(--texte); }
/* le sommaire d'une page longue (les deux pages de l'espace pro, la compagnie), comme le sous-menu d'un spectacle : une ligne
   de pièces, une par section, juste sous l'en-tête ; on descend, elle s'arrime sous le menu flottant (.colle : elle prend le
   haut de l'écran derrière lui, et le titre de la page paraît à gauche au bureau), la section lue pleine (aria-current) ; au
   téléphone, la rangée défile au doigt, un fondu à chaque bord où il reste à voir (.a-gauche, .a-droite). Sur l'espace pro,
   elle prolonge l'aplat du parcours (--e) ; sur la compagnie, le papier et l'encre de la saison. Un fond plein, sans flou */
.psom { --ps-fond: var(--papier); --ps-encre: var(--encre); --ps-trait: color-mix(in srgb, var(--encre) 34%, transparent); --ps-plein: var(--saison-vive); --ps-sur: var(--nuit);
  position: sticky; top: calc(var(--haut) - 8px); z-index: 25; background: var(--ps-fond); color: var(--ps-encre); border-bottom: 1px solid var(--filet); }
.psom--ep { --ps-fond: var(--e, var(--saison)); --ps-encre: #fff; --ps-trait: rgba(255, 255, 255, .62); --ps-plein: #fff; --ps-sur: var(--e, var(--saison)); border-bottom: 0; }
.psom::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--haut) - 8px); background: inherit; opacity: 0; transition: opacity var(--k-survol) var(--k-doux); pointer-events: none; }
.psom.colle::before { opacity: 1; }
.psom.colle { box-shadow: 0 10px 22px -18px rgba(0, 0, 0, .9); }
.psom-in { display: flex; align-items: center; min-height: 56px; }
.psom-t { flex: none; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font: 700 1rem/1.2 var(--titre); transition: max-width var(--k-page) var(--k-doux), margin var(--k-page) var(--k-doux), opacity var(--k-survol) var(--k-doux); }
.psom.colle .psom-t { max-width: 22rem; margin-right: clamp(12px, 2vw, 28px); opacity: 1; }
.psom--ep .psom-t { text-transform: uppercase; letter-spacing: .02em; }
.psom-cadre { flex: 1; }
.psom .sm7-f { border-color: color-mix(in srgb, var(--ps-encre) 40%, transparent); background: var(--ps-fond); color: var(--ps-encre); }
@media (hover: hover) { .psom .sm7-f:hover { border-color: var(--ps-encre); background: var(--ps-fond); } }
.psom-l { --sm7-fondu: 32px; display: flex; gap: 8px; margin: 0 -2px; padding: 6px 2px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--sm7-fg), #000 calc(100% - var(--sm7-fd)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--sm7-fg), #000 calc(100% - var(--sm7-fd)), transparent);
  transition: --sm7-fg var(--k-survol) var(--k-doux), --sm7-fd var(--k-survol) var(--k-doux); }
.psom-l::-webkit-scrollbar { display: none; }
.psom-l.a-gauche { --sm7-fg: var(--sm7-fondu); }
.psom-l.a-droite { --sm7-fd: var(--sm7-fondu); }
.psom-l li { flex: none; }
.psom-l button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ps-trait); border-radius: 999px; background: transparent; color: var(--ps-encre);
  font: 700 .72rem/1.2 var(--etiq); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background-color var(--k-survol) var(--k-doux), color var(--k-survol) var(--k-doux), border-color var(--k-survol) var(--k-doux); }
@media (hover: hover) { .psom-l button:hover { border-color: var(--ps-plein); } }
.psom-l button[aria-current] { border-color: var(--ps-plein); background: var(--ps-plein); color: var(--ps-sur); }
.psom-l button:focus-visible { outline: 2px solid var(--ps-plein); outline-offset: 2px; }
.psom--ep :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { .psom-l { transition: none; } }
/* (arrimé, ce qu'il prend sous le menu : les ancres s'arrêtent sous lui, le focus aussi, et ce qui s'épingle descend d'autant) */
html:has(main > .psom) { --onglets: 57px; scroll-padding-top: calc(var(--haut) + var(--onglets) + 12px); }
.ep-tete:has(+ .psom) { padding-bottom: clamp(24px, 3vw, 40px); }
/* ses deux étages : les deux pages ouvertes à tous, côte à côte sur toute la largeur ; puis les espaces réservés, trois
   fiches sur le papier, plus petites, marquées d'un cadenas */
.ep-groupes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ep-g { display: grid; min-width: 0; }
.ep-g + .ep-g > .ep-porte { box-shadow: inset 2px 0 0 rgba(255, 255, 255, .55); }
/* ses pages : de grandes portes photographiques, la photo passée dans la couleur du parcours */
.ep-porte { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; height: 100%; min-height: clamp(300px, 44vh, 440px);
  padding: clamp(22px, 2.4vw, 36px) clamp(20px, 2.4vw, 38px); background: var(--e); color: #fff; text-decoration: none; }
.ep-porte-ph { position: absolute; inset: 0; z-index: -1; background: var(--e); }
.ep-porte-ph img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--k-lent) var(--k-doux); }
.ep-porte-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--e) 70%, #000) 0%, transparent 70%); mix-blend-mode: multiply; }
.ep-porte-t { flex: 1 1 auto; min-width: 0; font: 700 clamp(26px, 2.8vw, 44px)/1.02 var(--titre); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
.ep-porte-t small { display: block; margin-top: 10px; font: 700 clamp(.8rem, .72rem + .25vw, .95rem)/1.3 var(--etiq); letter-spacing: .08em; }
.ep-porte .fleche, .ep > .fleche { width: clamp(28px, 2.4vw, 40px); height: clamp(28px, 2.4vw, 40px); stroke-width: 1.6; transition: translate var(--k-survol) var(--k-souple); }
@media (hover: hover) { .ep-porte:hover .ep-porte-ph img { scale: 1.05; } }
.ep-porte:is(:focus-visible) .fleche { translate: 6px 0; }
@media (hover: hover) { .ep-porte:is(:hover) .fleche { translate: 6px 0; } }
.ep-porte:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }
.ep:has(.ep-a.mv-presse) { scale: .985; transition: scale var(--k-presse); }
/* les espaces réservés : un étage plus bas et plus calme ; le titre de l'étage, son texte, puis trois fiches sur le papier
   (un filet de la saison en tête, un cadenas « Avec connexion »), qui s'éclairent au survol, la flèche avance, souple */
.ep-reserve { padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 100px); }
.ep-reserve-t { margin: 0; color: var(--saison-texte); font: 700 min(clamp(26px, 3vw, 42px), 10cqi)/1 var(--titre); letter-spacing: -.01em; text-transform: uppercase; }
.ep-reserve-x { max-width: 52ch; margin: 12px 0 0; color: var(--gris); font: 400 1.05rem/1.5 var(--texte); }
.ep-acces { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(12px, 1.6vw, 20px); margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; }
.ep { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 200px; padding: clamp(20px, 2vw, 28px);
  border-top: 3px solid var(--saison-texte); border-radius: 0 0 8px 8px; background: var(--papier-2); color: var(--encre); transition: background var(--k-survol) var(--k-doux); }
.ep:is(:focus-within) { background: var(--carte); }
@media (hover: hover) { .ep:is(:hover) { background: var(--carte); } }
.ep-cle { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--gris); font: 700 .72rem/1.2 var(--etiq); letter-spacing: .12em; text-transform: uppercase; }
.ep-cadenas { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ep-t { margin: 0; font: 700 clamp(1.2rem, 1rem + .7vw, 1.55rem)/1.1 var(--titre); letter-spacing: -.005em; text-wrap: balance; }
.ep-a { color: var(--encre); text-decoration: none; }
/* toute la fiche mène à l'espace : le lien s'étend sur elle (son titre reste son nom) */
.ep-a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ep-a:focus-visible { outline: none; }
.ep:has(.ep-a:focus-visible) { outline: 3px solid var(--saison-texte); outline-offset: 3px; }
html.ed-actif .ep-a::after { content: none; }
.ep-x { flex: 1 1 auto; max-width: 40ch; margin: 0; color: var(--gris); font: 400 .98rem/1.5 var(--texte); }
.ep > .fleche { width: 26px; height: 26px; margin-top: 4px; color: var(--saison-texte); }
.ep:is(:focus-within) > .fleche { translate: 6px 0; }
@media (hover: hover) { .ep:is(:hover) > .fleche { translate: 6px 0; } }
/* les sections des deux pages : la ligne-tentacule, puis la grande capitale à la couleur de la saison */
.ep-sec { padding: clamp(60px, 7.6vw, 112px) 0; }
.ep-sec:not(.fond) + .ep-sec:not(.fond) { padding-top: 0; }
.ep-sec.fond { background: var(--papier-2); }
.ep-sec-t { margin: 0 0 clamp(26px, 3.4vw, 44px); color: var(--saison-texte); font: 700 min(clamp(32px, 4.4vw, 62px), 10.4cqi)/.94 var(--titre); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.ep-sec > .wrap, .ep-aplat > .wrap { container-type: inline-size; }
.ep-k { margin: 0 0 14px; color: var(--saison-texte); font: 700 .78rem/1.3 var(--etiq); letter-spacing: .14em; text-transform: uppercase; }
/* l'aplat de la saison (les lieux de diffusion) : tout y est blanc, la frise et la carte comprises */
.ep-aplat { padding: clamp(64px, 8vw, 120px) 0; background: var(--saison); color: #fff; --ep-sep: #fff; }
.ep-aplat :is(.ep-sec-t, .ep-k) { color: #fff; }
.ep-aplat .frise[data-frise] { --fr-fond: var(--saison); --fr-encre: #fff; --fr-trait: rgba(255, 255, 255, .55); --fr-accent: #fff; --fr-bulle-fond: #fff; --fr-bulle-encre: var(--saison); }
:is(.ep-aplat, .ep-carte) .carte .pays { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .6); stroke-width: 1.2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
:is(.ep-aplat, .ep-carte) .carte .voisin { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .3); stroke-width: 1px; vector-effect: non-scaling-stroke; }
:is(.ep-aplat, .ep-carte) .carte .encart { stroke: rgba(255, 255, 255, .6); }
:is(.ep-aplat, .ep-carte) .carte .passe path { stroke: rgba(255, 255, 255, .4); }
:is(.ep-aplat, .ep-carte) .carte :is(.bras, .rouen) { fill: #fff; }
:is(.ep-aplat, .ep-carte) .carte :is(.bout, .bras-trait) { stroke: #fff; }
:is(.ep-aplat, .ep-carte) .carte .point { fill: #fff; stroke: var(--saison); }
:is(.ep-aplat, .ep-carte) .carte :is(.rouen-nom, .nom) { fill: #fff; stroke: var(--saison); }
:is(.ep-aplat, .ep-carte) .carte .carte-lieu:focus-visible .point { stroke: #fff; }
:is(.ep-aplat, .ep-carte) .carte .carte-lieu.est-allume .point { stroke: #fff; }
/* le bouton blanc sur l'aplat */
.ep-bt { --bt-a: #fff; --bt-sur: var(--e, var(--saison)); --bt-t: #fff; --bt-vif: #fff; }   /* (l'appel de l'espace pro : le principal, blanc sur l'aplat) */
.ep-bt .fleche { transition: translate var(--k-survol) var(--k-souple); }
@media (hover: hover) { .ep-bt:hover .fleche { translate: 4px 0; } }
/* l'appel final : la pieuvre et son nom, « Écrire à la compagnie » */
.ep-cta { padding: clamp(56px, 7vw, 100px) 0; background: var(--saison); color: #fff; }
.ep-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; }
.ep-cta-logo { display: block; width: clamp(150px, 18vw, 260px); color: #fff; }
.ep-cta-logo svg { display: block; width: 100%; height: auto; }
/* l'historique des actions culturelles (règle 26) : #/actions-culturelles, la page d'une action, et ses renvois (la page des
   établissements, la compagnie, la page d'un spectacle). Une action : sa période à gauche, à la couleur de son spectacle ; son
   titre, ses spectacles (des pastilles), son texte ; « Découvrir » quand elle a sa page. En renvoi : des cartes, côte à côte */
.ach-l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
.ach { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 6px 22px; padding: 22px 8px; border-bottom: 1px solid var(--filet); transition: background-color var(--k-survol) var(--k-doux); }
.ach.on { background: color-mix(in srgb, var(--c) 10%, transparent); }
.ach-quand { margin: 0; }
.ach-quand span { display: inline-block; padding-left: 12px; border-left: 3px solid var(--c); font: 600 1.02rem/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.ach-c { min-width: 0; }
.ach-t { margin: 0 0 8px; font: 500 clamp(1.25rem, 1.05rem + .6vw, 1.6rem)/1.15 var(--titre); text-wrap: balance; }
.ach-t a { color: inherit; text-decoration: none; background: linear-gradient(var(--c), var(--c)) 0 100% / 0 2px no-repeat; transition: background-size var(--k-survol) var(--k-doux); }
@media (hover: hover) { .ach-t a:hover { background-size: 100% 2px; } }
.ach-sp { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; padding: 0; list-style: none; font: 600 .78rem/1.3 var(--etiq); letter-spacing: .08em; text-transform: uppercase; }
.ach-sp li { display: inline-flex; align-items: center; gap: 7px; }
.ach-sp li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.ach-sp a { color: inherit; text-decoration: none; }
@media (hover: hover) { .ach-sp a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.ach-x { max-width: 70ch; }
.ach-x p { margin: 0 0 .6em; }
.ach-ou { margin: 0; padding: 0; list-style: none; color: var(--gris); font-size: .92rem; }
.ach-ou li { display: inline; }
.ach-ou li + li::before { content: ", "; }
.ach-lien { margin: 12px 0 0; }
.ach-tout { margin: clamp(22px, 2.6vw, 34px) 0 0; }
.ach-l--court { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: clamp(14px, 1.8vw, 24px); border: 0; }
.ach-l--court .ach { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; border: 0; border-top: 3px solid var(--c); border-radius: 0 0 4px 4px; background: color-mix(in srgb, currentColor 5%, transparent); }
.ach-l--court .ach-quand span { padding: 0; border: 0; color: var(--gris); font-size: .9rem; }
.ach-l--court .ach-t { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); }
.ach-l--court .ach-lien { margin-top: auto; padding-top: 6px; }
.ach-l--court .ach.a-image { padding-top: 0; }
.ach-ph { display: block; margin: 0 -22px 4px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--carte); }
.ach-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.u-menees { margin-top: clamp(26px, 3vw, 40px); }
.ach-frise-s { padding-bottom: 0; }
.ach-g { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.ach-carte { top: calc(var(--haut) + 16px); }
:is(.ep-sec-a, .titre-a) { color: inherit; text-decoration: none; }
@media (hover: hover) { :is(.ep-sec-a, .titre-a):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; } }
/* la page d'une action : son surtitre (sa période) et son dispositif sur l'aplat ; le projet et ses faits ; le déroulé (une
   frise, ses étapes) ; la restitution (ses tableaux numérotés, des vers) ; la presse */
.act-sur { margin: 0 0 10px; font: 700 .8rem/1.3 var(--etiq); letter-spacing: .14em; text-transform: uppercase; }
.act-disp { max-width: 52ch; font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); }
.act-g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.act-faits { margin: 0; padding: clamp(20px, 2.2vw, 28px); border-top: 3px solid var(--saison-texte); background: var(--papier-2); }
.act-faits > div + div { margin-top: 18px; }
.act-faits dt { margin: 0 0 6px; color: var(--saison-texte); font: 700 .74rem/1.3 var(--etiq); letter-spacing: .14em; text-transform: uppercase; }
.act-faits dd { margin: 0; }
.act-faits .ach-sp { margin: 0; }
.act-lieux { margin: 0; padding: 0; list-style: none; }
.act-lieux li + li { margin-top: 10px; }
.act-lieux li > * { display: block; }
.act-lieux li > span { color: var(--gris); font-size: .94rem; }
.act-frise { margin: 0 0 clamp(18px, 2.4vw, 30px); }
.act-etapes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
.act-etapes > li { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 4px 22px; padding: 16px 8px; border-bottom: 1px solid var(--filet); transition: background-color var(--k-survol) var(--k-doux); }
.act-etapes > li.on { background: color-mix(in srgb, var(--saison) 12%, transparent); }
.act-quand { margin: 0; font: 600 1rem/1.35 var(--sans); }
.act-etapes h3 { margin: 0 0 4px; font: 500 1.25rem/1.2 var(--titre); }
.act-etapes p { margin: 0; }
.act-resti { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.act-tableaux { margin: 0; padding: 0; list-style: none; counter-reset: t; }
.act-tableaux li { display: flex; align-items: baseline; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--filet); font: 500 clamp(1.1rem, 1rem + .5vw, 1.4rem)/1.2 var(--titre); }
.act-tableaux .n { flex: none; min-width: 1.6em; color: var(--saison-texte); font: 700 .85rem/1 var(--etiq); letter-spacing: .1em; }
/* (avec des images : une séquence, chaque tableau son image au-dessus de son numéro et de son nom ; les vers dessous) */
.act-resti--images { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
.act-resti--images .act-tableaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(16px, 2vw, 26px); }
.act-tableaux .act-tab-c { display: flex; align-items: baseline; gap: 18px; }
.act-resti--images .act-tableaux li { flex-direction: column; align-items: stretch; gap: 12px; padding: 0 0 12px; }
.act-resti--images .act-tab-c { gap: 12px; }
.act-tab-ph { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: var(--carte); }
.act-tab-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* (quelques images seulement : la liste et les vers d'un côté, les images de l'autre, chacune son tableau ou sa légende) */
.act-resti--fig { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.act-resti-t .act-cit { margin-top: clamp(28px, 3.4vw, 44px); }
.act-figs { display: grid; gap: clamp(18px, 2.2vw, 28px); }
.act-fig { margin: 0; }
.act-fig img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: var(--carte); }
.act-fig figcaption { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; font: 500 1.1rem/1.25 var(--titre); }
.act-fig .n { color: var(--saison-texte); font: 700 .85rem/1 var(--etiq); letter-spacing: .1em; }
.act-resti--images .act-cit { max-width: 46rem; }
.act-cit { margin: 0; padding-left: clamp(18px, 2vw, 28px); border-left: 4px solid var(--c, var(--saison-texte)); }
.act-cit blockquote { margin: 0; font: italic 400 clamp(1.3rem, 1.05rem + 1vw, 2rem)/1.3 var(--titre); text-wrap: balance; }
.act-cit blockquote p { margin: 0; }
.act-cit figcaption { margin-top: 14px; color: var(--gris); font: 600 .8rem/1.4 var(--etiq); letter-spacing: .08em; text-transform: uppercase; }
.act-presse { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(26px, 3vw, 40px); }
.act-presse > li { max-width: 78ch; }
.act-presse-k { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 8px; color: var(--saison-texte); font: 700 .76rem/1.3 var(--etiq); letter-spacing: .14em; text-transform: uppercase; }
.act-presse-k > * + *::before { content: "·"; margin: 0 .7em; }
.act-presse-t { margin: 0 0 12px; font: 500 clamp(1.35rem, 1.1rem + .9vw, 1.9rem)/1.15 var(--titre); text-wrap: balance; }
.act-presse-t a { color: inherit; text-decoration: none; }
@media (hover: hover) { .act-presse-t a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; } }
.act-presse-x { margin: 0 0 16px; padding-left: 18px; border-left: 2px solid var(--filet); font-style: italic; }
.act-fin { padding-top: 0; }
@media (max-width: 980px) {
  .act-g, .act-resti { grid-template-columns: minmax(0, 1fr); }
  .ach-g { grid-template-columns: minmax(0, 1fr); }
  .ach-carte { position: static; order: -1; }
}
@media (max-width: 620px) {
  .ach, .act-etapes > li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .ep-diff { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .ep-diff-carte { order: 1; }
  .ep-diff-carte .carte { max-height: none; }
  .ep-act { grid-template-columns: minmax(0, 1fr); }
  .ep-act-ph { position: static; max-width: 560px; }
}
@media (max-width: 759px) {
  .ep-groupes { grid-template-columns: minmax(0, 1fr); }
  .ep-g + .ep-g > .ep-porte { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55); }
  .ep-porte { min-height: 200px; }
  .ep { min-height: 0; }
  .ep-tete-ph { width: 100%; opacity: .42; }
  .ep-tete-ph::after { background: linear-gradient(to top, var(--e), transparent); }
  .psom-in { gap: 0; min-height: 52px; }
  .psom-t { display: none; }
  .psom-l { --sm7-fondu: 28px; margin-inline: calc(-1 * var(--gout)); padding-inline: var(--gout); scroll-padding-inline: var(--gout); }
  html:has(main > .psom) { --onglets: 53px; }
  .ep-tete .ct-prg { padding: 18px 18px 16px; }
  .ep-cta-in { justify-content: center; }
}

/* ———— Chantier 1 : Alertes de tournée par proximité géographique ———— */
.alerte-boite { margin-top: 14px; padding: clamp(22px, 3.5vw, 36px); border-radius: 12px; background: var(--blanc); border: 1.5px solid var(--filet); border-left: 5px solid var(--magenta); box-shadow: 0 12px 32px -20px rgba(29, 20, 24, .3); }
.alerte-badge, .simu-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 700 .74rem/1 var(--etiq); letter-spacing: .12em; text-transform: uppercase; background: color-mix(in srgb, var(--magenta) 14%, transparent); color: var(--magenta-texte); margin-bottom: 12px; }
.alerte-desc { margin: 8px 0 20px; font-size: 1.05rem; color: var(--gris); max-width: 65ch; }
.alerte-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) auto; gap: 12px; align-items: center; }
.alerte-geo-grp { display: flex; gap: 6px; }
.alerte-geo-grp input { flex: 1; min-width: 130px; }
/* au téléphone, les champs l'un sous l'autre : côte à côte, ils sortaient de la boîte */
@media (max-width: 600px) { .alerte-champs { grid-template-columns: minmax(0, 1fr); } .alerte-geo-grp input { min-width: 0; } }
.btn-geo { white-space: nowrap; }
.alerte-champs select, .alerte-champs input[type="email"], .alerte-champs input[type="text"] { padding: 11px 14px; border: 1.5px solid var(--filet); border-radius: 6px; background: #fff; font: 400 1rem var(--sans); color: var(--encre); }
.alerte-champs select:focus, .alerte-champs input:focus { border-color: var(--encre); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 25%, transparent); }
.alerte-msg { margin-top: 14px; padding: 12px 16px; border-radius: 8px; font-weight: 500; }
.alerte-msg.ok { background: color-mix(in srgb, #1d6f47 12%, transparent); color: #1d6f47; border: 1px solid #1d6f47; }
.alerte-msg.err { background: color-mix(in srgb, #b3261e 12%, transparent); color: #b3261e; border: 1px solid #b3261e; }
.alerte-msg a { color: inherit; font-weight: 700; text-decoration: underline; overflow-wrap: anywhere; }
/* sous le formulaire : à quoi sert l'adresse (seulement à l'alerte) */
.alerte-usage { margin: 12px 0 0; font-size: .92rem; color: var(--gris); max-width: 65ch; }
/* la nuit : les champs de l'alerte et du simulateur sur le papier de la nuit (blancs, leur encre claire ne se lisait pas),
   et les réponses dans un vert et un rouge clairs (AA sur la nuit) */
html[data-theme="nuit"] :is(.alerte-champs select, .alerte-champs input[type="email"], .alerte-champs input[type="text"], .champ-simu input, .champ-simu select) { background: var(--blanc); }
html[data-theme="nuit"] .alerte-msg.ok { color: #7fd6a4; border-color: #7fd6a4; }
html[data-theme="nuit"] .alerte-msg.err { color: #ff9d94; border-color: #ff9d94; }

/* ———— Chantier 2 : Simulateur d'accueil & Devis flash ———— */
.simu-boite { margin-top: 10px; padding: clamp(24px, 4vw, 40px); border-radius: 12px; background: var(--blanc); border: 1.5px solid var(--filet); border-left: 5px solid var(--saison); }
.simu-desc { margin: 8px 0 24px; font-size: 1.05rem; color: var(--gris); max-width: 68ch; }
.simu-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 44px); align-items: start; }
@media (max-width: 860px) { .simu-grille { grid-template-columns: 1fr; } }
.champ-simu { margin-bottom: 14px; }
.champ-simu label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .92rem; }
.champ-simu input, .champ-simu select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--filet); border-radius: 6px; background: #fff; font: 400 1rem var(--sans); color: var(--encre); }
.simu-dim-grp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); gap: 10px; align-items: end; }
.simu-verdict { padding: 20px 22px; border-radius: 10px; background: var(--papier-2); border: 1.5px solid var(--filet); }
/* (les conditions d'accueil du spectacle choisi, celles de D ; au thème) */
.simu-verdict-titre { margin: 0 0 12px; font: 700 1.05rem/1.3 var(--sans); color: var(--saison-texte); }
.simu-faits { list-style: none; display: grid; gap: 6px; margin: 0 0 14px; padding: 0; font-size: .98rem; line-height: 1.45; }
.simu-faits li::first-letter { text-transform: uppercase; }
.simu-docs { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.simu-docs li { display: flex; align-items: center; gap: 10px; }
.simu-docs .fleche { flex: none; width: 18px; height: 18px; color: var(--saison-texte); }
.simu-docs a { color: var(--saison-texte); font-weight: 600; text-underline-offset: 3px; }
.simu-envoi { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.simu-devis-cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.simu-form-devis { margin-top: 24px; padding-top: 24px; border-top: 1px dashed var(--filet); }
.simu-form-devis .grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; }

/* l'erreur d'un champ, sous lui (verifier) : la couleur de l'erreur du site, un signe devant (pas la couleur seule) ; le champ
   bordé de même */
.champ-err { display: block; flex-basis: 100%; grid-column: 1 / -1; margin: 6px 0 0; color: #b3261e; font: 600 .88rem/1.4 var(--texte); }
.champ-err::before { content: "! " / ""; font-weight: 700; }
html[data-theme="nuit"] .champ-err { color: #ff9d94; }
:is(input, select, textarea)[aria-invalid="true"] { border-color: #b3261e; box-shadow: inset 0 0 0 1px #b3261e; }
.case:has(.champ-err), .calcul:has(.champ-err) { flex-wrap: wrap; }


/* ———— le pied de page ———— */
footer { background: var(--nuit); color: #d8cdd1; padding: 48px 0 44px; font-size: .92rem; }
.pied { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; }
footer strong { color: #fff; }
footer p { margin: 0 0 10px; }
footer a { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); }
@media (hover: hover) { footer a:hover { color: var(--saison-vive); } }
footer :focus-visible { outline-color: var(--saison-vive); }
.liens { display: flex; flex-wrap: wrap; gap: 4px 18px; }
/* le plan du site, en tête du pied : une ligne de rubriques (les éléments du menu, le contact), séparée du reste par un filet ;
   au téléphone, en deux colonnes */
.pied-nav { grid-column: 1 / -1; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.pied-nav ul { display: flex; flex-wrap: wrap; gap: 4px clamp(18px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.pied-nav a { display: inline-flex; align-items: center; min-height: 44px; font: 600 .8rem/1.3 var(--etiq); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
@media (hover: hover) { .pied-nav a:hover { text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 640px) { .pied-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } }
/* au téléphone, avec la barre d'onglets du bas : le plan du site ne répète pas ses quatre rubriques (elles sont à portée du
   pouce, juste dessous) ; il garde ce qu'elle n'a pas, le contact. Le pied se resserre : moins de marges, ses blocs plus
   proches ; le corps de la page s'arrête au-dessus de la barre (padding-bottom : --tab), rien n'est caché dessous */
body:has(#entrees.en-bas) .pied-nav .pied-menu { display: none; }
@media (max-width: 759px) {
  footer { padding: 30px 0 22px; }
  body:has(#entrees.en-bas) .pied-nav { padding-bottom: 6px; }
  body:has(#entrees.en-bas) .pied-nav ul { display: flex; }
  .pied { gap: 18px; }
  footer .liens { gap: 0 20px; }
}
/* la page introuvable : sa phrase, puis d'où repartir (l'accueil, le menu, le contact), une large cible chacun */
.nf { min-height: 32vh; }
.nf-x { max-width: 40rem; margin: 0 0 24px; font-size: 1.12rem; }
.nf-liens { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nf-t { margin: 0 0 12px; font: 600 .8rem/1.3 var(--etiq); letter-spacing: .08em; text-transform: uppercase; color: var(--encre); }
.nf-proches { margin-bottom: 28px; }
.nf-proches i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--saison-vive)); }
.nf-liens :is(a, button) { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px; border: 1.5px solid color-mix(in srgb, var(--encre) 30%, transparent); border-radius: 999px; color: var(--encre); font: 600 .95rem/1.2 var(--sans); text-decoration: none; }
.nf-liens button { background: none; cursor: pointer; }
@media (hover: hover) { .nf-liens :is(a, button):hover { border-color: var(--saison-vive); } }
.nf-liens .fleche { width: 16px; height: 16px; color: var(--saison-vive); }
.nf-liens button svg { width: 16px; height: 16px; fill: none; stroke: var(--saison-vive); stroke-width: 2; stroke-linecap: round; }
.petit { font-size: .82rem; color: #b9adb2; }
/* « Modifier le site » : discret, au pied de chaque vue */
.modifier { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; border: 0; background: none; color: #fff; font: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; cursor: pointer; }
.modifier svg { width: 15px; height: 15px; fill: none; stroke: var(--saison-vive); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .modifier:hover { color: var(--saison-vive); } }
/* les textes de bloc de D qui portent leur balise (titre, liste) : une enveloppe pour l'édition, sans effet sur la page */
.legal .bl > h2:first-child { margin-top: 1.6em; }
.legal > .bl:first-child > h2 { margin-top: 0; }
/* l'édition sur place, à la manière de la synthèse : le papier, l'encre, la tentacule magenta sous les titres
   (préfixe html : l'outil ajoute ses styles à la fin de <head> en entrant en édition) */
html .ed-barre { background: color-mix(in srgb, var(--papier) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 18px 40px -18px rgba(29, 20, 24, .45); }
html .ed-barre .ed-etat { font: 500 1.2rem/1 var(--titre); }
.ed-panneau .ed-tete, .ed-panneau .ed-pied { background: var(--papier); }
.ed-panneau .ed-tete h2 { font: 500 1.55rem/1.1 var(--titre); }
.ed-panneau .ed-tete h2::after { content: ""; display: block; width: 66px; height: 12px; margin-top: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cpath d='M2 12 C 22 4, 38 4, 54 11 S 86 19, 100 10 C 108 5, 116 7, 115 13 C 114 17, 108 17, 107 13' fill='none' stroke='%23bc3e80' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain; }
.ed-panneau .ed-champ > span:first-child { font: 600 .74rem/1.3 var(--etiq); letter-spacing: .09em; text-transform: uppercase; color: var(--magenta-texte); }
html .ed-bt.ed-plein { background: var(--encre); border-color: var(--encre); color: var(--papier); }
@media (hover: hover) { html .ed-bt.ed-plein:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; } }
html .ed-annonce { background: var(--encre); border-left: 3px solid var(--magenta); }
.ed-bt.ed-plein.ed-ajout { display: flex; width: fit-content; margin: 10px 0 12px; background: transparent; border: 1.5px dashed var(--magenta); color: var(--magenta-texte); }
@media (hover: hover) { .ed-bt.ed-plein.ed-ajout:hover { background: color-mix(in srgb, var(--magenta) 10%, transparent); color: var(--encre); } }

/* ———————————— les univers des spectacles ————————————
   Chaque univers pose ses couleurs (fond, texte, accent, lueur), sa police de titre et son motif ; --u-vif est la
   couleur d'accent qui se lit en petit texte sur fond et fond2 (calculée pour rester AA). */
.u {
  --u-fond: #1a1016; --u-fond2: #24161f; --u-texte: #f7ecf1; --u-texte2: #c9b7c1; --u-accent: #bc3e80; --u-accent2: #f07ab6;
  --u-scene: #f07ab6; --u-lueur: rgba(188, 62, 128, .3); --u-vif: #f07ab6; --u-sur-accent: #fff;
  --u-titre-f: var(--titre); --u-titre-g: 500; --u-corps: var(--texte); --u-etiq: var(--etiq);
  --u-filet: color-mix(in srgb, var(--u-texte) 15%, transparent);
  --bg2: var(--u-fond2); --fg: var(--u-texte); --fg2: var(--u-texte2); --ac: var(--u-accent); --ac2: var(--u-accent2);
  background: var(--u-fond); color: var(--u-texte);
}
.u :focus-visible { outline-color: var(--u-vif); }
.mo { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* les fiches des spectacles, ailleurs que sur leur page : couleurs, police de titre, motif */
.fus { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 26px); }
.fus.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fus.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fu { position: relative; overflow: hidden; border-radius: 8px; font-family: var(--u-corps); box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 16px 32px -24px rgba(0, 0, 0, .55); transition: box-shadow var(--k-survol) var(--k-doux), scale .12s var(--k-doux); }
@media (hover: hover) { .fu:hover { box-shadow: 0 26px 46px -24px rgba(0, 0, 0, .62); } }
.fu-a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.fu-a:focus-visible { outline: 3px solid var(--u-vif); outline-offset: -3px; }
.fu-ph { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.fu-ph img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--k-page) var(--k-doux); }
.fu-ph::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(transparent, var(--u-fond)); }
@media (hover: hover) { .fu:hover .fu-ph img { scale: 1.03; } }
.fu-badge { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 3px 10px; border-radius: 999px; background: var(--u-accent); color: var(--u-sur-accent); font: 600 .68rem/1.4 var(--u-etiq); letter-spacing: .1em; text-transform: uppercase; }
.fu-c { position: relative; display: block; flex: 1; padding: 4px 18px 20px; }
.fu-c::before { content: ""; position: absolute; inset: -60% -20% auto; height: 140%; background: radial-gradient(closest-side, var(--u-lueur), transparent); opacity: 0; transition: opacity var(--k-survol) var(--k-doux); pointer-events: none; }
@media (hover: hover) { .fu:hover .fu-c::before { opacity: 1; } }
.fu .mo { position: absolute; right: 16px; top: -6px; width: 32px; height: 32px; color: var(--u-vif); }
.fu-t { position: relative; margin: 0 40px 0 0; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: 1.62rem; line-height: 1.05; color: var(--u-texte); }
.fu-st, .fu-cr, .fu-lt, .fu-acc, .fu-date { position: relative; display: block; }
.fu-st { margin-top: 8px; font-size: .93rem; color: var(--u-texte2); }
.fu-cr { margin-top: 4px; font: 600 .72rem/1.4 var(--u-etiq); letter-spacing: .12em; text-transform: uppercase; color: var(--u-vif); }
.fu-lt { margin-top: 14px; font: 600 .74rem/1.4 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--u-vif); }
.fu-acc { margin-top: 8px; font-size: 1.02rem; line-height: 1.5; color: var(--u-texte); }
.fu-lt + .fu-acc { margin-top: 4px; }
.fu-date { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--u-filet); font: 600 .9rem/1.4 var(--sans); }
.fus.large .fu-a { flex-direction: row; }
.fus.large .fu-ph { flex: 0 0 42%; aspect-ratio: auto; min-height: 260px; }
.fus.large .fu-ph::after { inset: 0 0 0 auto; width: 46%; height: auto; background: linear-gradient(90deg, transparent, var(--u-fond)); }
.fus.large .fu-c { padding: 24px 22px 24px 6px; }
.fus.large .fu .mo { top: 18px; }
.fus.large .fu-t { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); }

/* ———— la page des spectacles (#/spectacles) : le sommaire de la 08 ————
   À gauche, la table des matières sur le papier de la nuit : une ligne par spectacle, sa vignette, son titre dans la police
   de son univers, un filet de conduite jusqu'à son année (le folio), son sous-titre et son état (« En création » ; « en
   tournée », qui respire) à la couleur du spectacle ; la ligne survolée, choisie au clavier ou montrée prend cette couleur
   et le filet souligne son titre. À droite, épinglé, l'aperçu qui la suit, dans l'univers du spectacle (ses couleurs, sa
   lueur, son motif, sa police de titre) : sa photo et la carte de ses tournées, son lieu et son temps, sa création, son
   action culturelle, son accroche, sa prochaine date (ou son annonce) et le lien vers sa page. Jusqu'à 899 px, la pile
   d'affiches (plus bas, .pil-*) : les huit tranches dans l'écran, l'affiche dépliée d'une touche. */
.tdm { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); min-height: calc(100svh - var(--haut)); }
.tdm-g { min-width: 0; padding: 0 var(--gout) clamp(40px, 6vw, 72px); }
.tdm-g .page-titre { padding-bottom: clamp(20px, 2.6vw, 32px); }
/* le titre courant du sommaire : la compagnie et la saison, sous un double filet qui se trace */
.tdm-mast { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 16px; margin: 0 0 6px; padding: 14px 0 8px;
  border-bottom: 1px solid var(--filet); font: 700 .74rem/1.3 var(--etiq); letter-spacing: .14em; text-transform: uppercase; }
.tdm-filets { position: absolute; left: 0; right: 0; top: 0; height: 7px; border-top: 3px solid var(--encre); border-bottom: 1px solid var(--encre); transform-origin: 0 50%; pointer-events: none; }
.tdm-filets[data-mv="trace"].mv-attente { transition: transform var(--k-lent) var(--k-doux); }
.tdm-mast a { display: inline-flex; align-items: center; min-height: 40px; margin: -6px 0; color: var(--saison-texte); text-decoration: none; }
@media (hover: hover) { .tdm-mast a:hover { text-decoration: underline; text-underline-offset: .3em; } }
.tdm-l { list-style: none; margin: 0; padding: 0; }
.tdm-a { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-areas: "v ligne" ". dek"; align-items: center; column-gap: 16px; row-gap: 3px;
  margin: 0 -12px; padding: 12px 12px 13px; border-bottom: 1px solid var(--filet); color: var(--encre); text-decoration: none; transition: background-color var(--k-survol) var(--k-doux), box-shadow var(--k-survol) var(--k-doux); }
.tdm-v { grid-area: v; display: block; width: 54px; height: 40px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--encre) 22%, transparent); border-radius: 2px; background: var(--papier-2); }
.tdm-v img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--k-page) var(--k-doux); }
.tdm-ligne { grid-area: ligne; display: flex; align-items: last baseline; gap: 14px; min-width: 0; }
.tdm-t { flex: 0 1 auto; min-width: 0; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: calc(clamp(1.7rem, .9rem + 1.6vw, 2.5rem) * var(--tk, 1)); line-height: 1.06;
  text-wrap: balance; overflow-wrap: anywhere; transition: color var(--k-survol) var(--k-doux); }
.tdm-t .tt { background: linear-gradient(var(--c), var(--c)) 0 100% / 0 2px no-repeat; transition: background-size var(--k-survol) var(--k-doux); }
.tdm-fil { flex: 1 1 auto; min-width: 24px; height: 1px; background: color-mix(in srgb, var(--encre) 30%, transparent); transform: translateY(-.4rem); transition: background-color var(--k-survol) var(--k-doux); }
.tdm-an { flex: none; font: 600 .86rem/1 var(--texte); font-variant-numeric: tabular-nums; color: var(--gris); }
.tdm-dek { grid-area: dek; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 18px; min-width: 0; font-size: .9rem; line-height: 1.45; color: var(--gris); }
.tdm-tag { margin-left: auto; font: 700 .68rem/1.4 var(--etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--c); white-space: nowrap; }
.tdm-tag.vit::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: currentColor; vertical-align: .12em; animation: respire 2.2s ease-in-out infinite; }
/* (Bérénice, l'arène : ses titres en capitales, comme sur sa page) */
.tdm-i[data-motif="arene"] .tdm-t, .u-arene .tdm-pt { text-transform: uppercase; }
.tdm-a:is(:focus-visible, .est-actif) { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 11%, transparent), transparent 88%); box-shadow: inset 3px 0 0 var(--c); }
@media (hover: hover) { .tdm-a:is(:hover) { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 11%, transparent), transparent 88%); box-shadow: inset 3px 0 0 var(--c); } }
.tdm-a:is(:focus-visible, .est-actif) .tdm-t { color: var(--c); }
@media (hover: hover) { .tdm-a:is(:hover) .tdm-t { color: var(--c); } }
.tdm-a:is(:focus-visible, .est-actif) .tt { background-size: 100% 2px; }
@media (hover: hover) { .tdm-a:is(:hover) .tt { background-size: 100% 2px; } }
.tdm-a:is(.est-actif) .tdm-v img { scale: 1.06; }
@media (hover: hover) { .tdm-a:is(:hover) .tdm-v img { scale: 1.06; } }
.tdm-a.est-actif .tdm-fil { background: var(--c); }
.tdm-a:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }
.tdm-a.mv-presse .tt { background-size: 100% 4px; transition-duration: .06s; }
/* l'aperçu : un calque par spectacle, celui qu'on montre au-dessus des autres (qui dorment : rien à mettre en page) */
.tdm-pv { min-width: 0; border-left: 1px solid var(--filet); }
.tdm-pv-in { position: sticky; top: var(--haut); display: grid; height: calc(100svh - var(--haut)); min-height: 540px; }
.tdm-c { grid-area: 1 / 1; position: relative; overflow: hidden auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0;
  padding: clamp(24px, 2.8vw, 38px) var(--gout) clamp(20px, 2.4vw, 30px); font-family: var(--u-corps);
  background: linear-gradient(var(--u-vif), var(--u-vif)) 0 0 / 100% 3px no-repeat, radial-gradient(90% 70% at 85% 8%, var(--u-lueur), transparent 70%), var(--u-fond);
  opacity: 0; visibility: hidden; transition: opacity var(--k-survol) var(--k-doux), visibility 0s linear var(--k-survol); }
.tdm-c.est-actif { z-index: 1; opacity: 1; visibility: visible; transition: opacity var(--k-survol) var(--k-doux), visibility 0s; }
.tdm-c.dort { content-visibility: hidden; }
.still .tdm-c { transition: none; }
/* (les bras de sa carte à sa couleur vive : elle se lit sur son fond, de nuit aussi) */
.tdm-c.u { --u-carte: var(--u-vif); }
/* la photo principale (un panoramique, le plus souvent) en bande ; elle cède de la hauteur quand l'écran en manque */
.tdm-fig { position: relative; flex: 0 1 auto; aspect-ratio: 2 / 1; min-height: 130px; margin: 0; }
.tdm-fig img { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 22px); object-fit: cover; border-radius: 4px; background: var(--u-fond2); box-shadow: 0 18px 38px -20px rgba(0, 0, 0, .75); }
.tdm-fig figcaption { position: absolute; right: 0; bottom: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .78rem; line-height: 18px; color: var(--u-texte2); }
.tdm-corps { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 clamp(18px, 2.4vw, 32px); align-items: start; }
.tdm-corps.solo { grid-template-columns: minmax(0, 1fr); }
.tdm-txt { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tdm-carte { margin: 0; padding-top: 8px; border-top: 1px solid var(--u-filet); }
.tdm-carte .carte { max-height: 340px; }
.tdm-k { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 .74rem/1.5 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--u-vif); }
.tdm-k .mo { flex: none; width: 22px; height: 22px; }
/* (le point qui sépare les mentions : celui qui ouvrirait une ligne est rogné, à gauche) */
.tdm-kl { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.tdm-kk { display: flex; flex-wrap: wrap; row-gap: 2px; margin-left: -1.6em; }
.tdm-kk > span::before { content: "·"; display: inline-block; width: 1.6em; text-align: center; color: var(--u-texte2); }
.tdm-pt { margin: 0; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: calc(clamp(1.8rem, 1rem + 1.6vw, 2.8rem) * var(--tk, 1)); line-height: 1.04; color: var(--u-vif); text-wrap: balance; }
.tdm-acc { margin: 0; max-width: 60ch; font-size: clamp(1rem, .82rem + .4vw, 1.22rem); line-height: 1.5; color: var(--u-texte); text-wrap: pretty; }
.tdm-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--u-filet); }
.tdm-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; margin: 0; color: var(--u-texte); }
.tdm-date .k { font: 600 .7rem/1.4 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--u-texte2); }
.tdm-d { font-weight: 600; }
.tdm-pied .bu { flex: none; margin-left: auto; }
.tdm .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 899px) {
  .tdm { display: block; min-height: 0; }
  .tdm-pv { display: none; }
}

/* ———— la page des spectacles au téléphone (jusqu'à 899 px) : la pile d'affiches ————
   Les huit spectacles tiennent dans l'écran, une tranche d'affiche chacun : sa photo cadrée sur sa zone d'intérêt (CADRAGE)
   sous un voile de son univers, son titre dans sa police, son année, son état (« En création » ; « en tournée », qui respire)
   et sa prochaine date. On touche une tranche : l'affiche se déplie (la photo s'ouvre, le voile tourne, puis la fiche arrive
   en cascade : son sous-titre, son lieu et son temps, sa création, son action culturelle, son accroche, sa prochaine date, la
   carte de sa tournée dont les bras poussent depuis Rouen) et « découvrir » se pose sur la photo ; l'affiche dépliée est tout
   entière le lien vers sa page : une touche de plus, n'importe où, y mène. Une seule dépliée à la fois : toucher une autre
   tranche replie la première. La hauteur se déplie en CSS (grid-template-rows, la hauteur de la tranche) : rien n'est
   mesuré. Au bureau, le sommaire et son aperçu restent tels quels. Choisie parmi trois propositions
   (docs/spectacles-mobile.html). */
.tdm-g .pil-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0 10px; }
.pil-tete h1 { font-size: 1.55rem; }
/* trier les spectacles : les puces des filtres des saisons (tous, en tournée, en création, leur nombre), le nombre gardé au bout ;
   au téléphone, sur une ligne */
.tdm-tri { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 8px 0 14px; }
.tdm-tri-p { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tdm-tri .s7-chip small { font: 700 .74rem/1 var(--texte); font-variant-numeric: tabular-nums; color: var(--gris); }
.tdm-n { margin: 0; font: 500 1rem/1.2 var(--titre); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 899px) {
  /* (au téléphone, la pile garde sa place : les trois puces sur une ligne, le nombre gardé est celui de la puce choisie ; il
     reste dit aux lecteurs d'écran) */
  .tdm-tri { margin: 0 0 12px; }
  .tdm-tri-p { gap: 6px; }
  .tdm-tri .s7-chip { padding: .38rem .7rem; }
  .tdm-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.tdm-i[hidden], .pil-aff[hidden] { display: none; }
.pil-sai { font: 700 .66rem/1.3 var(--etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--saison-texte); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { a.pil-sai:hover { text-decoration: underline; text-underline-offset: .3em; } }
.pil { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 0 -6px; padding: 0 0 22px; }
.pil-aff { position: relative; border-radius: 10px; overflow: hidden; background: var(--u-fond); color: var(--u-texte); font-family: var(--u-corps); box-shadow: 0 12px 26px -20px #000; }
/* l'affiche dépliée mène à sa page : « découvrir » posé sur la photo (le lien, pour le clavier et les lecteurs d'écran), et
   toute la fiche répond au doigt */
.pil-aller { position: absolute; z-index: 1; right: 12px; top: 12px; min-height: 40px; padding: 8px 14px; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; }
.pil-aff.ouvert .pil-aller { opacity: 1; visibility: visible; transition: opacity .35s .3s, visibility 0s .3s; }
.pil-aff.ouvert .pil-in { cursor: pointer; }
.pil-h { margin: 0; }
.pil-dos { position: relative; display: block; width: 100%; height: 72px; padding: 0; border: 0; background: var(--u-fond); color: var(--u-texte); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: height .45s var(--mv-courbe); }
.pil-dos:focus-visible { outline: 2px solid var(--u-vif); outline-offset: -3px; }
.pil-aff.ouvert .pil-dos { height: 214px; }
.pil-ph { position: absolute; inset: 0; display: block; }
.pil-ph img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--mv-courbe); }
@media (hover: hover) { .pil-dos:hover .pil-ph img { scale: 1.03; } }
.pil-voile, .pil-voile2 { position: absolute; inset: 0; transition: opacity .45s; }
.pil-voile { background: linear-gradient(90deg, color-mix(in srgb, var(--u-fond) 94%, transparent) 36%, color-mix(in srgb, var(--u-fond) 55%, transparent) 72%, color-mix(in srgb, var(--u-fond) 30%, transparent)); }
.pil-voile2 { background: linear-gradient(180deg, transparent 28%, color-mix(in srgb, var(--u-fond) 80%, transparent) 72%, var(--u-fond)); opacity: 0; }
.pil-aff.ouvert .pil-voile { opacity: 0; }
.pil-aff.ouvert .pil-voile2 { opacity: 1; }
.pil-txt { position: absolute; left: 14px; right: 14px; bottom: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: last baseline; text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 14px rgba(0, 0, 0, .5); }
.pil-t { min-width: 0; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: calc(1.45rem * var(--tk, 1)); line-height: 1.02; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: font-size .45s var(--mv-courbe); }
.pil-aff.ouvert .pil-t { white-space: normal; font-size: calc(2.1rem * var(--tk, 1)); text-wrap: balance; }
.u-arene .pil-t { text-transform: uppercase; }
.pil-an { font: 600 .8rem/1 var(--texte); font-variant-numeric: tabular-nums; }
.pil-sous { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; min-width: 0; margin-top: 3px; font-size: .82rem; line-height: 1.4; }
.pil-etat { flex: none; font: 700 .66rem/1.4 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--u-vif); white-space: nowrap; }
.pil-etat.vit::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: currentColor; vertical-align: .12em; animation: respire 2.4s ease-in-out infinite; }
.pil-pro { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pil-aff.ouvert .pil-pro { display: none; }
.pil-corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--mv-courbe); }
.pil-aff.ouvert .pil-corps { grid-template-rows: 1fr; }
.pil-in { min-height: 0; overflow: hidden; }
.pil-fiche { display: flex; flex-direction: column; gap: 13px; padding: 14px 16px 18px; }
.pil-st { margin: -4px 0 0; font-size: .95rem; color: var(--u-texte2); }
.pil-fiche .tdm-k { font-size: .72rem; }
.pil-acc { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--u-texte); text-wrap: pretty; }
.pil-date { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--u-texte); }
.pil-date .k { font: 700 .68rem/1.4 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--u-texte2); }
.pil-date .tdm-d { font-weight: 600; }
.pil-fiche .tdm-carte { padding-top: 10px; }
.still :is(.pil-dos, .pil-t, .pil-voile, .pil-voile2, .pil-corps, .pil-ph img, .pil-aller) { transition: none; }
.still .pil-etat.vit::before { animation: none; }
@media (prefers-reduced-motion: reduce) { :is(.pil-dos, .pil-t, .pil-voile, .pil-voile2, .pil-corps, .pil-ph img, .pil-aller) { transition: none; } .pil-etat.vit::before { animation: none; } }

/* la fiche « programmer » (la 05) : le catalogue de #/espace-pro/programmer. La photo à gauche, dans l'univers du spectacle ;
   à droite sa création, son titre dans sa police, le nombre de ses représentations en grand, ses faits en pièces, sa fiche,
   sa diffusion saison par saison, ses lieux (repliés), ses documents ; puis son dossier PDF et sa page */
.fp { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); overflow: hidden; border-radius: 4px; font-family: var(--u-corps); }
.fp-ph { position: relative; display: block; min-height: 360px; overflow: hidden; background: var(--u-scene); }
.fp-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale var(--k-page) var(--k-doux); }
@media (hover: hover) { .fp:hover .fp-ph img { scale: 1.03; } }
.fp-c { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; padding: clamp(22px, 3vw, 44px); }
.fp-c > :is(.fp-fiche, .prog-frise, .fp-lieux, .fp-docs) { align-self: stretch; }
.fp-sur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font: 700 .76rem/1.4 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--u-vif); }
.fp-sur .mo { width: 26px; height: 26px; }
.fp-sur .pt, .u-sur .pt { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.fp-t { margin: 0; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(1.9rem, 1.2rem + 1.8vw, 3.2rem); line-height: 1; text-wrap: balance; }
.fp-t a { color: var(--u-vif); text-decoration: none; }
@media (hover: hover) { .fp-t a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } }
.fp-sous { margin: 0; font-size: 1.08rem; color: var(--u-texte2); }
.fp-rep { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.gros { font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: 1.9em; line-height: 1; color: var(--u-vif); }
.fp-rep .gros { margin-right: .16em; font: 700 clamp(2.5rem, 1.9rem + 2vw, 4rem)/.9 var(--titre); letter-spacing: -.02em; vertical-align: -.08em; }
.fp-faits { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fp-faits li { padding: 6px 12px; border: 1.5px solid var(--u-filet); border-radius: 12px; font-size: .88rem; font-weight: 700; line-height: 1.35; }
.fp-faits .k { margin-right: 6px; color: var(--u-vif); font: 700 .72rem/1.35 var(--u-etiq); letter-spacing: .12em; text-transform: uppercase; }
.fp-act { margin: 0; padding: 8px 14px; border-left: 4px solid var(--u-vif); font-weight: 700; }
.fp-equipe { margin: 0; padding: 0; list-style: none; font-size: .95rem; line-height: 1.5; }
.fp-fiche { display: grid; gap: 4px; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--u-filet); list-style: none; font-size: .93rem; line-height: 1.45; }
.fp-fiche .f-k { font-weight: 700; }
.fp-c > .prog-frise { margin-top: 0; }
.fp-lieux { border-top: 1px solid var(--u-filet); border-bottom: 1px solid var(--u-filet); }
.fp-lieux summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; font: 700 .78rem/1.4 var(--u-etiq); letter-spacing: .1em; text-transform: uppercase; }
.fp-lieux summary::-webkit-details-marker { display: none; }
.fp-lieux summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--k-page) var(--k-souple); }
.fp-lieux[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fp-lieux p { margin: 0; padding: 0 0 16px; font-size: .93rem; line-height: 1.6; color: var(--u-texte2); }
.u-lieux-d summary { cursor: pointer; font: 600 .76rem/1.4 var(--u-etiq); letter-spacing: .13em; text-transform: uppercase; color: var(--u-vif); }
.fp-docs { padding-top: 12px; border-top: 1px solid var(--u-filet); }
.fp-docs .k { margin: 0 0 8px; color: var(--u-vif); font: 700 .76rem/1.4 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; }
.fp-liens, .ac-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 6px 0 0; }

/* la fiche « établissement » (la 05) : le titre dans la police du spectacle et son motif, sa photo, le type d'action culturelle
   en grande capitale entre deux filets (bien visible : la demande 3), son public, son texte, sa formule, ses dispositifs */
.ac { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(22px, 2.4vw, 34px); border-radius: 4px; font-family: var(--u-corps); }
.ac-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; }
.ac-tete .mo { flex: none; width: 40px; height: 40px; color: var(--u-vif); }
.ac-t { margin: 0; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); line-height: 1.04; text-wrap: balance; }
.ac-t a { color: var(--u-vif); text-decoration: none; }
@media (hover: hover) { .ac-t a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } }
.ac-ph { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--u-scene); }
.ac-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale var(--k-page) var(--k-doux); }
@media (hover: hover) { .ac:hover .ac-ph img { scale: 1.03; } }
.ac-type { width: 100%; margin: 0; padding: 12px 0 10px; border-top: 3px solid var(--u-vif); border-bottom: 1px solid var(--u-filet); color: var(--u-texte); font: 700 clamp(1.25rem, 1rem + .8vw, 1.6rem)/1.08 var(--titre); text-transform: uppercase; text-wrap: balance; }
.ac-type.x { border-top-style: dashed; color: var(--u-texte2); }
.ac-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .95rem; font-weight: 700; }
.ac-meta .k { color: var(--u-vif); font: 700 .72rem/1.4 var(--u-etiq); letter-spacing: .12em; text-transform: uppercase; }
.ac-meta .tag { margin: 0; color: var(--u-vif); }
.ac-txt { font-size: .97rem; line-height: 1.6; }
.ac-txt p { margin: 0 0 10px; }
.ac-txt > :last-child, .ac-txt p:last-child { margin-bottom: 0; }
.ac-formule { display: grid; gap: 4px; margin: 0; padding: 12px 16px; border: 2px solid var(--u-vif); border-radius: 12px; list-style: none; font-size: .93rem; font-weight: 700; }
.ac-disp { font-size: .9rem; line-height: 1.5; }
.ac-disp .k { margin: 0 0 4px; color: var(--u-vif); font: 700 .72rem/1.4 var(--u-etiq); letter-spacing: .12em; text-transform: uppercase; }
.ac-disp ul { margin: 0; padding-left: 1.1em; }
.ac-disp a, .ac-txt a { color: var(--u-vif); }
.ac-liens { margin-top: auto; padding-top: 6px; }
.u-ac-puces li { padding: 4px 12px; border: 1.5px solid var(--u-filet); border-radius: 999px; font: 600 .74rem/1.4 var(--u-etiq); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 980px) {
  .fp { grid-template-columns: minmax(0, 1fr); }
  .fp-ph { min-height: 0; aspect-ratio: 16 / 9; }
}
.dos-appel { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 10px; text-decoration: none; box-shadow: 0 24px 50px -30px rgba(99, 23, 5, .6); }
.dos-appel-ph { position: relative; min-height: 280px; }
.dos-appel-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dos-appel-c { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: clamp(24px, 4vw, 48px); background: var(--u-accent); color: #fff; }
.dos-appel .bu.plein { --bt-a: #fff; --bt-sur: var(--u-accent); --bt-vif: #fff; margin-top: 14px; }

/* ———— la page d'un spectacle : l'ouverture ———— */
article.u { font-family: var(--u-corps); overflow-x: clip; }
.u-sur { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 20px; font: 600 .76rem/1.4 var(--u-etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--u-vif); }
.u-titre { margin: 0; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(2.7rem, 1.2rem + 5.2vw, 6.3rem); line-height: .98; letter-spacing: -.005em; color: var(--u-texte); }
.u-titre.long { font-size: clamp(2.3rem, 1rem + 4vw, 4.7rem); }
.u-titre .ligne { display: block; }
.u-signe { margin: 26px 0 0; font: 600 .76rem/1.4 var(--u-etiq); letter-spacing: .2em; text-transform: uppercase; color: var(--u-texte2); }
.u-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.u-fig figcaption { position: relative; z-index: 1; width: fit-content; max-width: min(520px, calc(100% - 28px)); margin: -34px 0 0 clamp(14px, 3vw, 28px); padding: 11px 16px 12px; background: var(--u-fond2); color: var(--u-texte); font-size: .92rem; line-height: 1.45; border-left: 3px solid var(--u-vif); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .55); }
/* le titre fleurit ligne à ligne sous l'encre qui s'ouvre (il se dépose : opacité, montée ; rien de mécanique, aucun flou),
   l'accroche à sa suite ; plus bas, une phrase ou une photo fleurit quand elle arrive à l'écran (.ecrit, .apparait) */
html:not(.still):not(.sur-place) .sp-une:not(.deja) .u-titre .ligne { animation: k-fleurit .34s var(--k-doux) calc(var(--k, 0) * 40ms + 40ms) both; }
html:not(.still):not(.sur-place) .sp-une:not(.deja) .une-acc { animation: k-fleurit .34s var(--k-doux) .1s both; }
html:not(.still):not(.sur-place) :is(.ecrit, .apparait):not(.vu) { opacity: 0; transform: translateY(var(--k-monte)); }
html:not(.still):not(.sur-place) :is(.ecrit, .apparait).vu { transition: opacity var(--k-page) var(--k-doux), transform var(--k-page) var(--k-doux); }

/* la barre des trois entrées du spectacle (la 07), le sous-menu du spectacle : une ventouse à la couleur de chacune, la
   courante pleine et soulignée d'un trait à sa couleur (il glisse d'une entrée à l'autre, souple) ; on descend, elle s'arrime
   juste sous le menu flottant, au téléphone aussi (le titre du spectacle y paraît au bureau, la lecture avance sur son bord) ;
   arrimée, elle prend le haut de l'écran derrière le menu (.colle) : rien ne défile entre les deux. Un fond plein, sans flou
   (un flou se recalcule à chaque image du défilement) */
.u-onglets { position: sticky; top: calc(var(--haut) - 8px); z-index: 25; background: var(--u-fond); border-top: 1px solid var(--u-filet); border-bottom: 1px solid var(--u-filet); }
.u-onglets::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: calc(var(--haut) - 8px); background: inherit; opacity: 0; transition: opacity var(--k-survol) var(--k-doux); pointer-events: none; }
.u-onglets.colle::before { opacity: 1; }
.u-onglets-in { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 44px); min-height: 56px; overflow-x: auto; scrollbar-width: none; }
.u-onglets-in::-webkit-scrollbar { display: none; }
/* (arrimée, la rangée montre le titre du spectacle devant ses entrées : le titre cède la place, coupé d'une ellipse, jamais les
   entrées, qui restent entières ; un long titre, Mon Royaume pour un cheval, poussait « Établissement scolaire » hors de la
   rangée de 760 à 1280 px) */
.u-onglets .ut { flex: 0 1 auto; min-width: 0; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: 1.12rem; color: var(--u-texte); transition: max-width var(--k-page) var(--k-doux), opacity var(--k-survol) var(--k-doux); }
.u-onglets.colle .ut { max-width: 360px; opacity: 1; }
.u-onglets a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 0; color: var(--u-texte2); font: 600 .97rem/1.2 var(--sans); text-decoration: none; white-space: nowrap; }
.u-onglets a .pt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, var(--e) 0 1.8px, transparent 2.3px); box-shadow: inset 0 0 0 1.5px var(--e);
  transition: scale var(--k-survol) var(--k-souple); }
.u-onglets a::after { content: ""; position: absolute; left: 20px; right: 0; bottom: 4px; height: 2px; border-radius: 1px; background: var(--e); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--k-survol) var(--k-souple); }
.u-onglets a[aria-current="page"] { color: var(--u-texte); }
@media (hover: hover) { .u-onglets a:hover { color: var(--u-texte); } }
.u-onglets a:is(:focus-visible) .pt { scale: 1.3; }
@media (hover: hover) { .u-onglets a:is(:hover) .pt { scale: 1.3; } }
.u-onglets a[aria-current="page"] .pt { background: radial-gradient(circle, var(--e) 0 2.4px, var(--u-fond) 2.9px 3.3px, var(--e) 3.8px); box-shadow: none; }
.u-onglets a[aria-current="page"]::after { transform: none; }
.u-onglets .court { display: none; }
@media (max-width: 1199px) { .u-onglets .long { display: none; } .u-onglets .court { display: inline; } }
.u-progres { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--u-vif); transform-origin: 0 50%; transform: scaleX(0); }
.som { position: fixed; right: 16px; bottom: 16px; z-index: 35; }
.som-b { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 13px; border: 1px solid var(--u-filet); border-radius: 999px; background: var(--u-fond2); color: var(--u-texte); font: 600 .84rem/1.2 var(--sans); cursor: pointer; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .55); }
.som-b .n { font-variant-numeric: tabular-nums; color: var(--u-vif); }
.som-b .fleche { width: 16px; height: 16px; transition: transform var(--k-page) var(--k-souple); }
.som-b[aria-expanded="true"] .fleche { transform: rotate(180deg); }
.som-l { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 250px; margin: 0; padding: 8px; list-style: none; border: 1px solid var(--u-filet); border-radius: 12px; background: var(--u-fond2); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55); }
.som-l button { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--u-texte2); font: 500 .92rem/1.3 var(--sans); text-align: left; cursor: pointer; }
@media (hover: hover) { .som-l button:hover { background: color-mix(in srgb, var(--u-texte) 8%, transparent); color: var(--u-texte); } }
.som-l button[aria-current="location"] { color: var(--u-texte); font-weight: 600; }
.som-l .n { min-width: 1.2em; font-variant-numeric: tabular-nums; color: var(--u-vif); }
/* le retour en haut d'une page longue : un bouton rond, discret, en bas à droite, qui paraît après deux écrans lus ; il se
   pose au-dessus de ce qui occupe déjà le bas de l'écran (l'indicateur de section d'un spectacle, les filtres des saisons),
   et s'efface quand la liste des sections est ouverte */
.haut-page { --hp-bas: 16px; position: fixed; right: 16px; bottom: calc(var(--hp-bas) + var(--bas)); z-index: 34; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--encre) 18%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--papier-2) 94%, transparent); color: var(--encre); cursor: pointer;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .9); opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity var(--k-survol) var(--k-doux), translate var(--k-survol) var(--k-doux), bottom var(--k-survol) var(--k-doux), border-color var(--k-survol) var(--k-doux), visibility 0s var(--k-survol); }
.haut-page.est-visible { opacity: .88; visibility: visible; translate: none; transition: opacity var(--k-survol) var(--k-doux), translate var(--k-survol) var(--k-doux), bottom var(--k-survol) var(--k-doux), border-color var(--k-survol) var(--k-doux); }
.haut-page:is(:focus-visible) { opacity: 1; border-color: var(--saison-vive); }
@media (hover: hover) { .haut-page:is(:hover) { opacity: 1; border-color: var(--saison-vive); } }
.haut-page:focus-visible { outline: 2px solid var(--saison-vive); outline-offset: 2px; }
.haut-page .fleche { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.haut-page.sur-som { --hp-bas: 68px; }
body:has(.bf7.est-visible.a-filtres) .haut-page { --hp-bas: 86px; }
body:has(#som-l:not([hidden])) .haut-page, html.intro-active .haut-page { opacity: 0; visibility: hidden; }
/* (ce qui prend le focus au clavier s'arrête au-dessus de ce qui occupe le bas de l'écran : le bouton du haut de page, la barre
   des filtres des saisons au téléphone, l'indicateur de section d'un spectacle) */
html:has(.haut-page.est-visible), html:has(main .som) { scroll-padding-bottom: calc(72px + var(--bas)); }
html:has(.bf7.est-visible) { scroll-padding-bottom: calc(96px + var(--bas)); }
@media (max-width: 759px) {
  .haut-page { --hp-bas: 14px; right: 12px; }
  .haut-page.sur-som { --hp-bas: 64px; }
  body:has(.bf7.est-visible) .haut-page { --hp-bas: 76px; }
}

/* les chapitres */
.chap { position: relative; scroll-margin-top: calc(var(--onglets) + 8px); }
.chap + .chap { margin-top: clamp(64px, 8vw, 112px); }
.u-eti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 22px; font: 600 .76rem/1.35 var(--u-etiq); letter-spacing: .17em; text-transform: uppercase; color: var(--u-vif); }
.u-eti .mo { flex: none; width: 26px; height: 26px; }
.u-affirm { margin: 0 0 40px; max-width: 24ch; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem); line-height: 1.08; color: var(--u-texte); text-wrap: balance; }
.u-texte { max-width: 66ch; font-size: 1.13rem; line-height: 1.72; }
.u-texte p { margin: 0 0 1.1em; }
.u-texte .chapo { font-family: inherit; font-size: clamp(1.25rem, 1.05rem + .5vw, 1.45rem); line-height: 1.55; }
.u-texte a, .u-mention a, .u-disp a, .u-prod a { color: var(--u-vif); }
.u-fig { position: relative; margin: 0; }
/* (une photo de récit sans dimensions écrites : sa place est réservée, 3:2, tant qu'elle arrive ; arrivée, elle prend sa propre
   proportion. Sans cela, elle naissait haute de 0 et poussait la page en arrivant) */
.u-fig img { width: 100%; height: auto; aspect-ratio: auto 3 / 2; border-radius: 3px; }
.u-credit { margin: 0; font-size: .8rem; color: var(--u-texte2); }
/* les vidéos, lues dans la page (règle 18, LECTEUR) : l'affiche du spectacle, son titre, la lecture au geste ; « plein écran »
   et « assombrir » dessous. La page éteinte, la vidéo garde sa lumière : un filet de l'univers et sa lueur autour d'elle */
.lc-cadre { border-radius: 6px; box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .7), 0 0 0 1px var(--u-filet); transition: box-shadow var(--k-page) var(--k-doux); }
.lc-affiche { --cadre-y: .3; filter: brightness(.55) saturate(.9); transition: scale var(--k-page) var(--k-doux), filter var(--k-survol) var(--k-doux), opacity var(--k-survol) var(--k-doux); }   /* (le sujet au tiers haut, au-dessus du bouton de lecture : CADRAGE) */
.lc-lire::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); pointer-events: none; }
@media (hover: hover) { .lc-lire:hover .lc-affiche { scale: 1.02; filter: brightness(.45) saturate(.9); } }
.lc-lire:focus-visible { outline: 3px solid var(--u-vif); outline-offset: -3px; }
/* (chargé, le cadre est le lecteur au clavier, LECTEUR : son anneau de focus passe au-dessus de l'iframe) */
.lc-cadre:focus-visible { outline: none; }
.lc-cadre:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 3px solid var(--u-vif); border-radius: inherit; pointer-events: none; }
.lc-icone { z-index: 1; width: clamp(64px, 8vw, 96px); height: auto; aspect-ratio: 1; background: var(--u-accent); color: var(--u-sur-accent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--u-accent) 30%, transparent); transition: scale var(--k-survol) var(--k-souple); }
@media (hover: hover) { .lc-lire:hover .lc-icone { scale: 1.06; } }
.lc-titre { z-index: 1; left: clamp(16px, 3vw, 32px); bottom: clamp(14px, 2.4vw, 26px); font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(1.15rem, 1rem + 1vw, 1.9rem); line-height: 1.15; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.lc-outils { gap: 10px; margin-top: 14px; }
.lc.lc-eteint .lc-cadre { box-shadow: 0 0 0 1.5px var(--u-vif), 0 0 110px var(--u-lueur); }
.lc.lc-eteint .lc-nuit-b { background: var(--u-accent); border-color: var(--u-accent); color: var(--u-sur-accent); }
.lc.lc-joue .lc-affiche { opacity: 0; }
.lc-nuit { background: rgba(14, 7, 11, .93); }
.lc-groupe { margin: clamp(40px, 5vw, 60px) 0 16px; font: 600 .76rem/1.35 var(--u-etiq); letter-spacing: .17em; text-transform: uppercase; color: var(--u-vif); }
.lc-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 26px 20px; }
.lc-grille .lc-titre { font-size: 1.05rem; }
.lc-grille .lc-icone { width: 54px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--u-accent) 30%, transparent); }
/* au téléphone (demande de la compagnie), le bouton de lecture en bas à gauche, à côté du titre de la vidéo : le centre de
   l'affiche, où sont les visages, reste dégagé */
@media (max-width: 899px) {
  .lc-icone { left: 14px; top: auto; bottom: 14px; width: 48px; transform: none; box-shadow: 0 0 0 6px color-mix(in srgb, var(--u-accent) 30%, transparent), 0 0 40px var(--u-lueur); }
  .lc-titre { left: 76px; right: 14px; bottom: 14px; display: flex; align-items: center; min-height: 48px; }
  .lc-grille .lc-icone { width: 42px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--u-accent) 30%, transparent); }
  .lc-grille .lc-titre { left: 68px; min-height: 42px; }
}
/* sous une petite vidéo, les deux boutons ne gardent que leur icône (leur libellé de D reste leur nom pour les lecteurs d'écran) */
.lc-grille .lc-outils { gap: 6px; margin-top: 8px; }
.lc-grille .lc-b { padding: 7px; }
.lc-grille .lc-b span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lc-boite::backdrop { background: rgba(14, 7, 11, .9); }
.lc-boite.lc-boite--nuit::backdrop { background: rgba(4, 2, 3, .98); }
/* la boîte (un catalogue : « Bande-annonce » loin de toute vidéo) : sur le noir, les boutons restent clairs */
.lc-boite-in { position: relative; }
.lc-boite .lc-b { --bt-t: #fff; --bt-vif: #fff; }
.lc-boite .lc-cadre { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); }
/* la captation intégrale d'un spectacle archivé (en accès libre), tout en bas de sa page : l'écran que garde la pieuvre. Le
   fond d'encre de l'univers, ses taches qui dérivent à peine ; le surtitre et sa ventouse qui respire ; la pieuvre perchée
   sur le haut de l'écran (le dessin du logo, que la créature remplace : ses tentacules lumineuses tiennent le bord de l'écran,
   capPieuvre) ; sur l'écran, l'encre, qui se retire vers elle quand la salle arrive à l'écran (MOUVEMENT.reveler,
   data-mv="encre") et découvre l'affiche. Moins d'animations : l'affiche découverte d'emblée, le dessin perché, rien ne vit */
.cap { --cap-noir: color-mix(in srgb, var(--u-fond) 46%, #040203); --cap-encre: color-mix(in srgb, var(--u-fond) 30%, #050204);
  position: relative; isolation: isolate; overflow: clip; border-radius: 14px; padding: clamp(28px, 4.5vw, 64px) clamp(14px, 4vw, 56px) clamp(26px, 3.6vw, 48px);
  background: var(--cap-noir); box-shadow: 0 0 0 1px var(--u-filet), 0 50px 90px -50px rgba(0, 0, 0, .9); color: var(--u-texte); }
/* (les taches d'encre du fond, aux couleurs de l'univers, qui dérivent lentement) */
.cap::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(28% 22% at 22% 30%, color-mix(in srgb, var(--u-accent) 30%, transparent), transparent 70%),
    radial-gradient(24% 26% at 78% 62%, color-mix(in srgb, var(--u-scene) 22%, transparent), transparent 72%),
    radial-gradient(40% 30% at 50% 4%, var(--u-lueur), transparent 72%);
  filter: blur(26px); animation: cap-derive 22s ease-in-out infinite alternate; }
@keyframes cap-derive { from { translate: -2% -1%; rotate: -2deg; } to { translate: 2% 2%; rotate: 3deg; } }
.cap-tete { position: relative; max-width: 46rem; margin: 0 auto clamp(34px, 4vw, 52px); text-align: center; }
.cap-sur { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 .74rem/1.3 var(--u-etiq); letter-spacing: .2em; text-transform: uppercase; color: var(--u-vif); }
/* (la ventouse du surtitre : un anneau et son cœur, qui respire comme « en tournée ») */
.cap-sur .cap-pt { position: relative; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1.8px solid currentColor; animation: cap-ventouse 2.6s var(--k-souple) infinite; }
.cap-sur .cap-pt::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: currentColor; opacity: .55; }
@keyframes cap-ventouse { 0%, 100% { scale: 1; } 45% { scale: 1.22; } 60% { scale: .94; } }
.cap-tete .chap-t { margin-bottom: 14px; color: var(--u-texte); font-size: clamp(2.3rem, 1.4rem + 3vw, 4.4rem); text-shadow: 0 0 60px var(--u-lueur); }
.cap-texte { margin: 0 auto; max-width: 36rem; font-size: 1.04rem; line-height: 1.55; color: var(--u-texte2); text-wrap: pretty; }
/* la pieuvre, perchée : ses boucles du bas posées sur le bord de l'écran */
.cap-pieuvre { position: relative; z-index: 2; width: clamp(86px, 9vw, 124px); margin: 0 auto calc(clamp(86px, 9vw, 124px) * -.34); color: var(--u-vif); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55)); }
.cap-pieuvre svg { display: block; width: 100%; height: auto; }
.cap.est-vivante .cap-pieuvre { visibility: hidden; }
.cap-pieuvre { transition: translate var(--k-page) var(--k-doux); }
.cap:has(.lc-joue) .cap-pieuvre { translate: 0 -30%; }   /* (la lecture lancée, elle s'élève : rien d'elle ne couvre la vidéo) */   /* (la créature la dessine à sa place) */
/* l'écran */
.cap-ecran { position: relative; max-width: 1080px; margin: 0 auto; }
/* (les prises : là où les tentacules tiennent le bord haut de l'écran ; invisibles) */
.cap-prises { position: absolute; left: 0; right: 0; top: -10px; height: 10px; pointer-events: none; }
.cap-prise { position: absolute; top: 0; width: 12%; height: 100%; }
.cap-prise:nth-child(1) { left: 5%; } .cap-prise:nth-child(2) { left: 26%; } .cap-prise:nth-child(3) { left: 60%; } .cap-prise:nth-child(4) { left: 81%; }
.lc--cap .lc-cadre { border-radius: 6px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--u-vif) 30%, transparent), 0 0 120px -10px var(--u-lueur), 0 40px 80px -40px #000; }
.lc--cap .lc-affiche { filter: brightness(.62) saturate(.85) contrast(1.05); }
.lc--cap .lc-icone { z-index: 2; width: clamp(76px, 9vw, 112px); box-shadow: 0 0 0 12px color-mix(in srgb, var(--u-accent) 28%, transparent), 0 0 80px var(--u-lueur); }
/* (le bouton de lecture : une ventouse, son anneau qui s'élargit comme une onde dans l'eau) */
.lc--cap .lc-icone::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--u-vif) 70%, transparent); animation: cap-onde 2.8s var(--k-doux) infinite; }
@keyframes cap-onde { from { scale: 1; opacity: .9; } to { scale: 1.7; opacity: 0; } }
.lc--cap .lc-decor { z-index: 1; overflow: hidden; border-radius: inherit; }
.lc--cap .lc-if { z-index: 3; }   /* (en lecture, la vidéo passe devant le bouton et l'encre) */
.lc--cap .lc-outils { justify-content: center; }
.lc--cap .lc-b { --bt-t: var(--u-texte); }
/* (l'encre de l'écran : une tache aux bords d'encre, qui se resserre vers la pieuvre, en haut au milieu, et s'y perd ; seule
   sa transformation bouge) */
.cap-encre { position: absolute; inset: -30% -20%; background: var(--cap-encre); border-radius: 63% 37% 54% 46% / 45% 56% 44% 55%; transform-origin: 50% 0;
  scale: 0; opacity: 0; transition: scale 1.1s var(--k-doux) .1s, opacity .5s var(--k-doux) .6s, rotate 1.1s var(--k-doux) .1s; }
.cap.mv-attente:not(.mv-vu) .cap-encre { scale: 1; opacity: 1; rotate: -8deg; transition: none; }
/* le pied de l'écran : le titre, la création, la durée, la source de la captation */
.cap-pied { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 18px auto 0; text-align: center; font: 600 .74rem/1.4 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--u-texte2); }
.cap-pied b { font-weight: inherit; color: var(--u-vif); }
.cap-pied small { flex-basis: 100%; font: .82rem/1.4 var(--u-corps); letter-spacing: 0; text-transform: none; }
/* (la vidéo chez son hébergeur, dans un nouvel onglet : là où l'intégration est refusée, ou pour qui préfère) */
.cap-ailleurs { flex-basis: 100%; font: .82rem/1.4 var(--u-corps); letter-spacing: 0; text-transform: none; color: var(--u-texte2); text-underline-offset: 3px; }
@media (hover: hover) { .cap-ailleurs:hover { color: var(--u-vif); } }
/* sans lecteur (une adresse ni YouTube ni Vimeo) : un lien, au centre */
.cap-lien { display: flex; justify-content: center; margin: 0; }
@media (max-width: 899px) {
  .cap { border-radius: 10px; }
  .cap-prise:nth-child(2), .cap-prise:nth-child(3) { display: none; }   /* (au téléphone, deux prises : les coins) */
  .lc--cap .lc-icone { width: 54px; }
  .lc--cap .lc-icone::before { inset: -8px; }
}
.still .cap::before, .still .cap-sur .cap-pt, .still .lc--cap .lc-icone::before { animation: none; }
.still .cap-encre { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cap::before, .cap-sur .cap-pt, .lc--cap .lc-icone::before { animation: none; }
  .cap-encre { transition: none; }
}
.u-tournee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(26px, 5vw, 70px); align-items: start; }
.carte-sp { position: sticky; top: calc(var(--haut) + var(--onglets) + 16px); margin: 0; }
/* la page d'un spectacle qui n'est plus en tournée : le bilan (ses chiffres, la frise de sa tournée, ses dates par saison à
   côté d'une grande carte de tous ses lieux) */
.u-bilan-t .gros { color: var(--u-vif); }
.u .etat { color: var(--u-texte2); }   /* (« date annulée », dans un univers : en retrait, pas à la couleur du site) */
.u-bilan-n { list-style: none; display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4vw, 64px); margin: 4px 0 clamp(22px, 3vw, 34px); padding: 0; }
.u-bilan-n li { display: grid; gap: 6px; }
.u-bilan-n .gros { font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(2.6rem, 2rem + 2vw, 4rem); line-height: 1; color: var(--u-vif); font-variant-numeric: tabular-nums; }
.u-bilan-n span { font: 600 .76rem/1.3 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--u-texte2); }
.u-bilan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(18px, 3vw, 30px); }
.u-bilan-s .mois { margin-top: 30px; }
.u-bilan-s:first-child .mois { margin-top: 0; }
.u-bilan-s .mois a { color: inherit; text-decoration: none; }
@media (hover: hover) { .u-bilan-s .mois a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } }
/* l'historique d'un spectacle en tournée (règle 23) : ses dates passées et ses résidences, repliées sous leur titre */
.sp-historique { margin-top: clamp(22px, 3vw, 34px); border-top: 1px solid var(--u-filet); }
.sp-historique > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; cursor: pointer; list-style: none;
  font: 700 .78rem/1.3 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--u-vif); }
.sp-historique > summary::-webkit-details-marker { display: none; }
.sp-historique > summary::after { content: ""; width: 8px; height: 8px; margin-left: 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--k-page) var(--k-souple); }
.sp-historique[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.sp-historique > summary small { font: 600 .74rem var(--u-corps); letter-spacing: 0; text-transform: none; color: var(--u-texte2); }
.sp-historique .u-bilan-dates { padding-bottom: 8px; }
/* (ouvert : l'index de ses saisons, des puces à la couleur de l'univers, et le nombre de représentations de chacune ; l'en-tête
   de la saison qu'on lit arrimé sous les menus, sur le fond de l'univers — dans le bilan d'un spectacle qui n'est plus en
   tournée aussi) */
.hist-idx ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 22px; padding: 0; list-style: none; }
.hist-idx button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--u-filet); border-radius: 999px; background: none; color: var(--u-texte);
  font: 500 .9rem/1.2 var(--u-corps); cursor: pointer; transition: background-color var(--k-survol) var(--k-doux), border-color var(--k-survol) var(--k-doux); }
@media (hover: hover) { .hist-idx button:hover { border-color: var(--u-vif); background: color-mix(in srgb, var(--u-vif) 12%, transparent); } }
.hist-idx small { font: 700 .74rem/1 var(--u-etiq); font-variant-numeric: tabular-nums; color: var(--u-vif); }
.sp .u-bilan-s .mois { position: sticky; top: calc(var(--haut) - 8px); z-index: 2; background: var(--u-fond); box-shadow: 0 1px 0 var(--u-filet); }
.sp-tournee .u-bilan-s .mois { top: calc(var(--haut) - 8px + var(--onglets) - var(--range)); }
.sp-tournee .u-bilan-s { scroll-margin-top: calc(var(--onglets) + 4px); }
.u-bilan-s .mois:focus-visible { outline-offset: -2px; }
.u-bilan-s .u-mois { margin: 18px 0 2px; font: 600 .72rem/1.3 var(--u-etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--u-texte2); }
.u-bilan-s .mois + .u-mois { margin-top: 8px; }
.u-bilan-s .mois small { margin-left: 8px; font: 600 .8rem var(--u-etiq); color: var(--u-texte2); }
.u .dates { border-top-color: var(--u-texte); }
.u .dates > li { border-bottom-color: var(--u-filet); }
.u .dates time small, .u .det, .u .dates > li.suite { color: var(--u-texte2); font-family: var(--sans); }
.u .det a { color: var(--u-vif); }
.u .dates > li.on { background: color-mix(in srgb, var(--u-vif) 13%, transparent); }
.u-annonce { margin: 0 0 18px; font-size: 1.35rem; line-height: 1.45; color: var(--u-texte2); }
.u-lieux { margin: 0 0 18px; max-width: 62ch; font-size: 1rem; line-height: 1.65; }
.u-rep { margin: 0 0 18px; font-size: 1.05rem; }
.u .carte .pays { fill: color-mix(in srgb, var(--u-texte) 10%, transparent); }
.u .carte .voisin { fill: color-mix(in srgb, var(--u-texte) 5%, transparent); }
.u .carte .passe path { stroke: color-mix(in srgb, var(--u-texte) 30%, transparent); }
.u .carte .bras-trait { stroke: var(--u-carte, var(--u-vif)); }
.u .carte .bras, .u .carte .point { fill: var(--u-carte, var(--u-vif)); }
.u .carte .bout { stroke: var(--u-carte, var(--u-vif)); }
.u .carte .point { stroke: var(--u-fond); }
.u .carte .rouen { fill: var(--u-texte); }
.u .carte .rouen-nom, .u .carte .nom { fill: var(--u-texte); stroke: var(--u-fond); }
.u .carte .encart { stroke: var(--u-texte2); }
.u-prog { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.u-faits { position: sticky; top: calc(var(--haut) + var(--onglets) + 20px); display: grid; gap: 14px; margin: 0; padding: 26px; list-style: none; border-top: 3px solid var(--u-vif); border-radius: 6px; background: var(--u-fond2); }
.u-faits li { font-size: 1rem; line-height: 1.45; }
.u-faits .gros { display: block; margin-bottom: 4px; font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); }
.u-faits .bu { justify-self: start; }
.u-ac-type { margin: 0 0 22px; max-width: 18ch; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.6rem); line-height: 1; color: var(--u-vif); text-wrap: balance; }
.u-ac-puces { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; padding: 0; }
.u-ac-puces .k { margin-right: 6px; color: var(--u-texte2); }
.u-formule { display: inline-grid; gap: 4px; margin: 0 0 26px; padding: 16px 22px; border-left: 4px solid var(--u-vif); background: var(--u-fond2); font-weight: 700; font-size: 1.1rem; }
.u-formule p { margin: 0; }
.u-disp ul { margin: 0; padding-left: 1.1em; max-width: 70ch; }
.u-disp li { margin: 0 0 8px; }
.u-distrib .u-avec { margin: 0 0 30px; max-width: 32ch; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.2rem); line-height: 1.22; }
.u-distrib .u-avec .k { display: block; margin-bottom: 6px; font: 600 .74rem/1.3 var(--u-etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--u-vif); }
/* la distribution en portraits (D.personnes, show.equipe) : la photo en carton, ou le monogramme de l'univers ; ceux qui alternent vont par deux */
.u-cast { --g: clamp(16px, 2vw, 28px); --pw: 160px; --pmax: 252px; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--pw), calc((100% - var(--g)) / 2)), 1fr)); gap: clamp(26px, 3.4vw, 44px) var(--g); max-width: calc(var(--n, 4) * var(--pmax) + (var(--n, 4) - 1) * var(--g)); margin: 0 0 clamp(36px, 4.4vw, 60px); padding: 0; }
.u-cast > li { min-width: 0; padding-top: 14px; }
.u-cast > .u-paire { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); border-top: 2px solid var(--u-vif); }
.u-pt { margin: 0; min-width: 0; }
.u-pt-cadre { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; container-type: inline-size; border-radius: 3px; background: color-mix(in srgb, var(--u-texte) 7%, var(--u-fond2)); box-shadow: 0 26px 44px -28px rgba(0, 0, 0, .65), 0 0 0 1px var(--u-filet); }
.chap:not(.alt) .u-pt-cadre { background: color-mix(in srgb, var(--u-texte) 7%, var(--u-fond)); }
.u-pt-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.u-pt-mono { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(closest-side at 50% 44%, var(--u-lueur), transparent 92%); }
.u-pt-mono b { display: grid; place-items: center; width: 56%; aspect-ratio: 1; border: 1.5px solid var(--u-vif); border-radius: 50%; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: 2.2rem; font-size: 21cqw; line-height: 1; text-transform: uppercase; letter-spacing: .02em; color: var(--u-vif); }
.u-pt figcaption { display: block; }
.u-pt-cr { display: block; min-height: 1.7em; padding-top: 5px; font: 500 .7rem/1.3 var(--u-etiq); letter-spacing: .03em; color: var(--u-texte2); }
.u-pt-nom { display: block; margin-top: 6px; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(1.15rem, 1rem + .55vw, 1.42rem); line-height: 1.12; color: var(--u-texte); text-wrap: balance; }
.u-pt-alt, .u-pt-role { display: block; margin-top: 4px; font-size: .9rem; line-height: 1.35; color: var(--u-texte2); }
.u-pt-alt { font-style: italic; }
.u-pt-role { font: 600 .72rem/1.4 var(--u-etiq); letter-spacing: .12em; text-transform: uppercase; color: var(--u-vif); }
.u-d-tete { margin: 0 0 18px; font-size: 1.15rem; }
/* les distributions précédentes : sous la fiche, plus discrètes que la distribution d'aujourd'hui ; un nom, ses rôles dessous */
.u-anciens { margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--u-filet); }
.u-anciens-k { margin: 0 0 12px; font: 600 .72rem/1.35 var(--u-etiq); letter-spacing: .12em; text-transform: uppercase; color: var(--u-texte2); }
.u-anciens ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.u-anciens li { font-size: 1.08rem; line-height: 1.4; }
.u-anciens li b { font-weight: 600; }
.u-anciens li span { display: block; font-size: .92rem; color: var(--u-texte2); }
.u-fiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 20px 32px; margin: 0 0 34px; padding: 26px 0 0; border-top: 1px solid var(--u-filet); }
.u-fiche div { min-width: 0; }
.u-fiche dt { font: 600 .72rem/1.35 var(--u-etiq); letter-spacing: .12em; text-transform: uppercase; color: var(--u-texte2); }
.u-fiche dd { margin: 5px 0 0; font-size: 1.08rem; line-height: 1.4; }
.u-prod { max-width: 82ch; padding-top: 20px; border-top: 1px solid var(--u-filet); font-size: .92rem; line-height: 1.6; color: var(--u-texte2); }
.u-prod p { margin: 0 0 10px; }
.u-prod strong { color: var(--u-texte); }
.u-mention { max-width: 82ch; margin: 16px 0 0; padding: 12px 16px; border-left: 3px solid var(--u-vif); background: color-mix(in srgb, var(--u-texte) 6%, transparent); font-size: .92rem; }
.u-distrib .u-signe, .u-appel .u-signe { margin: 26px 0 8px; }
.u-appel { padding: clamp(56px, 8vw, 110px) 0; text-align: center; background: radial-gradient(60% 120% at 50% 100%, var(--u-lueur), transparent 70%), var(--u-fond); border-top: 1px solid var(--u-filet); }
.u-appel .wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.u-appel p { margin: 0; }
.u-appel .bu { min-height: 52px; padding: 0 26px; font-size: 1.05rem; }   /* (l'appel d'une page : le principal, grand) */
/* au pied de la page d'un spectacle, ses voisins dans l'ordre des spectacles : deux moitiés, chacune dans son univers (son
   fond, sa lueur, sa police de titre), sa vignette cerclée de sa couleur vive, « Spectacle précédent » ou « suivant », son
   titre, sa création ; le précédent à gauche (sa flèche vers la gauche), le suivant à droite ; au téléphone, l'un sous l'autre */
.voisins { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); border-top: 1px solid var(--u-filet); }
.suivant { position: relative; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px); min-width: 0; overflow: clip; padding: clamp(30px, 4.2vw, 58px) clamp(20px, 3vw, 44px) clamp(30px, 4.2vw, 58px) max(16px, var(--bord, var(--gout))); text-decoration: none; }
.voisin--ap { justify-content: flex-end; padding: clamp(30px, 4.2vw, 58px) max(16px, var(--bord, var(--gout))) clamp(30px, 4.2vw, 58px) clamp(20px, 3vw, 44px); text-align: right; }
.voisin--ap .suivant-c { order: -1; justify-items: end; }
.voisin--av .fleche { order: -1; scale: -1 1; }
.suivant::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 130% at 20% 50%, var(--u-lueur), transparent 72%); opacity: .55; transition: opacity var(--k-survol) var(--k-doux); }
.voisin--ap::before { background: radial-gradient(60% 130% at 80% 50%, var(--u-lueur), transparent 72%); }
@media (hover: hover) { .suivant:hover::before { opacity: 1; } }
.suivant-c { position: relative; display: grid; gap: 6px; min-width: 0; }
.voisin-k { font: 600 .74rem/1.3 var(--u-etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--u-vif); }
.suivant-c .u-sur { margin: 0; color: var(--u-texte2); }
.suivant-c .u-sur .mo { flex: none; width: 22px; height: 22px; }
.suivant b { font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(1.55rem, 1rem + 1.7vw, 2.6rem); line-height: 1.04; color: var(--u-texte); overflow-wrap: anywhere; text-wrap: balance; }
.voisin-v { position: relative; flex: none; width: clamp(64px, 6.6vw, 96px); aspect-ratio: 1; border-radius: 50%; overflow: clip; background: var(--u-fond2); box-shadow: 0 0 0 2px var(--u-vif), 0 0 26px var(--u-lueur); }
.voisin-v img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale var(--k-survol) var(--k-doux); }
@media (hover: hover) { .suivant:hover .voisin-v img { scale: 1.06; } }
.suivant .fleche { position: relative; flex: none; width: 40px; height: 40px; color: var(--u-vif); transition: translate var(--k-survol) var(--k-souple); }
@media (hover: hover) { .voisin--ap:hover .fleche { translate: 8px 0; } }
@media (hover: hover) { .voisin--av:hover .fleche { translate: -8px 0; } }
@media (max-width: 640px) {
  .suivant, .voisin--ap { padding-top: 22px; padding-bottom: 22px; }
  .voisin-v { width: 58px; }
  .suivant .fleche { width: 30px; height: 30px; }
  .voisins > .suivant + .suivant { border-top: 1px solid var(--u-filet); }
}

/* ———— la page d'un spectacle, composée : l'univers de la 07, réserver et le bilan de la 10 ————
   Un spectacle en tournée (ou en création) : l'ouverture de la 07 (sa photo principale plein cadre dans le noir de son
   univers, le texte en bas à gauche, le motif projeté comme un gobo, le crédit le long du bord), ses trois entrées en onglets,
   puis les chapitres à côté d'un petit sommaire (des filets) ; dans « voir », le récit : le texte pas à pas, à côté des
   photos épinglées qui se relaient. Un spectacle qui n'est plus en tournée : l'ouverture de la 10 (la photo s'éloigne, le
   titre et son filet qui s'allonge avec la lecture, le motif en haut), le sommaire en bras et ventouses, un filet entre les
   chapitres. Les dates : la bande et la carte de réservation de la 10. --bord : du bord du contenu au bord de l'écran (le
   récit y déborde). */
.sp { --bord: max(var(--gout), calc((100vw - 1240px) / 2 + var(--gout))); }
article.u.sp-seul { --onglets: 0px; }
/* le motif en grand (celui de la 10) : il suit la lecture (--p, posé sur l'ouverture) */
.sp-motif { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sp-motif text { fill: currentColor; stroke: none; font: 600 17px var(--u-etiq); letter-spacing: .04em; }
.sp-motif * { transform-box: view-box; }
.sp-motif .m-tourne { transform-origin: 120px 120px; transform: rotate(calc(var(--p, 0) * 120deg)); }
.sp-motif .m-g { transform: translateX(calc(var(--p, 0) * 13px)); }
.sp-motif .m-d { transform: translateX(calc(var(--p, 0) * -13px)); }
.sp-motif .m-ecrit { stroke-dasharray: 1; stroke-dashoffset: calc(.55 - var(--p, 0) * .55); }
.sp-motif .m-heure { transform-origin: 120px 120px; transform: rotate(calc(-40deg + var(--p, 0) * 60deg)); }
.sp-motif .m-minute { transform-origin: 120px 120px; transform: rotate(calc(var(--p, 0) * 540deg)); }
.sp-motif .m-curseur { transform: translateX(calc(var(--p, 0) * 200px)); }
/* l'ouverture (la 07) : la photo plein cadre, le noir de l'univers qui monte du bas et de la gauche, une lueur posée, le motif
   en gobo ; le titre, « en tournée » qui respire, l'accroche, la prochaine date, l'appel */
.sp-une { position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; justify-content: flex-end; min-height: max(32rem, calc(100svh - var(--haut) - var(--onglets))); background: var(--u-fond); }
.une-ph { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: var(--u-fond2); }
.une-ph img { width: 100%; height: 100%; object-fit: cover; }
html:not(.still) .une-ph img { transform: translateY(calc(var(--p, 0) * 8%)) scale(calc(1.03 + var(--p, 0) * .05)); }
.une-ombre { position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  linear-gradient(180deg, color-mix(in srgb, var(--u-fond) 72%, transparent) 0, transparent 8rem),
  linear-gradient(0deg, var(--u-fond) 0, color-mix(in srgb, var(--u-fond) 88%, transparent) 16%, color-mix(in srgb, var(--u-fond) 42%, transparent) 44%, transparent 66%),
  linear-gradient(90deg, color-mix(in srgb, var(--u-fond) 86%, transparent) 0, color-mix(in srgb, var(--u-fond) 44%, transparent) 40%, transparent 66%); }
.une-lueur { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(42% 52% at var(--gx, 30%) var(--gy, 64%), var(--u-lueur), transparent 72%); }
.une-motif { position: absolute; z-index: -1; right: max(var(--gout), 5vw); top: clamp(20px, 5vh, 56px); width: min(36vmin, 23rem); color: var(--u-vif); opacity: .3; pointer-events: none; }
.une-corps { position: relative; width: 100%; padding-top: clamp(96px, 16vh, 180px); padding-bottom: clamp(32px, 6vh, 64px); }
.une-texte { max-width: 54rem; }
.une-credit { position: absolute; z-index: 1; right: max(10px, calc(var(--gout) / 2.4)); bottom: clamp(32px, 6vh, 64px); margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 400 .74rem/1.3 var(--sans); letter-spacing: .06em; color: color-mix(in srgb, var(--u-texte) 84%, transparent); text-shadow: 0 0 6px rgba(0, 0, 0, .85); }
.une-sur { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; font: 600 .82rem/1.4 var(--u-etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--u-texte); }
.une-sur::before { content: ""; flex: none; width: 2.5rem; height: 1px; margin-right: 14px; background: var(--u-vif); box-shadow: 0 0 8px var(--u-vif); }
.une-sur span + span::before { content: "·"; margin: 0 12px; color: var(--u-vif); }
.sp-une .u-titre { margin-top: 14px; font-size: clamp(3rem, 1.2rem + 5.8vw, 7.25rem); line-height: .96; text-wrap: balance; text-shadow: 0 0 46px var(--u-lueur); }
.sp-une .u-titre.long { font-size: clamp(2.5rem, 1rem + 4.2vw, 5rem); }
.une-statut { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font: 600 .8rem/1.4 var(--u-etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--u-vif); }
.une-statut::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; animation: respire 2.2s ease-in-out infinite; }
.une-st { margin: 14px 0 0; max-width: 40rem; font-size: 1.25rem; line-height: 1.45; color: var(--u-texte); }
.une-acc { margin: 14px 0 0; max-width: 40rem; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); line-height: 1.55; color: var(--u-texte); }
.une-date { margin: 18px 0 0; font: 600 1.06rem/1.4 var(--sans); color: var(--u-texte); }
.sp-une .u-cta { margin-top: 24px; }
/* le retour discret à la liste des spectacles, en tête de l'ouverture (comme « ← Espace pro » des pages de l'espace pro) */
.une-retour { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 6px; color: var(--u-texte); font: 700 .78rem/1.3 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.une-retour .fleche { width: 18px; height: 18px; scale: -1 1; color: var(--u-vif); transition: translate var(--k-survol) var(--k-souple); }
@media (hover: hover) { .une-retour:hover span { text-decoration: underline; text-underline-offset: 4px; } }
@media (hover: hover) { .une-retour:hover .fleche { translate: -4px 0; } }
/* partager : un bouton comme les autres appels ; « Lien copié » se dit dans une bulle sous lui, puis s'efface */
.partage { position: relative; display: inline-flex; }
.partage-msg { position: absolute; z-index: 3; left: 50%; top: calc(100% + 8px); translate: -50% -4px; padding: 6px 12px; border-radius: 6px; background: var(--u-texte); color: var(--u-fond); font: 600 .84rem/1.3 var(--sans); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--k-survol) var(--k-doux), translate var(--k-survol) var(--k-doux); }
.partage-msg:not(:empty) { opacity: 1; translate: -50% 0; }
/* l'ouverture de la 10 (la page seule) : la photo à droite, le noir de l'univers à gauche, le motif en haut ; le fil d'Ariane, la
   compagnie qui signe, le titre et son filet qui s'allonge avec la lecture */
.sp-une10 .une-ombre { background: linear-gradient(90deg, var(--u-fond) 0, var(--u-fond) 22%, color-mix(in srgb, var(--u-fond) 84%, transparent) 42%, color-mix(in srgb, var(--u-fond) 28%, transparent) 64%, transparent 84%),
  linear-gradient(0deg, color-mix(in srgb, var(--u-fond) 84%, transparent) 0, transparent 36%); }
.sp-une10 .une-motif { left: var(--bord); right: auto; width: clamp(110px, 20vh, 200px); opacity: .55; }
@media (min-width: 760px) and (max-height: 760px) { .sp-une10 .une-motif { display: none; } }
.une-ariane { margin: 0 0 14px; font-size: .88rem; color: var(--u-texte2); }
.une-ariane a { text-decoration: none; }
@media (hover: hover) { .une-ariane a:hover { text-decoration: underline; } }
.une-nom { margin: 0 0 12px; font: 700 .74rem/1.3 var(--u-etiq); letter-spacing: .24em; text-transform: uppercase; color: var(--u-vif); }
.sp-une10 .u-titre { margin-top: 0; max-width: 13ch; }
.sp-une10 .u-titre::after { content: ""; display: block; width: calc(90px + var(--p, 0) * min(320px, 34vw)); height: 4px; margin-top: 20px; border-radius: 2px; background: var(--u-vif); }
.sp-une10 .une-st { font-style: italic; }
.une-meta .une-archive { padding: 0 10px; border: 1px solid currentColor; border-radius: 999px; }
.une-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font: 700 .76rem/1.4 var(--u-etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--u-texte2); }
.sp-une10 .une-credit { right: var(--gout); bottom: 12px; padding: 2px 9px; border-radius: 3px; writing-mode: horizontal-tb; transform: none; background: color-mix(in srgb, var(--u-fond) 72%, transparent); text-shadow: none; }
/* les chapitres, à côté du petit sommaire qui suit la lecture (la 07 : des filets, celui du chapitre lu s'allume) */
.sp-grille { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: clamp(48px, 7vw, 104px); padding-bottom: clamp(56px, 8vw, 112px); }
.sp-chaps { min-width: 0; }
.sp-chaps .wrap { max-width: none; margin: 0; padding: 0; }
.chap-t { margin: 0 0 clamp(26px, 3vw, 40px); font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.005em; color: var(--u-vif); text-wrap: balance; overflow-wrap: break-word; }
.sp-som { display: none; }
.sp-som ol { list-style: none; margin: 0; padding: 0; }
.sp-som button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 6px 0; border: 0; background: none; color: var(--u-texte2); font: 600 .74rem/1.3 var(--u-etiq); letter-spacing: .12em; text-transform: uppercase; text-align: left; cursor: pointer; transition: color var(--k-survol) var(--k-doux); }
.sp-som button::before { content: ""; flex: none; width: 1.25rem; height: 1px; background: currentColor; transition: width var(--k-page) var(--k-doux), height var(--k-page) var(--k-doux), background-color var(--k-survol) var(--k-doux); }
.sp-som li.on button { color: var(--u-texte); }
@media (hover: hover) { .sp-som button:hover { color: var(--u-texte); } }
.sp-som li.on button::before { width: 2.5rem; height: 2px; background: var(--u-vif); box-shadow: 0 0 10px var(--u-lueur); }
.sp-som-signe { display: block; width: 4.5rem; margin-top: 28px; color: var(--u-vif); opacity: .6; }
/* (plus étroit, le sommaire flottant attend qu'on ait quitté l'ouverture : il en couvrirait l'appel) */
.sp-tournee.une-vu .som:not(:focus-within) { opacity: 0; visibility: hidden; transition: opacity var(--k-survol) var(--k-doux), visibility 0s var(--k-survol); }
@media (min-width: 1000px) {
  .sp-grille { grid-template-columns: 11.5rem minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); }
  .sp-som { display: block; position: sticky; top: calc(var(--haut) + var(--onglets) + 32px); align-self: start; }
  .sp .som { display: none; }
}
/* la page seule (la 10) : le sommaire, un bras et ses ventouses (celle du chapitre lu, pleine) ; au téléphone, des pastilles ;
   un filet entre les chapitres */
.sp-som--seul { display: block; margin: 0 0 26px; }
.sp-som--seul ol { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.sp-som--seul button { width: auto; min-height: 36px; padding: 5px 13px; border: 1.5px solid var(--u-filet); border-radius: 999px; font: 500 .86rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.sp-som--seul button::before { display: none; }
.sp-som--seul li.on button { border-color: var(--u-vif); }
.sp-seul .chap { padding-bottom: clamp(40px, 5vw, 72px); }
.sp-seul .chap + .chap { margin-top: 0; padding-top: clamp(34px, 4vw, 56px); border-top: 1px solid var(--u-filet); }
@media (min-width: 900px) {
  .sp-seul .sp-grille { grid-template-columns: 190px minmax(0, 1fr); column-gap: clamp(28px, 4vw, 72px); }
  .sp-som--seul { position: sticky; top: calc(var(--haut) + 28px); align-self: start; margin: 0; }
  .sp-som--seul ol { position: relative; display: block; padding: 2px 0 2px 32px; }
  .sp-som--seul ol::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 6px; background: color-mix(in srgb, var(--u-vif) 50%, transparent); clip-path: polygon(0 0, 100% 0, 66% 100%, 34% 100%); }
  .sp-som--seul li { position: relative; }
  .sp-som--seul li::before { content: ""; position: absolute; left: calc(-32px + 12px - (14px - var(--i) * 1px) / 2); top: 50%; width: calc(14px - var(--i) * 1px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: var(--u-fond); border: 2px solid color-mix(in srgb, var(--u-vif) 75%, transparent); transition: background-color .25s, transform .25s; }
  .sp-som--seul li.on::before { background: var(--u-vif); transform: translateY(-50%) scale(1.25); }
  .sp-som--seul button { width: 100%; min-height: 44px; padding: 7px 0; border: 0; border-radius: 0; font-size: .92rem; }
  .sp-som--seul li.on button { font-weight: 700; }
}
/* le récit (voir) : le texte, pas à pas, à côté des photos épinglées qui se relaient ; le pas qu'on lit s'allume d'un filet,
   les autres restent lisibles ; un filet par photo, en haut du cadre, dit où l'on en est. Au téléphone, les photos occupent
   l'écran et le texte passe dessus, en cartons. Moins d'animations : rien n'est épinglé, le récit se lit d'un trait */
.sp .chap.rc-chap { content-visibility: visible; }
.rc { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: clamp(28px, 4vw, 64px); margin-right: calc(-1 * var(--bord)); }
.rc--seul { display: block; margin-right: 0; }
.rc-pas { grid-column: 1; grid-row: 1; min-width: 0; padding-bottom: 16svh; }
.rc-p { display: flex; flex-direction: column; justify-content: center; min-height: 56svh; padding: 4svh 0; color: var(--u-texte2); transition: color var(--k-page) var(--k-doux); }
.rc-p:first-child { min-height: 46svh; justify-content: flex-start; padding-top: 0; }
.rc-in { position: relative; padding-left: 26px; }
.rc-in::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--u-vif); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--k-page) var(--k-doux); }
.rc-p.on { color: var(--u-texte); }
.rc-p.on .rc-in::before { transform: none; }
.rc-p .u-texte { max-width: 38rem; }
.rc-p .u-texte p:last-child { margin-bottom: 0; }
.rc-cadre { margin: 0 0 14px; font: 600 .78rem/1.5 var(--u-etiq); letter-spacing: .12em; text-transform: uppercase; color: var(--u-vif); }
.rc-dit { margin: 0; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(1.55rem, 1rem + 1.7vw, 2.5rem); line-height: 1.16; text-wrap: balance; }
.rc-vis { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--haut) + var(--onglets)); height: calc(100svh - var(--haut) - var(--onglets)); align-self: start; }
.rc-photos { position: absolute; inset: 0; overflow: hidden; background: var(--u-fond2); }
.rc-ph { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity var(--k-lent) var(--k-doux), visibility 0s var(--k-lent); }
.rc-ph.on { opacity: 1; visibility: visible; transition: opacity var(--k-lent) var(--k-doux), visibility 0s; }
.rc-ph img { width: 100%; height: 100%; object-fit: cover; }
.rc-ph figcaption { position: absolute; left: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px); width: fit-content; max-width: min(28rem, calc(100% - 28px)); margin: 0; padding: 10px 14px 11px; background: var(--u-fond2); color: var(--u-texte); border-left: 3px solid var(--u-vif); font-size: .9rem; line-height: 1.45; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6); }
.rc-ph figcaption small { display: block; margin-top: 2px; font-size: .74rem; color: var(--u-texte2); }
.rc-ph figcaption small:only-child { margin-top: 0; }
.rc-fil { position: absolute; left: clamp(14px, 2vw, 24px); right: clamp(14px, 2vw, 24px); top: 16px; display: flex; gap: 6px; pointer-events: none; }
.rc-fil i { position: relative; flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .3); box-shadow: 0 0 6px rgba(0, 0, 0, .45); }
.rc-fil i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
@media (max-width: 899px) {
  .rc { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--gout)); --rc-h: calc(100svh - var(--haut) - var(--onglets) - var(--rc-bas, 0px)); }
  .rc--seul { margin: 0; }
  .rc-vis { order: -1; align-self: stretch; height: var(--rc-h); }   /* (le cadre d'abord, le texte passe dessus) */
  .rc-pas { position: relative; z-index: 1; margin-top: calc(46svh - var(--rc-h)); padding: 0 var(--gout) 4svh; }
  .rc--seul .rc-pas { margin-top: 0; padding: 0; }
  .rc-p, .rc-p:first-child { min-height: 0; margin: 0 0 54svh; padding: 22px 20px 22px 14px; border-radius: 4px; background: var(--u-fond); color: var(--u-texte); box-shadow: 0 0 0 1px var(--u-filet), 0 26px 50px -24px rgba(0, 0, 0, .8); }
  .rc-p:last-child { margin-bottom: 8svh; }
  .rc--seul .rc-p { margin-bottom: 18px; }
  .rc-ph figcaption { top: 34px; bottom: auto; }
}
.still .rc-vis { position: relative; top: auto; height: auto; aspect-ratio: 4 / 5; }
.still .rc-ph:not(:first-child), .still .rc-fil { display: none; }
.still .rc-ph:first-child { opacity: 1; visibility: visible; }
.still .rc-p, .still .rc-p:first-child { min-height: 0; justify-content: flex-start; padding-top: 0; padding-bottom: 1.4em; color: var(--u-texte); }
.still .rc-in::before { display: none; }
.still .rc-in { padding-left: 0; }
@media (max-width: 899px) {
  .still .rc-vis { aspect-ratio: 3 / 2; }
  .still .rc-pas { margin-top: 0; padding-top: 22px; }
  .still .rc-p, .still .rc-p:first-child { margin: 0; padding: 0 0 1.2em; border-radius: 0; background: none; box-shadow: none; }
}
/* les citations : un vers par ligne (une réplique en prose, entre guillemets), le filet de l'univers, la source */
.sp-cit { margin: 0; max-width: 46rem; }
.sp-cit blockquote { margin: 0; padding-left: 1.4rem; border-left: 2px solid var(--u-vif); }
.sp-cit p { margin: 0; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem); line-height: 1.32; }
.sp-cit .v { display: block; }
.sp-cit.prose .v { display: inline; }
.sp-cit.prose p::before { content: "« "; }
.sp-cit.prose p::after { content: " »"; }
.sp-cit figcaption { margin: 10px 0 0 1.4rem; font: 600 .74rem/1.4 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--u-vif); }
.u-texte + .sp-cit, .sp-cit + .sp-cit { margin-top: 32px; }
.rc-in .sp-cit blockquote { padding-left: 0; border-left: 0; }   /* (dans le récit, le filet du pas suffit) */
.rc-in .sp-cit figcaption { margin-left: 0; }
/* la présentation de la page seule (la 10) : le cadre, les affirmations (la première en grand, un filet de l'univers) */
.sp-cadre { margin: 0 0 22px; font: 700 .82rem/1.6 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--u-vif); }
.sp-affirm { margin: 0 0 24px; max-width: 30em; padding-left: 22px; border-left: 3px solid var(--u-vif); font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.25rem); line-height: 1.22; color: var(--u-texte); text-wrap: balance; }
.sp-affirm + .sp-affirm { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); color: var(--u-texte2); }
.sp .u-affirm { max-width: 30ch; margin-bottom: 28px; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); }
/* les photos en cartons (la 07) : la première en large, les autres deux par deux, la légende en carton sur la photo */
.cartons7 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.carton7 { min-width: 0; margin: 0; }
.carton7:first-child:not(:last-child), .carton7:only-child { grid-column: 1 / -1; }
.carton7 img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; background: var(--u-fond2); }
.carton7:first-child:not(:last-child) img, .carton7:only-child img { aspect-ratio: 16 / 8; }
.carton7 figcaption { position: relative; width: fit-content; max-width: calc(100% - 2.25rem); margin: -1.75rem 1rem 0 1.25rem; padding: .8rem 1.1rem; background: var(--u-fond2); color: var(--u-texte); border-left: 3px solid var(--u-vif); font-size: .94rem; line-height: 1.5; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .75); }
.cartons7 + .u-credit { margin-top: 18px; }
/* la distribution (la 07) : la fiche d'un côté ; la durée, la production, les mentions et la compagnie qui signe de l'autre */
.u-distrib-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.u-distrib-g .u-fiche { grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; }
.u-distrib-g .u-avec { margin-bottom: 24px; }
.u-duree-d { margin: 0 0 18px; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: 1.5rem; line-height: 1.2; color: var(--u-vif); }
.u-distrib-g .u-signe { margin: 24px 0 8px; }
/* les dates (la 10) : la frise de la tournée, la bande des prochaines dates (une ventouse sur chaque bouton, pleine quand la
   date est choisie), la carte de la date choisie (l'affiche de la 10, dans l'univers du spectacle) à côté de la carte de ses
   tournées, puis toutes les dates de la saison */
.sp .rs-zone { margin: 0 0 clamp(26px, 4vw, 40px); }
.sp .rs-k-bande { color: var(--u-texte2); }
.sp .rs-defile button { width: 44px; height: 44px; }
.sp .rs-date { min-width: 8.4rem; max-width: 12.5rem; padding: 14px 34px 13px 16px; border-radius: 16px; }
.sp .rs-date::before { content: ""; position: absolute; right: 13px; top: 15px; width: 11px; height: 11px; border: 2px solid var(--u-vif); border-radius: 50%; transition: transform var(--k-survol) var(--k-souple), background-color var(--k-survol) var(--k-doux); }
@media (hover: hover) { .sp .rs-date:hover::before { transform: scale(1.3); } }
.sp .rs-date[aria-pressed="true"]::before { background: var(--u-sur-accent); border-color: var(--u-sur-accent); }
.sp .rs-date[aria-pressed="true"]::after { content: none; }
.sp .rs-n { font-size: 2rem; }
.sp .rs-m { font: italic 500 1.05rem/1.2 var(--u-corps); }
.sp .rs-carte { min-height: 320px; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--u-vif) 26%, transparent), 0 18px 36px -24px rgba(0, 0, 0, .6); }
.sp .rs-photo { width: 56%; opacity: .5; -webkit-mask-image: radial-gradient(130% 100% at 100% 42%, #000 34%, transparent 72%); mask-image: radial-gradient(130% 100% at 100% 42%, #000 34%, transparent 72%); }
.sp .rs-c { max-width: 31rem; padding: clamp(24px, 3.2vw, 40px) clamp(20px, 3vw, 38px); }
.sp .rs-sp { color: var(--u-vif); }
.sp .rs-quand { font: italic 500 clamp(1.2rem, 1.05rem + .5vw, 1.5rem)/1.25 var(--u-corps); }
.sp .rs-seance { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-color: color-mix(in srgb, var(--u-texte) 32%, transparent); background: none; }
.sp .rs-reserver { min-height: 58px; padding: 12px 22px 12px 28px; }
.sp .rs-aupres { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 12px 20px; border: 1.5px dashed color-mix(in srgb, var(--u-texte) 45%, transparent); border-radius: 999px; font-weight: 600; color: var(--u-texte); }
@media (min-width: 1000px) { .sp .rs-corps { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
/* les séances scolaires d'une date, dans la liste des dates du spectacle : de petits repères en pointillé, sans lien */
.dates .rs-seances--scol { margin: 8px 0 0; }
.sp .dates .rs-seance { min-height: 0; padding: 4px 12px 5px; gap: 7px; align-items: baseline; }
.dates .rs-seances--scol .rs-sh { font-size: 1.05rem; }
.dates .rs-seances--scol .rs-liste { gap: 6px; }
/* une date scolaire dans la bande : son bouton en pointillé, sa pastille près de l'heure ; sa carte le dit, sans bouton */
.rs-date--scol:not([aria-pressed="true"]) { border-style: dashed; background: transparent; }
.rs-date .rs-scol { margin-left: 6px; vertical-align: .14em; color: inherit; }
.rs-date[aria-pressed="true"] .rs-scol { color: var(--u-sur-accent); }
.sp-tout { margin: 20px 0 0; }
.sp-tout a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--u-texte); text-decoration: none; }
@media (hover: hover) { .sp-tout a:hover { color: var(--u-vif); } }
.sp-tout .fleche { width: 18px; height: 18px; }
/* le bilan (la 10) : sa phrase, ses chiffres en grand, ses dates saison par saison (un filet de l'univers sur chaque saison) */
.u-bilan-rep { margin: 0 0 18px; font-family: var(--u-titre-f); font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); line-height: 1.35; color: var(--u-texte); }
.sp .u-bilan-s .mois { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 30px 0 0; padding-top: 10px; border-top: 2px solid var(--u-vif); font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); }
.sp .u-bilan-s:first-child .mois { margin-top: 0; }
.sp .u-bilan-s .dates { border-top: 0; }
/* dans la colonne des chapitres : le contact (programmer) en tête, l'appel à la fin */
.sp-chaps .u-contact { margin: 0 0 clamp(48px, 6vw, 80px); padding: 0; border: 0; background: none; }
.sp-chaps .u-appel { margin-top: clamp(64px, 8vw, 112px); padding: clamp(36px, 5vw, 56px) 0 0; border-top: 1px solid var(--u-filet); background: none; text-align: left; }
.sp-chaps .u-appel .wrap { align-items: flex-start; }
@media (max-width: 759px) {
  /* l'ouverture au téléphone : la photo en haut, le texte dessous, qui la recouvre d'un rien ; les trois entrées en trois cases */
  .sp-une { display: block; min-height: 0; --une-h: max(50svh, 19rem); }
  .sp-une10 { --une-h: min(62vw, 420px); }
  .une-ph { position: relative; inset: auto; height: var(--une-h); }
  .une-ombre, .une-lueur { bottom: auto; height: var(--une-h); }
  .une-ombre, .sp-une10 .une-ombre { background: linear-gradient(180deg, color-mix(in srgb, var(--u-fond) 60%, transparent) 0, transparent 6rem), linear-gradient(0deg, var(--u-fond) 0, color-mix(in srgb, var(--u-fond) 78%, transparent) 22%, transparent 56%); }
  .une-motif, .sp-une10 .une-motif { top: 12px; right: 34px; left: auto; width: 7.5rem; opacity: .6; }
  .une-corps { margin-top: -8rem; padding-top: 0; padding-bottom: 28px; }
  .sp-une10 .une-corps { margin-top: -3.5rem; }
  .une-credit { top: 14px; right: 6px; bottom: auto; }
  .sp-une10 .une-credit { position: static; display: block; width: fit-content; max-width: calc(100% - 2 * var(--gout)); margin: 0 var(--gout) 16px auto; }
  .sp-une .u-titre, .sp-une .u-titre.long { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  /* (au téléphone, le sous-menu tient en trois cases sur une ligne, les noms courts ; la case courante teintée et soulignée) */
  .u-onglets { padding: 6px var(--gout); border: 0; }
  .u-onglets-in { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; min-height: 0; padding: 0; overflow: visible; border: 1px solid color-mix(in srgb, var(--u-texte) 30%, transparent); border-radius: 6px; }
  .u-onglets .ut, .u-progres, .u-onglets a .pt { display: none; }
  .u-onglets a { justify-content: center; min-height: 44px; padding: 5px 6px 7px; white-space: normal; text-align: center; font-size: .78rem; line-height: 1.15; text-wrap: balance; hyphens: manual; overflow-wrap: normal; word-break: normal; }
  .u-onglets a + a { border-left: 1px solid color-mix(in srgb, var(--u-texte) 30%, transparent); }
  .u-onglets a[aria-current="page"] { background: color-mix(in srgb, var(--e) 18%, transparent); }
  .u-onglets a::after { left: 12px; right: 12px; bottom: 3px; }
  .u-distrib-g { grid-template-columns: minmax(0, 1fr); }
  .sp .rs-carte { min-height: 0; }
  .sp .rs-photo { position: relative; display: block; inset: auto; width: 100%; height: 150px; opacity: .65; -webkit-mask-image: linear-gradient(0deg, transparent, #000 70%); mask-image: linear-gradient(0deg, transparent, #000 70%); }
  .sp .rs-c { margin-top: -40px; padding: 0 18px 22px; }
}
/* de la place pour lire au téléphone (Range) : sur la page d'un spectacle, quand on descend, le menu flottant se range
   au-dessus de l'écran (html.menu-range) et la rangée des entrées arrimée monte à sa place, ce qui s'arrime sous elle aussi
   (--range : la place qu'il rend) ; il revient quand on remonte. Seules les places des pièces arrimées changent (aucune
   hauteur : la page ne bouge pas) ; moins d'animations, rien ne glisse. Au bureau, rien de tout cela */
:root { --range: 0px; }
@media (max-width: 759px) {
  html.menu-range { --range: calc(var(--haut) - 8px); scroll-padding-top: calc(var(--haut) + 16px - var(--range)); }
  html.menu-range .top { translate: 0 calc(-100% - 20px - env(safe-area-inset-top)); box-shadow: none; }
  html.menu-range .u-onglets { top: calc(var(--haut) - 8px - var(--range)); }
  html.menu-range .u-onglets::before { opacity: 0; }
  .u-onglets::before { bottom: 100%; }   /* (sans filet au téléphone : le fond monte d'aplomb, aucune ligne de texte ne passe entre) */
  html.menu-range :is(.recit-panneau, .rc-vis) { top: calc(var(--haut) + var(--onglets) - var(--range)); }
  html.menu-range .carte-sp { top: calc(var(--haut) + var(--onglets) + 16px - var(--range)); }
  html.menu-range .u-faits { top: calc(var(--haut) + var(--onglets) + 20px - var(--range)); }
  html:not(.still) .top { transition: box-shadow var(--k-survol) var(--k-doux), background-color var(--k-survol) var(--k-doux), translate .3s var(--k-doux); }
  html:not(.still) :is(.u-onglets, .recit-panneau, .rc-vis, .carte-sp, .u-faits, .u-bilan-s .mois) { transition: top .3s var(--k-doux); }
}
@media (max-width: 640px) {
  .cartons7 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .carton7:first-child:not(:last-child) img { aspect-ratio: 3 / 2; }
}
/* Bérénice : la charte du dossier scolaire (crème, rouge, bordeaux ; Ubuntu gras, Open Sans, Raleway) */
.u-arene { --u-carte: var(--u-accent); }
.u-arene :is(.u-titre, .chap-t, .dos-h3, .fp-t, .ac-t, .suivant b, .u-ac-type) { text-transform: uppercase; }
.u-arene .fu-t { text-transform: uppercase; color: var(--u-accent); }
.u-arene :is(.chap-t, .u-affirm, .sp-cit p, .u-ac-type, .u-avec, .suivant b) { color: var(--u-accent); }
.u-arene .u-onglets { background: #fff; }
.dos-couv { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 6px; padding: clamp(30px, 5vw, 64px) clamp(20px, 4vw, 48px); border-radius: 8px; background: var(--u-accent); color: #fff; text-align: center; }
.dos-couv-fond { position: absolute; inset: 0; z-index: -1; }
.dos-couv-fond img { width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
.dos-couv p { margin: 0; }
.dos-type { font: 700 .82rem/1.4 var(--u-etiq); letter-spacing: .26em; }
.dos-titre { margin: 4px 0 0; font: 700 clamp(2.6rem, 1.6rem + 4vw, 5rem)/1 var(--u-titre-f); letter-spacing: .02em; }
.dos-auteur { font-size: 1.15rem; }
.dos-creation, .dos-format, .dos-public { font: 700 .84rem/1.5 var(--u-etiq); letter-spacing: .16em; }
.dos-duree { margin-top: 14px !important; font: 700 clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem)/1.1 var(--u-titre-f); }
.dos-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin: 20px 0 0; }
.boite { padding: clamp(20px, 3vw, 32px); border-radius: 8px; background: var(--u-fond2); color: var(--u-texte); }
.boite p { margin: 0 0 1em; line-height: 1.7; }
.boite p:last-child { margin-bottom: 0; }
.boite ul { margin: 0 0 8px; padding-left: 1.1em; }
.boite li { margin-bottom: .35em; line-height: 1.55; }
.boite li::marker, .atelier li::marker, .dos-axes li::marker { color: var(--u-accent); }
.dos-fiche { display: grid; gap: 12px; margin: 0; }
.dos-fiche dt { font: 700 .74rem/1.3 var(--u-etiq); letter-spacing: .12em; text-transform: uppercase; color: var(--u-accent); }
.dos-fiche dd { margin: 2px 0 0; font-weight: 600; }
.dos-prod p { font-size: .92rem; }
.dos-s { margin: clamp(44px, 6vw, 76px) 0 0; }
.dos-h3 { margin: 0 0 18px; font: 700 clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem)/1.15 var(--u-titre-f); color: var(--u-accent); text-transform: uppercase; }
.dos-h4 { margin: 1.5em 0 .45em; font: 700 .86rem/1.4 var(--u-etiq); letter-spacing: .08em; text-transform: uppercase; color: var(--u-accent); }
.boite > .dos-h4:first-child { margin-top: 0; }
.table-wrap { overflow-x: auto; border-radius: 8px; background: var(--u-fond2); }
/* (au téléphone, le tableau des programmes défile de côté : la bande prend le focus du clavier, ses flèches le font défiler) */
.table-wrap:focus-visible { outline: 2px solid var(--u-vif); outline-offset: 2px; }
.dos-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.dos-table th, .dos-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--u-accent2) 45%, transparent); }
.dos-table th[scope="rowgroup"] { width: 4.8rem; background: var(--u-accent); color: #fff; font: 700 1.05rem/1.2 var(--u-titre-f); text-align: center; vertical-align: middle; border-bottom-color: rgba(255, 255, 255, .4); }
.dos-table th[scope="row"] { width: 7.4rem; color: var(--u-texte); font-weight: 700; }
.dos-table td:last-child { color: var(--u-texte2); }
.dos-pres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.dos-pres .boite:first-child { grid-column: 1 / -1; }
.dos-chapeau { font-weight: 700; font-size: 1.1rem; }
.dos-note { display: inline-block; margin: 0 0 14px !important; padding: 5px 12px; border-radius: 4px; background: var(--u-accent); color: #fff; font: 700 .76rem/1.3 var(--u-etiq); letter-spacing: .14em; }
.dos-demandes { display: grid; gap: 8px; margin: 16px 0; padding: 18px 22px !important; border-radius: 6px; background: var(--u-accent); color: #fff; list-style: none; font: 700 .95rem/1.4 var(--u-titre-f); letter-spacing: .02em; }
.dos-demandes li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; border-radius: 50%; background: #fff; vertical-align: .1em; }
.dos-axes { padding-left: 1.2em; }
.dos-axes li { margin-bottom: .5em; }
.dos-ateliers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 26px; align-items: start; }
.atelier { position: relative; padding: clamp(22px, 3vw, 32px); border-top: 4px solid var(--u-accent); border-radius: 8px; background: var(--u-fond2); }
.atelier p { margin: 0 0 .9em; line-height: 1.65; }
.atelier-n { position: absolute; right: 18px; top: 12px; font: 700 2.6rem/1 var(--u-titre-f); color: color-mix(in srgb, var(--u-accent) 22%, transparent); }
.atelier > .dos-h4:first-of-type { margin-top: 0; padding-right: 48px; font-size: .98rem; }
.etape { margin: 14px 0 0; padding: 14px 16px; border-radius: 6px; background: var(--u-fond); }
.etape h4 { margin: 0 0 6px; font: 600 .98rem/1.4 var(--u-corps); color: var(--u-texte); }
.etape p { margin: 0; }
.atelier ul { margin: .6em 0 0; padding-left: 1.1em; }
.atelier li { margin-bottom: .5em; line-height: 1.55; }
.atelier-ph img { width: 100%; height: auto; aspect-ratio: auto 3 / 2; border-radius: 8px; }
.dos-accueil { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.dos-fiche-t { margin: 0 0 10px !important; font: 700 1.3rem/1.2 var(--u-titre-f); color: var(--u-accent); text-transform: uppercase; }
.dos-alerte { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 22px; padding: 18px 20px; border: 2px solid var(--u-accent); border-radius: 8px; background: var(--u-fond2); }
.dos-alerte svg { flex: none; width: 26px; height: 26px; color: var(--u-accent); }



/* ———————————— le mouvement (règle 15) : l'organique, rangé (la 10) ; voir le bloc « Mouvement » en tête du script ————————————
   Une famille de courbes souples (--k-doux ; --k-souple, un rien de rebond, jamais de secousse) ; survol 180 ms, pression
   60 ms, page 440 ms au plus ; tout monte de 10 px. Aucune View Transition : l'encre, la floraison et le menu qui glisse font
   la page (la capture d'un écran entier coûte, et rien n'y gagne). */
html { view-transition-name: none; }
/* l'encre d'un spectacle (Encre) : une toile fixe au-dessus de tout ; tant qu'elle couvre l'écran, c'est elle qu'on touche */
.encre-page { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; pointer-events: none; }
.encre-page.couvre { pointer-events: auto; }
/* le rideau (Rideau) : à chaque page qu'on ouvre par le menu depuis une autre (jamais vers l'accueil), un court noir où la pieuvre nage (la créature, ses vraies
   tentacules), puis le rideau s'ouvre en deux, comme au théâtre, et la pieuvre remonte à sa place dans le menu ; la page,
   déjà là dessous, se compose alors ligne à ligne (composer). Au-dessus de tout, sauf le menu (le haut, et au téléphone la
   barre du bas, qu'il porte), qui reste là, à sa place, tant qu'il est fermé (html.rideau-ferme) ; sous la pieuvre */
.rideau { position: fixed; inset: 0; z-index: 2147483002; pointer-events: auto; overflow: hidden; contain: strict; }
html.rideau-ferme :is(.top, .entrees.en-bas) { z-index: 2147483003; }   /* (au téléphone, la barre du bas est sortie du haut : top.after) */
.rideau.leve { pointer-events: none; }
.rideau > i { position: absolute; top: 0; bottom: 0; width: 50.5%; background: #0b0709; }
.rideau > .rideau-g { left: 0; }
.rideau > .rideau-d { right: 0; }
/* (le bord de chaque pan, là où ils se rejoignent : un mince liseré à la couleur de la saison, peu de chose à peindre) */
.rideau > i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: color-mix(in srgb, var(--saison-vive) 30%, #0b0709); }
.rideau > .rideau-g::after { right: 0; }
.rideau > .rideau-d::after { left: 0; }
/* (sans créature : le dessin de la pieuvre, qui flotte et respire au milieu) */
.rideau-pieuvre { position: absolute; left: 50%; top: 50%; width: min(150px, 36vw); margin: 0; translate: -50% -50%; color: var(--saison-vive); animation: rideau-nage .62s ease-in-out infinite alternate; }
.rideau-pieuvre svg { display: block; width: 100%; height: auto; }
.rideau.leve .rideau-pieuvre { opacity: 0; transition: opacity .2s; }
@keyframes rideau-nage { from { transform: translateY(6px) scale(1.04, .94); } to { transform: translateY(-8px) scale(.96, 1.05); } }
/* la page qui se compose : un trait de lumière descend l'écran, à la ligne qui s'écrit */
.compose-trait { position: fixed; left: 0; right: 0; top: 0; z-index: 89; height: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--saison-vive) 70%, transparent) 30%, #fff 50%, color-mix(in srgb, var(--saison-vive) 70%, transparent) 70%, transparent);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--saison-vive) 55%, transparent); }
/* une page qui arrive : son titre fleurit (il se dépose), le bras d'encre arrive du bord de l'écran, le souligne et s'enroule */
.fleur { position: relative; display: inline-block; max-width: 100%; padding-bottom: 22px; --trait: var(--saison-vive); }   /* (max-width : un mot trop long s'y coupe, voir h1 ; la boucle est à son échelle 1:1, son trait de 3 px au bas du bloc, dans l'axe du bras) */
.fleur::after { content: ""; position: absolute; left: -100vw; right: 31px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--trait); }
.fleur::before { content: ""; position: absolute; right: 0; bottom: 0; width: 32px; height: 32px; background: var(--trait);
  -webkit-mask: var(--boucle) 0 0 / 100% 100% no-repeat; mask: var(--boucle) 0 0 / 100% 100% no-repeat; }
main.arrive .fleur { animation: k-fleurit .36s var(--k-doux) both; }
main.arrive .fleur::after { transform-origin: 0 50%; animation: k-bras .42s var(--k-doux) .02s both; }
main.arrive .fleur::before { animation: k-boucle .24s var(--k-souple) .2s both; }
@keyframes k-fleurit { from { opacity: .15; transform: translateY(var(--k-monte)); } }
@keyframes k-bras { from { transform: scaleX(0); } }
@keyframes k-boucle { from { opacity: 0; transform: scale(.2) rotate(-120deg); } }
/* entre les onglets d'un spectacle, l'ouverture ne rejoue rien */
.sp-une.deja .u-titre .ligne, .sp-une.deja .une-acc { animation: none !important; }
/* au défilement (MOUVEMENT.reveler) : les titres se déposent, les lignes et les fiches se déroulent l'une après l'autre, les
   filets et les petits bras sous les titres se tracent */
[data-mv].mv-attente { transition: opacity .44s var(--k-doux), transform .44s var(--k-doux), clip-path .5s var(--k-doux); transition-delay: var(--mv-delai, 0ms); }
[data-mv="monte"].mv-attente:not(.mv-vu) { transform: translateY(var(--k-monte)); }
[data-mv="cascade"].mv-attente > * { transition: opacity .4s var(--k-doux), transform .44s var(--k-doux); transition-delay: calc(var(--mv-delai, 0ms) + min(var(--mv-i, 0), 12) * 40ms); }
[data-mv="cascade"].mv-attente:not(.mv-vu) > * { transform: translateY(var(--k-monte)); }
svg[data-mv="trace"].mv-attente [pathLength] { transition: stroke-dashoffset var(--k-lent) var(--k-doux) var(--mv-delai, 0ms); }
section.bloc { position: relative; border-top: 0; }
.filet { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--filet); transform-origin: 0 50%; pointer-events: none; }
.filet[data-mv="trace"].mv-attente { transition: transform var(--k-lent) var(--k-doux); }
/* la pression : une ventouse se pose sous le doigt (.succion, à la couleur de ce qu'on presse), la pièce s'enfonce d'un rien */
.succion { position: fixed; z-index: 95; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none;
  border: 2.5px solid var(--sc, var(--saison-vive)); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--sc, var(--saison-vive)) 22%, transparent); opacity: 0; }
:is(.bouton, .bu, .puce, .idx-tout, .idx, .som-b, .entrees a, .dos-bt, .fu-a, .suivant, .u-onglets a, .rs-date, .rs-reserver, .rs-seance, .lc-b, .s7-chip, .s7-rac button, .ep-bt, .psom-l button) {
  transition-property: background-color, color, border-color, box-shadow, scale; transition-duration: var(--k-survol), var(--k-survol), var(--k-survol), var(--k-survol), .12s; transition-timing-function: var(--k-doux); }
:is(.bouton, .bu, .puce, .idx-tout, .idx, .som-b, .entrees a, .dos-bt, .u-onglets a, .rs-date, .rs-reserver, .rs-seance, .lc-b, .s7-chip, .s7-rac button, .ep-bt, .psom-l button, .tr6-p).mv-presse { scale: .96; transition-duration: var(--k-presse); }
:is(.fu-a, .tdm-a, .ep-porte, .fp-ph, .ac-ph, .dos-appel, .sai > summary).mv-presse { scale: .985; transition: scale var(--k-presse); }
.voisin--ap.mv-presse .fleche { translate: 6px 0; }
.voisin--av.mv-presse .fleche { translate: -6px 0; }
.dates > li .t.mv-presse, .prochaines a.mv-presse { opacity: .75; }
/* ce qui vit : « en tournée » respire comme une ventouse (elle se creuse et se gonfle) */
.fu-badge.tournee::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: .1em; animation: respire 2.2s ease-in-out infinite; }
@keyframes respire { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
/* une ligne vers laquelle mène un repère de frise s'allume un instant */
.dates > li.est-vise, .sa-dates > li.est-vise { animation: vise 1.4s var(--k-doux); }
@keyframes vise { 0%, 35% { background: color-mix(in srgb, var(--saison-vive) 16%, transparent); } }

/* les longs contenus se rendent par morceaux : ce qui est hors de l'écran n'est mis en page qu'à son arrivée */
.fp { content-visibility: auto; contain-intrinsic-size: auto 680px; }
.ac { content-visibility: auto; contain-intrinsic-size: auto 860px; }
article.u .chap { content-visibility: auto; contain-intrinsic-size: auto 1000px; }

/* ———— les frises (FRISE), sur le papier de la synthèse, dans la langue de la 10 : un bras d'encre et ses ventouses ————
   L'axe est un bras qui s'effile (épais au départ, fin au bout) ; chaque date, une ventouse à la couleur de son spectacle
   (pleine à venir, vidée une fois jouée) ; « aujourd'hui », une goutte d'encre dont le cœur bat ; les saisons et la
   diffusion, des bras qui poussent du grand bras, longs comme le nombre de leurs dates. Survolée, une ventouse se gonfle,
   souple (--fr-courbe). Les scolaires gardent leur losange, les résidences leur carré évidé (la légende, règle 23). */
.frise[data-frise] { --fr-fond: var(--papier); --fr-encre: var(--encre); --fr-trait: color-mix(in srgb, var(--encre) 26%, transparent); --fr-accent: var(--saison-texte);
  --fr-police: var(--sans); --fr-bulle-fond: var(--encre); --fr-bulle-encre: var(--papier); --fr-point: 12px; --fr-couloir: 18px; --fr-courbe: var(--k-souple);
  --fr-bras: color-mix(in srgb, var(--encre) 62%, transparent); }
.frise[data-frise] .frise-axe { height: 7px; margin-top: -3.5px; border-radius: 4px; background: var(--fr-bras); clip-path: polygon(0 0, 100% 38%, 100% 62%, 0 100%); }
.frise[data-frise].frise--v .frise-axe { width: 7px; height: auto; margin: 0 0 0 -3.5px; clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%); }
.frise[data-frise] .frise-point:not(.est-scolaire, .est-annule, .est-duree, .est-residence) > .frise-repere::before {
  background: radial-gradient(circle, var(--fr-c, currentColor) 0 2.4px, var(--fr-fond) 2.9px 3.9px, var(--fr-c, currentColor) 4.4px); }
.frise[data-frise] .frise-point.est-passe:not(.est-scolaire, .est-annule, .est-duree, .est-residence) > .frise-repere::before {
  background: radial-gradient(circle, var(--fr-fond) 0 3.6px, var(--fr-c, currentColor) 4.2px); }
.frise[data-frise] .frise-point > .frise-repere::before { transition: scale var(--k-survol) var(--k-souple), opacity .16s; }
.frise[data-frise] .frise-point > .frise-repere:is(:focus-visible)::before { scale: 1.4; }
@media (hover: hover) { .frise[data-frise] .frise-point > .frise-repere:is(:hover)::before { scale: 1.4; } }
.frise[data-frise] .frise-point.est-duree > .frise-repere:is(:focus-visible)::before { scale: 1 1.6; }
@media (hover: hover) { .frise[data-frise] .frise-point.est-duree > .frise-repere:is(:hover)::before { scale: 1 1.6; } }
.frise[data-frise] .frise-aujourdhui::before { opacity: .45; }
.frise[data-frise] .frise-aujourdhui::after { left: -7px; bottom: -6px; width: 14px; height: 14px; border-radius: 50% 0 50% 50%; rotate: -45deg; background: var(--saison-vive); box-shadow: 0 0 0 2px var(--fr-fond); }
.frise[data-frise] .frise-souffle { left: -7px; bottom: -6px; width: 14px; height: 14px; background: var(--saison-vive); }
.frise[data-frise].est-vue:not(.est-immobile) .frise-souffle { animation: k-coeur 1.8s ease-out 1s infinite; }
.frise[data-frise].frise--v .frise-aujourdhui::after, .frise[data-frise].frise--v .frise-souffle { left: calc(var(--fr-axe) - 7px); top: -7px; bottom: auto; }
@keyframes k-coeur { 0% { opacity: 0; scale: 1; } 8% { opacity: .55; scale: 1.9; } 18% { opacity: 0; scale: 2.3; } 26% { opacity: .45; scale: 2; } 40%, 100% { opacity: 0; scale: 2.8; } }
.frise[data-frise] .frise-bande-barre { border-radius: 999px 999px 2px 2px / 14px 14px 2px 2px; }
.frise[data-frise] .frise-bande > .frise-repere:is(:focus-visible) .frise-bande-barre, .frise[data-frise] .frise-bande.est-allume .frise-bande-barre { scale: 1.08 1.05; }
@media (hover: hover) { .frise[data-frise] .frise-bande > .frise-repere:is(:hover) .frise-bande-barre { scale: 1.08 1.05; } }
.frise[data-frise] .frise-bande-barre { transition: transform .3s var(--k-souple), scale var(--k-survol) var(--k-souple), opacity .16s; }
.frise .frise-mois-nom { font: 500 .92rem/1.1 var(--titre); }
.frise .frise-an { font: 500 .72rem/1.3 var(--sans); letter-spacing: .06em; }
.frise .frise-aujourdhui-nom { font: 600 .66rem/1 var(--etiq); letter-spacing: .12em; text-transform: uppercase; }
/* (« aujourd'hui » paraît avec sa frise, d'un fondu bref et sans attendre l'axe : il se lit dès que la frise est à l'écran) */
.frise[data-frise].est-vue .frise-aujourdhui { animation-duration: .25s; animation-delay: 0s; }
.frise .frise-bulle { font: 400 .86rem/1.4 var(--sans); box-shadow: 0 14px 30px -14px rgba(29, 20, 24, .55); }
.frise .frise-bulle b { font: 500 1.08rem/1.2 var(--titre); }
.frise .frise-grappe-n { font-family: var(--sans); }
.v-frise, .sa-frise, .e-frise { margin: 0 0 26px; }
/* la légende d'une frise de dates (règle 23) : les signes de ses repères, quand elle en mêle : tout public (le point),
   scolaire (le losange), résidence (le carré évidé de FRISE) */
.fr-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: -12px 0 24px; padding: 0; font: 500 .84rem/1.3 var(--sans); color: var(--gris); }
.fr-legende li { display: inline-flex; align-items: center; gap: 8px; }
.fr-legende i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.fr-legende .fr-l-sco i { width: 9px; height: 9px; border-radius: 2px; rotate: 45deg; }
.fr-legende .fr-l-res i { border-radius: 2px; background: none; box-shadow: inset 0 0 0 2px currentColor; }
.u .fr-legende { color: var(--u-texte2); }
.u-frise + .fr-legende { margin-top: calc(-1 * clamp(14px, 2.4vw, 28px)); }
/* ———— la saison en cours (#/saisons, composée comme la 07, dans la langue de la 10) ————
   La tête de page en grand (la compagnie en capitales espacées, « Saisons » sur un lavis de la saison ; ses raccourcis,
   chacun sa ventouse) ; la recherche soulignée d'un filet qui prend l'encre ; les spectacles en étiquettes droites, une
   pastille à leur couleur (choisi : le cadre s'encre). Puis la saison sous sa marque : son titre, la ventouse de la saison,
   « la saison en cours », un filet ; sa frise (le bras de la saison, ses ventouses, « aujourd'hui » une goutte qui bat) et sa
   légende ; ses prochaines dates et toutes ses dates (une ventouse à la couleur du spectacle, le jour en grand, le titre dans
   la police de son univers), à côté de sa carte, qui écrit sous elle la commune survolée. L'encre vive est la couleur de la
   saison (--saison-vive), le noir celui de la synthèse. */
.s7-entete { padding: clamp(20px, 3vw, 40px) 0 clamp(4px, 1vw, 12px); background: radial-gradient(min(62rem, 150vw) min(34rem, 100vw) at 14% 0, color-mix(in srgb, var(--saison-vive) 13%, transparent), transparent 72%) no-repeat; }
/* (la tête sur deux lignes : le titre, puis les raccourcis et, au bout, la recherche ; au téléphone, la recherche monte à côté
   du titre et les raccourcis passent dessous) */
.s7-e { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); grid-template-areas: "titre titre" "rac cherche"; align-items: center; gap: clamp(10px, 1.4vw, 18px) clamp(18px, 2.6vw, 36px); }
.s7-titre { grid-area: titre; margin: 0; font: 500 clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem)/.98 var(--titre); letter-spacing: -.015em; text-wrap: balance; overflow-wrap: break-word; }
.s7-rac { grid-area: rac; list-style: none; display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 2.6vw, 36px); margin: 0; padding: 0; }
.s7-e .s7-cherche-c { grid-area: cherche; }
.s7-e .s7-cherche { max-width: none; }
@media (max-width: 759px) {
  .s7-e { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "titre cherche" "rac rac"; align-items: end; gap: 6px 18px; }
  .s7-titre { font-size: 2.5rem; }
  .s7-titre .fleur { padding-bottom: 20px; }   /* (de quoi loger la boucle, 32 px, sous le mot sans qu'elle le touche) */
  .s7-e .s7-cherche { margin-bottom: 8px; }
  .s7-rac { gap: 0 18px; }
  .s7-rac button { font-size: .875rem; }
}
.s7-rac button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: color-mix(in srgb, var(--encre) 86%, transparent);
  font: 600 .95rem/1.2 var(--texte); text-align: left; cursor: pointer; }
@media (hover: hover) { .s7-rac button:hover { color: var(--encre); } }
.s7-lampe { flex: none; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, var(--saison-vive) 0 2px, var(--papier) 2.5px 3.3px, var(--saison-vive) 3.8px);
  transition: scale var(--k-survol) var(--k-souple); }
.s7-rac button:is(:focus-visible) .s7-lampe { scale: 1.4; }
@media (hover: hover) { .s7-rac button:is(:hover) .s7-lampe { scale: 1.4; } }
.s7-cherche { position: relative; display: block; max-width: 24rem; }
.s7-cherche svg { position: absolute; left: 2px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--gris); stroke-width: 1.6; stroke-linecap: round; }
.s7-cherche input { width: 100%; padding: .6rem .5rem .6rem 1.9rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--encre) 34%, transparent); border-radius: 0; background: transparent;
  font: 400 1rem var(--texte); color: var(--encre); -webkit-appearance: none; appearance: none; transition: border-color var(--k-survol) var(--k-doux), box-shadow var(--k-survol) var(--k-doux); }
.s7-cherche input::placeholder { color: var(--gris); opacity: 1; }
.s7-cherche input:focus { outline: none; border-bottom-color: var(--saison-vive); box-shadow: inset 0 -1px 0 var(--saison-vive); }
/* (ce que la recherche propose : une liste sous le champ, les spectacles à leur couleur puis les communes ; la proposition visée
   à la flèche ou à la souris prend l'aplat de la saison, son filet à gauche) */
.s7-cherche-c { position: relative; min-width: 0; }
.s7-props { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; min-width: min(20rem, calc(100vw - 2 * var(--gout))); max-height: min(24rem, 60vh); overflow-y: auto;
  overscroll-behavior: contain; padding: 6px; border: 1px solid var(--filet); border-radius: 12px; background: var(--papier-2); box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .75); }
.s7-props[hidden] { display: none; }
.s7-props-t { margin: 8px 10px 4px; font: 600 .72rem/1.3 var(--etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.s7-prop { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border-radius: 8px; color: var(--encre); font: 500 .95rem/1.25 var(--texte); cursor: pointer; }
.s7-prop i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.s7-prop[aria-selected="true"] { background: color-mix(in srgb, var(--saison-vive) 20%, transparent); box-shadow: inset 3px 0 0 var(--saison-vive); }
@media (forced-colors: active) { .s7-prop[aria-selected="true"] { outline: 2px solid Highlight; } }
@media (max-width: 759px) { .s7-e .s7-props { left: auto; } }
.s7-chips { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.s7-chip { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .38rem .85rem; border: 1px solid color-mix(in srgb, var(--encre) 30%, transparent); border-radius: 0; background: transparent;
  font: 600 .875rem/1.2 var(--texte); color: color-mix(in srgb, var(--encre) 86%, transparent); text-align: left; cursor: pointer; }
.s7-chip i { flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--c, var(--gris)); }
@media (hover: hover) { .s7-chip:hover { color: var(--encre); border-color: var(--c, var(--saison-vive)); } }
.s7-chip[aria-pressed="true"] { color: var(--encre); border-color: var(--c, var(--saison-vive)); background: color-mix(in srgb, var(--c, var(--saison-vive)) 12%, transparent); box-shadow: inset 0 0 0 1px var(--c, var(--saison-vive)); }
.s7-chip .croix { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* (une puce qui ne garderait rien, ajoutée aux filtres en cours, est éteinte : estompée, son nombre à 0, ni survol ni pression) */
:is(.s7-chip, .sm7-b)[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
:is(.s7-chip, .sm7-b)[aria-disabled="true"]:is(.mv-presse) { scale: none; color: color-mix(in srgb, var(--encre) 86%, transparent); border-color: color-mix(in srgb, var(--encre) 30%, transparent); background: transparent; }
@media (hover: hover) { :is(.s7-chip, .sm7-b)[aria-disabled="true"]:is(:hover) { scale: none; color: color-mix(in srgb, var(--encre) 86%, transparent); border-color: color-mix(in srgb, var(--encre) 30%, transparent); background: transparent; } }
.sm7 .sm7-b[aria-disabled="true"] .sm7-v { scale: none; filter: grayscale(1); }
.s7-chip--lieu { --c: var(--saison-vive); }
/* (une puce ne dépasse jamais sa rangée : un titre trop long, « Mon Royaume pour un cheval – Romeo & Juliet » au téléphone,
   s'abrège d'une ellipse ; le texte entier reste dans la page, pour les lecteurs d'écran) */
.s7-chip { max-width: 100%; }
.s7-ct { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s7 { padding: clamp(.75rem, 1.6vw, 1.5rem) 0 clamp(3.5rem, 7vw, 6rem); }
.s7-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.5rem; padding-bottom: clamp(.6rem, 1vw, .9rem); border-bottom: 1px solid var(--saison-vive); }
.s7-t { margin: 0; font: 500 clamp(1.875rem, 1.2rem + 2.2vw, 3.25rem)/1 var(--titre); letter-spacing: -.012em; }
.s7-k { display: flex; align-items: center; gap: .7rem; margin: 0; font: 600 .8125rem/1.3 var(--etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--saison-texte); }
.s7-gel { flex: none; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, var(--saison-vive) 0 2.4px, var(--papier) 2.9px 3.9px, var(--saison-vive) 4.4px); }
/* la saison d'un regard : la frise des mois et, à côté, la carte qui s'approche de la ville de la date (la loupe), puis les
   prochaines dates et toutes les dates de la saison sous la frise, la carte épinglée à côté (elle suit la lecture). Au
   téléphone, la frise défile au doigt (aimantée aux mois, posée sur le mois en cours), la loupe en carte sous elle */
.ag7 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-areas: "frise carte" "proch carte" "toutes carte"; grid-template-rows: auto auto 1fr;
  gap: 2.75rem clamp(2rem, 4vw, 4rem); align-items: start; margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.fs7 { grid-area: frise; min-width: 0; }
.s7 [data-tard], main > [data-tard] { display: none; }
/* le sous-menu de la saison (comme celui des univers d'un spectacle) : une seule ligne, arrimée sous le menu flottant quand on
   descend ; chaque spectacle qui tourne dans la saison (et lui seul), sa vignette (sa photo, cadrée sur sa zone d'intérêt)
   cerclée de sa couleur, celle de ses dates sur la frise, son titre et le nombre de ses dates. En survoler un isole ses dates,
   le choisir filtre la page (le choisir encore la rend) ; arrimé, le nom de la saison paraît à gauche. Le spectacle choisi
   teinte la bande et prend le fond de la saison : sa photo, à peine, sous un voile de sa couleur qui se fond dans la nuit.
   Les saisons passées ont leur rangée, de leurs spectacles, à leur place (elle ne s'arrime pas : leur bande des saisons, si) */
.s7, .p4 { position: relative; isolation: isolate; }
.s7 { --sm7-h: 66px; }
.sm7 { --sm-fond: var(--papier); position: sticky; top: calc(var(--haut) - 8px); z-index: 24; margin: 0 0 clamp(.5rem, 1.2vw, 1.25rem); background: transparent; }
.sm7.est-choisi { --sm-fond: color-mix(in srgb, var(--sc, var(--saison-vive)) 14%, var(--papier)); }
.sm7.colle { background: var(--sm-fond); box-shadow: 0 1px 0 var(--filet), 0 0 0 100vmax var(--sm-fond); clip-path: inset(calc(-1 * var(--haut)) 0 -1px 0); }
.sm7-in { display: flex; align-items: center; gap: 14px; min-height: var(--sm7-h); }
.sm7-nom { flex: none; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font: 500 1.06rem/1.2 var(--titre); color: var(--encre);
  transition: max-width var(--k-page) var(--k-doux), opacity var(--k-survol) var(--k-doux); }
.sm7.colle .sm7-nom { max-width: 14rem; opacity: 1; }
/* (la rangée déborde : un fondu au bord où il reste à voir, posé par le défilement (.a-gauche, .a-droite) ; au bureau, deux
   flèches rondes sur ces bords, chacune cachée quand on est au bout ; elle s'aimante à une vignette ; au clavier, les flèches
   gauche et droite, Début et Fin, vont d'un spectacle à l'autre) */
@property --sm7-fg { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sm7-fd { syntax: '<length>'; inherits: false; initial-value: 0px; }
.sm7-cadre { position: relative; flex: 1; min-width: 0; }
.sm7-l { --sm7-fondu: 44px; display: flex; align-items: center; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: 40px; padding: 5px 2px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--sm7-fg), #000 calc(100% - var(--sm7-fd)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--sm7-fg), #000 calc(100% - var(--sm7-fd)), transparent);
  transition: --sm7-fg var(--k-survol) var(--k-doux), --sm7-fd var(--k-survol) var(--k-doux); }
.sm7-l.a-gauche { --sm7-fg: var(--sm7-fondu); }
.sm7-l.a-droite { --sm7-fd: var(--sm7-fondu); }
.sm7-l::-webkit-scrollbar { display: none; }
.sm7-f { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 1px solid color-mix(in srgb, var(--encre) 22%, transparent); border-radius: 50%;
  background: var(--sm-fond); color: var(--encre); cursor: pointer; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden;
  transition: opacity var(--k-survol) var(--k-doux), border-color var(--k-survol) var(--k-doux), background-color var(--k-survol) var(--k-doux), visibility 0s var(--k-survol); }
.sm7-f[data-sens="-1"] { left: -6px; }
.sm7-f[data-sens="1"] { right: -6px; }
.sm7-f.est-visible { opacity: 1; visibility: visible; transition: opacity var(--k-survol) var(--k-doux), border-color var(--k-survol) var(--k-doux), background-color var(--k-survol) var(--k-doux); }
@media (hover: hover) { .sm7-f:hover { border-color: var(--encre); background: color-mix(in srgb, var(--encre) 10%, var(--sm-fond)); } }
.sm7-f svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse), (max-width: 759px) { .sm7-f { display: none; } }
@media (prefers-reduced-motion: reduce) { .sm7-l { transition: none; } }
.sm7-b { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; max-width: 16.5rem; padding: 5px 14px 5px 5px; border: 0; border-radius: 999px;
  background: none; color: color-mix(in srgb, var(--encre) 86%, transparent); font: 600 .9rem/1.2 var(--texte); text-align: left; cursor: pointer; scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--k-survol) var(--k-doux), color var(--k-survol) var(--k-doux); }
.sm7-b:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.sm7-v { position: relative; flex: none; display: block; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--c); box-shadow: 0 0 0 2px var(--sm-fond), 0 0 0 4px var(--c);
  transition: scale var(--k-survol) var(--k-souple); }
.sm7-v img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sm7-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (hover: hover) { .sm7-b:hover { background: color-mix(in srgb, var(--c) 11%, transparent); color: var(--encre); } }
.sm7-b:is(:focus-visible) .sm7-v { scale: 1.06; }
@media (hover: hover) { .sm7-b:is(:hover) .sm7-v { scale: 1.06; } }
.sm7-b[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 24%, transparent); color: var(--encre); }
.sm7-b[aria-pressed="true"] .sm7-v { box-shadow: 0 0 0 2px var(--sm-fond), 0 0 0 5px var(--c); }
/* appelé (une date de la frise ou des listes survolée) : la vignette bondit et reste grossie, un anneau à sa couleur s'en
   échappe, une tentacule à sa couleur s'enroule autour d'elle et y pose ses ventouses ; le titre s'allume */
.sm7-tent { position: absolute; left: -4px; top: 50%; z-index: 1; width: 60px; height: 60px; margin-top: -30px; overflow: visible; pointer-events: none; opacity: 0;
  transition: opacity .3s var(--k-doux); }
.sm7-tent path { fill: none; stroke: var(--c); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s var(--k-doux); }
.sm7-tent circle { fill: var(--sm-fond); opacity: 0; transition: opacity .2s var(--k-doux); }
.sm7-b.est-appele { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--encre); }
.sm7-b.est-appele .sm7-v { scale: 1.16; animation: sm7-appel .62s var(--k-souple) both; }
.sm7-b.est-appele .sm7-tent { opacity: 1; transition-duration: .08s; }
.sm7-b.est-appele .sm7-tent path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s cubic-bezier(.3, .7, .2, 1) .04s; }
.sm7-b.est-appele .sm7-tent circle { opacity: 1; transition-delay: .4s; }
@keyframes sm7-appel {
  0% { scale: 1; rotate: 0deg; box-shadow: 0 0 0 2px var(--sm-fond), 0 0 0 4px var(--c), 0 0 0 4px color-mix(in srgb, var(--c) 60%, transparent); }
  30% { scale: 1.3; rotate: -8deg; }
  55% { scale: 1.08; rotate: 5deg; }
  75% { scale: 1.2; rotate: -2deg; }
  100% { scale: 1.16; rotate: 0deg; box-shadow: 0 0 0 2px var(--sm-fond), 0 0 0 4px var(--c), 0 0 0 16px transparent; }
}
.sm7-b small:empty, .s7-chip small:empty { display: none; }
.sm7-b small, .s7-chip small { flex: none; min-width: 1.45em; padding: 0 .35em; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--gris)) 24%, transparent); color: var(--encre);
  font: 700 .7rem/1.5 var(--texte); text-align: center; font-variant-numeric: tabular-nums; }
.sm7--passe { position: static; margin: 0 0 1.4rem; background: none; }
.sm7--passe .sm7-in { min-height: 0; }
.sm7--passe .sm7-l { flex-wrap: wrap; overflow: visible; padding-right: 2px; -webkit-mask-image: none; mask-image: none; }
.sm7--passe .sm7-f { display: none; }
.fe7-lg .s7-chip { gap: .6rem; }
.fe7-lg .s7-chip i { width: 22px; height: 12px; border-radius: 999px; }
/* le fond des saisons, au spectacle choisi */
.sf7 { position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: min(125vh, 1300px); overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .45s var(--k-doux);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 120px); mask-image: linear-gradient(180deg, transparent, #000 120px); }
.sf7.on { opacity: 1; }
/* (la photo à 26 %, sous au moins 45 % de nuit : même sa partie la plus claire laisse le texte gris AA, 5:1) */
.sf7 img { --cadre-y: .35; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .26; filter: saturate(.85); }
.sf7::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 78% 0, color-mix(in srgb, var(--c, transparent) 26%, transparent), transparent 70%),
  linear-gradient(180deg, color-mix(in srgb, var(--papier) 45%, transparent), color-mix(in srgb, var(--papier) 74%, transparent) 38%, var(--papier) 100%); }
.s7 .v-frise { min-height: 196px; margin: 0; }
/* la frise des mois : douze colonnes de septembre à août, le nom de chaque mois (et son année), le bras de la saison qui
   les traverse (plein jusqu'à aujourd'hui, la goutte qui bat), puis chaque date sous son mois, dans l'ordre : une ventouse
   à la couleur de son spectacle où son jour est écrit (vidée une fois jouée ; une résidence, cerclée de pointillés).
   Survoler un mois le choisit, choisir une date ne garde qu'elle : les autres s'éteignent, sans disparaître */
.fm7 { --col: 54px; position: relative; display: block; color: var(--encre); }
.fm7-piste { position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -6px; padding: 0 6px 4px; }
.fm7-piste::-webkit-scrollbar { display: none; }
.fm7-mois { list-style: none; position: relative; display: grid; grid-template-columns: repeat(var(--n, 12), minmax(var(--col), 1fr)); min-width: calc(var(--n, 12) * var(--col)); margin: 0; padding: 0; }
.fm7-m { position: relative; display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; scroll-margin-left: 6px; }
.fm7-m::before { content: ""; position: absolute; inset: 0 2px -2px; border-radius: 12px 12px 8px 8px; background: transparent; pointer-events: none; transition: background-color var(--k-survol) var(--k-doux), box-shadow var(--k-survol) var(--k-doux); }
.fm7-m.est-survol::before { background: color-mix(in srgb, var(--saison-vive) 7%, transparent); }
.fm7-m.est-choisi::before { background: color-mix(in srgb, var(--saison-vive) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--saison-vive) 55%, transparent); }
.fm7-tete { position: relative; display: grid; align-content: start; justify-items: stretch; gap: 3px; min-height: 52px; padding: 8px 6px 6px 8px; border: 0; border-radius: 12px 12px 0 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fm7-tete:focus-visible { outline: 2px solid var(--saison-vive); outline-offset: -2px; }
.fm7-nom { font: 500 1rem/1.1 var(--titre); letter-spacing: -.005em; }
.fm7-sous { display: flex; align-items: center; justify-content: space-between; gap: 2px; min-height: 1.4em; }
.fm7-an { font: 600 .66rem/1.15 var(--etiq); letter-spacing: .12em; color: var(--gris); }
.fm7-n { min-width: 1.45em; padding: 0 .3em; border-radius: 999px; font: 700 .66rem/1.5 var(--sans); font-variant-numeric: tabular-nums; text-align: center;
  color: var(--gris); background: color-mix(in srgb, var(--encre) 8%, transparent); transition: color var(--k-survol) var(--k-doux), background-color var(--k-survol) var(--k-doux); }
.fm7-m:is(.est-survol, .est-choisi) .fm7-n { color: var(--nuit); background: var(--saison-vive); }
.fm7-m.est-vide .fm7-nom { color: var(--gris); }
.fm7-m.est-passe:not(.est-choisi) .fm7-nom { color: color-mix(in srgb, var(--encre) 62%, transparent); }
/* le bras de la saison : un segment par mois, plein jusqu'à aujourd'hui (--x : sa place dans le mois en cours), une graduation
   à chaque mois ; la goutte d'aujourd'hui y bat, son nom dessous */
.fm7-axe { position: relative; display: block; height: 3px; margin: 2px 0 0; background: color-mix(in srgb, var(--saison-vive) 30%, transparent); transform-origin: 0 50%; }
.fm7-axe::before { content: ""; position: absolute; left: 0; top: -4px; width: 1px; height: 11px; background: color-mix(in srgb, var(--saison-vive) 55%, transparent); }
.fm7-m.est-passe .fm7-axe { background: var(--saison-vive); }
.fm7-m.est-courant .fm7-axe { background: linear-gradient(90deg, var(--saison-vive) var(--x), color-mix(in srgb, var(--saison-vive) 30%, transparent) var(--x)); }
.fm7-auj { position: absolute; left: var(--x); top: 1px; width: 0; height: 0; pointer-events: none; }
.fm7-auj::before, .fm7-souffle { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50% 0 50% 50%; rotate: -45deg; background: var(--saison-vive); }
.fm7-souffle { border-radius: 50%; rotate: none; opacity: 0; }
.fm7-auj-nom { position: absolute; left: 0; top: 10px; translate: -50% 0; white-space: nowrap; font: 700 .6rem/1 var(--etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--saison-texte); }
.fm7-m:first-child .fm7-auj-nom { translate: -10px 0; }
.fm7-m:last-child .fm7-auj-nom { translate: calc(-100% + 10px) 0; }
.fm7-jours { list-style: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 30px 0 10px; }
/* (les styles de base de FRISE posent .frise-point en absolu : ici, un repère est une pièce de la colonne) */
.fm7 .frise-point { position: relative; left: auto; top: auto; width: auto; height: auto; pointer-events: auto; transition: opacity var(--k-survol) var(--k-doux); }
.fm7-d { position: relative; display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 7px; border: 0; border-radius: 999px; background: var(--fr-c);
  color: var(--nuit); font: 700 .8125rem/1 var(--texte); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: scale var(--k-survol) var(--k-souple); }
/* (l'anneau d'une date allumée, survolée ou choisie : posé d'avance autour d'elle, il ne fait que paraître ; seules l'échelle
   et l'opacité bougent, jamais une ombre qu'il faudrait repeindre à chaque image) */
.fm7-d::after { content: ""; position: absolute; inset: -4px; border: 1.5px solid var(--fr-c); border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity var(--k-survol) var(--k-doux); }
.fm7-d:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.fm7 .frise-point.est-passe .fm7-d { background: transparent; color: color-mix(in srgb, var(--encre) 72%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fr-c) 80%, transparent); }
/* (une date jouée se lit sans la couleur : vidée, et cochée d'une pastille claire à son coin, la coche évidée ; Ci-gisait
   Cyrano, gris anthracite, garde ainsi ses dates à venir pleines et ses dates jouées vides et cochées, comme les autres, pour
   un daltonien aussi) */
.fm7 .frise-point.est-passe:not(.est-residence) .fm7-d::before { content: ""; position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; background: var(--encre); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M6 0a6 6 0 1 0 0 12A6 6 0 1 0 6 0zM2.9 6.1l1.2-1.2 1.4 1.4 2.9-2.9 1.2 1.2-4.1 4.1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M6 0a6 6 0 1 0 0 12A6 6 0 1 0 6 0zM2.9 6.1l1.2-1.2 1.4 1.4 2.9-2.9 1.2 1.2-4.1 4.1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.fm7 .frise-point.est-residence .fm7-d { background: transparent; color: var(--fr-c); box-shadow: none; outline: 1.5px dashed var(--fr-c); outline-offset: -1.5px; }
.fm7 .frise-point.est-annule .fm7-d { text-decoration: line-through; opacity: .7; }
.fm7 .frise-point:is(.est-allume, .est-focus, .lu) .fm7-d { scale: 1.12; }
@media (hover: hover) { .fm7 .frise-point:is(:hover) .fm7-d { scale: 1.12; } }
.fm7 .frise-point:is(.est-allume, .est-focus, .lu, .est-choisi) .fm7-d::after { opacity: 1; }
@media (hover: hover) { .fm7 .frise-point:is(:hover) .fm7-d::after { opacity: 1; } }
.fm7 .frise-point.est-choisi .fm7-d { scale: 1.14; }
.fm7 .frise-point.est-choisi .fm7-d::after { inset: -5px; border: 2px solid var(--encre); }
/* un filtre de la frise (un mois, une date) éteint les autres dates ; une puce de spectacle survolée isole les siennes */
.fm7.est-filtre .frise-point:not(.est-garde) { opacity: .2; }
.fm7.est-isole .frise-point:not(.est-sp) { opacity: .14; }
/* le mouvement : le bras se trace de mois en mois, puis les dates se posent dans l'ordre du temps ; aujourd'hui respire */
.fm7.est-attente .fm7-axe { transform: scaleX(0); }
.fm7.est-attente :is(.fm7-d, .fm7-auj) { opacity: 0; }
.fm7.est-vue .fm7-axe { animation: fm7-trace .3s linear calc(var(--i) * 28ms) backwards; }
.fm7.est-vue .fm7-d { animation: fm7-pose .36s var(--k-souple) calc(120ms + var(--t) * 400ms) backwards; }
.fm7.est-vue .fm7-auj { animation: fm7-parait .3s var(--k-doux) .4s backwards; }
.fm7 .fm7-souffle { animation: fm7-respire 2.6s ease-in-out 1s infinite; }
/* (un bureau étroit : la frise prend plus de place à côté de la loupe, ses colonnes se serrent, rien ne défile) */
@media (min-width: 1001px) and (max-width: 1240px) {
  .ag7 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .fm7 { --col: 47px; }
  .fm7-d { min-width: 30px; padding: 0 5px; font-size: .78rem; }
  .fm7-tete { padding-inline: 6px 4px; }
}
@keyframes fm7-trace { from { transform: scaleX(0); } }
@keyframes fm7-pose { from { opacity: 0; scale: .35; } }
@keyframes fm7-parait { from { opacity: 0; } }
@keyframes fm7-respire { 0% { opacity: .55; scale: 1; } 70%, 100% { opacity: 0; scale: 3.2; } }
/* les filtres en cours, sous la frise : chacun s'efface d'un geste, ou tous ensemble */
.ft7 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; min-height: 0; }
/* (les filtres en cours vivent dans la barre du bas, gros, au bureau comme au téléphone : sous la frise, ils ne se
   répètent pas) */
.fs7 > .ft7 { display: none; }
.ft7:empty { display: none; }
.ft7 .s7-chip { --c: var(--saison-vive); min-height: 40px; border-color: color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--encre); }
.ft7 .s7-chip i { background: var(--c); }
.ft7 .s7-chip .croix { margin-left: .15rem; opacity: .8; }
.ft7 > * { animation: fm7-parait .2s var(--k-doux) backwards; }
/* au téléphone, les filtres en bas de l'écran : une barre qui flotte (le pendant du menu, en haut), dès que la recherche et
   les puces du haut sont passées et jusqu'à l'alerte : « Filtres » et leur nombre, puis les filtres en cours (chacun s'efface
   d'un geste) et les mois de la saison, à choisir d'un doigt. « Filtres » ouvre le panneau, qui monte du bas (on le referme
   en le tirant vers le bas, d'un geste sur le voile, par sa croix ou Échap) : la recherche, les mois, les spectacles, les
   communes, puis « Voir les dates » et leur nombre, qui le referme sur elles. Au bureau, la barre ne porte que les filtres
   en cours, dès qu'il y en a : la frise et les puces sont à portée */
.bf7, .fe7 { display: none; }
@media (max-width: 759px) {
  .bf7 { position: fixed; z-index: 38; left: 8px; right: 8px; bottom: calc(10px + var(--bas)); display: flex; align-items: center; gap: 4px; height: 56px; padding: 6px; border-radius: 999px;
    background: color-mix(in srgb, var(--papier-2) 97%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 14%, transparent), 0 18px 38px -12px rgba(0, 0, 0, .95); transform: translateY(calc(100% + 28px)); visibility: hidden;
    transition: transform .34s var(--k-doux), visibility 0s .34s; }
  .bf7.est-visible { transform: none; visibility: visible; transition: transform .34s var(--k-doux); }
  .bf7-ouvrir { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 12px; border: 0; border-radius: 999px; background: var(--saison); color: #fff;
    font: 700 .74rem/1 var(--etiq); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .bf7-ouvrir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .bf7-ouvrir:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
  .bf7-n { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #fff; color: var(--saison); font: 700 .72rem/20px var(--texte); letter-spacing: 0; text-align: center; }
  .bf7-n:empty { display: none; }
  .bf7-puces { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 10px 0 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 18px), transparent); }
  .bf7-puces::-webkit-scrollbar { display: none; }
  .bf7-puces .s7-chip, .fe7 .s7-chip { flex: none; min-height: 44px; padding: .3rem .85rem; border-radius: 999px; }
  .bf7-puces .bf7-m { min-width: 52px; justify-content: center; font-family: var(--titre); font-weight: 500; font-size: .95rem; }
  .bf7-puces .bf7-m.est-passe { color: var(--gris); }
  .fe7:not([hidden]) { position: fixed; inset: 0; z-index: 60; display: block; }
  .fe7-voile { position: absolute; inset: 0; background: rgba(6, 3, 5, .64); animation: fm7-parait .24s var(--k-doux) backwards; }
  .fe7-panneau { position: absolute; left: 0; right: 0; bottom: var(--bas); display: flex; flex-direction: column; max-height: min(calc(88svh - var(--bas)), 760px);
    border-radius: 24px 24px 0 0; background: var(--papier-2); box-shadow: 0 -18px 44px -12px rgba(0, 0, 0, .85); animation: fe7-monte .32s var(--k-doux) backwards; }
  .fe7-panneau.est-tire { animation: none; transition: none; }
  .fe7-panneau.est-lache { transition: transform .26s var(--k-doux); }
  @keyframes fe7-monte { from { transform: translateY(100%); } }
  .fe7-prise { touch-action: none; cursor: grab; }
  .fe7-poignee { display: block; width: 44px; height: 5px; margin: 9px auto 0; border-radius: 3px; background: color-mix(in srgb, var(--encre) 30%, transparent); }
  .fe7-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px 4px 20px; }
  .fe7-t { margin: 0; font: 500 1.375rem/1.2 var(--titre); outline: none; }
  .fe7-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--encre); cursor: pointer; }
  .fe7-x .croix { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .fe7-corps { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 24px; overflow-y: auto; overscroll-behavior: contain; padding: 6px 20px 20px; }
  .fe7-corps .s7-cherche { max-width: none; }
  .fe7-h { margin: 0 0 10px; font: 600 .75rem/1.3 var(--etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
  .fe7-mois { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .fe7-m { display: grid; justify-items: start; gap: 2px; min-height: 54px; padding: 8px 10px; border: 1px solid var(--filet); border-radius: 14px; background: none; color: var(--encre);
    font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .fe7-m b { font: 500 1rem/1.1 var(--titre); }
  .fe7-m small { font: 700 .7rem/1.2 var(--texte); color: var(--gris); font-variant-numeric: tabular-nums; }
  .fe7-m[aria-pressed="true"] { border-color: var(--saison-vive); background: color-mix(in srgb, var(--saison-vive) 14%, transparent); box-shadow: inset 0 0 0 1px var(--saison-vive); }
  .fe7-m[aria-disabled="true"] { opacity: .36; cursor: default; }
  .fe7-puces { display: flex; flex-wrap: wrap; gap: 6px; }
  .fe7-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 14px; border-top: 1px solid var(--filet); }
  .fe7-voir { flex: 1; min-height: 52px; }
  .fe7-voir b { min-width: 1.6em; padding: 0 .4em; border-radius: 999px; background: rgba(255, 255, 255, .22); font-variant-numeric: tabular-nums; }
  html.fe7-ouvert { overflow: hidden; }
}
/* les filtres en cours, dans la barre du bas (au téléphone comme au bureau) : gros, teintés de leur couleur et cerclés
   d'elle, leur croix dans une pastille claire ; ils appellent le geste qui les efface. Un filtre qui arrive bat deux fois
   (une ventouse) ; à deux ou plus, « tout effacer » les suit */
.bf7-puces .s7-chip.est-actif { --c: var(--saison-vive); flex: none; min-height: 46px; gap: .5rem; padding: .3rem .4rem .3rem .95rem; border: 2px solid var(--c); border-radius: 999px;
  background: color-mix(in srgb, var(--c) 30%, var(--papier-2)); box-shadow: none; color: var(--encre); font: 600 1rem/1.15 var(--texte); }
.bf7-puces .s7-chip.est-actif i { background: var(--c); }
.bf7-puces .s7-chip.est-actif .croix { box-sizing: content-box; flex: none; width: 10px; height: 10px; padding: 7px; border-radius: 50%; background: var(--encre); stroke: var(--papier-2); stroke-width: 2.4;
  transition: background-color var(--k-survol) var(--k-doux); }
.bf7-puces .s7-chip.est-actif:is(:focus-visible) .croix { background: var(--c); }
@media (hover: hover) { .bf7-puces .s7-chip.est-actif:is(:hover) .croix { background: var(--c); } }
.bf7-tout { flex: none; white-space: nowrap; }
.bf7-etiq { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.still) .bf7-puces .s7-chip.est-neuf { animation: bf7-appel 1.1s var(--k-doux) 2; }
  @keyframes bf7-appel { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--c) 0%, transparent); } }
}
/* au bureau, les filtres en cours se collent aussi en bas de l'écran, au milieu, dès qu'il y en a (on les voit d'où que
   l'on soit, on les efface de là) ; ni « Filtres » ni les mois : la frise, la recherche et les puces sont à portée */
@media (min-width: 760px) {
  .bf7 { position: fixed; z-index: 38; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; max-width: min(980px, calc(100vw - 48px));
    padding: 8px 10px 8px 22px; border-radius: 999px; background: color-mix(in srgb, var(--papier-2) 97%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 16%, transparent), 0 22px 44px -14px rgba(0, 0, 0, .95);
    translate: -50% calc(100% + 44px); visibility: hidden; transition: translate .34s var(--k-doux), visibility 0s .34s; }
  .bf7.est-visible.a-filtres { translate: -50% 0; visibility: visible; transition: translate .34s var(--k-doux); }
  .bf7-ouvrir, .bf7 .bf7-m { display: none; }
  .bf7-etiq { display: block; flex: none; font: 600 .75rem/1 var(--etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
  .bf7-puces { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
  .bf7-puces::-webkit-scrollbar { display: none; }
}
.ag7 > .ag-listes { display: contents; }
.ag7-proch { grid-area: proch; min-width: 0; }
.ag7-toutes { grid-area: toutes; min-width: 0; }
.s7-h { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.25rem; font: 600 .875rem/1.3 var(--etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.s7-h::after { content: ""; flex: 1; height: 1px; background: var(--filet); }
.d7-mois + .d7-mois { margin-top: 2.5rem; }
.d7-mois-t { margin: 0; padding-bottom: .8rem; font: 600 .875rem/1.3 var(--etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
/* « Toutes les dates » garde son mois : l'intertitre reste arrimé en haut de l'écran, sous le menu et le sous-menu de la
   saison, tant qu'on lit ses dates (arrimé dans son mois, il part avec lui et le suivant prend sa place) ; dans une saison
   passée ouverte, sous la bande des saisons (--p4-idx : sa hauteur, mesurée). Un fond plein, et son filet du bas ; la page
   ne bouge pas d'un pixel (la marge rend ce que le fond prend au-dessus) */
.d7-mois-t { position: sticky; top: calc(var(--haut) - 8px + var(--sm7-h, 0px)); z-index: 3; margin-top: -.5rem; padding-top: .5rem; background: var(--papier); box-shadow: 0 1px 0 var(--filet); }
.p4-mois { position: sticky; top: calc(var(--haut) + var(--p4-idx, 61px)); z-index: 3; margin-top: -8px; padding-top: 8px; background: var(--papier); }
.d7s { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.d7 { position: relative; display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); gap: .3rem 2rem; padding: 1.25rem 0 1.3rem 1.6rem; border-bottom: 1px solid var(--filet); transition: background-color var(--k-survol) var(--k-doux); }
.d7::before { content: ""; position: absolute; left: 0; top: 1.62rem; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, var(--c) 0 2.4px, var(--papier) 2.9px 3.9px, var(--c) 4.4px);
  transition: scale var(--k-survol) var(--k-souple); }
.d7:is(.on, .est-allume, .lu)::before { scale: 1.4; }
@media (hover: hover) { .d7:hover::before { scale: 1.4; } }
.d7:is(.on, .est-allume) { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 11%, transparent), transparent 75%); }
.d7.est-vise { animation: vise 1.4s var(--k-doux); }
.d7 p { margin: 0; }
.d7-a, .d7-b { min-width: 0; }
.d7-quand { font: 500 1.375rem/1.15 var(--titre); }
.d7 :is(.d7-heure, .d7-ou) { margin-top: .25rem; font: 600 .9375rem/1.4 var(--texte); color: color-mix(in srgb, var(--encre) 86%, transparent); }
.d7 .d7-tag { display: inline-block; margin: .45rem .4rem 0 0; padding: .12rem .5rem; border: 1px solid color-mix(in srgb, var(--encre) 34%, transparent); font: 600 .6875rem/1.4 var(--etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.d7 .d7-tag--rs { border-style: dashed; }
.d7 .d7-etat { margin-top: .4rem; font: 600 .72rem/1.3 var(--etiq); letter-spacing: .1em; text-transform: uppercase; color: var(--saison-texte); }
.d7-t { font-family: var(--u-titre-f, var(--titre)); font-weight: var(--u-titre-g, 500); font-size: 1.375rem; line-height: 1.2; }
.d7-t a { text-decoration: none; background: linear-gradient(var(--c), var(--c)) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--k-doux); }
@media (hover: hover) { .d7-t a:hover { background-size: 100% 1px; } }
.d7 .d7-lieu { margin-top: .25rem; font-weight: 600; }
.d7-lieu a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--encre) 30%, transparent); text-underline-offset: 3px; }
@media (hover: hover) { .d7-lieu a:hover { text-decoration-color: var(--c); } }
.d7 .det { margin-top: .3rem; }
.d7--suite { display: block; padding-top: .6rem; }
.d7.est-passe :is(.d7-quand, .d7-t, .d7-lieu, .d7-heure) { color: var(--gris); }
.d7.est-passe::before { background: radial-gradient(circle, var(--papier) 0 3.6px, var(--c) 4.2px); }
/* « aujourd'hui » dans la liste : la goutte d'encre de la frise, posée ; un bras fin s'en va jusqu'au bord */
.auj7 { position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem 0 .9rem 1.6rem; font: 700 .75rem/1.2 var(--etiq); letter-spacing: .18em; text-transform: uppercase; color: var(--saison-texte); }
.auj7::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50% 0 50% 50%; rotate: -45deg; background: var(--saison-vive); }
.auj7::after { content: ""; flex: 1; height: 3px; border-radius: 2px; background: var(--saison-vive); clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); }
/* la loupe : la carte de la saison, à côté de la frise, une lueur derrière elle ; elle s'approche de la ville de la date
   survolée ou choisie (son viewBox glisse : les noms et les ventouses gardent leur taille, les bras s'affinent en traits, un
   anneau bat autour de la commune), cadre un mois ou un filtre, revient à la France ; sous elle, ce qu'elle montre */
.ag7-carte { grid-area: carte; position: sticky; top: calc(var(--haut) + var(--sm7-h, 0px) + 12px); isolation: isolate; margin: 0; min-width: 0; }
.ag7-carte::before { content: ""; position: absolute; inset: 0 -4% 22%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--saison-vive) 9%, transparent), transparent); pointer-events: none; }
.ag7-large { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px;
  border: 1px solid color-mix(in srgb, var(--encre) 26%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--papier-2) 88%, transparent); color: var(--encre);
  font: 600 .8125rem/1 var(--texte); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ag7-large[hidden] { display: none; }
.ag7-large svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (hover: hover) { .ag7-large:hover { border-color: var(--saison-vive); } }
.ag7-large:focus-visible { outline: 2px solid var(--saison-vive); outline-offset: 2px; }
.ag7-carte .carte.est-loupe { cursor: zoom-out; }
.ag7-carte.est-large .carte { cursor: zoom-in; }
.ag7-carte .carte-lieu { cursor: pointer; }
.ag7-carte .carte { aspect-ratio: 800 / 780; max-height: calc(100svh - var(--haut) - var(--sm7-h, 0px) - 200px); overflow: hidden; border-radius: 18px; }
.carte .bras-loupe { fill: none; stroke: var(--kc, var(--saison-texte)); stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: 0; transition: opacity .3s var(--k-doux); }
.carte :is(.bras, .bout) { transition: opacity .3s var(--k-doux); }
.carte.est-loupe :is(.bras, .bout) { opacity: 0; }
.carte.est-loupe .bras-loupe { opacity: .8; }
.carte.est-loupe .point { r: calc(4.6px * var(--k, 1)); }
.carte.est-loupe .cible { r: calc(15px * var(--k, 1)); }
.carte.est-loupe .rouen { r: calc(5.5px * var(--k, 1)); }
.carte .halo { fill: none; stroke: var(--kc, var(--saison-vive)); stroke-width: 1.6px; vector-effect: non-scaling-stroke; opacity: 0; r: calc(9px * var(--k, 1)); pointer-events: none; transform-box: fill-box; transform-origin: center; }
.carte .carte-lieu.est-vise .halo { animation: fm7-halo 1.9s var(--k-doux) infinite; }
.carte .carte-lieu.est-vise .point { stroke: var(--encre); stroke-width: 2; scale: 1.5; }
.carte .nom.est-vise { display: inline; font-size: calc(17px * var(--k, 1)); font-weight: 700; text-anchor: start; transform: translate(calc(13px * var(--k, 1)), calc(5px * var(--k, 1))); }
.carte .nom.est-vise.est-gauche { text-anchor: end; transform: translate(calc(-13px * var(--k, 1)), calc(5px * var(--k, 1))); }
.carte .carte-lieu.est-passee .point { fill: var(--papier); stroke: var(--kc, var(--saison-texte)); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.carte .carte-lieu.est-passee.est-vise .point { fill: var(--kc, var(--saison-texte)); }
@keyframes fm7-halo { 0% { opacity: .9; scale: .6; } 80%, 100% { opacity: 0; scale: 2.6; } }
.s7-legende { min-height: 6.5rem; margin-top: 1rem; padding-left: 1rem; border-left: 2px solid var(--lc, color-mix(in srgb, var(--encre) 30%, transparent)); transition: border-color var(--k-survol) var(--k-doux); }
.s7-leg-nom { display: block; font: 500 clamp(1.375rem, 2vw, 1.75rem)/1.15 var(--titre); color: var(--encre); }
.s7-ll { display: flex; flex-wrap: wrap; gap: 0 .75rem; margin-top: .3rem; font-size: .9375rem; line-height: 1.45; color: color-mix(in srgb, var(--encre) 86%, transparent); }
.s7-ll > span:first-child { font-weight: 600; }
.s7-lt { color: var(--gris); }
.s7-legende .s7-lt-sp { font-family: var(--u-titre-f, var(--titre)); font-weight: var(--u-titre-g, 500); font-size: 1.0625rem; color: var(--lc, var(--encre)); }
.s7-ld { display: block; margin-top: .3rem; font-size: .875rem; line-height: 1.4; color: var(--gris); }
.s7-legende .d7-tag { display: inline-block; margin: .45rem .4rem 0 0; padding: .1rem .45rem; border: 1px solid color-mix(in srgb, var(--encre) 34%, transparent); font: 600 .625rem/1.4 var(--etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.s7-legende > * { animation: fm7-parait .22s var(--k-doux) backwards; }
@media (max-width: 1000px) {
  /* (empilés, en flux : une carte de réservation qui s'ouvre dans une liste ne remet pas en page la frise au-dessus) */
  .ag7 { display: block; }
  .ag7 > .ag7-carte, .ag7-proch, .ag7-toutes { margin-top: 2rem; }
  .ag7-toutes { margin-top: 2.75rem; }
  /* (la loupe en carte, sous la frise : la France à gauche, ce qu'elle montre à droite) */
  .ag7-carte { position: relative; top: auto; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; gap: 1.25rem; padding: 12px;
    border: 1px solid var(--filet); border-radius: 22px; background: color-mix(in srgb, var(--papier-2) 70%, transparent); }
  /* (au téléphone, la carte est petite : le bouton n'est que sa loupe, son nom pour les lecteurs d'écran) */
  .ag7-large { top: 16px; left: 16px; width: 40px; padding: 0; justify-content: center; }
  .ag7-large span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ag7-carte::before { display: none; }
  .ag7-carte .carte { max-height: none; border-radius: 14px; background: color-mix(in srgb, var(--nuit) 30%, transparent); }
  .ag7-carte .s7-legende { margin: 0; }
}
@media (max-width: 759px) {
  .s7-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gout)); padding: 2px var(--gout) 4px; scrollbar-width: none; }
  .s7-chips::-webkit-scrollbar { display: none; }
  .s7-chip { flex: none; }
  .s7-cherche { max-width: none; }
  .d7 { grid-template-columns: minmax(0, 1fr); padding-left: 1.4rem; }
  .fm7 { --col: 60px; }
  .fm7-piste { margin-inline: calc(-1 * var(--gout)); padding-inline: var(--gout); scroll-padding-inline: var(--gout);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gout), #000 calc(100% - var(--gout)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gout), #000 calc(100% - var(--gout)), transparent); }
  .fm7-m { scroll-margin-left: var(--gout); }
  .ag7-carte { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: .9rem; padding: 10px; border-radius: 18px; }
  .s7-legende { min-height: 0; padding-left: .75rem; }
  .s7-leg-nom { font-size: 1.1875rem; }
  .s7-ll { font-size: .875rem; }
  .s7-ld { font-size: .8125rem; }
  /* (au téléphone, les filtres en cours sont dans la barre du bas ; la loupe, petite, laisse le nom de la commune à sa légende) */
  .ft7 { display: none; }
  .ag7-carte .carte .nom { display: none; }
  /* (le sous-menu de la saison : sous le menu, au bord de l'écran ; des vignettes plus petites, les titres sur deux lignes) */
  .s7 { --sm7-h: 58px; }
  .sm7-in { gap: 0; }
  .sm7-nom { display: none; }
  .sm7-l { --sm7-fondu: 28px; margin-inline: calc(-1 * var(--gout)); padding-inline: var(--gout); scroll-padding-inline: var(--gout); scroll-snap-type: x proximity; }
  .sm7-b { min-height: 48px; max-width: 13rem; gap: 8px; padding: 4px 12px 4px 4px; font-size: .8125rem; line-height: 1.15; }
  .sm7-t { display: block; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
  .sm7-v { width: 36px; height: 36px; }
  .sm7--passe .sm7-l { flex-wrap: nowrap; overflow-x: auto; padding-right: var(--gout); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--sm7-fg), #000 calc(100% - var(--sm7-fd)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--sm7-fg), #000 calc(100% - var(--sm7-fd)), transparent); }
}
.dates > li.est-allume, .sa-dates > li.est-allume, .prochaines li.est-allume a { background: color-mix(in srgb, var(--saison-texte) 9%, transparent); }
.carte .carte-lieu.est-allume .point { stroke: var(--encre); stroke-width: 2.4; }
/* la frise des saisons passées (la 04) : un bras par saison, plus ou moins haut, qui pousse du grand bras dans l'embrasure ;
   survolé, il prend toute son encre et se gonfle d'un rien */
.frise-saisons { --fr-fond: var(--nuit); --fr-bande-h: 46px; --fr-haut: 22px; --fr-pied: 32px; --fr-bras: color-mix(in srgb, var(--saison-vive) 60%, transparent); }
.frise-saisons .frise-bande-barre { margin: 0 3px; border-radius: 999px 999px 2px 2px / 22px 22px 2px 2px; background: linear-gradient(180deg, var(--saison-vive), color-mix(in srgb, var(--saison-vive) 45%, var(--saison)) 80%); opacity: .9; }
.frise-saisons .frise-bande.est-passe .frise-bande-barre { opacity: .62; }
.frise-saisons .frise-bande:is(.est-allume) .frise-bande-barre { opacity: 1; }
@media (hover: hover) { .frise-saisons .frise-bande:is(:hover) .frise-bande-barre { opacity: 1; } }
.frise-saisons .frise-bande-n { font: 600 .74rem var(--sans); color: var(--encre); }
.frise-saisons .frise-bande-nom { font: 500 .7rem var(--sans); color: var(--gris); }
.sai.est-allume > summary { background: color-mix(in srgb, var(--saison-vive) 9%, transparent); }
/* la diffusion d'un spectacle, saison par saison (programmer) */
.prog-frise { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--u-filet); }
.prog-frise .k, .u-diff .k { margin: 0 0 2px; font: 600 .76rem/1.4 var(--u-etiq); letter-spacing: .13em; text-transform: uppercase; color: var(--u-vif); }
.frise-diffusion { --fr-bande-h: 30px; --fr-haut: 16px; --fr-pied: 26px; --fr-taille: 11px; }
.frise-diffusion .frise-bande-barre { background: var(--u-vif); }
.frise-diffusion .frise-bande-nom { opacity: .8; letter-spacing: -.02em; }
.frise-diffusion .frise-bande.est-passe .frise-bande-barre { opacity: .78; }
.prog-frise .frise-diffusion { --fr-taille: 10px; }
/* dans une fiche étroite : le nom de la première et de la dernière saison ; celui des autres au survol et au focus */
.prog-frise .frise-bande:not(:first-child):not(:last-child) .frise-bande-nom { opacity: 0; transition: opacity var(--k-survol) var(--k-doux); }
.prog-frise .frise-bande:is(.est-allume, :focus-within) .frise-bande-nom { opacity: 1; }
@media (hover: hover) { .prog-frise .frise-bande:is(:hover) .frise-bande-nom { opacity: 1; } }
.prog-frise .frise-bande:is(.est-allume, :focus-within) ~ .frise-bande:last-child .frise-bande-nom, .prog-frise .frise-bandes:has(.frise-bande:is(:focus-within):not(:first-child)) .frise-bande:first-child .frise-bande-nom { opacity: .25; }
@media (hover: hover) { .prog-frise .frise-bande:is(:hover) ~ .frise-bande:last-child .frise-bande-nom, .prog-frise .frise-bandes:has(.frise-bande:is(:hover):not(:first-child)) .frise-bande:first-child .frise-bande-nom { opacity: .25; } }
.frise-diffusion .frise-aujourdhui-nom { display: none; }
.u-diff { margin-top: clamp(26px, 4vw, 48px); }
.p-diff { margin: 4px 0 26px; max-width: 560px; }
.frise-compagnie { --fr-bande-h: 44px; --fr-haut: 18px; }
.frise-compagnie .frise-bande-barre { background: var(--ec, var(--magenta)); }
.u-diff .frise-diffusion { --fr-bande-h: 54px; --fr-taille: 12px; }
/* dans l'univers d'un spectacle */
.u .frise[data-frise] { --fr-fond: var(--u-fond); --fr-encre: var(--u-texte); --fr-trait: color-mix(in srgb, var(--u-texte) 30%, transparent); --fr-accent: var(--u-vif);
  --fr-bulle-fond: var(--u-texte); --fr-bulle-encre: var(--u-fond); --fr-police: var(--u-etiq); --fr-bras: color-mix(in srgb, var(--u-vif) 70%, transparent); }
.u .frise .frise-mois-nom { font-family: var(--u-corps); font-style: normal; }
.u .frise .frise-bulle b { font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-style: normal; }
.u-frise { margin: 0 0 clamp(26px, 4vw, 44px); }
.u-frise .frise[data-frise] { --fr-point: 12px; }
/* la frise historique de la compagnie (la 06) : l'axe, un bras effilé à la couleur de la saison ; les titres en italique, en
   couloirs serrés (celui d'en bas passe devant le filet de celui d'au-dessus) */
.c-frise .frise[data-frise] { --fr-trait: var(--saison-texte); --fr-accent: var(--saison-texte); --fr-point: 12px; --fr-couloir: 22px; --fr-haut: 28px; --fr-passe: .6; --fr-bras: var(--saison-texte); }
.c-frise .frise-point { z-index: calc(10 - var(--fr-y, 0)); }
.c-frise .frise-etiquette { max-width: 13.6em; padding: 0 .3em; margin: 0 -.3em; background: var(--fr-fond); font: italic 500 .95rem/1.2 var(--titre); }
.c-frise .frise-repere:focus-visible .frise-etiquette { color: var(--saison-texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { .c-frise .frise-repere:hover .frise-etiquette { color: var(--saison-texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } }
.c-frise .frise-mois-nom { font: italic 500 .9rem/1.1 var(--titre); }

/* ———— réserver une date, d'un geste (règle 17, RESERVER) ————
   La bande des prochaines dates (un bouton par date, l'horaire écrit dessus), la carte de la date choisie dans l'univers de
   son spectacle ; sur les saisons (#/saisons), chaque date de l'agenda ouvre sa carte sous sa ligne. Le geste
   évident de la carte : « Réserver », plein, de la couleur du spectacle. */
.rs-zone { position: relative; margin: 0 0 clamp(34px, 4.6vw, 60px); scroll-margin-top: calc(var(--onglets) + 6px); }
@media (pointer: coarse), (max-width: 640px) { .rs-defile, .rs-zone.rs-deborde .rs-defile { display: none; } }
.rs-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin: 0 0 12px; }
.rs-k-bande { margin: 0; font: 600 .74rem/1.3 var(--u-etiq); letter-spacing: .16em; text-transform: uppercase; color: var(--u-vif); }
/* les flèches gardent leur place (rien ne bouge quand elles paraissent) */
.rs-defile { display: flex; gap: 8px; margin: 0; visibility: hidden; }
.rs-zone.rs-deborde .rs-defile { visibility: visible; }
.rs-defile button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1.5px solid var(--u-filet); border-radius: 50%; background: transparent; color: var(--u-texte); cursor: pointer; transition: border-color var(--k-survol) var(--k-doux), background-color var(--k-survol) var(--k-doux), opacity var(--k-survol) var(--k-doux); }
@media (hover: hover) { .rs-defile button:hover { border-color: var(--u-texte); background: color-mix(in srgb, var(--u-texte) 8%, transparent); } }
.rs-defile button[disabled] { opacity: .3; cursor: default; }
.rs-defile svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rs-bande { gap: 10px; margin: 0 calc(-1 * var(--gout)); padding: 4px var(--gout) 20px; scroll-padding-inline: var(--gout); scrollbar-width: none; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gout), #000 calc(100% - var(--gout)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gout), #000 calc(100% - var(--gout)), transparent); }
.rs-bande::-webkit-scrollbar { display: none; }
.rs-date { position: relative; min-width: 8.8rem; max-width: 13rem; padding: 12px 16px 14px; border: 1.5px solid var(--u-filet); border-radius: 12px; background: color-mix(in srgb, var(--u-texte) 5%, transparent); color: var(--u-texte); }
@media (hover: hover) { .rs-date:hover { border-color: color-mix(in srgb, var(--u-texte) 55%, transparent); } }
.rs-date:focus-visible { outline: 2px solid var(--u-vif); outline-offset: 3px; }
.rs-q { display: block; white-space: nowrap; }
.rs-s { display: block; font: 600 .68rem/1.35 var(--u-etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--u-texte2); }
.rs-n { font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: 2.05rem; line-height: 1.08; }
.rs-m { font: 600 .9rem/1 var(--sans); }
.rs-h { display: block; margin-top: 8px; font: 700 1.02rem/1.25 var(--sans); font-variant-numeric: tabular-nums; }
.rs-h--sans { font: 500 .78rem/1.3 var(--sans); color: var(--u-texte2); }
.rs-o { display: block; max-width: 100%; margin-top: 3px; overflow: hidden; font-size: .82rem; line-height: 1.3; color: var(--u-texte2); white-space: nowrap; text-overflow: ellipsis; }
.rs-date[aria-pressed="true"] { background: var(--u-accent); border-color: var(--u-accent); color: var(--u-sur-accent); box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--u-accent) 90%, transparent); }
.rs-date[aria-pressed="true"] :is(.rs-s, .rs-o, .rs-h--sans) { color: inherit; opacity: .85; }
.rs-date[aria-pressed="true"]::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; border-radius: 0 0 3px 0; background: var(--u-accent); transform: translateX(-50%) rotate(45deg); }
.rs-date.est-allume:not([aria-pressed="true"]) { border-color: var(--u-vif); }
.rs-corps { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: start; margin-top: 2px; }
/* la carte : l'affiche d'une date, dans l'univers de son spectacle (--rs-bg : son fond, que l'encre reprend) */
.rs-carte { --rs-bg: var(--u-fond2); position: relative; isolation: isolate; overflow: hidden; min-height: 330px; border-radius: 14px; background: var(--rs-bg); color: var(--u-texte); font-family: var(--u-corps); box-shadow: 0 0 0 1px var(--u-filet), 0 34px 64px -40px rgba(0, 0, 0, .7); }
.rs-photo { z-index: -1; inset: 0 0 0 auto; width: 50%; height: 100%; object-fit: cover; opacity: .55; -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }
.u-clair .rs-photo, .rs-carte.u-clair .rs-photo { opacity: .3; }
/* l'encre qui s'ouvre (effetReserver) : une tache organique aux bords d'encre vive, partie de la ventouse choisie ; elle
   s'étale sur la carte et s'y dissout (transform et opacité seuls) */
.rs-tache { position: absolute; z-index: 0; border-radius: var(--blob, 50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--u-vif) 26%, transparent) 64%, color-mix(in srgb, var(--u-vif) 0%, transparent)); box-shadow: inset 0 0 0 3px var(--u-vif); }
.rs-c { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; max-width: 28rem; padding: clamp(24px, 3.2vw, 40px); }
.rs-sp { margin: 0; font-family: var(--u-titre-f); font-weight: var(--u-titre-g); font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.5rem); line-height: 1.02; color: var(--u-texte); text-wrap: balance; }
.u-arene .rs-sp, .rs-carte.u-arene .rs-sp { text-transform: uppercase; color: var(--u-accent); }
html[data-theme="nuit"] :is(.u-arene .rs-sp, .rs-carte.u-arene .rs-sp) { color: var(--u-vif); }   /* le rouge du titre, dans la nuit de Bérénice : sa couleur vive */
.rs-sp a { color: inherit; text-decoration: none; }
@media (hover: hover) { .rs-sp a:hover { color: var(--u-vif); } }
.rs-sp::after { content: ""; display: block; width: 72px; height: 2px; margin: 14px 0 12px; border-radius: 2px; background: var(--u-vif); transform-origin: 0 50%; }
.rs-quand { margin: 0; font: 600 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.3 var(--sans); }
.rs-etat { margin-left: 8px; font: normal 600 .72rem var(--etiq); letter-spacing: .06em; text-transform: uppercase; color: var(--u-vif); }
.rs-ou { margin: 4px 0 0; font-size: 1rem; line-height: 1.45; color: var(--u-texte2); }
.rs-lieu { color: var(--u-texte); font-weight: 600; }
.rs-lieu::after { content: " ·"; color: var(--u-texte2); font-weight: 400; }
.rs-det { list-style: none; margin: 8px 0 0; padding: 0; font: 400 .88rem/1.45 var(--sans); color: var(--u-texte2); }
.rs-seances { margin: 22px 0 0; }
.rs-k { margin: 0 0 9px; font: 600 .7rem/1.3 var(--u-etiq); letter-spacing: .15em; text-transform: uppercase; color: var(--u-vif); }
.rs-seances--sans { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rs-seances--sans .rs-k { margin: 0; }
.rs-sans { font: 600 1rem var(--sans); }
.rs-seance { padding: 8px 16px 9px; border: 1.5px solid var(--u-filet); border-radius: 999px; background: color-mix(in srgb, var(--u-texte) 5%, transparent); color: var(--u-texte); font-family: var(--sans); text-decoration: none; }
@media (hover: hover) { a.rs-seance:hover { border-color: var(--u-vif); background: color-mix(in srgb, var(--u-vif) 12%, transparent); } }
a.rs-seance:focus-visible { outline: 2px solid var(--u-vif); outline-offset: 2px; }
.rs-sh { font: 700 1.5rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rs-sh--sans { font: 600 .9rem/1.2 var(--sans); }
.rs-sj { font: 500 .82rem var(--sans); color: var(--u-texte2); }
.rs-seance.est-scolaire { border-style: dashed; background: transparent; color: var(--u-texte2); }
.rs-scol { padding: 0 7px; border: 1px solid currentColor; border-radius: 999px; font: normal 600 .64rem/1.6 var(--etiq); letter-spacing: .08em; text-transform: uppercase; color: var(--u-texte2); }
.rs-action { margin: 28px 0 0; }
.rs-reserver { position: relative; gap: 18px; padding: 15px 18px 15px 28px; border-radius: 999px; background: var(--u-accent); color: var(--u-sur-accent); box-shadow: 0 18px 38px -18px color-mix(in srgb, var(--u-accent) 80%, transparent); }
.rs-r1 { font: 700 clamp(1.2rem, 1.05rem + .5vw, 1.45rem)/1.05 var(--sans); letter-spacing: .01em; }
.rs-r2 { margin-top: 4px; font: 500 .82rem/1.3 var(--sans); opacity: .9; }
.rs-reserver .rs-fleche { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: color-mix(in srgb, var(--u-sur-accent) 16%, transparent); transition: translate var(--k-survol) var(--k-souple); }
@media (hover: hover) { .rs-reserver:hover { box-shadow: 0 0 0 6px color-mix(in srgb, var(--u-accent) 24%, transparent), 0 18px 38px -18px color-mix(in srgb, var(--u-accent) 80%, transparent); } }
@media (hover: hover) { .rs-reserver:hover .rs-fleche { translate: 2px -2px; } }
.rs-reserver:focus-visible { outline: 3px solid var(--u-vif); outline-offset: 3px; }
.rs-aupres { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-top: 14px; border-top: 1px solid var(--u-filet); font: 400 1.02rem/1.4 var(--sans); color: var(--u-texte2); }
.rs-aupres b { color: var(--u-texte); font-weight: 600; }
/* « Ajouter à mon agenda » : en retrait sous « Réserver », qu'il ne concurrence pas (un lien discret et son icône, une cible
   de 44 px) ; il télécharge le fichier .ics de la date */
.rs-plus { margin: 12px 0 0; }
.rs-agenda { --bt-t: var(--u-texte2, var(--encre)); }
.rs-agenda .rs-fleche { width: 20px; height: 20px; stroke-width: 1.7; color: var(--u-vif); }
/* les saisons (#/saisons, la 07) : la date d'une ligne de l'agenda est un bouton, un cadre droit qui prend l'encre de son
   spectacle ; choisi, il prend l'aplat de son univers, cerné d'un anneau, et sa carte s'ouvre sous la ligne */
.rs-date--ligne { width: 100%; min-width: 0; max-width: 12.5rem; margin: -.35rem 0 .2rem -.55rem; padding: .4rem 1.6rem .5rem .55rem; border: 1px solid var(--filet); border-radius: 0; background: transparent; color: var(--encre); }
@media (hover: hover) { .rs-date--ligne:hover { border-color: var(--c, var(--saison-vive)); box-shadow: inset 0 0 0 1px var(--c, var(--saison-vive)); } }
.rs-date--ligne:focus-visible { outline-color: var(--saison-vive); }
.rs-date--ligne .rs-q { white-space: normal; }
.rs-date--ligne :is(.rs-s, .rs-h--sans) { color: var(--gris); }
.rs-date--ligne .rs-n { font: 500 1.6rem/1.05 var(--titre); }
.rs-date--ligne .rs-m { font: 500 1rem var(--titre); }
.rs-date--ligne .rs-h { margin-top: 5px; font-size: .875rem; }
.rs-date--ligne[aria-pressed="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--u-accent) 22%, transparent); }
.rs-date--ligne .rs-o { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rs-date--ligne::after { content: ""; position: absolute; right: 11px; top: 13px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .55; rotate: 45deg; transition: rotate var(--k-survol) var(--k-souple); }
.rs-date--ligne[aria-pressed="true"]::after { left: auto; bottom: auto; width: 7px; height: 7px; border-radius: 0; background: none; transform: none; rotate: 225deg; top: 16px; opacity: .85; }
.dates > li.rs-li.est-choisi { background: color-mix(in srgb, var(--magenta) 5%, transparent); }
.rs-ici { --rs-bg: var(--u-fond); grid-column: 1 / -1; margin: 10px 0 6px; min-height: 300px; transform-origin: 50% 0; }
/* sur la carte de France, la commune de la date choisie */
.carte .carte-lieu.est-choisi .point { stroke: var(--u-texte, var(--encre)); stroke-width: 2.6; }
/* (la commune filtrée sur les saisons : sa ventouse grossie et cerclée de l'encre, d'un anneau de la vive de la saison, son nom
   écrit ; elle reste en évidence quand on survole les autres) */
.carte .carte-lieu.est-filtre .point { scale: 1.7; stroke: var(--encre); stroke-width: 2.6; }
.carte .carte-lieu.est-filtre .halo { opacity: 1; fill: none; stroke: var(--saison-vive); stroke-width: 2; vector-effect: non-scaling-stroke; }
.carte.surligne .carte-lieu.est-filtre:not(.on) { opacity: .7; }
.carte .nom.est-filtre { display: inline; }
.carte .nom.est-choisi { display: inline; }
.rs-ici .rs-c { max-width: 27rem; }
@media (max-width: 1000px) {
  .rs-corps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .som { transition: opacity var(--k-survol) var(--k-doux), visibility 0s; }
  article.rs-vu .som:not(:focus-within) { opacity: 0; visibility: hidden; transition: opacity var(--k-survol) var(--k-doux), visibility 0s var(--k-survol); }
}
/* réserver à portée de pouce : au téléphone, sur la page d'un spectacle qui a des dates à venir, une petite barre « Réserver »
   (la date choisie dans la bande, sa forme courte et sa commune) se pose au-dessus de la barre d'onglets tant que ni l'ouverture
   (qui a son propre « Réserver ») ni la carte de réservation ne sont à l'écran ; elle y mène. Dans l'univers du spectacle,
   comme le bouton « Réserver » de la carte ; ce qui se pose en bas (le sommaire flottant, le haut de page) monte au-dessus
   d'elle (--bas). Au bureau, rien */
.rsb { display: none; }
@media (max-width: 759px) {
  .rsb { position: fixed; z-index: 36; left: 8px; right: 8px; bottom: calc(8px + var(--bas0)); display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 6px 6px 20px;
    border: 0; border-radius: 999px; background: var(--u-accent); color: var(--u-sur-accent); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .85), 0 0 0 1px color-mix(in srgb, var(--u-sur-accent) 18%, transparent);
    opacity: 0; visibility: hidden; translate: 0 calc(100% + 16px); transition: opacity var(--k-survol) var(--k-doux), translate .3s var(--k-doux), visibility 0s .3s; }
  .sp-tournee:not(.une-vu, .rs-vu) .rsb { opacity: 1; visibility: visible; translate: none; transition: opacity var(--k-survol) var(--k-doux), translate .3s var(--k-doux), visibility 0s; }
  html:has(.sp-tournee:not(.une-vu, .rs-vu) .rsb) { --bas: calc(var(--bas0) + 64px); }
  .rsb-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .rsb-k { font: 700 1.05rem/1.1 var(--sans); letter-spacing: .01em; }
  .rsb-d { overflow: hidden; font: 500 .8rem/1.25 var(--sans); white-space: nowrap; text-overflow: ellipsis; opacity: .92; }
  .rsb .fleche { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 12px; border-radius: 50%; background: color-mix(in srgb, var(--u-sur-accent) 16%, transparent);
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .rsb:focus-visible { outline: 3px solid var(--u-vif); outline-offset: 3px; }
  .rsb.mv-presse { scale: .97; transition-duration: var(--k-presse); }
}
@media (max-width: 640px) {
  .rs-carte { min-height: 0; border-radius: 12px; }
  .rs-photo { width: 100%; height: 46%; inset: 0 0 auto 0; opacity: .42; -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent); mask-image: linear-gradient(180deg, #000 20%, transparent); }
  .rs-c { padding: 22px 18px 20px; }
  .rs-action, .rs-reserver { width: 100%; }
  .rs-reserver { justify-content: space-between; padding: 14px 14px 14px 22px; }
  .rs-date { min-width: 8.2rem; padding: 11px 14px 13px; }
  .rs-date--ligne { min-width: 0; padding: 8px 9px 10px; }
  .rs-date--ligne::after { right: 8px; }
}

/* moins d'animations : tout est posé, rien n'est épinglé ; et quand les données changent, la vue se refait sans entrée */
.still .carte .m, .still .carte .bout, .sur-place .carte .m, .sur-place .carte .bout { stroke-dashoffset: 0; transition: none; }
.still .carte .point, .sur-place .carte .point { opacity: 1; transition: none; }
.sur-place .trait path { animation: none; }

/* (la hauteur du sous-menu d'un spectacle, arrimé : ce qu'un chapitre ou une ancre laisse au-dessus de lui) */
article.u { --onglets: 58px; }
@media (min-width: 760px) {
  article.u { --onglets: 56px; }
}
@media (max-width: 1099px) {
  .fus.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .une-grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "carte" "liste"; }
  .une-carte { margin: 22px 0 8px; }
  .bulle { position: static; max-width: none; margin-top: 8px; }
  .bulle:empty { display: none; }
  .contact > .ct-coord, .contact > .formulaire { grid-column: auto; grid-row: auto; }
  .compagnie, .directeur, .contact, .ag-corps, .sa-corps, .sai-corps, .e-dates, .u-tournee, .u-prog, .dos-accueil, .dos-grille, .dos-pres, .dos-ateliers, .fus.large { grid-template-columns: minmax(0, 1fr); }
  .dos-pres .boite:first-child { grid-column: auto; }
  .pied { grid-template-columns: minmax(0, 1fr); }
  .une-carte .carte, .ag-carte .carte, .sa-carte .carte, .e-carte .carte { max-height: none; }
  .sai-carte { position: static; order: -1; }
  .sai-carte .carte { max-height: 340px; }
  .ag-carte, .sa-carte, .e-carte { position: static; order: -1; }
  .reperes, .carte-sp, .u-faits { position: static; }
  .u-bilan { grid-template-columns: minmax(0, 1fr); } .u-bilan .carte-sp { order: -1; }
  .dos-appel { grid-template-columns: minmax(0, 1fr); }
  .dos-appel-ph { min-height: 200px; }
}
@media (max-width: 759px) {
  /* (au téléphone, le haut n'a plus que la marque, la pieuvre et le nom de la compagnie, le lien de l'accueil, et la loupe au
     bout : une ligne de 44 px sur toute la largeur ; le menu est la barre d'onglets du bas, plus bas. Sans la place du nom,
     la pieuvre seule, une cible de 44 px) */
  :root { --haut: 60px; --barre-h: 44px; }
  .top { width: auto; margin: 8px 8px 0; }
  .top-in { justify-content: space-between; padding: 0 4px; }
  .marque { height: 44px; padding: 0 14px 0 7px; font-size: 1rem; }
  .top.compact .marque { justify-content: center; width: 44px; padding: 0; }
  .marque .l { width: 30px; }
  .som { right: 12px; bottom: calc(14px + var(--bas)); }
  .et { padding: 26px 0 20px; }
  .et-rac { flex-wrap: nowrap; overflow-x: auto; margin: 18px calc(-1 * var(--gout)) 0; padding: 2px var(--gout) 4px; scrollbar-width: none; }
  .et-rac li { flex: none; }
  .et-rac button { padding: 7px 13px; font-size: .86rem; }
  .fus.large .fu-a { flex-direction: column; }
  .fus.large .fu-ph { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .fus.large .fu-ph::after { inset: auto 0 0; width: auto; height: 46%; background: linear-gradient(transparent, var(--u-fond)); }
  .fus.large .fu-c { padding: 4px 18px 20px; }
  .fus.large .fu .mo { top: -6px; }
  .ag-index { position: static; grid-template-columns: minmax(0, 1fr); }
  .idx-outils { justify-content: flex-start; padding-bottom: 0; }
}
@media (max-width: 640px) {
  .formulaire { grid-template-columns: minmax(0, 1fr); }
  .dates > li { grid-template-columns: 6.6rem minmax(0, 1fr); gap: 2px 12px; }
  .sai > summary { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 14px 4px; }
  .sai-n { font-size: 1.1rem; gap: 6px; }
  .ag-outils .filtres { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gout)); padding: 2px var(--gout) 4px; scrollbar-width: none; max-width: calc(100% + 2 * var(--gout)); }
  .ag-outils .puce, .ag-outils #choix-lieu { flex: none; }
  .ag-outils { max-width: 100%; }
  .sai-corps { padding: 6px 4px 30px; }
  .prochaines a, .prochaines .pl { grid-template-columns: 6.2rem minmax(0, 1fr); }
  .fus.compact .fu-t { font-size: 1.3rem; }
  .fus.compact .fu-c { padding: 2px 12px 16px; }
  .fus.compact .fu .mo { display: none; }
  .fus.compact .fu-t { margin-right: 0; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos-table { min-width: 540px; font-size: .9rem; }
  .dos-table th, .dos-table td { padding: 10px; }
}
@media (max-width: 419px) {
  .fus.compact { grid-template-columns: minmax(0, 1fr); }
}

/* ———————————— le défilement raconte (le scrollytelling), dans la langue de la 10 ————————————
   La lecture fait avancer le récit, et rien d'autre : des animations liées au défilement (CSS, composées hors du fil
   principal, scrubbables : on remonte, le récit revient) là où le navigateur les a (@supports), sinon la floraison à
   l'arrivée. L'état de base est toujours l'état final, lisible : sans mouvement (html.still) ou l'animation retirée (le
   vérificateur), tout est posé. Ici les durées sont en hauteur d'écran : « entry » (ce qui entre par le bas), « exit » (ce qui
   sort par le haut), « cover » (toute la traversée) ; ce qu'un script pose au franchissement d'une ligne de lecture (la
   carte, les frises, le panneau de la compagnie) prend les courbes de la 10. Une animation liée au défilement ne garde jamais
   son état final au-delà de sa plage (backwards, jamais both ni forwards, règle 15 C) : l'état de base est déjà l'état final,
   ou ce qui l'a passé est hors de l'écran ; et quand une animation composée garde son état final hors de sa plage, Chrome
   n'arrive plus à capturer la page pour une transition (le changement de page gelait 4 s depuis une page défilée). */
/* 1. l'encre prend à la lecture : affirmations, citations (.lit, --n mots) : chaque mot passe du gris à l'encre quand sa
   phrase traverse le milieu de l'écran, dans l'ordre, au rythme du lecteur ; en remontant, il pâlit */
@property --lit { syntax: '<number>'; inherits: true; initial-value: 1; }   /* (la lecture du bloc, 0 → 1 ; posée à 1 : tout se lit) */
@supports (animation-timeline: view()) {
  /* une seule animation par bloc (pas une par mot : la page d'un spectacle en compte une centaine, elle resterait sous
     son budget de rendu), qui fait avancer --lit ; chaque mot en tire son encre (--e) d'après son rang */
  html:not(.still):not(.sur-place) .lit { animation: lit-lu linear backwards; animation-timeline: view(); animation-range: cover 18% cover 64%; }
  @keyframes lit-lu { from { --lit: 0; } to { --lit: 1; } }
  html:not(.still):not(.sur-place) .lit .w { --e: clamp(0, calc((var(--lit) * (var(--n, 20) + 3) - var(--w, 0)) / 3), 1);
    opacity: calc(.18 + var(--e) * .82); translate: 0 calc((1 - var(--e)) * .08em); }
  /* (la phrase qui s'allume à la lecture ne fleurit pas en plus d'un bloc à son arrivée) */
  html:not(.still):not(.sur-place) .lit.ecrit:not(.vu) { opacity: 1; transform: none; }
  /* 2. l'ouverture d'un spectacle prend de la profondeur : en la quittant, la photo reste en arrière (elle suit déjà la
     lecture, --p), le texte monte plus vite que la page et pâlit, la lueur et le motif s'éteignent */
  html:not(.still) .sp-une { view-timeline: --une block; }
  html:not(.still) .une-texte { animation: une-texte linear backwards; animation-timeline: --une; animation-range: exit 0% exit 100%; }
  html:not(.still) .une-lueur, html:not(.still) .une-motif { animation: une-lueur linear backwards; animation-timeline: --une; animation-range: exit 0% exit 100%; }
  @keyframes une-texte { from { translate: 0 0; opacity: 1; } to { translate: 0 -22%; opacity: .08; } }
  @keyframes une-lueur { from { opacity: 1; } to { opacity: 0; } }
  /* 3. la scène de l'accueil se retire : la pieuvre et ses titres glissent plus lentement que la page et pâlissent, pendant
     que le menu, posé sous elle, monte s'arrimer en haut de l'écran. Ce qui glisse, c'est la pieuvre (sa toile) et ses
     titres, chacun son calque, et non toute la scène ; elle pâlit sous un voile de la couleur de la page (un seul calque),
     et non par son opacité : une scène entière en mouvement ou pâlie se recompose à part, avec la page sous elle, à chaque
     image (au défilement, et au premier geste de l'accueil) */
  html:not(.still) .scene { view-timeline: --scene block; }
  html:not(.still) :is(.sc-toile, .sc-mot, .sc-h, .sc-t) { animation: scene-part linear backwards; animation-timeline: --scene; animation-range: exit 0% exit 100%; }
  html:not(.still) .scene::after { content: ""; position: absolute; inset: 0; z-index: 9; background: var(--papier); opacity: 0; pointer-events: none;
    animation: scene-voile linear backwards; animation-timeline: --scene; animation-range: exit 0% exit 100%; }
  @keyframes scene-part { from { translate: 0 0; } to { translate: 0 28svh; } }
  @keyframes scene-voile { from { opacity: 0; } to { opacity: .8; } }
  /* (au téléphone, la scène est une liste plus haute que l'écran : rien n'y glisse, chaque titre se lit jusqu'à quitter
     l'écran, et le voile ne vient qu'à la fin, quand le menu, sous le dernier titre, monte s'arrimer) */
  html:not(.still) .scene.mobile :is(.sc-toile, .sc-mot, .sc-h, .sc-t) { animation: none; }
  html:not(.still) .scene.mobile::after { animation-range: exit 55% exit 100%; }
  /* 4. les spectacles voisins montent : au bout de la page d'un spectacle, la vignette de chacun se lève dans son cercle */
  html:not(.still) .voisin-v img { animation: voisin-monte linear backwards; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  @keyframes voisin-monte { from { translate: 0 60%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
  /* 5. l'histoire de la compagnie en chapitres : l'étape qui traverse le milieu de l'écran prend l'encre, les autres pâlissent */
  html:not(.still) .frise-l > li { animation: etape-lue linear backwards; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes etape-lue { 0%, 16% { opacity: .28; } 34%, 64% { opacity: 1; } 84%, 100% { opacity: .28; } }
  @media (max-width: 899px) {
    html:not(.still) .frise-l > li { animation-name: etape-lue-haut; }
    @keyframes etape-lue-haut { 0%, 8% { opacity: .28; } 18%, 44% { opacity: 1; } 56%, 100% { opacity: .28; } }
  }
}
/* 6. la tournée qui se dessine au fil des dates (auFil, la ligne de lecture) : sur une carte épinglée à côté de sa liste
   (.au-fil), les bras attendent, repliés sur Rouen ; chacun s'étire jusqu'à sa commune quand sa date franchit le milieu de
   l'écran (souple, un rien de rebond, sans cascade : son tour est venu), sa ventouse se pose au bout, la commune lue se nomme ;
   en remontant, il se replie. Sur une carte de beaucoup de communes (simple), les communes à venir attendent pâles. La ligne
   lue est marquée d'un trait à sa couleur, son repère sur la frise se gonfle */
.carte.au-fil .carte-lieu :is(.bras, .bout) { transform-box: view-box; transform-origin: var(--rx) var(--ry); transition: scale var(--k-page) var(--k-souple), opacity .2s var(--k-doux); }
.carte.au-fil .carte-lieu:not(.est-pousse) :is(.bras, .bout) { scale: .06; opacity: 0; }
.carte.au-fil .carte-lieu .point { transition: scale var(--k-survol) var(--k-souple), opacity .2s var(--k-doux) .22s; }
.carte.au-fil .carte-lieu:not(.est-pousse) .point { opacity: 0; transition-delay: 0s; }
.carte.simple.au-fil .carte-lieu:not(.est-pousse) { opacity: .16; }
.carte.au-fil .carte-lieu.lu .point { stroke: var(--encre); stroke-width: 2.4; scale: 1.5; }
.carte.au-fil .nom.lu { display: inline; }
.dates > li.lu, .sa-dates > li.lu { background: color-mix(in srgb, var(--saison-texte) 8%, transparent); box-shadow: inset 3px 0 0 var(--c, var(--saison-texte));
  transition: background-color var(--k-survol) var(--k-doux), box-shadow var(--k-survol) var(--k-doux); }
.u .dates > li.lu { background: color-mix(in srgb, var(--u-vif) 11%, transparent); box-shadow: inset 3px 0 0 var(--u-vif); }
.frise[data-frise] .frise-point.lu > .frise-repere::before { scale: 1.4; opacity: 1; }
/* les voisins d'un spectacle, chacun dans son univers : son fond (la lueur au-dessous du texte) */
.suivant { background: var(--u-fond); }
.suivant::before { z-index: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
/* (moins d'animations demandé à la page, ?anim=0 : html.still, la même chose) */
html.still *, html.still *::before, html.still *::after { transition: none !important; animation: none !important; }
/* l'ouverture, habillée (celle de la 04) : le logo blanc sur le dégradé de la saison ; la flèche à sa couleur vive.
   Moins d'animations : les photos de la scène changent quand même d'un fondu bref */
.intro.intro-synthese .intro-indice { color: var(--saison-vive); opacity: .9; }
@media (prefers-reduced-motion: reduce) { .sc-image { transition: opacity .35s ease !important; } }
html.still .sc-image { transition: opacity .35s ease !important; }
/* l'impression : la page d'un spectacle et les saisons, lisibles sur le papier. Fond blanc, encre noire ; ni le menu, ni le
   pied, ni les boutons d'action, ni ce qui bouge, ni les toiles (la pieuvre, l'encre), ni les cartes et les frises (leurs
   dates sont dans les listes) ; tout ce qui attend l'écran ou la lecture est posé ; l'adresse d'un lien de réservation est
   écrite après lui ; les photos réduites ; une date, une carte de réservation, une fiche ne se coupent pas */
/* les cibles au doigt (la charte, WCAG 2.5.8) : au toucher, chaque cible fait 44 px de haut au moins. Les liens des listes
   (le titre d'une date, ses précisions, son lieu, ceux des saisons passées et du bilan), du pied de page, le retour de
   l'espace pro, la saison de « Les spectacles », la bande des saisons, les pastilles de la frise de la saison et la case du
   consentement ; leur texte reste où il était, centré dans sa hauteur. Les communes des cartes ont une prise de 24 px au
   moins (leur cercle « cible », invisible) ; serrées, elles s'atteignent aussi par la liste à côté et par la loupe */
@media (pointer: coarse) {
  .d7-t a, .det a, .d7-lieu a, .dl-ou a, .dl-quoi a, .dates a.ou, .dates .t, footer .liens a, footer .modifier, .ep-retour, a.pil-sai {
    display: inline-flex; align-items: center; min-height: 44px; }
  .det a, .dl-ou a, .dates a.ou { flex-wrap: wrap; }
  .d7-t, .dl-quoi { line-height: 1.1; }
  .idx { min-height: 44px; }
  .idx-tout { width: 44px; height: 44px; }
  .fm7-d { min-width: 44px; height: 44px; }
  .case input { width: 24px; height: 24px; margin-top: 0; }
  .carte .cible, .carte.est-loupe .cible { r: calc(12.5px * var(--k, 1)); }
}
/* le mode contraste élevé (forced-colors : les couleurs du système remplacent celles du site, les fonds et les ombres
   s'effacent). Ce que disaient un fond, une ombre ou la couleur d'un spectacle se dit autrement, dans les couleurs du
   système : la rubrique courante du menu, en aplat (Highlight) et soulignée ; une puce pressée, une saison ouverte, une date
   choisie, en aplat ; les puces, les pastilles de la frise, les cartes, d'un filet ; une date jouée, en tirets et grisée
   (GrayText), sa coche à la couleur du texte ; une puce éteinte, grisée ; le focus, l'anneau du système */
@media (forced-colors: active) {
  .entrees a[aria-current="page"], .u-onglets a[aria-current="page"] { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  .entrees a[aria-current="page"] *, .u-onglets a[aria-current="page"] * { color: HighlightText; }
  :is(.entrees, .u-onglets, .pied-nav, .sp-som, .psom-l) :is([aria-current="page"], [aria-current="true"], [aria-current="location"]) { text-decoration: underline 2px; text-underline-offset: 5px; }
  .entrees a[aria-current="true"] { border: 2px solid Highlight; }
  .entrees.en-bas a[aria-current="page"] { background: Highlight; }
  .entrees.en-bas a[aria-current="page"] .ic, .entrees.en-bas a[aria-current="page"] .ic * { background: HighlightText; color: Highlight; }
  :is([aria-pressed="true"]:not(.sc-pause), .idx[aria-expanded="true"], .frise-point.est-choisi > .fm7-d) { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  :is([aria-pressed="true"]:not(.sc-pause), .idx[aria-expanded="true"]) :is(span, small, b, time, i:not(.sm7-v)) { color: HighlightText; }
  :is(.s7-chip, .sm7-b, .fm7-d, .fe7-m, .bf7-m, .idx, .rs-date, .puce, .tr6-p) { border: 1px solid ButtonText; }
  :is(.s7-chip, .sm7-b, .fe7-m, .fm7-tete, .rs-date)[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
  .s7-chip i { forced-color-adjust: none; background: CanvasText; }
  .fm7 .frise-point.est-passe .fm7-d { border: 1px dashed GrayText; color: GrayText; }
  .fm7 .frise-point.est-passe:not(.est-residence) .fm7-d::before { forced-color-adjust: none; background: CanvasText; }
  .fm7 .frise-point.est-residence .fm7-d { border-style: dotted; }
  .fm7-axe, .fm7-auj { forced-color-adjust: none; background: CanvasText; }
  .fr-legende i { forced-color-adjust: none; background: CanvasText; }
  .fr-legende .fr-l-res i { background: Canvas; box-shadow: inset 0 0 0 2px CanvasText; }
  :is(.fp, .ep-porte, .alerte-boite, .ct-prg, .rs-carte, .tdm-i, .pil-aff, .sai, .ep-acces li, .fe7-panneau, .cs-boite, .lc-cadre) { border: 1px solid CanvasText; }
  :focus-visible:not([tabindex="-1"]) { outline: 3px solid Highlight !important; outline-offset: 2px; }
  .lc-cadre:focus-visible::after { border-color: Highlight; }
}
@media print {
  @page { margin: 14mm 12mm; }
  html { color-scheme: light !important; --papier: #fff; --papier-2: #fff; --carte: #fff; --encre: #000; --gris: #333; --filet: #aaa; --nuit: #fff; }
  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  *, *::before, *::after { animation: none !important; transition: none !important; text-shadow: none !important; box-shadow: none !important; filter: none !important;
    content-visibility: visible !important; -webkit-print-color-adjust: economy; print-color-adjust: economy; }
  main, main *, main *::before, main *::after { color: #000 !important; background: transparent !important; border-color: #aaa !important; }
  main [data-mv], main .mv-attente, main .mv-attente > *, main .apparait, main .ecrit, main .lit, main .lit *, main .rc-in, main .rc-p, main .u-titre .ligne { opacity: 1 !important; transform: none !important; translate: none !important; clip-path: none !important; visibility: visible !important; }
  .lc-decor, .cap::before { display: none !important; }
  /* ce qui ne s'imprime pas */
  .evitement, .top-cale, #top, #entrees, footer, .haut-page, .succion, canvas, .intro, svg.defs, .ed-barre, .ed-panneau,
  main button:not(.rs-date):not(.nomme), .trf, main .u-onglets, main .sp-som, main .som, main .u-cta, main .une-retour, main .une-ariane, main .une-motif, main .une-lueur, main .une-ombre,
  main .voisins, main .rc-vis, main .rc-fil, main #c-video, main [data-lecteur], main .filet, main svg.trait, main .rs-tete, main .rs-defile, main .rs-plus, main .rs-photo, main .rs-tache,
  main svg.carte, main .carte-sp, main .ag7-carte, main .frise, main [data-frise], main .u-frise, main .v-frise, main .fs7, main .p4-frise, main .ft7, main .fr-legende,
  main .s7-outils, main .s7-rac, main .sm7, main .sf7, main .ag-index, main #v-alerte, main .bf7, main .fe7, main .s7-gel { display: none !important; }
  main { padding: 0 !important; min-height: 0 !important; }   /* (à l’écran, un écran au moins : sur le papier, une page blanche de plus) */
  main .wrap { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  main section, main .chap, main .bloc { padding-top: 0 !important; margin-top: 0 !important; min-height: 0 !important; }
  main .chap + .chap, main section + section { margin-top: 10mm !important; }
  /* l'ouverture d'un spectacle : son titre, son accroche, puis sa photo, réduite */
  main .sp-une { display: flex !important; flex-direction: column; justify-content: flex-start !important; min-height: 0 !important; overflow: visible !important; }
  main .une-corps { padding: 0 !important; }
  main .une-ph { position: static !important; order: 2; display: block; height: auto !important; margin: 4mm 0 0; background: transparent !important; }
  main .une-credit { order: 3; }
  main .une-sur::before, main .une-statut::before { display: none !important; }
  main .une-ph img { position: static !important; width: auto !important; max-width: 100%; height: auto !important; max-height: 7cm; object-fit: contain; transform: none !important; }
  main .une-credit { position: static !important; writing-mode: horizontal-tb; transform: none; margin: 1mm 0 0; font-size: 8pt; }
  main .sp-une .u-titre { font-size: 30pt !important; margin: 0 0 3mm; }
  main .chap-t, main .s7-titre, main .s7-t, main .p4-titre { font-size: 18pt !important; margin: 0 0 4mm !important; break-after: avoid; }
  main h1, main h2, main h3, main .s7-h, main .d7-mois-t, main .p4-mois { break-after: avoid; }
  /* le reste de la page coule d'une colonne : rien n'est épinglé, les grilles se posent l'une sous l'autre */
  main .sp-grille, main .rc, main .ag7, main .u-tournee, main .rs-corps { display: block !important; }
  main [class*="rc-"], main .sp-chaps, main .ag-listes { position: static !important; height: auto !important; min-height: 0 !important; }
  main img { max-height: 6cm; width: auto !important; max-width: 100%; object-fit: contain; break-inside: avoid; }
  main figure { break-inside: avoid; }
  /* les dates : une date ne se coupe pas ; ses boutons deviennent du texte ; la carte de réservation de la date choisie
     reste, son lien écrit en clair */
  main li, main .rs-carte, main .rs-ici, main .u-pt, main .fp, main .ac, main tr { break-inside: avoid; }
  main .rs-bande { display: flex !important; flex-wrap: wrap; gap: 2mm 4mm; overflow: visible !important; }
  main .rs-date { border: 1px solid #aaa !important; border-radius: 0 !important; padding: 1.5mm 3mm !important; min-width: 0 !important; }
  main .rs-date::after, main .rs-date::before { display: none !important; }
  main .rs-carte { min-height: 0 !important; margin: 4mm 0 !important; border: 1px solid #aaa !important; border-radius: 0 !important; }
  main .rs-c { max-width: none !important; padding: 4mm !important; }
  main .rs-reserver { display: inline !important; padding: 0 !important; font-weight: 700; text-decoration: none; }
  main .rs-reserver .rs-fleche { display: none; }
  main .rs-reserver::after, main a.rs-seance::after { content: " (" attr(href) ")"; font-weight: 400; font-size: 9pt; overflow-wrap: anywhere; }
  main .rs-r { display: inline !important; }
  main .rs-r1, main .rs-r2 { display: inline; font-size: 11pt !important; }
  main .rs-r2::before { content: " · "; }
  main .rs-ici[hidden], main .sai-corps:empty { display: none !important; }
  main .rs-date--ligne { border: 0 !important; padding: 0 !important; margin: 0 !important; }
  main details:not([open]) > :not(summary) { display: none; }
  main a { text-decoration: underline; }
  /* les légendes sous leur photo (à l'écran, elles chevauchent son bas), les flèches et les chevrons des boutons, qui ne
     mènent nulle part sur le papier ; les liens vers un autre site écrits en clair (une seule fois, ceux des dates compris) */
  main figcaption { position: static !important; inset: auto !important; width: auto !important; max-width: none !important; margin: 1.5mm 0 0 !important; padding: 0 !important; border: 0 !important; white-space: normal !important; font-size: 9pt; }
  main svg.fleche, main svg.chev, main svg.ext { display: none !important; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: 400; font-size: 9pt; overflow-wrap: anywhere; }
  main .rs-reserver::after, main a.rs-seance::after { content: " (" attr(href) ")" !important; }
  /* le contact : les coordonnées et le courriel ; le formulaire, qui ne s'envoie pas d'une feuille, reste à l'écran */
  main .contact { display: block !important; }
  main .formulaire { display: none !important; }
  main .ct-ecrire .bouton { display: inline !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; font-weight: 700; text-decoration: none; }
  main .ct-ecrire .bouton::after { content: " :"; }
  main .ct-courriel { font-weight: 700; }
  main address, main .ct-coord { break-inside: avoid; }
}