/* Mots d'encre 5.0 · « L'encre dans l'eau »
   Un livre tombé dans la mer : la lumière en surface, l'encre indigo qui se diffuse, le papier des pages, un reflet de nacre,
   un peu d'or pour les découvertes. Dans les pages, on remonte lire au calme, sur le papier. */
:root {
  /* « L'encre dans l'eau » : de la lumière en surface, du bleu profond au fond, de l'encre indigo, du papier, de la nacre, un peu d'or */
  --nacre: #F7F3EA;      /* le papier des pages intérieures */
  --sable: #EEE7D8;
  --papier: #FCFAF5;     /* une page posée sur le papier */
  --lagon: #3FBFBE;
  --lagon-f: #0E6B78;    /* liens et boutons (un seul ton pour tout ce qui se touche) */
  --lien: #0E6B78;
  --lagon-c: #CDEFE9;
  --ecume: #E3F4F0;
  --abysse: #0A3F55;     /* avec modération : le fond de la mer */
  --abysse-c: #DCE8EE;
  --corail: #D9826A;
  --corail-f: #9E4A36;
  --corail-c: #F6E1D8;
  --or: #C9A14A;
  --or-f: #765311;
  --or-c: #F1DFAE;
  --encre: #161B44;      /* l'encre : le titre, les traits, le texte */
  --texte: #14283A;
  --texte-2: #4C6272;
  --encre-2: #4C6272;
  --trait: rgba(22, 27, 68, .12);
  --voile: rgba(247, 243, 234, .95);
  --ombre: 0 1px 2px rgba(10, 63, 85, .06), 0 14px 30px -16px rgba(10, 63, 85, .35);
  --ombre-haute: 0 -1px 0 rgba(22, 27, 68, .07), 0 -8px 24px -12px rgba(10, 63, 85, .2);
  --porte: var(--lagon-f);       /* la couleur de la porte où l'on est */
  --porte-c: var(--ecume);

  --f-titre: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --f-texte: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --f-ui: 'Instrument Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;

  --cote: max(16px, env(safe-area-inset-left, 0px));
  --cote-d: max(16px, env(safe-area-inset-right, 0px));
  --haut: env(safe-area-inset-top, 0px);
  --bas: env(safe-area-inset-bottom, 0px);
  --barre-bas: 60px;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body[data-porte="explorer"] { --porte: var(--abysse); --porte-c: var(--abysse-c); }
body[data-porte="creer"] { --porte: var(--corail-f); --porte-c: var(--corail-c); }
body[data-porte="jouer"] { --porte: var(--abysse); --porte-c: var(--abysse-c); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nacre); }
body {
  margin: 0; background: var(--nacre) url(img/papier.png); color: var(--encre);
  font: 400 17px/1.5 var(--f-ui);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--lagon-f); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lagon-f); outline-offset: 2px; border-radius: 10px; }
[hidden] { display: none !important; }
.cache-visuel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- Le logo ---------- */
.logo { display: inline-flex; align-items: center; gap: .45em; color: var(--encre); text-decoration: none; }
.logo svg { width: 1.15em; height: 1.15em; flex: none; }
.logo b { font: 400 1em/1 var(--f-titre); letter-spacing: -.005em; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 1.5em; border: 0; border-radius: 10px;
  background: var(--lagon-f); color: #fff; font: 600 17px/1.1 var(--f-ui); text-decoration: none;
  cursor: pointer; touch-action: manipulation; transition: transform .15s ease, background-color .2s;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 20px; height: 20px; }
.btn-doux {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 48px; padding: 0 1.2em; border-radius: 10px; border: 1.5px solid var(--trait);
  background: var(--papier); color: var(--encre); font: 500 16px/1.1 var(--f-ui); text-decoration: none; cursor: pointer;
}
.btn-doux:active { transform: scale(.97); }

