@import url("polices.css");

/* ---------------------------------------------------------------
   Domaine de Kerguéhennec, dispositifs tactiles.

   La palette, la typographie et la trame de lignes reprennent la charte
   du site kerguehennec.fr : noir #161615, blanc, orange d'accent, Roboto.
   Les gravures anciennes du fonds gardent leur titre en Fraunces, seule
   liberté prise sur la charte, pour distinguer les ouvrages du 18e siècle
   du reste de l'interface.
   --------------------------------------------------------------- */

:root {
  --nuit: #161615;
  --nuit-fonce: #0E0E09;
  --creme: #F4F2EE;
  --creme-fonce: #E7E4DD;
  --blanc: #FFFFFF;
  --brun: #161615;
  --brun-vif: #3A3A38;
  --dore: #F07E10;
  --gris: #7C7A73;
  --moulure: #D6D2C9;
  --moulure-claire: #E6E3DB;
  --encre: #161615;

  --ombre: 0 1px 2px rgba(22, 22, 21, 0.05), 0 10px 26px rgba(22, 22, 21, 0.12);
  --ombre-forte: 0 4px 12px rgba(22, 22, 21, 0.10), 0 28px 64px rgba(22, 22, 21, 0.22);
  --ombre-pressee: 0 1px 2px rgba(22, 22, 21, 0.08), 0 3px 8px rgba(22, 22, 21, 0.12);

  --r-carte: 0px;
  --r-image: 0px;

  /* Le visiteur fait varier ce facteur avec le contrôle « Taille du texte ». */
  --texte: 1;

  /* Unité de mise en page. Elle vaut 1 pixel sur un écran de 1920 de large,
     puis suit la fenêtre, bornée pour que rien ne devienne illisible ni
     énorme. Les dimensions du fichier s'écrivent en multiples de cette unité,
     par exemple calc(60 * var(--u)) pour un titre de 60 pixels. */
  --u: clamp(0.62px, 100vw / 1920, 1.35px);

  --titre: "Roboto", Helvetica, Arial, sans-serif;
  --ancien: "Fraunces", Georgia, serif;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Roboto", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #0E0E09;
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Le cadre occupe toute la fenêtre. Les dimensions intérieures suivent
   l'échelle --e, les grilles et les colonnes se réagencent d'elles-mêmes. */
#scene { position: fixed; inset: 0; overflow: hidden; }

#frame {
  position: absolute;
  inset: 0;
  background: var(--creme);
  color: var(--encre);
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Grain de papier, posé au-dessus des écrans mais sous l'agrandissement
   de planche, pour ne pas troubler la lecture d'une gravure en haute
   définition. Il ne reçoit aucun contact. */
#grain {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23b)'/%3E%3C/svg%3E");
}

.ecran {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: row;
}
.ecran.actif { display: flex; animation: entree 0.34s ease both; }
@keyframes entree {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   Titres
   --------------------------------------------------------------- */

.grand-titre, .col-titre, .carte-titre, .cartouche h2, .invite {
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.018em;
}

/* Les ouvrages anciens gardent la serif ornée, sur l'écran de lecture
   comme sur les cartes de la bibliothèque. */
#biblio-ouvrage .col-titre,
.carte-ouvrage .carte-titre {
  font-family: var(--ancien);
  font-weight: 500;
  font-variation-settings: "SOFT" 32, "WONK" 1, "opsz" 72, "wght" 500;
  line-height: 1.08;
  letter-spacing: -0.004em;
}

.surtitre {
  font-family: var(--sans);
  font-size: calc(21 * var(--texte) * var(--u));
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--gris);
}

/* ---------------------------------------------------------------
   La colonne sombre, présente sur tous les écrans de navigation
   --------------------------------------------------------------- */

.colonne {
  position: relative;
  flex: 0 0 clamp(300px, 25%, 560px);
  background: var(--nuit);
  color: var(--creme);
  display: flex;
  flex-direction: column;
  padding: 0 clamp(24px, 2.8vw, 60px) clamp(24px, 2.4vw, 48px);
  overflow: hidden;
}
.colonne::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("ornements/trame-kerguehennec.svg") no-repeat right top;
  background-size: calc(620 * var(--u)) auto;
  opacity: 0.5;
}
.colonne > * { position: relative; }

/* Logo du Domaine, version blanche, tel qu'il est servi sur kerguehennec.fr */
.logo {
  display: block;
  width: calc(352 * var(--u));
  margin: calc(34 * var(--u)) 0 0;
}
.logo.noir { width: calc(400 * var(--u)); margin: 0 auto; }
.logo-morbihan { height: calc(76 * var(--u)); width: auto; opacity: 0.85; }

