/* ==========================================================================
   THE SKY IN EVERY LANGUAGE : la couche projet, et rien de plus.

   La feuille du systeme, odersa-systeme.css, est identique a celle du skill
   odersa-design, octet pour octet. Elle ne se retouche pas. Ce fichier ne
   contient donc que trois choses, et rien d'autre ne s'y ajoute :

   1. une utilite d'accessibilite que le systeme ne fournit pas encore ;
   2. les styles inline documentes des gabarits du skill, promus en composants
      nommes, comme references/gabarits.md le demande explicitement ;
   3. LE MODE NUIT, propre a ce projet : on observe dehors, la nuit, avec des
      yeux adaptes a l'obscurite. Aucune valeur n'y est inventee. Chaque
      couleur employee est une valeur DEJA presente dans le systeme, et chaque
      couple encre/fond est mesure. Les mesures sont dans build/DA.json.

   Aucune couleur en dur hors de ce cadre. Aucun degrade, aucune ombre, aucun
   arrondi, aucun second accent. Les composants de la carte du ciel vivent dans
   assets/css/carte.css, qui appartient au coeur du service.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Accessibilite
   Un texte reserve aux lecteurs d'ecran. Il reste dans le flux du document,
   il ne se cache pas a display:none, et il redevient visible au focus quand
   il porte un lien.
   -------------------------------------------------------------------------- */
.a-lire-seulement {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.a-lire-seulement:focus-within,
a:focus-visible > .a-lire-seulement {
  position: static;
  inline-size: auto;
  block-size: auto;
  clip-path: none;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   2. Les styles des gabarits du skill, promus en noms
   references/gabarits.md : « Dans un vrai projet ils vont dans la feuille sous
   un nom de composant. » Les valeurs sont celles du skill, a l'identique.
   -------------------------------------------------------------------------- */
.cadre-outil {
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--accent);
  padding: var(--s-6);
  background: var(--bg);
}
.zone-resultat {
  margin-block-start: var(--s-6);
  min-block-size: 3rem;
}
.figure-sujet {
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--bg-alt);
}
.figure-sujet img,
.figure-sujet svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.figure-sujet figcaption {
  padding: var(--s-3);
}
.figure-article {
  margin: 0 0 var(--s-8);
}
.chiffre {
  font: 600 var(--t-2xl)/1 var(--serif);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.chiffre-suite {
  margin: var(--s-1) 0 0;
}

/* Une fiche a imprimer : elle ne se coupe pas au milieu, et l'ecran garde le
   filet qui dit qu'il s'agit d'un document a sortir sur papier. */
.fiche-imprimable {
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--accent);
  padding: var(--s-6);
  margin-block: var(--s-8);
}

/* --------------------------------------------------------------------------
   3. LE MODE NUIT
   Fond noir, encre rouge claire. Compose avec les seules valeurs du systeme :
   #0A0A09 et #121210 sont les fonds du theme sombre, #E08D8D est
   --accent-on-dark, #EBA7A7 est --accent-deep du theme sombre, #241616 est
   --accent-bg du theme sombre, #3B3B36 et #2C2C29 sont ses filets, #6E1010 et
   #8C1515 sont les deux rouges pleins du theme clair, employes ici comme
   assises de bouton parce que le blanc y tient 12,04:1 et 9,40:1.
   Plancher le plus bas de tout le mode : 6,96:1. Aucune valeur nouvelle.
   -------------------------------------------------------------------------- */
:root[data-nuit="on"] {
  --bg: #0A0A09;
  --bg-alt: #121210;
  --bg-deep: #0A0A09;
  --ink: #EBA7A7;
  --ink-soft: #EBA7A7;
  --ink-mid: #E08D8D;
  --rule: #3B3B36;
  --rule-soft: #2C2C29;
  --on-dark: #EBA7A7;
  --on-dark-muted: #E08D8D;
  --on-dark-faint: #E08D8D;
  --dark-line: #3B3B36;
  --accent: #E08D8D;
  --accent-deep: #EBA7A7;
  --accent-bg: #241616;
  --accent-on-dark: #E08D8D;
  --link: #EBA7A7;
  --link-hover: #E08D8D;
  --focus: #EBA7A7;
  --btn-solid: #241616;
  --btn-solid-ink: #EBA7A7;
  --btn-solid-hover: #6E1010;
  --btn-solid-hover-ink: #FFFFFF;
  --btn-accent: #6E1010;
  --btn-accent-hover: #8C1515;
  --seg-on-bg: #241616;
  --seg-on-ink: #EBA7A7;
}