/* ---------- La barre du haut des pages intérieures ---------- */
.barre {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  min-height: calc(54px + var(--haut)); padding: var(--haut) var(--cote-d) 0 calc(var(--cote) - 10px);
  background: var(--voile); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.barre.roulee { border-bottom-color: var(--trait); }
.retour {
  grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap;
  min-height: 44px; padding: 0 12px 0 6px; border-radius: 12px;
  color: var(--lagon-f); font: 600 16px/1 var(--f-ui); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.retour svg { width: 22px; height: 22px; flex: none; }
.retour:active { background: var(--ecume); }
.barre-titre { grid-column: 2; font: 600 16px/1.2 var(--f-ui); color: var(--encre); opacity: 0; transition: opacity .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.barre.roulee .barre-titre { opacity: 1; }
.barre-droite { grid-column: 3; justify-self: end; display: flex; gap: 4px; }

/* le coffre « Mes trésors » : discret, avec son nom ; doré seulement quand il vient d'apparaître */
.coffre {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 13px 0 10px; border-radius: 999px;
  border: 1.5px solid var(--trait); background: var(--papier); color: var(--or-f); cursor: pointer; font: 600 14px/1 var(--f-ui);
}
.coffre svg { width: 22px; height: 22px; flex: none; }
.coffre span { white-space: nowrap; }
@media (max-width: 359px) { .coffre { padding: 0 10px; } .coffre span { display: none; } }
.coffre.neuf { border-color: var(--or); box-shadow: 0 0 0 4px rgba(201, 154, 59, .18); animation: luire 2.4s ease-in-out 3; }
@keyframes luire { 50% { box-shadow: 0 0 0 8px rgba(201, 154, 59, .08); } }

/* ---------- Les portes (en bas des pages intérieures) : Lire · Explorer · Créer · Jouer (5.0.6 : une quatrième) ---------- */
.portes {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 4px var(--cote-d) var(--bas) var(--cote);
  background: var(--voile); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: var(--ombre-haute);
}
.portes a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; color: var(--encre-2); text-decoration: none; font: 600 13px/1.1 var(--f-ui); letter-spacing: .01em;
  border-radius: 14px; touch-action: manipulation;
}
.portes a span { display: grid; place-items: center; width: 54px; height: 30px; border-radius: 999px; transition: background-color .2s; }
.portes a svg { width: 26px; height: 26px; }
.portes a[aria-current="page"] { color: var(--porte); }
.portes a[aria-current="page"] span { background: var(--porte-c); }
.portes a:active span { background: var(--porte-c); }
body.a-portes { padding-bottom: calc(var(--barre-bas) + var(--bas) + 24px); }

/* ---------- Mise en page des pages intérieures ---------- */
.page { padding: 8px var(--cote-d) 0 var(--cote); max-width: 640px; margin: 0 auto; }
.page-tete { display: grid; gap: 8px; padding: 6px 0 22px; }
.page-tete h1 { margin: 0; font: 400 clamp(32px, 9vw, 44px)/1.05 var(--f-titre); color: var(--encre); letter-spacing: -.01em; }
.chapo { margin: 0; font: italic 400 19px/1.45 var(--f-texte); color: var(--encre-2); max-width: 32em; }
.surtitre { margin: 0; font: 600 13px/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--porte); }
.section-titre { margin: 34px 0 14px; font: 400 24px/1.15 var(--f-titre); color: var(--encre); }

/* ---------- La feuille du bas ---------- */
.feuille-fond { position: fixed; inset: 0; z-index: 40; background: rgba(14, 58, 85, .32); opacity: 0; transition: opacity .25s; }
.feuille-fond.ouverte { opacity: 1; }
.feuille {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 86svh; overflow: auto; overscroll-behavior: contain;
  padding: 10px var(--cote-d) calc(20px + var(--bas)) var(--cote); border-radius: 26px 26px 0 0;
  background: var(--nacre); box-shadow: var(--ombre-haute); transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.feuille.ouverte { transform: none; }
.feuille::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--trait); margin: 0 auto 14px; }
.feuille h2 { margin: 0 0 6px; font: 400 26px/1.15 var(--f-titre); }
.feuille p { margin: 0 0 12px; font: 400 17px/1.5 var(--f-texte); color: var(--encre-2); }
.feuille .btn-doux { width: 100%; margin-top: 8px; }
.feuille-inner { max-width: 560px; margin: 0 auto; }
.maquette {
  display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px;
  background: var(--sable); color: var(--encre-2); font: 600 12px/1.3 var(--f-ui); letter-spacing: .04em; text-transform: uppercase;
}

