/* Le compte joueur, dans la langue graphique du site : parchemin, bois et or.
   Aucune couleur n'est posee au hasard — ce sont celles de styles.css :
   parchemin #f4ecd7, bois #9c612b, or #f2c75b, encre #3c2816, filet #bf8a46,
   et la carte de quete #fff0bd bordee #ad7436 avec son ombre dure 2px 3px 0
   #8d5628. Titres en Georgia, textes en Trebuchet MS.

   La page prend la largeur de la coquille (`--cadre` de layout.css : 1 600 px
   au plus, sinon l'ecran moins ses gouttieres) — le bandeau, la navigation et
   le pied s'alignent dessus au pixel pres. **Ce qui s'elargit, c'est ce qui
   est structure** : la grille des clients, les faits du compte, la marche a
   suivre. La prose, elle, reste bornee a `--mesure` : une ligne de 1 500 px ne
   se lit pas. */

/* ---------------------------------------------------------------- la page */
.compte-main {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--cadre);
  margin: 0 auto;
  padding: 36px 0 66px;
  overflow-wrap: anywhere;
}
.compte-main > * { min-width: 0; }

/* Le titre et son surtitre : une seule respiration en haut de page, close
   par le filet de bois du site. */
.compte-tete {
  margin: 0 0 24px;
  padding: 0 0 17px;
  border-bottom: 2px solid #bf8a46;
}
.compte-kicker {
  margin: 0 0 10px;
  font: 700 11px/1.3 'Trebuchet MS', Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9c612b;
}
.compte-main h1 {
  margin: 0;
  font: 400 clamp(31px, 3.3vw, 44px)/1.14 Georgia, 'Times New Roman', serif;
  letter-spacing: -.02em;
  color: #4a2a12;
}
.compte-main .chapeau {
  max-width: min(100%, var(--mesure, 68ch));
  margin: 0 0 30px;
  font: 17px/1.68 'Trebuchet MS', Arial, sans-serif;
  color: #5f4327;
}
.compte-main .chapeau a,
.compte-main .passerelle a,
.carte-annexe a,
.carte-compte p a {
  color: #7f251b;
  font-weight: bold;
  text-underline-offset: 3px;
}
.compte-main a:focus-visible { outline: 3px solid #9c612b; outline-offset: 3px; }

/* Deux dispositions selon la page : cote a cote quand il y a de quoi remplir
   les deux colonnes, centre quand il n'y a qu'un formulaire court. */
.deux-colonnes {
  display: grid;
  gap: 22px;
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}
.compte-colonnes {
  display: grid;
  gap: 22px;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Les pages qui n'ont qu'un message : une colonne de lecture, alignee sur le
   titre plutot que centree sous lui. */
.compte-centre { max-width: 42rem; margin: 0; }

/* ------------------------------------------------------------- les cartes */
.carte-compte {
  box-sizing: border-box;
  background: #fff0bd;
  border: 1px solid #ad7436;
  box-shadow: 2px 3px 0 #8d5628;
  padding: 22px 26px 26px;
  margin: 0 0 22px;
}
.deux-colonnes > .carte-compte,
.compte-colonnes > .carte-compte { margin-bottom: 0; }
/* Le titre d'une carte, quel que soit son rang : `h2` quand la carte se
   suffit a elle-meme, `h3` quand elle est deja sous le titre d'un bloc — le
   dessin ne change pas, seule la place dans le plan change. */
.carte-compte h2, .carte-compte h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  padding: 0 0 13px;
  border-bottom: 1px solid #d8b06a;
  font: 400 23px/1.25 Georgia, 'Times New Roman', serif;
  color: #7a3f13;
}
.carte-compte h2::before, .carte-compte h3::before {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  background: #f2c75b;
  border: 1px solid #ad7436;
  transform: rotate(45deg);
}
.carte-compte p {
  margin: 0 0 12px;
  font: 15px/1.65 'Trebuchet MS', Arial, sans-serif;
  color: #5f4327;
}
.carte-compte p:last-child { margin-bottom: 0; }
.carte-compte b, .carte-compte strong { color: #6d3a10; }
.compte-main code {
  background: #f4ecd7;
  border: 1px solid #bf8a46;
  padding: 1px 6px;
  font: 14px 'Courier New', monospace;
  color: #52301a;
}

/* Le panneau d'appoint : meme famille, un ton plus bas que la carte. */
.carte-annexe {
  box-sizing: border-box;
  background: #f4ecd7;
  border: 1px solid #bf8a46;
  border-top: 3px solid #9c612b;
  padding: 21px 23px 23px;
}
.carte-annexe h2, .carte-annexe h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 13px;
  padding: 0 0 11px;
  border-bottom: 1px solid #d8b06a;
  font: 400 19px/1.3 Georgia, 'Times New Roman', serif;
  color: #7a3f13;
}
/* Le meme losange que sur les cartes, mais en filet : la soeur discrete. */
.carte-annexe h2::before, .carte-annexe h3::before {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border: 1px solid #bf8a46;
  transform: rotate(45deg);
}
.carte-annexe ul { margin: 0; padding-left: 21px; list-style: square; }
.carte-annexe li {
  margin: 0 0 11px;
  font: 14.5px/1.62 'Trebuchet MS', Arial, sans-serif;
  color: #5f4327;
}
.carte-annexe li:last-child { margin-bottom: 0; }
.carte-annexe li::marker { color: #9c612b; }
.carte-annexe b, .carte-annexe strong { color: #6d3a10; }

/* -------------------------------------------------------- les formulaires */
/* Un champ large comme la carte se lit mal : on garde une mesure de lecture. */
.carte-compte form { max-width: 33rem; }
.carte-compte label {
  display: block;
  margin: 19px 0 0;
  font: 700 12px/1.4 'Trebuchet MS', Arial, sans-serif;
  color: #6d4520;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.carte-compte input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 0;
  min-height: 48px;
  border: 1px solid #bf8a46;
  background: #f4ecd7;
  padding: 12px 14px;
  font: 16px 'Trebuchet MS', Arial, sans-serif;
  color: #322011;
}
.carte-compte input:hover { border-color: #9c612b; }
.carte-compte input:focus-visible {
  border-color: #9c612b;
  outline: 3px solid #9c612b;
  outline-offset: 2px;
}
.carte-compte small {
  display: block;
  margin-top: 7px;
  font: 13px/1.55 'Trebuchet MS', Arial, sans-serif;
  color: #7a5a34;
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
}

/* Un seul bouton pour tout l'espace compte : or sur bois, ombre dure. */
.carte-compte button,
.bouton-telecharger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 24px;
  cursor: pointer;
  border: 1px solid #ad7436;
  background: #f2c75b;
  box-shadow: 2px 3px 0 #8d5628;
  font: 700 14px/1.3 'Trebuchet MS', Arial, sans-serif;
  color: #6d3a10;
  text-transform: uppercase;
  letter-spacing: .07em;
  text-decoration: none;
  text-align: center;
}
.carte-compte form button { min-width: 13rem; margin-top: 22px; }
.carte-compte button:hover,
.bouton-telecharger:hover { background: #f8d97f; }
.carte-compte button:active,
.bouton-telecharger:active { box-shadow: 1px 1px 0 #8d5628; transform: translate(1px, 2px); }
.carte-compte button:focus-visible,
.bouton-telecharger:focus-visible { outline: 3px solid #9c612b; outline-offset: 3px; }

/* ------------------------------------------------------------ les messages */
/* Une phrase de confirmation etiree sur 1 600 px n'est plus un message, c'est
   une bande : elle garde donc une mesure de lecture, comme la prose. */
.alerte, .reussite {
  max-width: min(100%, var(--mesure-large, 90ch));
  margin: 0 0 20px;
  padding: 13px 16px;
  border: 1px solid;
  box-shadow: 2px 3px 0 rgba(140, 90, 40, .3);
  font: 15px/1.6 'Trebuchet MS', Arial, sans-serif;
}
.alerte { background: #f7d9cf; border-color: #b2523a; color: #6d2a1c; }
.reussite { background: #e3edc4; border-color: #7f9c46; color: #43552a; }

/* Le mot de passe garde en clair : dit une fois, la ou on le choisit.
   Le selecteur double passe devant `.carte-compte p`, sans !important. */
.note-mdp, .carte-compte .note-mdp {
  margin: 18px 0 0;
  padding: 13px 15px;
  background: #f4ecd7;
  border: 1px solid #bf8a46;
  border-left: 4px solid #9c612b;
  font: 13.5px/1.62 'Trebuchet MS', Arial, sans-serif;
  color: #5f4327;
}
.note-mdp b, .note-mdp strong { color: #6d3a10; }
.passerelle, .carte-compte .passerelle {
  margin: 16px 0 0;
  font: 14px/1.6 'Trebuchet MS', Arial, sans-serif;
  color: #6b4a2a;
}

/* ------------------------------------------------ mon compte : les blocs */
/* Trois blocs, et chacun s'annonce en trois lignes : **ce qu'il est** (le
   surtitre), **son nom** (le titre), **a quoi il sert** (la ligne de dessous).
   Un joueur doit savoir ou il est sans avoir a lire le contenu du bloc. */
.bloc { margin: 0 0 42px; }
.bloc:last-of-type { margin-bottom: 0; }
/* **Une grille, pas une rangee flexible.** Les trois lignes sont des `p` et
   `h2` : en flex, la mesure de lecture posee sur `.bloc-tete p` bornait aussi
   le surtitre, qui cessait alors de casser la rangee et se retrouvait a cote
   du titre, poussant celui-ci au milieu de la page. En grille, la place de
   chacun est dite et ne depend plus de sa largeur. */
.bloc-tete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 18px;
  row-gap: 4px;
  margin: 0 0 20px;
  padding: 0 0 12px;
  border-bottom: 2px solid #bf8a46;
}
.bloc-tete .bloc-kicker {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  font: 700 11px/1.3 'Trebuchet MS', Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9c612b;
}
.bloc-tete h2 {
  margin: 0;
  font: 400 30px/1.18 Georgia, 'Times New Roman', serif;
  color: #4a2a12;
}
.bloc-tete p {
  max-width: min(100%, var(--mesure, 68ch));
  margin: 0;
  font: 14px/1.55 'Trebuchet MS', Arial, sans-serif;
  color: #7a5a34;
}
/* Sous 760 px, le titre et sa phrase n'ont plus de quoi tenir cote a cote. */
@media (max-width: 760px) {
  .bloc-tete { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
}

/* ------------------------------------------- mon compte : le bloc identite */
/* Le coup d'oeil de chaque visite. A gauche, ce qu'on tape dans le client et
   l'etat du compte ; a droite, les faits qu'on peut avoir a verifier. Le trait
   vertical entre les deux n'apparait que quand il y a deux colonnes. */
/* La derniere carte d'un bloc ne porte pas de marge : c'est le bloc qui tient
   la respiration jusqu'au suivant. */
.bloc > .carte-compte:last-child { margin-bottom: 0; }
.carte-identite { margin-bottom: 0; }

.identite-corps {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .identite-corps { gap: 0 32px; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
  .identite-nom { padding-right: 32px; border-right: 1px solid #d8b06a; }
}
.carte-identite .identite-etiquette {
  margin: 0;
  font: 700 11px/1.35 'Trebuchet MS', Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9c612b;
}
/* Le pseudo est la seule chose qu'on vient chercher en urgence : il a droit a
   la taille qui va avec. Le selecteur double passe devant `.compte-main code`. */
.carte-identite .identite-pseudo { margin: 8px 0 0; }
.carte-identite .identite-pseudo code {
  display: inline-block;
  max-width: 100%;
  padding: 7px 15px;
  background: #f4ecd7;
  border: 1px solid #bf8a46;
  box-shadow: 2px 3px 0 rgba(140, 90, 40, .28);
  font: 700 clamp(20px, 2vw, 26px)/1.3 'Courier New', monospace;
  color: #52301a;
}
/* Le pied de la carte : l'etat a gauche, la deconnexion a droite, un filet
   au-dessus. Il barre la carte entiere plutot que de s'entasser sous le
   pseudo — sans quoi la colonne de gauche depassait de cent pixels celle des
   faits, et la carte s'ouvrait sur un grand vide a droite. */
.identite-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #d8b06a;
}

/* L'etat du compte, en une pastille : ouvert en vert, suspendu en rouge. Le
   rouge ne sert qu'a cela sur cette page. */
.carte-identite .identite-etat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 5px 13px;
  border: 1px solid;
  font: 700 11.5px/1.55 'Trebuchet MS', Arial, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.carte-identite .identite-etat::before {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}
.etat-ouvert { background: #e3edc4; border-color: #7f9c46; color: #43552a; }
.etat-ferme  { background: #f7d9cf; border-color: #a8452f; color: #6d2a1c; }
/* Se deconnecter n'est pas l'action principale de la page : le bouton existe,
   mais en parchemin, pas en or. */
/* Le selecteur porte la carte : `.carte-compte a.mini` pese autant et vient
   plus loin dans la feuille, l'or reprendrait le dessus. */
.carte-identite a.mini.identite-sortie {
  display: inline-block;
  margin-top: 0;
  background: #f4ecd7;
  border-color: #bf8a46;
  box-shadow: 1px 2px 0 #c19a5f;
  color: #6d3b18;
}
.carte-identite a.mini.identite-sortie:hover { background: #fff0bd; }

.identite-faits {
  display: grid;
  gap: 16px 30px;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 0;
}
.identite-faits > div { padding: 13px 0 0; border-top: 1px solid #d8b06a; }
.identite-faits dt {
  margin: 0 0 6px;
  font: 700 11px/1.35 'Trebuchet MS', Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9c612b;
}
.identite-faits dd {
  margin: 0;
  font: 15px/1.55 'Trebuchet MS', Arial, sans-serif;
  color: #4a3a26;
}
.identite-faits dd a { color: #7f251b; font-weight: bold; text-underline-offset: 3px; }
.fait-vide { color: #8a7550; font-style: italic; }
.identite-faits sup { font-size: .68em; vertical-align: .45em; }

/* Le compte ferme aux mondes. Il entre encore sur le site : le lui dire ici
   evite qu'il cherche la panne du cote du client. */
.carte-identite .identite-avis {
  margin: 22px 0 0;
  padding: 12px 15px;
  background: #f7d9cf;
  border: 1px solid #a8452f;
  border-left-width: 5px;
  font: 14px/1.62 'Trebuchet MS', Arial, sans-serif;
  color: #6d2a1c;
}
.carte-identite .identite-avis b { color: #5c1f13; }

/* -------------------------------- mon compte : la marche a suivre, en bande */
/* Elle se lit une fois, la grille sert a chaque visite : elle prend donc une
   bande de trois cases et non trois grosses vignettes. */
.marche {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: etape;
  background: #f4ecd7;
  border: 1px solid #bf8a46;
}
/* La phrase est enveloppee d'un `span` dans le balisage, et ce n'est pas de
   la decoration : dans un conteneur flex, chaque element en ligne — un `b`,
   un `code` — deviendrait un element de flux a lui seul, ecarte des autres
   par le `gap`. La phrase se briserait en morceaux espaces. */
.marche li {
  counter-increment: etape;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 19px;
  border-left: 1px solid #ddc9a0;
  font: 14.5px/1.6 'Trebuchet MS', Arial, sans-serif;
  color: #5f4327;
}
.marche li > span { min-width: 0; }
.marche li:first-child { border-left: 0; }
.marche li::before {
  content: counter(etape);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  margin-top: 1px;
  background: #f2c75b;
  border: 1px solid #ad7436;
  font: 700 14px/1 Georgia, 'Times New Roman', serif;
  color: #6d3a10;
}
.marche b, .marche strong { color: #6d3a10; }
@media (max-width: 860px) {
  .marche { grid-template-columns: minmax(0, 1fr); }
  .marche li { border-left: 0; border-top: 1px solid #ddc9a0; }
  .marche li:first-child { border-top: 0; }
}

/* La note de bas de bloc : ce qui complete le bloc sans etre une carte. */
.note-bloc {
  max-width: min(100%, var(--mesure-large, 90ch));
  margin: 20px 0 0;
  padding: 13px 0 0;
  border-top: 1px dashed #c8ab74;
  font: 14px/1.65 'Trebuchet MS', Arial, sans-serif;
  color: #7a5a34;
}
.note-bloc a { color: #7f251b; font-weight: bold; text-underline-offset: 3px; }
.note-bloc b, .note-bloc strong { color: #6d3a10; }

/* ------------------------------ mon compte : le bloc mot de passe */
/* Le formulaire a plus a dire que le panneau d'appoint : il prend la part la
   plus large, et les deux cartes descendent a la meme hauteur. */
.rangee-securite {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 940px) {
  .rangee-securite { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
.rangee-securite > .carte-compte { margin-bottom: 0; }

/* **La mise en garde tient a cote du champ, pas au-dessus du bouton.** On la
   lit en choisissant son mot de passe, ce qui est le moment ou elle sert ; et
   la carte cesse d'etre a moitie vide sur un grand ecran.
   La bascule est une requete de conteneur et non d'ecran : ce qui decide,
   c'est la largeur de la carte — laquelle depend de la rangee autant que de
   l'ecran. Un navigateur qui ignore `@container` garde la colonne unique,
   c'est-a-dire exactement le dessin d'avant. */
.carte-mdp { container-type: inline-size; }
.carte-mdp form { max-width: none; }
.carte-mdp .mdp-champ label { margin-top: 0; }
@container (min-width: 38rem) {
  .carte-mdp form {
    display: grid;
    align-items: start;
    gap: 0 28px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .carte-mdp .mdp-champ { grid-column: 1; grid-row: 1; }
  .carte-mdp .note-mdp  { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .carte-mdp .mdp-agir  { grid-column: 1; grid-row: 2; }
}

/* Les versions a telecharger : la raison d'etre de la page, en grille. */
.mondes {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.monde {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 19px 21px 21px;
  background: #fff0bd;
  border: 1px solid #ad7436;
  box-shadow: 2px 3px 0 #8d5628;
}
.monde-tete {
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid #d8b06a;
}
.monde-nom {
  display: block;
  font: 400 26px/1.12 Georgia, 'Times New Roman', serif;
  color: #7a3f13;
}
.monde-date {
  display: block;
  margin-top: 7px;
  font: 700 11px/1.3 'Trebuchet MS', Arial, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #9c612b;
}
.monde-quoi {
  margin: 0;
  font: 14.5px/1.62 'Trebuchet MS', Arial, sans-serif;
  color: #5f4327;
}
.monde-poids {
  margin: 16px 0 14px;
  padding: 12px 0 0;
  border-top: 1px dashed #d8b06a;
  font: 700 11.5px/1.4 'Trebuchet MS', Arial, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #9c612b;
}
.monde-poids { margin-top: auto; }
.monde .bouton-telecharger { width: 100%; }

/* ------------------------------------------------------------- le telephone */
@media (max-width: 940px) {
  .compte-colonnes { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .compte-main { width: calc(100% - 24px); padding: 24px 0 46px; }
  .compte-tete { margin-bottom: 19px; padding-bottom: 14px; }
  .compte-main .chapeau { font-size: 16px; margin-bottom: 21px; }
  .deux-colonnes, .compte-colonnes, .mondes,
  .rangee-securite, .identite-corps { gap: 15px; grid-template-columns: 1fr; }
  .compte-centre { max-width: none; }
  .carte-compte, .carte-annexe { padding: 17px 17px 20px; margin-bottom: 16px; }
  .carte-compte h2, .carte-compte h3 { font-size: 20px; }
  .bloc { margin-bottom: 30px; }
  .bloc-tete h2 { font-size: 25px; }
  .monde { padding: 16px 17px 18px; }
  .monde-nom { font-size: 23px; }
  /* Au doigt : tout le formulaire prend la largeur, rien ne descend sous 46 px. */
  .carte-compte form { max-width: none; }
  .carte-compte form button { width: 100%; min-width: 0; }
  /* Le bloc d'identite se replie ; le trait qui separait ses deux colonnes
     n'a plus rien a separer. */
  .identite-nom { padding-right: 0; border-right: 0; }
  .identite-faits { gap: 13px; }
  .identite-pied { margin-top: 18px; padding-top: 15px; }
  .carte-identite a.mini.identite-sortie { display: block; width: 100%; min-height: 44px;
                                           padding: 11px 12px; text-align: center; }
  .passerelle-admin { padding: 13px 15px; }
  .passerelle-admin a.mini { display: block; width: 100%; min-height: 44px;
                             padding: 11px 12px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .carte-compte button:active,
  .bouton-telecharger:active { transform: none; }
}

/* --- consentement de l'inscription --- */
/* Cette ligne venait d'un autre dessin : elle appelait `--texte-doux` et
   `--accent`, deux variables que **rien ne definit sur ce site**. Ce sont donc
   les valeurs de repli qui s'affichaient — un gris bleute et un jaune moutarde
   qui n'appartiennent pas au parchemin.

   Et le selecteur etait trop leger : `.carte-compte label` la reprenait en
   capitales espacees et en `display: block`, si bien que la case tombait
   au-dessus de son texte au lieu de se tenir a cote. Un consentement doit se
   lire ; il porte donc ici le poids qu'il faut pour rester une phrase. */
.carte-compte label.accord, .accord {
          display: flex; gap: .65rem; align-items: flex-start;
          margin: 18px 0 4px; text-transform: none; letter-spacing: normal;
          font: 400 13px/1.55 'Trebuchet MS', Arial, sans-serif; color: #4a3a26; }
/* La case doit aussi se defaire de la regle des champs de saisie : celle-ci
   impose `min-height: 48px` — la hauteur du doigt, juste pour un champ texte —
   et la case se retrouvait posee au bas d'une boite de 48 px, sous sa propre
   phrase. On lui rend sa taille de case. */
.carte-compte label.accord input, .accord input {
                flex: 0 0 auto; display: inline-block;
                width: 1.05rem; height: 1.05rem; min-height: 0;
                margin: .2rem 0 0; padding: 0;
                accent-color: #9c612b; cursor: pointer; }
.carte-compte label.accord a, .accord a { color: #7f251b; font-weight: bold;
                text-underline-offset: 3px; }


/* --- panneau d'administration ---
   Le site est sur parchemin : fond #f4ecd7, encre #332d23, or #f2c75b, bois
   #ad7436, et l'ombre portee de 2px 3px qui donne le relief des cartouches.
   Ce panneau s'y tient ; il n'a pas de palette a lui, et le rouge n'y sert
   qu'a une chose : ce qui coupe une partie en cours. */

/* Le bandeau de synchronisation. Il passe avant les chiffres parce qu'il dit
   ce que les mondes ont vraiment, la ou les chiffres disent ce que la base
   contient : c'est la premiere question de qui vient regler un probleme. */
.admin-synchro { margin: 0 0 22px; padding: 13px 17px; border: 1px solid #ad7436;
                 border-left-width: 6px; box-shadow: 2px 3px 0 #8d5628;
                 font: 14px/1.6 'Trebuchet MS', Arial, sans-serif; color: #3c2816; }
.admin-synchro b { color: #3c2816; }
.admin-synchro span { color: #5b482f; }
.admin-synchro code { padding: 1px 5px; background: #f4ecd7; border: 1px solid #d8bb85;
                      font: 12px/1.4 'Courier New', monospace; color: #6d3b18; }
.synchro-bon   { background: #fff0bd; border-left-color: #9c612b; }
.synchro-muet  { background: #efe2c1; border-color: #b39a6c; border-left-color: #8d7444; }
.synchro-tarde { background: #f7d9cf; border-color: #a8452f; border-left-color: #7f251b; }
.synchro-tarde b { color: #6d2a1c; }
.synchro-tarde span { color: #5c1f13; }

/* Les chiffres sont des liens : chacun est le filtre qu'il annonce. Compter
   sans pouvoir ouvrir ce qu'on compte, c'est une vitrine. */
.admin-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
                  gap: 12px; margin: 0 0 20px; }
.admin-chiffres a { display: block; background: #fff0bd; border: 1px solid #ad7436;
                    box-shadow: 2px 3px 0 #8d5628; padding: 15px 8px;
                    text-align: center; text-decoration: none; }
.admin-chiffres a:hover { background: #fff6d4; }
.admin-chiffres a.est-choisi { background: #f2c75b; border-color: #8d5628; }
.admin-chiffres b { display: block; font: 700 30px/1.1 Georgia, 'Times New Roman', serif;
                    color: #7f251b; font-variant-numeric: tabular-nums; }
.admin-chiffres span { display: block; margin-top: 6px;
                       font: 700 11px/1.3 'Trebuchet MS', Arial, sans-serif;
                       letter-spacing: .08em; text-transform: uppercase; color: #75451f; }

/* Les onglets d'etat. Cinq liens, pas un menu deroulant : sans JavaScript un
   menu demanderait un bouton de plus, et l'etat courant ne se verrait pas. */
.admin-onglets { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.admin-onglets a { padding: 8px 15px; border: 1px solid #bf8a46; background: #f4ecd7;
                   font: 700 13px/1.3 'Trebuchet MS', Arial, sans-serif;
                   color: #6d3b18; text-decoration: none; }
.admin-onglets a:hover { background: #fff0bd; }
.admin-onglets a.est-choisi { background: #f2c75b; border-color: #ad7436; color: #3c2816;
                              box-shadow: 1px 2px 0 #8d5628; }

.admin-explique summary, .admin-liste h2, .admin-journal h2,
.admin-fiche h2, .admin-actions h2, .admin-confirme h2 {
  margin: 0 0 12px; padding: 0 0 10px; border-bottom: 2px solid #bf8a46;
  font: 700 19px/1.3 Georgia, 'Times New Roman', serif; color: #3c2816; }
.admin-explique { padding-bottom: 6px; }
.admin-explique summary { cursor: pointer; list-style-position: inside; }
.admin-explique summary::marker { color: #9c612b; }
.admin-explique[open] summary { margin-bottom: 6px; }
.admin-explique p { margin: 10px 0; font: 15px/1.65 'Trebuchet MS', Arial, sans-serif;
                    color: #4a3a26; }
.admin-explique code { padding: 1px 5px; background: #f4ecd7; border: 1px solid #d8bb85;
                       font: 13px/1.4 'Courier New', monospace; color: #6d3b18; }

.admin-filtre-dit { font: 400 14px/1.3 'Trebuchet MS', Arial, sans-serif; color: #75451f; }
.admin-aide { margin: 8px 0 0; font: 13px/1.6 'Trebuchet MS', Arial, sans-serif;
              color: #7a6647; }
.admin-aide a, .admin-vider, .admin-fil a { color: #7f251b; font-weight: bold; }
.admin-vide { color: #968763; font-style: italic; }
.admin-fil { margin: 0 0 16px; font: 14px 'Trebuchet MS', Arial, sans-serif; }

.admin-chercher { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
                  margin: 0 0 22px; font: 14px 'Trebuchet MS', Arial, sans-serif; }
.admin-chercher label { color: #4a3a26; font-weight: bold; }
.admin-chercher input { flex: 1 1 240px; min-height: 44px; box-sizing: border-box;
                        border: 1px solid #bf8a46; background: #f4ecd7; padding: 10px 14px;
                        font: 15px 'Trebuchet MS', Arial, sans-serif; color: #322011; }
.admin-chercher button { min-height: 44px; padding: 10px 20px; cursor: pointer;
                         border: 1px solid #ad7436; background: #f2c75b;
                         box-shadow: 2px 3px 0 #8d5628;
                         font: 700 14px 'Trebuchet MS', Arial, sans-serif; color: #3c2816; }

/* Le tableau deborde sur petit ecran : il defile pour lui seul, la page ne
   part pas de travers. */
.admin-defile { overflow-x: auto; margin: 6px -4px 0; padding: 0 4px; }
.admin-table { width: 100%; border-collapse: collapse;
               font: 14px/1.5 'Trebuchet MS', Arial, sans-serif; color: #3c2816; }
.admin-table th { text-align: left; padding: 8px 10px;
                  font: 700 11px/1.3 'Trebuchet MS', Arial, sans-serif;
                  letter-spacing: .08em; text-transform: uppercase; color: #75451f;
                  border-bottom: 2px solid #bf8a46; white-space: nowrap; }
/* Un en-tete qui trie doit se voir avant d'etre survole : la double fleche
   pale annonce qu'on peut cliquer, la fleche pleine dit dans quel sens on est. */
.admin-table th a { color: #75451f; text-decoration: none; border-bottom: 1px dotted #c8ab74; }
.admin-table th a:hover { color: #7f251b; border-bottom-color: #7f251b; }
.admin-table th .tri-muet { color: #bda678; font-weight: normal; }
.admin-table th.est-trie { color: #7f251b; background: #f6e3ae; }
.admin-table th.est-trie a { color: #7f251b; border-bottom-color: #a8452f; }
.admin-table td { padding: 11px 10px; vertical-align: top;
                  border-bottom: 1px solid #ddc9a0; }
.admin-table tbody tr:nth-child(even) { background: rgba(244, 236, 215, .55); }
.admin-table tr.est-banni { background: #f7d9cf; }
.admin-pseudo { font-weight: bold; color: #6d3b18; text-underline-offset: 3px; }
.admin-mail { word-break: break-all; color: #6b5a3f; }
.admin-motif { display: block; font-style: italic; color: #6d2a1c; }
.admin-agir { white-space: nowrap; }
.admin-agir form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }

/* Une pastille dit l'etat d'un coup d'oeil ; le rouge est reserve au banni. */
.pastille { display: inline-block; padding: 2px 9px;
            font: 700 11px/1.5 'Trebuchet MS', Arial, sans-serif; letter-spacing: .05em;
            border: 1px solid #b9a271; background: #eae2c6; color: #4a3a26;
            vertical-align: middle; }
.pastille-banni { background: #e5a293; border-color: #a8452f; color: #5c1f13; }

.etiq { display: inline-block; margin-left: 6px; padding: 1px 7px;
        font: 700 10px/1.6 'Trebuchet MS', Arial, sans-serif; letter-spacing: .06em;
        text-transform: uppercase; background: #e8dcbb; border: 1px solid #c8ab74;
        color: #6b5a3f; vertical-align: middle; }
.etiq-admin { background: #f2c75b; border-color: #ad7436; color: #5a3a12; }

/* Un lien qui agit et un bouton qui agit se ressemblent : ce qui les separe
   n'est pas l'aspect mais le geste — le lien mene a une confirmation, le
   bouton fait la chose.

   Le selecteur est lourd a dessein. L'espace compte n'a qu'un bouton, large et
   en capitales (`.carte-compte form button { min-width: 13rem }`), fait pour
   un formulaire d'une seule action ; dans une ligne de tableau il s'etirait sur
   toute la cellule et criait « LEVER ». Il faut donc le meme poids pour le
   reprendre, et pas seulement `button.mini`. */
.carte-compte button.mini, .carte-compte a.mini,
button.mini, a.mini { display: inline-block; min-height: 32px; min-width: 0;
              box-sizing: border-box; margin-top: 0;
              padding: 5px 12px; cursor: pointer; text-decoration: none;
              border: 1px solid #ad7436; background: #f2c75b; box-shadow: 1px 2px 0 #8d5628;
              font: 700 13px/1.6 'Trebuchet MS', Arial, sans-serif; color: #3c2816;
              text-transform: none; letter-spacing: 0; }
button.mini:hover, a.mini:hover { background: #f6d47e; }
button.mini[disabled] { cursor: not-allowed; opacity: .55; box-shadow: none; }
/* Le rouge doit passer devant l'or : d'ou le selecteur double, sans quoi la
   regle du bouton clair, plus lourde, reprendrait le dessus. */
.carte-compte button.mini.danger, .carte-compte a.mini.danger,
.carte-compte button.danger, button.danger, a.danger {
                          border-color: #a8452f; background: #e5a293; color: #5c1f13;
                          box-shadow: 1px 2px 0 #7f251b; }
.carte-compte button.mini.danger:hover, .carte-compte a.mini.danger:hover,
button.danger:hover, a.danger:hover { background: #eeb5a7; }

.admin-pages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.admin-pages a, .admin-pages b { padding: 5px 11px; border: 1px solid #bf8a46;
                                 font: 700 13px 'Trebuchet MS', Arial, sans-serif;
                                 color: #6d3b18; text-decoration: none; }
.admin-pages b { background: #f2c75b; border-color: #ad7436; color: #3c2816; }

/* --- la fiche d'un compte --- */
.admin-fiche h2 .pastille { margin-left: 8px; vertical-align: 4px; }
/* Ce que les mondes voient de ce compte : la seule ligne qui parle du jeu. */
.admin-sert { margin: 0 0 16px; padding: 11px 15px; border: 1px solid #ad7436;
              border-left-width: 6px; font: 14px/1.6 'Trebuchet MS', Arial, sans-serif; }
.sert-oui { background: #fff0bd; border-left-color: #9c612b; color: #3c2816; }
.sert-non { background: #f7d9cf; border-color: #a8452f; border-left-color: #7f251b; color: #5c1f13; }

.admin-def { display: grid; grid-template-columns: minmax(140px, auto) 1fr;
             gap: 0; margin: 0; font: 14px/1.6 'Trebuchet MS', Arial, sans-serif; }
.admin-def dt { padding: 8px 12px 8px 0; border-bottom: 1px solid #e0cfa4;
                font-weight: bold; color: #75451f; }
.admin-def dd { margin: 0; padding: 8px 0; border-bottom: 1px solid #e0cfa4; color: #3c2816; }
.admin-def .admin-aide { display: inline; margin: 0 0 0 6px; }

/* Le pas de confirmation. Il porte du rouge et il porte le motif : c'est le
   seul ecran du panneau ou l'on s'arrete avant d'agir. */
.admin-confirme { border-color: #a8452f; box-shadow: 2px 3px 0 #7f251b; }
.admin-confirme h2 { border-bottom-color: #a8452f; color: #6d2a1c; }
.admin-confirme p { margin: 10px 0 14px; font: 15px/1.65 'Trebuchet MS', Arial, sans-serif;
                    color: #4a3a26; }
/* L'etiquette de l'espace compte est en capitales espacees : bien pour trois
   mots au-dessus d'un champ, illisible pour une phrase qui explique. Ici elle
   redevient une phrase. */
.carte-compte .admin-confirme label, .admin-confirme label {
                        display: block; margin: 0 0 14px; text-transform: none;
                        letter-spacing: normal;
                        font: 700 14px/1.6 'Trebuchet MS', Arial, sans-serif; color: #4a3a26; }
.admin-confirme label .admin-aide { font-weight: normal; text-transform: none; }
.admin-confirme input[type=text] { display: block; width: 100%; box-sizing: border-box;
                                   margin-top: 6px; min-height: 44px;
                                   border: 1px solid #bf8a46; background: #f4ecd7; padding: 10px 14px;
                                   font: 15px 'Trebuchet MS', Arial, sans-serif; color: #322011; }
.admin-boutons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.carte-compte .admin-boutons button { min-height: 46px; min-width: 0; margin-top: 0;
                        padding: 12px 22px; cursor: pointer;
                        border: 1px solid #ad7436; background: #f2c75b;
                        box-shadow: 2px 3px 0 #8d5628; text-transform: none; letter-spacing: 0;
                        font: 700 15px 'Trebuchet MS', Arial, sans-serif; color: #3c2816; }
.carte-compte .admin-boutons button.danger { border-color: #a8452f; background: #e5a293;
                               color: #5c1f13; box-shadow: 2px 3px 0 #7f251b; }
.admin-boutons a.mini { min-height: 44px; padding: 12px 18px; background: #f4ecd7;
                        border-color: #bf8a46; box-shadow: none; color: #6d3b18; }

/* Les gestes possibles, chacun avec ce qu'il fait ecrit a cote : un panneau
   d'administration n'a pas le droit d'etre devinable. */
.admin-gestes { list-style: none; margin: 0; padding: 0; }
.admin-gestes li { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
                   padding: 13px 0; border-bottom: 1px solid #e0cfa4; }
.admin-gestes li:last-child { border-bottom: 0; padding-bottom: 2px; }
.admin-gestes form { margin: 0; }
.admin-gestes .admin-aide { flex: 1 1 260px; margin: 0; }
.admin-gestes .admin-vide { min-width: 150px; font-weight: bold; }

.admin-journal ul { list-style: none; margin: 12px 0 0; padding: 0; }
.admin-journal li { padding: 9px 0; font: 14px/1.55 'Trebuchet MS', Arial, sans-serif;
                    color: #3c2816; border-bottom: 1px solid #e0cfa4; }
.admin-journal li a { color: #6d3b18; }
.admin-quand { display: inline-block; min-width: 110px; font-size: 12px; color: #7a6647; }

/* Sous 720 px le tableau cesse d'etre un tableau : chaque ligne devient une
   fiche, et l'intitule de colonne passe devant la valeur. */
@media (max-width: 720px) {
  /* Deux par rangee, et le cinquieme prend la largeur plutot que de laisser
     un trou a cote de lui. */
  .admin-chiffres { grid-template-columns: repeat(2, 1fr); }
  .admin-chiffres a:nth-child(5):last-child { grid-column: 1 / -1; }
  .admin-table thead { position: absolute; left: -9999px; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tbody tr { margin: 0 0 12px; padding: 10px 6px; background: #fff7de;
                          border: 1px solid #c8ab74; box-shadow: 2px 3px 0 rgba(140,90,40,.25); }
  .admin-table tbody tr:nth-child(even) { background: #fff7de; }
  .admin-table tr.est-banni { background: #f7d9cf; }
  .admin-table td { border: 0; padding: 4px 10px; }
  .admin-table td::before { content: attr(data-col) " ";
                            font: 700 10px/1.6 'Trebuchet MS', Arial, sans-serif;
                            letter-spacing: .06em; text-transform: uppercase; color: #75451f; }
  /* Au doigt : les deux gestes de la ligne prennent la largeur, cote a cote,
     et rien ne descend sous 44 px. */
  .admin-agir { white-space: normal; display: flex; flex-wrap: wrap; gap: 8px;
                padding-top: 8px; }
  .admin-agir::before { flex: 1 0 100%; }
  .admin-agir form { flex: 1 1 120px; }
  .admin-agir a.mini, .admin-agir button.mini { flex: 1 1 120px; width: 100%;
                                                min-height: 44px; padding: 11px 12px;
                                                text-align: center; }
  .admin-quand { min-width: 0; display: block; }
  .admin-def { grid-template-columns: 1fr; }
  .admin-def dt { padding-bottom: 0; border-bottom: 0; }
  .admin-def dd { padding-top: 2px; }
  .admin-gestes li { display: block; }
  .admin-gestes .mini { display: block; width: 100%; min-height: 44px; padding: 11px 12px;
                        text-align: center; }
  .admin-gestes .admin-aide { margin-top: 8px; }
  .admin-boutons button, .admin-boutons a.mini { width: 100%; text-align: center; }
}

/* --- passerelle vers le panneau ---
   Elle est sous la carte d'identite, parce qu'etre administrateur est une
   propriete de ce compte-la — pas un cinquieme bloc, et surtout pas la
   premiere chose que voit un joueur qui n'en est pas un.
   Elle porte donc le meme dessin que le reste : cartouche parchemin, filet
   d'or a gauche pour dire le privilege, et le geste a droite. */
.passerelle-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: min(100%, 62rem);
  margin: 22px 0 0;
  padding: 14px 18px;
  background: #fff0bd;
  border: 1px solid #ad7436;
  border-left: 6px solid #f2c75b;
  box-shadow: 2px 3px 0 #8d5628;
}
.passerelle-admin-dit { min-width: 0; flex: 1 1 20rem; }
.passerelle-admin .passerelle-admin-titre {
  margin: 0 0 4px;
  font: 700 11px/1.35 'Trebuchet MS', Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9c612b;
}
.passerelle-admin p {
  margin: 0;
  font: 14.5px/1.58 'Trebuchet MS', Arial, sans-serif;
  color: #4a3a26;
}