.col-corps {
  flex: 1;
  min-height: 0;
  margin-top: calc(38 * var(--u));
  display: flex;
  flex-direction: column;
}

.col-lieu {
  font-family: var(--sans);
  font-size: calc(21 * var(--texte) * var(--u));
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--dore);
}
.filet {
  display: block;
  width: calc(72 * var(--u));
  height: calc(2 * var(--u));
  background: var(--dore);
  opacity: 0.65;
  margin: calc(22 * var(--u)) 0 calc(24 * var(--u));
}
.col-titre { font-size: calc(60 * var(--texte) * var(--u)); color: var(--creme); }
.col-titre.petit { font-size: calc(42 * var(--texte) * var(--u)); }
.col-auteur {
  margin-top: calc(14 * var(--u));
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(24 * var(--texte) * var(--u));
  color: rgba(255, 255, 255, 0.78);
}
.col-texte {
  margin-top: calc(26 * var(--u));
  font-family: var(--sans);
  font-size: calc(23 * var(--texte) * var(--u));
  line-height: 1.52;
  color: rgba(255, 255, 255, 0.82);
  min-height: 0;
  overflow: hidden;
}
/* Sur l'écran d'un ouvrage, la notice est longue. Elle occupe la hauteur
   restante et s'efface en bas plutôt que de se cogner au pied de colonne. */
#biblio-ouvrage .col-texte {
  flex: 1;
  font-family: var(--serif);
  font-size: calc(21 * var(--texte) * var(--u));
  line-height: 1.46;
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
}
.col-legende { flex: 0 0 auto; }
.col-texte p + p { margin-top: calc(16 * var(--u)); }

.col-legende {
  margin-top: calc(30 * var(--u));
  padding-top: 0;
  font-size: calc(19 * var(--texte) * var(--u));
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
}
.col-legende .legende { color: rgba(255, 255, 255, 0.88); }
.col-legende .credit { margin-top: calc(6 * var(--u)); font-size: calc(17 * var(--texte) * var(--u)); }

.col-pied {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(14 * var(--u));
  padding-top: calc(24 * var(--u));
}
.col-mention {
  font-size: calc(20 * var(--texte) * var(--u));
  color: rgba(255, 255, 255, 0.6);
}

/* Fil de navigation entre les thèmes, dans la colonne */
.fil {
  margin-top: calc(34 * var(--u));
  position: relative;
  padding-left: calc(28 * var(--u));
}
.fil::before {
  content: "";
  position: absolute;
  left: calc(5 * var(--u));
  top: calc(14 * var(--u));
  bottom: calc(14 * var(--u));
  width: calc(1 * var(--u));
  background: rgba(255, 255, 255, 0.28);
}
.fil button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: calc(11 * var(--u)) 0;
  font-family: var(--sans);
  font-size: calc(22 * var(--texte) * var(--u));
  color: rgba(255, 255, 255, 0.76);
  cursor: pointer;
  position: relative;
}
.fil button::before {
  content: "";
  position: absolute;
  left: calc(-28 * var(--u));
  top: 50%;
  margin-top: calc(-6 * var(--u));
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  border-radius: 50%;
  background: var(--nuit);
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.fil button.on { color: var(--dore); }
.fil button.on::before { background: var(--dore); border-color: var(--dore); }
.fil button:active { color: var(--creme); }

/* ---------------------------------------------------------------
   La zone de contenu, fond crème et cartes blanches
   --------------------------------------------------------------- */

.contenu {
  flex: 1;
  min-width: 0;
  background: var(--creme);
  padding: clamp(24px, 2.8vh, 52px) clamp(24px, 3.1vw, 64px) clamp(20px, 2.2vh, 40px);
  display: flex;
  flex-direction: column;
}

.mention-bas {
  margin-top: auto;
  padding-top: calc(22 * var(--u));
  text-align: center;
  font-size: calc(19 * var(--texte) * var(--u));
  color: var(--gris);
}

.carte {
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  background: var(--blanc);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.carte:active {
  transform: translateY(3px);
  box-shadow: var(--ombre-pressee);
}
.carte .carte-image {
  display: block;
  overflow: hidden;
  background: var(--creme-fonce);
}
.carte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-corps { display: block; }
.carte-corps > span { display: block; }
.carte-titre { color: var(--brun); }
.carte-info {
  font-family: var(--sans);
  font-size: calc(20 * var(--texte) * var(--u));
  color: var(--gris);
}

/* Double filet en retrait du bord, repris des panneaux moulurés des
   boiseries du château. Il se pose au-dessus de l'image et du texte, et
   passe à l'orange de la charte au contact du doigt. */
.carte-corps { position: relative; }
.carte-corps::before,
.carte-corps::after {
  content: "";
  position: absolute;
  border: 1px solid var(--moulure);
  pointer-events: none;
  transition: border-color 0.16s ease;
}
.carte-corps::before { inset: calc(10 * var(--u)); }
.carte-corps::after { inset: calc(15 * var(--u)); border-color: var(--moulure-claire); }
.carte:active .carte-corps::before,
.carte:active .carte-corps::after { border-color: var(--dore); }

/* ---------------------------------------------------------------
   Accueil
   --------------------------------------------------------------- */

#accueil {
  flex-direction: column;
  align-items: center;
  background: var(--creme);
  padding: clamp(20px, 2.6vh, 40px) clamp(24px, 5vw, 100px) clamp(20px, 2.4vh, 36px);
}
.accueil-tete { text-align: center; }
.accueil-tete .grand-titre { margin-top: calc(26 * var(--u)); }
.grand-titre {
  margin-top: calc(10 * var(--u));
  font-size: calc(74 * var(--texte) * var(--u));
  color: var(--brun);
}

.grille-lieux {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 30%, 620px), 1fr));
  align-content: center;
  gap: clamp(18px, 2vw, 40px);
  margin-top: clamp(18px, 2vw, 38px);
}
.carte-lieu .carte-image { aspect-ratio: 3 / 2; }
.carte-lieu .carte-corps { padding: calc(24 * var(--u)) calc(30 * var(--u)) calc(28 * var(--u)); }
.carte-lieu .carte-titre {
  margin-top: calc(8 * var(--u));
  font-size: calc(34 * var(--texte) * var(--u));
}
.carte-lieu .carte-info { margin-top: calc(12 * var(--u)); line-height: 1.4; }

