/* ==========================================================================
   Sous-pages du site (confidentialité, soutien) — thème A « Verre sur scène » (D44)
   Les règles communes sont COPIÉES de site/index.html, mêmes valeurs et même préfixe .var-a :
   l'accueil garde ses styles dans la page pour rester comparable ligne à ligne à la maquette.
   Un jeton ou une règle qui change dans index.html doit donc changer ici aussi.
   ========================================================================== */

/* Polices servies par le site lui-même, et non par Google Fonts : la page ne fait aucune requête
   vers un tiers (rien ne part chez Google, pas même l'adresse IP du visiteur). Fichiers et
   licences OFL dans /fonts. Noto Music n'est pas reprise : ces pages n'affichent aucune clé de portée. */
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/atkinson-hyperlegible-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
html, body { margin: 0; }
/* Le rebond du défilement (iPhone) montre le fond de html : celui du thème affiché, d'abord
   selon le réglage de l'appareil (page sans script, navigateur sans :has), puis selon le choix
   posé par le script. */
html { background: #0d0b0e; }
@media (prefers-color-scheme: light) { html { background: #f4eee3; } }
html:has(.var-a[data-theme="dark"]) { background: #0d0b0e; }
html:has(.var-a[data-theme="light"]) { background: #f4eee3; }
/* Les deux langues sont dans la page (D51) ; le script de <head> a posé data-langue sur <html>
   avant cette feuille. L'autre langue quitte l'écran et les lecteurs d'écran ; sans script, pas
   de data-langue : français. !important : aucune règle d'un composant (display: block, flex…)
   ne doit pouvoir faire revenir l'autre langue. */
html:not([data-langue="en"]) [data-va-l="en"], html[data-langue="en"] [data-va-l="fr"] { display: none !important; }

.var-a {
  --va-fond: #0d0b0e;
  --va-fond-2: #141015;
  --va-encre: #f4eee2;
  --va-sourd: #bcb3a3;
  --va-laiton: #dcb850;
  --va-laiton-plein: #d4af37;
  --va-laiton-clair: #f0d27a;
  --va-sur-laiton: #17120a;
  --va-md: #3ddc97;
  --va-md-encre: #7deab8;
  --va-mg: #b39dff;
  --va-verre: rgba(255, 244, 224, .085);
  --va-verre-2: rgba(255, 244, 224, .025);
  --va-verre-bord: rgba(255, 232, 196, .17);
  --va-verre-reflet: rgba(255, 255, 255, .16);
  --va-verre-opaque: rgba(28, 23, 26, .95);
  --va-verre-fort: rgba(255, 244, 224, .16);
  --va-lueur: rgba(255, 255, 255, .07);
  --va-ombre: 0 30px 70px -30px rgba(0, 0, 0, .85);
  --va-filet: rgba(255, 232, 196, .13);
  --va-focus: #f3d26b;
  --va-bokeh: 222, 180, 80;
  --va-bokeh-2: 255, 160, 100;
  --va-halo-1: rgba(212, 175, 55, .15);
  --va-halo-2: rgba(110, 20, 40, .40);
  --va-halo-3: rgba(61, 220, 151, .06);
  --va-laque-1: #3a2b2f;
  --va-laque-2: #161216;
  --va-laque-3: #060507;
  --va-reflet: #ffd9a0;
  --va-sol: rgba(255, 214, 150, .045);
  --va-titane-a: #8f8a82;
  --va-titane-b: #3a3835;
  --va-titane-c: #b3ada3;
  --va-titane-d: #262523;
  /* Georgia, police du système (D50) : Bodoni Moda, trop fine en italique, se lisait mal. Georgia
     passe en premier : sinon l'iPhone et le Mac prendraient leur Bodoni 72, aussi fine. */
  --va-titre: Georgia, serif;
  --va-texte: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;

  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--va-fond);
  color: var(--va-encre);
  font: 400 17px/1.6 var(--va-texte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Thème clair : même scène, ivoire et laiton, verre plus lumineux. */
.var-a[data-theme="light"] {
  --va-fond: #f4eee3;
  --va-fond-2: #ebe2d1;
  --va-encre: #1d1713;
  --va-sourd: #5b5046;
  --va-laiton: #7d5f0f;
  --va-laiton-plein: #caa232;
  --va-laiton-clair: #b08718;
  --va-md-encre: #0b6b46;
  --va-verre: rgba(255, 255, 255, .64);
  --va-verre-2: rgba(255, 252, 245, .32);
  --va-verre-bord: rgba(255, 255, 255, .92);
  --va-verre-reflet: rgba(255, 255, 255, 1);
  --va-verre-opaque: rgba(253, 250, 244, .96);
  --va-verre-fort: rgba(255, 255, 255, .95);
  --va-lueur: rgba(255, 255, 255, .55);
  --va-ombre: 0 30px 60px -32px rgba(90, 62, 20, .40);
  --va-filet: rgba(70, 48, 18, .14);
  --va-focus: #8a1a33;
  --va-bokeh: 206, 160, 50;
  --va-bokeh-2: 232, 150, 90;
  --va-halo-1: rgba(212, 175, 55, .24);
  --va-halo-2: rgba(170, 70, 90, .10);
  --va-halo-3: rgba(61, 220, 151, .10);
  --va-laque-1: #ffffff;
  --va-laque-2: #f0e6d4;
  --va-laque-3: #d9c9ad;
  --va-reflet: #ffffff;
  --va-sol: rgba(255, 255, 255, .55);
  --va-titane-a: #eeeae3;
  --va-titane-b: #a9a298;
  --va-titane-c: #fbf8f2;
  --va-titane-d: #8b857b;
  color-scheme: light;
}
/* Sans JavaScript : on suit le réglage de l'appareil. */
@media (prefers-color-scheme: light) {
  .var-a:not([data-theme]) {
    --va-fond: #f4eee3;
    --va-fond-2: #ebe2d1;
    --va-encre: #1d1713;
    --va-sourd: #5b5046;
    --va-laiton: #7d5f0f;
    --va-laiton-plein: #caa232;
    --va-laiton-clair: #b08718;
    --va-md-encre: #0b6b46;
    --va-verre: rgba(255, 255, 255, .64);
    --va-verre-2: rgba(255, 252, 245, .32);
    --va-verre-bord: rgba(255, 255, 255, .92);
    --va-verre-reflet: rgba(255, 255, 255, 1);
    --va-verre-opaque: rgba(253, 250, 244, .96);
    --va-verre-fort: rgba(255, 255, 255, .95);
    --va-lueur: rgba(255, 255, 255, .55);
    --va-ombre: 0 30px 60px -32px rgba(90, 62, 20, .40);
    --va-filet: rgba(70, 48, 18, .14);
    --va-focus: #8a1a33;
    --va-bokeh: 206, 160, 50;
    --va-bokeh-2: 232, 150, 90;
    --va-halo-1: rgba(212, 175, 55, .24);
    --va-halo-2: rgba(170, 70, 90, .10);
    --va-halo-3: rgba(61, 220, 151, .10);
    --va-laque-1: #ffffff;
    --va-laque-2: #f0e6d4;
    --va-laque-3: #d9c9ad;
    --va-reflet: #ffffff;
    --va-sol: rgba(255, 255, 255, .55);
    --va-titane-a: #eeeae3;
    --va-titane-b: #a9a298;
    --va-titane-c: #fbf8f2;
    --va-titane-d: #8b857b;
    color-scheme: light;
  }
}

.var-a *, .var-a *::before, .var-a *::after { box-sizing: border-box; }
/* :where() garde le reset à la plus basse priorité : les classes de la variante gagnent toujours. */
.var-a :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
.var-a :where(ul, ol) { padding: 0; list-style: none; }
.var-a :where(a) { color: inherit; }
.var-a svg { overflow: visible; }
.var-a :focus-visible { outline: 3px solid var(--va-focus); outline-offset: 3px; border-radius: 10px; }
/* Un lien ou un bouton qui prend le focus (Maj+Tab surtout) ne s'arrête jamais sous le verre de
   la barre : 12px d'écart + 64px de barre + 12px de marge. Pas de scroll-padding sur html : il
   vaudrait aussi pour la barre collante, dont chaque lien ferait alors remonter la page. */
.var-a a, .var-a button { scroll-margin-top: 88px; }
.var-a-nav a, .var-a-nav button { scroll-margin-top: 0; }
.var-a-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.var-a-conteneur { width: min(100% - 32px, 1200px); margin-inline: auto; }

.var-a .var-a-evitement {
  position: absolute; left: 16px; top: -60px; z-index: 60;
  padding: 10px 16px; border-radius: 12px;
  background: var(--va-laiton-plein); color: var(--va-sur-laiton);
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.var-a .var-a-evitement:focus { top: 12px; }

/* ---------- Verre dépoli ---------- */
.var-a-verre {
  position: relative;
  background: linear-gradient(145deg, var(--va-verre), var(--va-verre-2));
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--va-verre-bord);
  box-shadow: inset 0 1px 0 var(--va-verre-reflet), var(--va-ombre);
  border-radius: 22px;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .var-a-verre { background: var(--va-verre-opaque); }
}

/* ---------- Barre de navigation ---------- */
.var-a-nav { position: sticky; top: 12px; z-index: 40; height: 64px; margin: 12px 0 -76px; padding: 0 16px; }
.var-a-nav-barre {
  max-width: 1200px; height: 100%; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 0 8px 0 14px; border-radius: 20px;
}
.var-a-marque { display: inline-flex; align-items: center; gap: 10px; flex: none; text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: .01em; }
.var-a-marque img { width: 32px; height: 32px; flex: none; }
.var-a-liens { display: flex; gap: 2px; margin-left: auto; }
.var-a-liens a {
  display: block; padding: 8px 12px; border-radius: 12px; white-space: nowrap;
  color: var(--va-sourd); font-size: 15px; text-decoration: none;
  transition: color .2s, background-color .2s;
}
.var-a-liens a:hover { color: var(--va-encre); background: var(--va-lueur); }

/* Le sélecteur de langue (D51) reprend la pastille du thème, curseur glissant compris. */
.var-a-theme, .var-a-langue {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; flex: none;
  padding: 4px; border-radius: 14px;
  background: var(--va-lueur); border: 1px solid var(--va-filet);
}
.var-a-liens + .var-a-langue { margin-left: 4px; }
.var-a-theme button, .var-a-langue button {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--va-sourd); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  transition: color .3s;
}
.var-a-theme button:hover, .var-a-langue button:hover { color: var(--va-encre); }
.var-a-theme button[aria-pressed="true"] { color: var(--va-encre); }
/* La langue active se lit sur <html>, posée avant l'affichage : le bon bouton est allumé dès la
   première image, sans attendre le script qui met aria-pressed à jour. */
html:not([data-langue="en"]) .var-a-langue [data-va-langue="fr"], html[data-langue="en"] .var-a-langue [data-va-langue="en"] { color: var(--va-encre); }
.var-a-theme svg { width: 16px; height: 16px; transform: rotate(-40deg) scale(.8); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.var-a-theme button[aria-pressed="true"] svg { transform: none; }
.var-a-theme-curseur, .var-a-langue-curseur {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 10px; background: var(--va-verre-fort);
  box-shadow: inset 0 1px 0 var(--va-verre-reflet), 0 4px 14px -6px rgba(0, 0, 0, .45);
  transition: transform .45s cubic-bezier(.3, 1.3, .5, 1);
}
.var-a[data-theme="light"] .var-a-theme-curseur { transform: translateX(100%); }
html[data-langue="en"] .var-a-langue-curseur { transform: translateX(100%); }
/* Sans JavaScript, l'interrupteur ne peut rien changer, et l'état écrit dans le HTML (« Sombre »
   activé) contredirait une page claire : on le cache tant que le script n'a pas posé data-theme.
   Même chose pour la langue : sans script, la page reste en français et le sélecteur disparaît. */
.var-a:not([data-theme]) .var-a-theme, html:not([data-langue]) .var-a-langue { display: none; }

/* ---------- Étiquette ---------- */
.var-a-etiquette { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--va-laiton); }
.var-a-etiquette::before { content: ''; width: 26px; height: 1px; background: currentColor; }

/* ---------- Pied de page ---------- */
.var-a-pied { position: relative; padding: 64px 0 40px; border-top: 1px solid var(--va-filet); background: linear-gradient(180deg, transparent, var(--va-fond-2)); }
.var-a-pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 32px; align-items: start; }
.var-a-pied-marque p { margin-top: 10px; color: var(--va-sourd); max-width: 22rem; }
.var-a-pied h2 { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--va-laiton); }
.var-a-pied-liens li + li { margin-top: 6px; }
.var-a-pied a { text-decoration-color: var(--va-filet); text-underline-offset: 4px; }
.var-a-pied a:hover { text-decoration-color: var(--va-laiton-plein); }
.var-a-mention { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--va-filet); color: var(--va-sourd); font-size: 13px;;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
/* Justifié à droite ; sur un écran étroit, il passe sous la mention et reste à droite. */
.var-a-droits { margin-left: auto; text-align: right; white-space: nowrap; }

/* ==========================================================================
   Page de lecture — règles propres aux sous-pages
   ========================================================================== */

/* Dans la barre, la page où l'on est garde l'allure du survol : on voit où l'on se trouve. */
.var-a-liens a[aria-current="page"] { color: var(--va-encre); background: var(--va-lueur); }

/* La barre collante remonte de 76px sur le contenu (marge négative, comme sur la scène de
   l'accueil) : le haut de la page lui laisse la place. */
.var-a-page { position: relative; isolation: isolate; padding: 128px 0 clamp(72px, 9vw, 120px); }
.var-a-halo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Lumière de scène douce, tenue en haut par des hauteurs en px (une page longue ne l'étire pas) :
   c'est elle que le verre de la première carte floute. */
.var-a-page-halo {
  background:
    radial-gradient(50% 560px at 84% 0, var(--va-halo-1), transparent 70%),
    radial-gradient(42% 520px at 4% 420px, var(--va-halo-2), transparent 70%);
}

/* Une colonne d'environ 70 caractères : plus large, l'œil perd le début de la ligne suivante. */
.var-a-lecture { width: min(100% - 32px, 35rem); margin-inline: auto; }
.var-a-page-titre {
  margin-bottom: 16px;
  font-family: var(--va-titre); font-style: italic; font-weight: 600;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -.01em;
  text-wrap: balance;
}
.var-a-lecture h2 { margin: 56px 0 14px; font-size: clamp(20px, 2.1vw, 23px); font-weight: 700; line-height: 1.3; text-wrap: balance; }
/* Court filet de laiton au-dessus de chaque titre, comme devant les étiquettes de l'accueil. */
.var-a-lecture h2::before { content: ''; display: block; width: 26px; height: 1px; margin-bottom: 14px; background: var(--va-laiton); }
.var-a-lecture p, .var-a-lecture li, .var-a-lecture dd { line-height: 1.7; }
.var-a-lecture p + p { margin-top: 14px; }
.var-a-lecture ul li { position: relative; padding-left: 24px; }
.var-a-lecture ul li + li { margin-top: 10px; }
/* Puce en losange de laiton, celle qui sépare les airs de « Au programme » ; centrée sur la
   première ligne (moitié de l'interligne de 1,7). */
.var-a-lecture ul li::before {
  content: ''; position: absolute; left: 3px; top: calc(.85em - 3px);
  width: 6px; height: 6px; rotate: 45deg; background: var(--va-laiton-plein); opacity: .8;
}
/* Les adresses longues (https://…) passent à la ligne au lieu de déborder à 320 px. */
.var-a-lecture a { color: var(--va-laiton); text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.var-a-lecture a:hover { text-decoration-thickness: 2px; }

/* Avis en tête de la politique anglaise (D51) : la version française prime. */
.var-a-lecture .var-a-traduction { margin-top: 18px; color: var(--va-sourd); font-size: 15px; font-style: italic; }

/* Le bloc à lire d'abord (« En bref », « Besoin d'aide ? ») passe dans une carte de verre. */
.var-a-carte { margin-top: 36px; padding: clamp(22px, 4vw, 34px); border-radius: 26px; }
.var-a-carte h2 { margin-top: 0; }

/* Questions fréquentes : chaque paire entre deux filets, comme les coches de l'accueil. */
.var-a-faq > div { padding: 16px 0; border-top: 1px solid var(--va-filet); }
.var-a-faq > div:last-child { border-bottom: 1px solid var(--va-filet); }
.var-a-faq dt { font-weight: 700; line-height: 1.5; }
.var-a-faq dd { margin: 4px 0 0; color: var(--va-sourd); }

/* ---------- Adaptatif (règles de l'accueil pour la barre et le pied) ---------- */
@media (max-width: 1023px) {
  .var-a-pied-grille { grid-template-columns: 1fr 1fr; }
  .var-a-pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .var-a-liens { display: none; }
  .var-a-langue, .var-a-liens + .var-a-langue { margin-left: auto; }
}
@media (max-width: 760px) {
  .var-a-pied-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .var-a { font-size: 16px; }
  .var-a-nav-barre { padding: 0 6px 0 10px; }
  .var-a-page { padding-top: 112px; }
}
@media (max-width: 420px) {
  .var-a-marque span { font-size: 16px; }
}
/* Barre de navigation (D51) : le sélecteur de langue garde toujours ses deux mots. Seuils mesurés
   en français, la langue la plus longue, avec au moins 12 px de reste pour les écarts de rendu
   d'un navigateur à l'autre. Les mots Sombre et Clair laissent leurs icônes seules là où tout ne
   tient pas (901 à 970 px, et 660 px ou moins) ; les liens, plus courts qu'à l'accueil, restent
   dès 901 px. */
@media (max-width: 660px), (min-width: 901px) and (max-width: 970px) {
  .var-a-theme button { padding: 6px 10px; }
  .var-a-theme-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* 520 px ou moins : le nom à côté du logo ne tient plus avec les deux sélecteurs. Il quitte
   l'écran, pas les lecteurs d'écran (le lien garde son nom), et le logo reste. */
@media (max-width: 520px) {
  .var-a-nav .var-a-marque span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* 400 px ou moins : écarts et pastilles un peu resserrés, les mots gardent leurs 12 px. */
@media (max-width: 400px) {
  .var-a-nav-barre { gap: 8px; }
  .var-a-theme button { padding: 6px 9px; }
  .var-a-langue button { padding: 6px 10px; }
}
/* 380 px ou moins : FRANÇAIS / ENGLISH passent de 12 à 11 px, et tout se resserre encore, pour
   tenir jusqu'à 320 px sans retirer les mots. */
@media (max-width: 380px) {
  .var-a-nav-barre { padding: 0 4px 0 8px; }
  .var-a-theme button { padding: 6px; }
  .var-a-langue button { padding: 6px 5px; font-size: 11px; letter-spacing: .04em; }
}

/* Mouvement réduit : le curseur du thème, les survols et le lien d'évitement changent sans glisser. */
@media (prefers-reduced-motion: reduce) {
  .var-a *, .var-a *::before, .var-a *::after { animation: none !important; transition: none !important; }
}