/* Contraste renforce, la nuit : la variante claire partout. */
:root[data-nuit="on"][data-contrast="high"] {
  --ink: #EBA7A7;
  --ink-soft: #EBA7A7;
  --ink-mid: #EBA7A7;
  --rule: #E08D8D;
  --link: #EBA7A7;
  --link-hover: #EBA7A7;
  --focus: #EBA7A7;
}

/* La feuille du systeme ecrit du blanc en dur dans ses blocs sombres et dans
   son pied de page : c'est juste de jour, cela brule des yeux adaptes a la
   nuit. Ces quatre regles ne valent que sous data-nuit, elles ne changent rien
   au comportement normal du systeme. */
:root[data-nuit="on"] .band--dark,
:root[data-nuit="on"] .site-foot {
  background: var(--bg);
  color: var(--ink);
}
:root[data-nuit="on"] .band--dark h2,
:root[data-nuit="on"] .band--dark h3,
:root[data-nuit="on"] .band--dark a,
:root[data-nuit="on"] .site-foot a,
:root[data-nuit="on"] .site-foot h2,
:root[data-nuit="on"] .site-foot__brand strong {
  color: var(--ink);
}
:root[data-nuit="on"] .site-foot a:hover,
:root[data-nuit="on"] .site-foot a:focus-visible {
  color: var(--accent-deep);
}
:root[data-nuit="on"] .site-foot__brand svg g,
:root[data-nuit="on"] .site-foot__brand svg {
  stroke: currentColor;
  color: var(--ink);
}
:root[data-nuit="on"] .btn--accent,
:root[data-nuit="on"] .btn--accent:hover {
  color: #FFFFFF;
}

/* La banniere de confiance reste noire dans les deux themes, par regle du
   systeme. Elle est deja lisible la nuit : rien ne la touche. */

/* Le bouton du mode nuit : un bouton du systeme, pas un composant neuf. */
[data-action="nuit"] .nuit-etat::before {
  content: "Allumer";
}
:root[data-nuit="on"] [data-action="nuit"] .nuit-etat::before {
  content: "Eteindre";
}

/* --------------------------------------------------------------------------
   4. LE PANNEAU DE REGLAGES
   Le site mere annonce, sur chaque page, un bouton « Reglages » qui ouvre un
   panneau : taille du texte, espacement, contraste, animations, liens
   soulignes, lecture de la page. Ce projet y ajoute son mode nuit. Les noms de
   classes sont ceux que la flotte sert deja, pour qu'un site se lise comme le
   voisin.

   Rien n'est invente : chaque couleur est un jeton, chaque espacement est de
   l'echelle, aucun arrondi, aucune ombre, aucune propriete physique. Les
   couples mesures, dans les TROIS etats (clair, sombre, nuit) :

     panneau      --ink sur --bg          20,41:1 · 15,53:1 · 10,01:1
     intitules    --ink-mid sur --bg       6,90:1 ·  7,58:1 ·  7,89:1
     onglet       --btn-solid-ink
                  sur --btn-solid         19,53:1 · 15,53:1 ·  8,84:1
     onglet survol --btn-solid-hover-ink
                  sur --btn-solid-hover   12,04:1 · 20,41:1 · 12,04:1
     segment actif --seg-on-ink
                  sur --seg-on-bg         19,53:1 · 15,53:1 ·  8,84:1
     survol liste --ink sur --bg-alt      19,03:1 · 13,64:1 ·  9,48:1
     bord de controle et filet du panneau : --ink-mid et --accent, tous deux
     au-dessus de 3:1 pour un element d'interface dans les trois etats.

   Le plancher de l'ensemble est 6,90:1, l'exigence est 4,5:1.
   -------------------------------------------------------------------------- */

/* L'onglet. Il n'existe que si panneau.js tourne : le bloc est servi avec
   l'attribut hidden, et le script le leve. Sans JavaScript, la page est
   entiere et le panneau ne s'affiche simplement pas. */