.accueil-pied {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(32 * var(--u));
  padding-top: calc(26 * var(--u));
}
.accueil-pied .mention {
  flex: 1;
  font-size: calc(19 * var(--texte) * var(--u));
  color: var(--gris);
}

/* ---------------------------------------------------------------
   Bibliothèque, thèmes et ouvrages
   --------------------------------------------------------------- */

.grille-themes {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(300px, 45%, 780px), 1fr));
  align-content: center;
  gap: clamp(16px, 1.6vw, 30px);
}
.carte-theme .carte-corps { padding: calc(24 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u)); }
.carte-theme .carte-titre {
  margin-top: calc(6 * var(--u));
  font-size: calc(38 * var(--texte) * var(--u));
}
.carte-theme .carte-image { aspect-ratio: 21 / 10; }

.grille-ouvrages {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 1.9vw, 36px);
  justify-content: center;
  align-content: center;
  align-items: flex-start;
}
.carte-ouvrage { width: clamp(240px, 26vw, 620px); }
.carte-ouvrage .carte-image {
  height: clamp(280px, 52vh, 880px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(26 * var(--u));
  background: var(--blanc);
}
.carte-ouvrage img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 3px;
}
.carte-ouvrage .carte-corps {
  padding: calc(22 * var(--u)) calc(28 * var(--u)) calc(26 * var(--u));
}
.carte-ouvrage .carte-titre {
  font-size: calc(28 * var(--texte) * var(--u));
  font-variation-settings: "SOFT" 32, "WONK" 1, "opsz" 36, "wght" 500;
  line-height: 1.2;
}
.carte-ouvrage .carte-info { margin-top: calc(10 * var(--u)); }

/* ---------------------------------------------------------------
   Bibliothèque, une planche ouverte
   --------------------------------------------------------------- */

.planche-zone {
  padding: calc(40 * var(--u)) calc(54 * var(--u)) calc(32 * var(--u));
  align-items: center;
}
.cadre-planche {
  flex: 1;
  width: 100%;
  min-height: 0;
  background: var(--blanc);
  border-radius: 0;
  box-shadow: var(--ombre-forte);
  padding: calc(30 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}
.cadre-planche img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 3px;
}

.barre-planche {
  margin-top: calc(26 * var(--u));
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
}
.barre-planche .indice {
  font-size: calc(22 * var(--texte) * var(--u));
  color: var(--gris);
  min-width: calc(230 * var(--u));
  text-align: center;
}
.barre-planche .pilule { margin-left: auto; }

/* ---------------------------------------------------------------
   Écuries et Bergerie
   --------------------------------------------------------------- */