/* ---------- La marque dorée d'une découverte ---------- */
.decouverte {
  position: fixed; left: 50%; z-index: 50; top: calc(var(--haut) + 62px); cursor: pointer;
  display: flex; align-items: center; gap: 12px; width: min(92vw, 420px); padding: 12px 16px;
  border-radius: 18px; background: var(--papier); color: var(--encre); box-shadow: var(--ombre), 0 0 0 1.5px var(--or);
  transform: translate(-50%, -30px); opacity: 0; transition: transform .45s cubic-bezier(.2, .9, .25, 1.15), opacity .3s;
}
.decouverte.vue { transform: translate(-50%, 0); opacity: 1; }
.decouverte svg { color: var(--or-f); }
.decouverte-ic { display: grid !important; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--or-c); flex: none; }
.decouverte svg { width: 24px; height: 24px; flex: none; }
.decouverte b { display: block; font: 600 16px/1.25 var(--f-ui); }
.decouverte span { display: block; font: 400 15px/1.35 var(--f-texte); color: var(--encre-2); }

/* ---------- Les passages d'une page à l'autre ----------
   Le titre d'une porte devient le titre de la page (et l'inverse au retour) ; le reste se fond. Navigateurs récents
   seulement (Safari 18.2, Chrome 126) ; ailleurs, on change de page sans animation. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.25, .8, .25, 1); }

/* une petite planche : une illustration dont les bords sont lavés, comme une image peinte sur le papier */
.planche { display: block; -webkit-mask: url(img/masque-planche.png) 0 0 / 100% 100% no-repeat; mask: url(img/masque-planche.png) 0 0 / 100% 100% no-repeat; }
.planche img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* un filet d'encre tracé à la main, sous un titre de section */
.filet { display: block; width: 120px; height: 8px; margin-top: 6px; color: var(--encre); opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Mes trésors (la feuille) ---------- */
.tr-titre { margin: 18px 0 10px; font: 600 15px/1.3 var(--f-ui); color: var(--encre); }
.tr-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.tr-coq { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 16px; background: var(--papier); }
.tr-coq svg { width: 40px; height: 40px; filter: grayscale(1); opacity: .45; }
.tr-coq.tr-oui svg { filter: none; opacity: 1; }
.tr-coq span { font: 400 18px/1.2 var(--f-titre); min-width: 0; }
.tr-coq small { font: 600 13px/1 var(--f-ui); color: var(--encre-2); }
.tr-coq.tr-oui small { color: var(--or-f); }
.feuille .tr-note { font-size: 15px; }
.decouverte { border-radius: 12px; }
.feuille { border-radius: 18px 18px 0 0; }

/* ---------- 5.0 : le site réel ---------- */
a.coffre { text-decoration: none; }
a.decouverte { text-decoration: none; color: var(--encre); }
a.decouverte::after { content: ""; flex: none; width: 9px; height: 9px; margin-left: auto; border-top: 2px solid var(--lien); border-right: 2px solid var(--lien); transform: rotate(45deg); }
.portes a span { width: 54px; }
/* « Réduire les animations », choisi dans les réglages du site (tl-reglages), comme le réglage du téléphone */
html.mvt-reduit *, html.mvt-reduit *::before, html.mvt-reduit *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* les écrans plus larges : la barre des portes reste centrée et lisible */
@media (min-width: 760px) { .portes { grid-template-columns: repeat(4, minmax(0, 160px)); justify-content: center; } }
/* sur ordinateur : les trois portes montent dans la barre du haut, au milieu (comme sur les autres pages) */
@media (min-width: 960px) {
  .portes { top: calc(var(--haut) + 7px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); z-index: 22;
    display: flex; gap: 4px; padding: 4px; border-radius: 999px; box-shadow: 0 0 0 1px var(--trait), 0 10px 24px -16px rgba(10, 63, 85, .35); }
  .portes a { flex-direction: row; gap: 6px; min-height: 40px; padding: 0 16px 0 8px; border-radius: 999px; font-size: 14px; }
  .portes a span { width: 30px; height: 30px; background: none !important; }
  .portes a svg { width: 22px; height: 22px; }
  .portes a[aria-current="page"] { background: var(--porte-c); }
  body.a-portes { padding-bottom: 40px; }
  .barre-titre { display: none; }
}

/* ---------- 6.0 · l'accessibilité sur les pages 5.0 (réglages de l'appareil : tl-reglages) ----------
   Le texte agrandi (Réglages → Taille du texte : 1, 1.12, 1.25) : ces pages sont écrites en px, alors on agrandit
   le contenu principal (zoom), jamais les barres fixes ; le texte des poèmes de Lire suit sa propre taille (--t).
   html.texte-grand et --mde-texte sont posés par la page (première ligne) et par nav.js. */
html.texte-grand main.page, html.texte-grand .acc-tete, html.texte-grand .acc-bas,
html.texte-grand .lecture .l-tete, html.texte-grand .lecture .l-fin { zoom: var(--mde-texte, 1.12); }
html.texte-grand .l-texte { --t: calc(20px * var(--mde-texte, 1.12)); }
html.texte-grand .l-texte.t0 { --t: calc(18px * var(--mde-texte, 1.12)); }
html.texte-grand .l-texte.t2 { --t: calc(23px * var(--mde-texte, 1.12)); }
/* le contraste élevé (Réglages → Contraste élevé) : textes secondaires presque noirs, liens plus sombres et soulignés,
   traits marqués, pas de papier texturé ni de transparence derrière le texte */
html.contraste {
  --encre-2: #1F2A36; --texte-2: #1F2A36; --texte: #0B1622; --encre: #0B1033;
  --lagon-f: #084852; --lien: #084852; --corail-f: #7A3020; --or-f: #4F3608; --abysse: #062B3B;
  --trait: rgba(11, 16, 51, .55); --voile: #F7F3EA;
}
html.contraste body { background-image: none; }
html.contraste .barre, html.contraste .portes { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--nacre); }
html.contraste .portes { box-shadow: 0 -1.5px 0 var(--trait); }
html.contraste main a:not(.btn):not(.btn-doux):not([class*="carte"]):not(.lieu):not(.une):not(.fiche):not(.chez):not(.porte) { text-decoration: underline; text-underline-offset: 3px; }
html.contraste :focus-visible { outline: 3px solid #000; outline-offset: 3px; }
html.contraste .btn { background: var(--lagon-f); color: #fff; }
/* 6.0 : le bouton Réglages a pris place en haut à droite. Le titre de la barre (décoratif, aria-hidden) ne capte plus
   les touchers (invisible, il recouvrait « Mes trouvailles ») ; sur téléphone, « Mes trouvailles » ne garde que son
   icône à côté du bouton Réglages (son nom reste lu : aria-label). */
.barre-titre { pointer-events: none; }
@media (max-width: 519px) {
  .barre-droite:has(.nv-reglages) .coffre { padding: 0; width: 44px; justify-content: center; }
  .barre-droite:has(.nv-reglages) .coffre span { display: none; }
}

/* ---------- 6.0 systeme : deux défauts d'une ligne des pages 5.0 sombres (body.page-prof, Jouer) ----------
   - sur ordinateur, la porte active prenait le fond clair --porte-c sous un libellé clair (1,02:1) ;
   - la barre du haut, transparente, laissait passer la mer sous « ‹ Explorer » une fois la page défilée (4,4:1). */
@media (min-width: 960px) { body.page-prof .portes a[aria-current="page"] { background: rgba(127, 217, 212, .16); color: #CFEFEA; } }
body.page-prof .barre.roulee { background: rgba(7, 26, 41, .84); -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px); border-bottom-color: rgba(207, 239, 234, .1); }