/* Shared navigation, loaded after each page's theme. */
nav.wood-nav {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #1a3027;
  border: 0;
  border-top: 1px solid #d1bc8733;
  border-bottom: 2px solid #a58b54;
}
nav.wood-nav > a,
nav.wood-nav > a:last-child:nth-child(7) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: auto;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 14px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f1ead5;
  font: 600 1rem/1.4 'Trebuchet MS', Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color .15s, color .15s;
}
nav.wood-nav > a:hover { background: #304c3c; color: #fff; }
nav.wood-nav > a:last-child { grid-column:auto; }
nav.wood-nav > a[aria-current="page"] {
  background: #e8d7aa;
  color: #20382b;
  box-shadow: inset 0 -3px #a58b54;
}
nav.wood-nav > a:focus-visible { outline: 3px solid #d5ac63; outline-offset: -4px; }
@media (max-width: 1000px) {
  nav.wood-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  nav.wood-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  nav.wood-nav > a:last-child:nth-child(7) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  nav.wood-nav > a { transition: none; }
}
/* Shared book-like tabs under the illustrated masthead. */
nav.wood-nav {
 width:calc(100% - 48px); max-width:1200px; margin:0 auto;
 padding:7px 12px 0; gap:3px;
 background:linear-gradient(#655036,#3d3022);
 border:1px solid #a78b59; border-top:1px solid #c6ae76; border-bottom:3px solid #ad9364;
 box-shadow:0 12px 24px #14251b15;
}
nav.wood-nav > a,nav.wood-nav > a:last-child:nth-child(7) {
 min-height:50px; padding:12px 5px; border-radius:4px 4px 0 0;
 color:#f3e6c6; font-size:15px; font-weight:400;
 border:1px solid transparent; border-bottom:0;
}
nav.wood-nav > a:hover { background:#826544; color:#fff5dd; }
nav.wood-nav > a[aria-current="page"] {
 background:linear-gradient(#f2e6c8,#e8d6ab); color:#362c1e;
 border-color:#c9b184; box-shadow:0 -2px 8px #1e190b24; font-weight:700;
}
@media(max-width:1000px) {
 nav.wood-nav { grid-template-columns:repeat(3,minmax(0,1fr)); padding:7px; }
 nav.wood-nav > a,nav.wood-nav > a:last-child:nth-child(7) { border-radius:3px; }
}
@media(max-width:600px) {
 nav.wood-nav { width:calc(100% - 24px); grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; }
 nav.wood-nav > a,nav.wood-nav > a:last-child:nth-child(7) { min-height:44px; padding:9px 3px; font-size:14px; }
}

/* --- bouton de compte --- */
/* Le compte est la seule porte du site : il ne doit ni se perdre dans le decor
   ni voler la vedette au titre. Il etait pose au chausse-pied dans un coin du
   frontispice, en pastille sombre sur une photo sombre -- on ne le voyait pas.
   Il pend desormais du bord haut du bandeau comme un signet de parchemin :
   c'est le miroir exact des onglets de la navigation, qui s'accrochent sous ce
   meme bandeau. Meme bois, meme filet dore, meme geste ; au survol la plaque
   s'allume en parchemin, comme un onglet actif.
   Il partage son axe vertical avec la pastille « En construction » (droite,
   bas) : les deux reperes du bandeau s'alignent et ne se croisent jamais. */
header.masthead { position: relative; }

.masthead-compte {
  position: absolute; top: 0; right: 20px; z-index: 5;
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 42px; padding: 12px 18px 13px 20px;
  border: 1px solid #c9a765; border-top: 0;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(#233b2c, #16281f);
  box-shadow: inset 0 1px 0 #f2c75b3d, inset 0 -2px 0 #f2c75b1f, 0 7px 16px #0b1a1347;
  font: 400 13px/1 Georgia, 'Times New Roman', serif;
  letter-spacing: .17em; text-transform: uppercase;
  color: #f4dfa4; text-decoration: none; white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.masthead-compte span {
  flex: 0 0 auto; font-size: 10px; line-height: 1;
  color: #f2c75b; transition: color .18s;
}
.masthead-compte:hover,
.masthead-compte:focus-visible {
  background: linear-gradient(#fbeec2, #f0d189);
  border-color: #ad7436;
  box-shadow: inset 0 -2px 0 #ad743630, 0 7px 16px #0b1a1347;
  color: #4a2a12;
}
.masthead-compte:hover span,
.masthead-compte:focus-visible span { color: #9c612b; }
.masthead-compte:active { box-shadow: inset 0 2px 5px #0b1a1359; }
header.masthead .masthead-compte:focus-visible { outline: 3px solid #f2c75b; outline-offset: 2px; }

@media (max-width: 760px) {
  .masthead-compte {
    right: 16px; min-height: 40px; padding: 11px 15px 12px 16px;
    gap: 9px; font-size: 12px; letter-spacing: .14em;
  }
}
@media (max-width: 600px) {
  .masthead-compte { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .masthead-compte { transition: none; }
}

/* Sur la page des versions : ce qu'on dit a qui n'est pas connecte. */
.client-ferme {
  margin: 10px 0; padding: 10px 13px;
  border: 1px solid #c79a3e; background: #fbe7ad;
  font-size: 13px; line-height: 1.5; color: #5f4327;
}

/* Sur la page des versions : l'avertissement pose une seule fois, en haut de
   la liste, ce que chaque fiche repetait. Parchemin, bois et or du site, avec
   l'ombre dure des cartes pour qu'il se detache sans crier. */
.essai-avertissement {
  margin: 26px 0; padding: 22px 26px;
  background: #fff0bd; color: #4a2a12;
  border: 1px solid #ad7436; border-left: 6px solid #9c612b;
  box-shadow: 2px 3px 0 #8d5628;
}
.essai-avertissement h2 {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 14px;
  font: 400 25px/1.25 Georgia, 'Times New Roman', serif; color: #7a3f13;
}
.essai-avertissement h2::before {
  content: ""; flex: 0 0 auto; width: 13px; height: 13px;
  background: #f2c75b; border: 1px solid #ad7436; transform: rotate(45deg);
}
.essai-avertissement ul { margin: 0; padding-left: 24px; list-style: square; }
.essai-avertissement li { margin: 9px 0; font-size: 15px; line-height: 1.55; }
.essai-avertissement li::marker { color: #9c612b; }
.essai-avertissement strong { color: #6d3a10; }
.essai-avertissement .essai-mdp {
  margin: 16px 0 0; padding-top: 13px;
  border-top: 1px solid #d7ab63;
  font-size: 14px; line-height: 1.55; color: #5f4327;
}

@media (max-width: 750px) {
  .essai-avertissement { padding: 17px 18px; }
  .essai-avertissement h2 { font-size: 22px; }
}