.grille-media {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 28%, 480px), 1fr));
  align-content: center;
  justify-content: center;
  gap: clamp(16px, 1.6vw, 30px);
}
.carte-capsule .carte-image { aspect-ratio: 7 / 5; position: relative; }
.carte-capsule .carte-corps {
  padding: calc(22 * var(--u)) calc(26 * var(--u)) calc(24 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  text-align: left;
}
.carte-capsule .carte-titre {
  flex: 1;
  font-size: calc(27 * var(--texte) * var(--u));
  line-height: 1.2;
}
.carte-capsule .duree {
  font-family: var(--sans);
  font-size: calc(20 * var(--texte) * var(--u));
  color: var(--gris);
  white-space: nowrap;
}
/* Pastille de lecture posée sur la vignette */
.carte-capsule .jouer {
  position: absolute;
  left: calc(22 * var(--u));
  bottom: calc(22 * var(--u));
  width: calc(68 * var(--u));
  height: calc(68 * var(--u));
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: var(--ombre);
  display: grid;
  place-items: center;
}
.carte-capsule .jouer::before {
  content: "";
  width: 0; height: 0;
  margin-left: calc(5 * var(--u));
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 20px solid var(--brun);
}

/* ---------------------------------------------------------------
   Lecture d'une vidéo ou d'un podcast
   --------------------------------------------------------------- */

#lecteur { background: var(--nuit-fonce); display: none; }
#lecteur.actif { display: block; }
#lecteur .visuel { position: absolute; inset: 0; }
#lecteur .visuel img,
#lecteur .visuel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--nuit-fonce);
}
/* La règle de display ci-dessus l'emporterait sur l'attribut hidden. */
#lecteur .visuel img[hidden],
#lecteur .visuel video[hidden] { display: none; }
#lecteur .visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,14,9,0) 30%, rgba(14,14,9,0.45) 66%, rgba(14,14,9,0.86) 100%);
}
#lecteur .cartouche {
  position: absolute;
  left: clamp(24px, 4vw, 80px);
  bottom: clamp(120px, 20vh, 230px);
  width: clamp(280px, 46vw, 900px);
  max-width: calc(100% - 2 * clamp(24px, 4vw, 80px));
  background: var(--creme);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-forte);
  padding: calc(30 * var(--u)) calc(36 * var(--u)) calc(34 * var(--u));
}
#lecteur .cartouche h2 {
  margin-top: calc(8 * var(--u));
  font-size: calc(44 * var(--texte) * var(--u));
  color: var(--brun);
}
#lecteur .cartouche .texte {
  margin-top: calc(16 * var(--u));
  font-family: var(--sans);
  font-size: calc(23 * var(--texte) * var(--u));
  line-height: 1.5;
}
#lecteur .commande-lecture {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(96px, 13.7vh, 160px);
  background: linear-gradient(180deg, rgba(14,14,9,0) 0%, rgba(14,14,9,0.78) 42%, rgba(14,14,9,0.95) 100%);
  display: flex;
  align-items: center;
  gap: calc(30 * var(--u));
  padding: 0 clamp(20px, 4vw, 80px);
  color: var(--creme);
}
.jauge {
  flex: 1;
  height: calc(8 * var(--u));
  border-radius: 0;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.jauge span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0;
  background: var(--dore);
  transition: width 0.1s linear;
}
.restant {
  font-size: calc(21 * var(--texte) * var(--u));
  font-variant-numeric: tabular-nums;
  min-width: calc(220 * var(--u));
  color: rgba(255, 255, 255, 0.9);
}

/* ---------------------------------------------------------------
   Boutons
   --------------------------------------------------------------- */

.pilule {
  height: calc(64 * var(--u));
  padding: 0 calc(30 * var(--u));
  border: none;
  border-radius: 0;
  background: var(--blanc);
  color: var(--brun);
  font-family: var(--sans);
  font-size: calc(21 * var(--texte) * var(--u));
  font-weight: 600;
  box-shadow: var(--ombre);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--u));
  white-space: nowrap;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.pilule:active { transform: translateY(2px); box-shadow: var(--ombre-pressee); }

.pilule.sombre {
  background: rgba(255, 255, 255, 0.08);
  color: var(--creme);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: none;
}
.pilule.sombre:active { background: rgba(255, 255, 255, 0.2); }

/* Les boutons de retour portent une flèche pleine tournée vers la gauche. */
.retour-themes::before, .retour-ouvrages::before, .vers-accueil::before,
#lecteur-retour::before, #zoom-fermer::before {
  content: "";
  width: 0; height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 13px solid currentColor;
}