.panneau-b {
  position: fixed;
  inset-inline-end: 0;
  inset-block-start: 42vh;
  z-index: 46;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: var(--s-4) var(--s-2);
  border: 1px solid var(--btn-solid);
  background: var(--btn-solid);
  color: var(--btn-solid-ink);
  font: 600 var(--t-xs)/1 var(--sans);
  cursor: pointer;
}
.panneau-b:hover {
  background: var(--btn-solid-hover);
  border-color: var(--btn-solid-hover);
  color: var(--btn-solid-hover-ink);
}
.panneau-b svg { flex: none; }
.panneau-b__txt {
  writing-mode: vertical-rl;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Le voile. Sa translucidite vient de l'opacite de l'element, pas d'une
   couleur a canal alpha : la valeur reste un jeton du systeme. */
.panneau-voile {
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  z-index: 47;
  background: var(--bg-deep);
  opacity: 0.55;
}

.panneau {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 48;
  inline-size: min(26rem, 100%);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  border-inline-start: 3px solid var(--accent);
}
.panneau__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  border-block-end: 1px solid var(--rule);
}
.panneau__tete h2 {
  margin: 0;
  font-size: var(--t-m);
}
.panneau__x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
.panneau__x:hover {
  background: var(--bg-alt);
}
.panneau__corps {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-5);
  display: grid;
  gap: var(--s-8);
}
.panneau__bloc h3 {
  margin: 0 0 var(--s-3);
  font: 600 var(--t-xs)/1.3 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.panneau__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-block-end: var(--s-3);
}
.panneau__label {
  font-size: var(--t-s);
}
.panneau__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
}
.panneau__liste a,
.panneau__liste button {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--s-2) var(--s-3);
  border: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-s)/1.4 var(--sans);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.panneau__liste a:hover,
.panneau__liste button:hover {
  background: var(--bg-alt);
  color: var(--ink);
}
.panneau__liste button[aria-pressed="true"] {
  background: var(--seg-on-bg);
  color: var(--seg-on-ink);
}
.panneau__liste svg { flex: none; }
.panneau__note {
  margin: var(--s-3) 0 0;
  font-size: var(--t-xs);
  color: var(--ink-mid);
}
.panneau__pied {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border-block-start: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--ink-mid);
}

/* Le controle segmente. Son bord emploie --ink-mid et non --rule : un filet
   decoratif tient 1,28:1 sur blanc, ce qui suffit a une bordure de carte mais
   pas a delimiter un element d'interface, ou le plancher est 3:1. */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--ink-mid);
}
.seg__b {
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-inline-end: 1px solid var(--ink-mid);
  background: var(--bg);
  color: var(--ink);
  font: 600 var(--t-xs)/1 var(--sans);
  cursor: pointer;
}
.seg__b:last-child { border-inline-end: 0; }
.seg__b:hover { background: var(--bg-alt); }
.seg__b[aria-pressed="true"] {
  background: var(--seg-on-bg);
  color: var(--seg-on-ink);
}

/* Au telephone, l'onglet descend au coin bas et s'ecrit a l'horizontale : un
   texte vertical au bord d'un ecran de 360 px mange la colonne de lecture.
   Le pied gagne alors la hauteur de l'onglet, sinon l'onglet recouvre le
   dernier lien de la page et le rend inatteignable au doigt. */
@media (max-width: 40rem) {
  .panneau-b {
    inset-block-start: auto;
    inset-block-end: 0;
    flex-direction: row;
    padding: var(--s-3) var(--s-4);
  }
  .panneau-b__txt { writing-mode: horizontal-tb; }
  .site-foot__legal { padding-block-end: var(--s-16); }
}

/* --------------------------------------------------------------------------
   Impression
   Le mode nuit ne s'imprime pas : une fiche de seance sort en noir sur blanc,
   sinon elle vide une cartouche pour rien.
   -------------------------------------------------------------------------- */
@media print {
  :root[data-nuit="on"] {
    --bg: #FFFFFF;
    --bg-alt: #FFFFFF;
    --bg-deep: #FFFFFF;
    --ink: #0D0D0D;
    --ink-soft: #2C2C2C;
    --ink-mid: #5A5A5A;
    --rule: #D8D8D2;
    --accent: #8C1515;
    --link: #8C1515;
  }
  :root[data-nuit="on"] .band--dark,
  :root[data-nuit="on"] .site-foot {
    background: none;
    color: #000000;
  }
  :root[data-nuit="on"] .band--dark h2,
  :root[data-nuit="on"] .band--dark h3,
  :root[data-nuit="on"] .site-foot a {
    color: #000000;
  }
  .fiche-imprimable {
    break-inside: avoid;
    border: 1px solid #000000;
  }
  [data-action="nuit"] {
    display: none !important;
  }
  /* Le panneau de reglages est une commande d'ecran : il ne sort pas au
     papier, et le voile noircirait toute la feuille. */
  .panneau-b,
  .panneau-voile,
  .panneau {
    display: none !important;
  }
}