.rond {
  width: calc(68 * var(--u));
  height: calc(68 * var(--u));
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: var(--ombre);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}
.rond:active { transform: translateY(2px); box-shadow: var(--ombre-pressee); }
.rond span {
  width: 0; height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.rond.prec span { border-right: 17px solid var(--brun); margin-right: calc(3 * var(--u)); }
.rond.suiv span { border-left: 17px solid var(--brun); margin-left: calc(3 * var(--u)); }
.rond:disabled { opacity: 0.32; cursor: default; }
.rond:disabled:active { transform: none; box-shadow: var(--ombre); }

.pause i {
  width: calc(6 * var(--u));
  height: calc(24 * var(--u));
  border-radius: 2px;
  background: var(--brun);
  display: block;
}
.pause { grid-auto-flow: column; gap: calc(7 * var(--u)); }
.pause.en-pause i:first-child {
  width: 0; height: 0; background: none;
  margin-left: calc(4 * var(--u));
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 20px solid var(--brun);
}
.pause.en-pause i:last-child { display: none; }

/* Le contrôle « Taille du texte », présent sur tous les écrans */
.taille {
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--u));
  height: calc(60 * var(--u));
  padding: 0 calc(24 * var(--u));
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: none;
  color: var(--creme);
  font-family: var(--sans);
  cursor: pointer;
}
.taille .mot { font-size: calc(20 * var(--texte) * var(--u)); }
.taille .a1 { font-family: var(--sans); font-size: calc(17 * var(--u)); }
.taille .a2 { font-family: var(--sans); font-size: calc(23 * var(--u)); }
.taille .a3 { font-family: var(--sans); font-size: calc(30 * var(--u)); }
.taille .a1, .taille .a2, .taille .a3 { opacity: 0.45; line-height: 1; }
.taille[data-cran="0"] .a1,
.taille[data-cran="1"] .a2,
.taille[data-cran="2"] .a3 { opacity: 1; }
/* Sur les écrans clairs, le contrôle reprend l'encre brune. */
#accueil .taille { border-color: rgba(22, 22, 21, 0.32); color: var(--brun); }

/* ---------------------------------------------------------------
   Agrandissement d'une planche
   --------------------------------------------------------------- */

#zoom {
  position: absolute;
  inset: 0;
  background: var(--nuit-fonce);
  display: none;
  z-index: 40;
  overflow: hidden;
  cursor: grab;
}
#zoom.actif { display: block; }
#zoom.tire { cursor: grabbing; }
#zoom img { position: absolute; transform-origin: 0 0; display: block; max-width: none; }
#zoom .aide {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(112 * var(--u));
  background: rgba(14, 14, 9, 0.94);
  color: var(--creme);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(32 * var(--u));
  padding: 0 calc(48 * var(--u));
  font-size: calc(21 * var(--texte) * var(--u));
  z-index: 2;
}
#zoom .niveau { font-variant-numeric: tabular-nums; color: var(--dore); }

/* ---------------------------------------------------------------
   Écran de veille
   --------------------------------------------------------------- */

#veille {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--nuit-fonce);
  display: none;
  overflow: hidden;
}
#veille.actif { display: block; }
#veille > img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: derive 26s ease-in-out infinite alternate;
}
@keyframes derive {
  from { transform: scale(1.06) translate(1.2%, -1%); }
  to   { transform: scale(1.16) translate(-1.2%, 1%); }
}
.veille-cartouche {
  position: absolute;
  left: clamp(24px, 4.6vw, 92px);
  bottom: clamp(32px, 8.9vh, 100px);
  width: clamp(280px, 40vw, 780px);
  max-width: calc(100% - 2 * clamp(24px, 4.6vw, 92px));
  background: var(--nuit);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-forte);
  padding: 0 calc(48 * var(--u)) calc(44 * var(--u));
  overflow: hidden;
  text-align: left;
}
.veille-cartouche::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("ornements/trame-kerguehennec.svg") no-repeat right top;
  background-size: calc(520 * var(--u)) auto;
  opacity: 0.45;
}
.veille-cartouche > * { position: relative; }
.veille-cartouche .logo { width: calc(300 * var(--u)); margin: calc(34 * var(--u)) 0 0; }
.veille-lieu {
  margin-top: calc(26 * var(--u));
  font-size: calc(21 * var(--u));
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--dore);
}
.invite {
  margin-top: calc(18 * var(--u));
  font-size: calc(42 * var(--u));
  color: var(--creme);
}