/* TeeQuant — parcours tondu : vert de fairway, sable, accent terre cuite.
   La première palette évitait le vert pour ne pas ressembler à YardOdds. C'était une
   raison de voisinage, pas une raison de golf : le vert EST la couleur du terrain, et
   on le reprend. Deux bandes tondues encadrent la page — le héros et le panneau
   d'accès — et le corps reste clair entre les deux, parce que c'est là que vivent les
   chiffres : un tableau de calibration sur fond rayé ne se lit pas.
   Toute couleur passe par un jeton déclaré ici ; une var() jamais définie n'émet
   aucune erreur et prend la couleur du parent, ce qui ne se voit qu'en production. */
:root {
  --tq-sable: #d5dbbe;
  --tq-sable-fonce: #c2caa4;
  --tq-carte: #eef0df;
  --tq-encre: #13170d;
  --tq-encre-douce: #343a26;
  --tq-doux: #555b41;
  --tq-trait: #b5bd94;
  --tq-terre: #9c4420;
  --tq-terre-vive: #bd5a30;
  /* Le vert prend les SURFACES et les deux bandes. Le terre cuite garde les ACTIONS,
     et cette séparation n'est pas décorative : un bouton et une pastille de statut de
     la même couleur, et le lecteur ne sait plus lequel des deux réclame un clic.
     C'est aussi pour ça que la couleur d'action ne peut jamais devenir un vert. */
  --tq-vert: #2f6229;
  --tq-vert-clair: #c1d8b4;
  --tq-vert-moyen: #4d8843;
  --tq-vert-pale: #d9e6ce;
  --tq-vert-profond: #173c19;
  --tq-sable-sec: #d2be92;
  --tq-panneau: #173c19;
  --tq-panneau-texte: #e4efdd;
  --tq-panneau-raie: #1a431c;
  /* --- couleurs du graphique -------------------------------------------
     Les quatre séries ont leurs PROPRES jetons, indépendants de la palette de
     marque. Motif mesuré : quand les séries empruntaient --tq-terre, --tq-vert,
     --tq-doux et --tq-terre-vive, changer la couleur d'action rendait trois
     courbes sur quatre presque identiques (trois verts à ΔE 7). La lisibilité
     d'un graphique ne doit pas dépendre d'un choix d'humeur.

     Ce quatuor a été VALIDÉ, pas choisi à l'œil : bande de clarté, plancher de
     saturation, séparation en vision daltonienne (pire paire ΔE 8,4 en deutan),
     plancher en vision normale (27,8) et contraste sur le fond. Les modifier
     sans revalider, c'est reprendre le risque à zéro. */
  /* Ces deux-là ont été remontés APRÈS mesure, pas avant : sur l'ancien fond crème
     ils passaient, sur le sable dense de cette palette le texte discret tombait à
     3,79:1 et le vert « meilleur » à 4,18:1, tous deux sous le seuil. Un audit de
     contraste page par page les a trouvés ; l'œil ne les aurait pas vus.
     Le fond de PAGE est plus sombre que celui des cartes : c'est lui qui décide. */
  --tq-serie-1: #047857;
  --tq-serie-2: #b91c1c;
  --tq-serie-3: #1d4ed8;
  --tq-serie-4: #a16207;
  /* --- l'en-tête, et le panneau de menu qui en descend ------------------
     Trois jetons plutôt qu'un usage direct de --tq-carte : une palette où
     l'en-tête est vert foncé n'est plus une retouche, c'est un choix déclaré.
     Le panneau de téléphone suit l'en-tête et non la carte — sinon il s'ouvre
     en clair sous une barre foncée, et la couture se voit. */
  --tq-tete-fond: #173c19;
  --tq-tete-texte: #f2f7ee;
  --tq-tete-douce: #cfe0c6;
  --tq-tete-trait: #305b30;
  /* L'accent DANS l'en-tête : sur une barre claire c'est la couleur d'action, sur
     une barre vert foncé la terre cuite deviendrait illisible. Un jeton de plus
     évite d'avoir à choisir entre « joli » et « lisible ». */
  --tq-tete-accent: #e8b48a;
  /* --- la bande du héros, tondue ----------------------------------------
     Les raies de tonte sont ce qui dit « parcours » sans photographie : deux
     verts à un cheveu l'un de l'autre, en diagonale, comme le passage d'une
     tondeuse. L'écart de clarté reste minuscule À DESSEIN — une rayure qu'on
     remarque est une rayure qui se bat avec le texte posé dessus. */
  --tq-heros-fond:   #173c19;
  --tq-heros-raie:   #1b441d;
  --tq-heros-texte:  #f1f7ec;
  --tq-heros-douce:  #cbdcc1;
  --tq-heros-accent: #e8b48a;
  --tq-raie-large: 74px;
  --tq-mesure: 62rem;
  --tq-texte: 34rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tq-sable);
  color: var(--tq-encre);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tq-terre); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tq-terre-vive); }

h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; }

/* --- en-tête ---------------------------------------------------------- */
.tq-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--tq-tete-trait);
  background: var(--tq-tete-fond);
  position: sticky; top: 0; z-index: 5;
}
.tq-marque {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 660; font-size: 1.05rem; letter-spacing: -0.02em;
  color: var(--tq-tete-texte); text-decoration: none;
}
/* Le drapeau dépasse du haut du dessin : on remonte la marque d'un cheveu pour que
   ce soit le VERT, et non la boîte du SVG, qui s'aligne sur la ligne du mot. */
.tq-marque-svg { display: block; margin-top: -2px; flex: none; }
.tq-marque .tq-mot { line-height: 1; }
.tq-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.6rem 1rem; }
.tq-nav a { font-size: 0.9rem; color: var(--tq-tete-douce); text-decoration: none; }
.tq-nav a:hover { color: var(--tq-tete-accent); }
.tq-langue {
  font: inherit; font-size: 0.82rem; padding: 0.3rem 0.72rem;
  border: 1px solid var(--tq-tete-trait); border-radius: 999px;
  background: transparent; color: var(--tq-tete-douce); cursor: pointer;
}
.tq-langue:hover { color: var(--tq-tete-texte); border-color: var(--tq-tete-douce); }

/* --- héros ------------------------------------------------------------ */
/* La bande occupe TOUTE la largeur, le contenu garde sa mesure : un conteneur
   intérieur plutôt qu'un 100vw, qui déborde dès qu'une barre de défilement
   apparaît et fait glisser la page entière de côté. */
.tq-heros {
  padding: 4.5rem 1.25rem 3rem;
  background: repeating-linear-gradient(101deg,
      var(--tq-heros-fond) 0 var(--tq-raie-large),
      var(--tq-heros-raie) var(--tq-raie-large) calc(var(--tq-raie-large) * 2));
  color: var(--tq-heros-douce);
}
.tq-heros-dedans {
  max-width: var(--tq-mesure); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
.tq-heros h1 { color: var(--tq-heros-texte); }
.tq-heros .tq-intro { color: var(--tq-heros-douce); }
.tq-heros .tq-etiquette { color: var(--tq-heros-accent); }
.tq-heros-texte { min-width: 0; }
.tq-heros-vert { width: 320px; flex: none; }
.tq-scene { width: 100%; height: auto; display: block; }
.tq-vert-plein  { fill: var(--tq-vert); }
.tq-vert-courbe { fill: none; stroke: var(--tq-vert-clair); stroke-opacity: 0.5;
                  stroke-width: 1.6; stroke-linejoin: round; }
.tq-fosse   { fill: var(--tq-sable-sec); }
.tq-fosse-2 { fill: var(--tq-sable-sec); opacity: 0.75; }
.tq-vert-trou    { fill: var(--tq-sable); }
.tq-vert-mat     { stroke: var(--tq-encre); stroke-width: 2.2; stroke-linecap: round; }
/* Sur une bande foncée, un mât en encre disparaît et le trou en sable devient une
   tache trop vive. Les deux suivent la bande, comme le logo suit l'en-tête. */
/* Le bouton de contour posé sur la bande : il écrit en couleur d'action sur un fond
   qu'il ne contrôle pas. Sur une bande foncée, l'encre disparaît — comme le logo sur
   l'en-tête vert. Même famille de faute, même remède : un jeton qui suit la bande. */
.tq-heros .tq-bouton-contour,
.tq-heros .tq-bouton-contour:hover {
  color: var(--tq-heros-texte); border-color: var(--tq-heros-douce); background: transparent;
}
.tq-heros .tq-vert-mat  { stroke: var(--tq-heros-texte); }
.tq-heros .tq-vert-trou { fill: var(--tq-heros-fond); }
.tq-vert-drapeau { fill: var(--tq-terre); }
.tq-etiquette {
  margin: 0 0 0.9rem; font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tq-terre);
}
.tq-heros h1 { margin: 0 0 1.2rem; font-size: clamp(1.9rem, 5.4vw, 3.1rem); max-width: 20ch; }
.tq-intro { margin: 0 0 1.8rem; max-width: var(--tq-texte); font-size: 1.06rem; color: var(--tq-encre-douce); }

.tq-bouton {
  display: inline-block; padding: 0.7rem 1.3rem; border-radius: 4px;
  background: var(--tq-terre); color: #fff; font-weight: 560; font-size: 0.95rem;
  text-decoration: none; border: 0; cursor: pointer; font-family: inherit;
}
.tq-bouton:hover { background: var(--tq-terre-vive); color: #fff; }
/* Un bouton posé dans la navigation héritait de « .tq-nav a » — plus spécifique que
   « .tq-bouton » d'un cran — et se retrouvait en encre foncée sur son propre fond
   coloré. Défaut mesuré au navigateur, présent depuis l'origine : « Demander l'accès »
   était illisible dans l'en-tête. On ne se fie pas à l'ordre des règles pour le
   rattraper, on égalise la spécificité. */
.tq-nav a.tq-bouton { color: #fff; }
.tq-nav a.tq-bouton:hover { color: #fff; }
/* Le bouton de contour, lui, écrit en couleur d'action sur fond transparent. */
.tq-nav a.tq-bouton-contour,
.tq-nav a.tq-bouton-contour:hover { color: var(--tq-tete-accent); border-color: var(--tq-tete-trait); }

/* --- bandeau de chiffres ---------------------------------------------- */
.tq-bandeau {
  max-width: var(--tq-mesure); margin: 0 auto; padding: 0 1.25rem 3.5rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--tq-trait); border: 1px solid var(--tq-trait); border-radius: 6px;
  overflow: hidden;
}
.tq-bandeau { padding: 0; margin: 0 auto 3.5rem; max-width: calc(var(--tq-mesure) - 2.5rem); }
.tq-chiffre { background: var(--tq-carte); padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.tq-valeur { font-size: 1.5rem; font-weight: 640; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tq-libelle { font-size: 0.78rem; color: var(--tq-doux); }

/* --- sections --------------------------------------------------------- */
.tq-section { max-width: var(--tq-mesure); margin: 0 auto; padding: 0 1.25rem 3.5rem; }
.tq-section h2 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin: 0 0 1rem; }
.tq-texte { max-width: var(--tq-texte); color: var(--tq-encre-douce); margin: 0 0 1rem; }
.tq-discret { color: var(--tq-doux); font-size: 0.92rem; }

/* --- calibration ------------------------------------------------------ */
.tq-calib-bloc { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; }
.tq-figure { margin: 0; background: var(--tq-carte); border: 1px solid var(--tq-trait); border-radius: 6px; padding: 0.6rem; }
.tq-figure figcaption { font-size: 0.76rem; color: var(--tq-doux); padding: 0.4rem 0.3rem 0.1rem; }
.tq-calib { width: 100%; height: auto; display: block; }
.tq-grille { stroke: var(--tq-sable-fonce); stroke-width: 1; }
.tq-diagonale { stroke: var(--tq-doux); stroke-width: 1; stroke-dasharray: 4 3; }
.tq-axe { stroke: var(--tq-encre); stroke-width: 1; }
.tq-graduation { font-size: 9px; fill: var(--tq-doux); }
.tq-grad-x { text-anchor: middle; }
.tq-grad-y { text-anchor: end; }
.tq-courbe { fill: none; stroke-width: 1.6; }
.tq-point { stroke: var(--tq-carte); stroke-width: 1; }
.tq-serie-1, polyline.tq-serie-1 { stroke: var(--tq-serie-1); }
.tq-point.tq-serie-1 { fill: var(--tq-serie-1); }
polyline.tq-serie-2 { stroke: var(--tq-serie-2); }
.tq-point.tq-serie-2 { fill: var(--tq-serie-2); }
polyline.tq-serie-3 { stroke: var(--tq-serie-3); }
.tq-point.tq-serie-3 { fill: var(--tq-serie-3); }
polyline.tq-serie-4 { stroke: var(--tq-serie-4); }
.tq-point.tq-serie-4 { fill: var(--tq-serie-4); }
.tq-legende { margin: 0 0 1rem; font-size: 0.88rem; color: var(--tq-encre-douce); }
.tq-legende .tq-item { display: inline-flex; align-items: center; margin-right: 0.9rem; white-space: nowrap; }
.tq-vide { margin: 0; padding: 1.2rem 0.3rem; font-size: 0.9rem; color: var(--tq-doux); }
.tq-puce { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.35rem; }
/* La pastille de la légende porte EXACTEMENT la couleur de sa courbe : c'est ce qui
   fait que l'identité d'une série ne repose pas sur la seule mémoire du lecteur. */
.tq-puce-1 { background: var(--tq-serie-1); }
.tq-puce-2 { background: var(--tq-serie-2); }
.tq-puce-3 { background: var(--tq-serie-3); }
.tq-puce-4 { background: var(--tq-serie-4); }

/* --- ce que ce n'est pas ---------------------------------------------- */
.tq-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tq-carte {
  background: var(--tq-carte); border: 1px solid var(--tq-trait);
  border-radius: 6px; padding: 1.1rem 1.2rem;
}
.tq-carte h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.tq-carte p { margin: 0; font-size: 0.92rem; color: var(--tq-encre-douce); }

/* --- accès ------------------------------------------------------------ */
/* Le panneau tient l'argument à gauche et le formulaire à droite : au-delà de mille
   pixels, une carte seule sur une bande sombre laisse un grand vide à sa droite. */
.tq-acces-panneau {
  background: repeating-linear-gradient(101deg,
      var(--tq-panneau) 0 var(--tq-raie-large),
      var(--tq-panneau-raie) var(--tq-raie-large) calc(var(--tq-raie-large) * 2));
  color: var(--tq-panneau-texte);
  border-radius: 8px; padding: 2.4rem 2rem;
  display: grid; grid-template-columns: 1fr minmax(18rem, 26rem);
  grid-template-rows: auto 1fr;
  gap: 1rem 3rem; align-items: start;
}
.tq-acces-panneau h2 { grid-column: 1; grid-row: 1; margin: 0; }
.tq-acces-panneau > p { grid-column: 1; grid-row: 2; margin: 0.7rem 0 0; color: #bcd3c2; }
.tq-acces-carte {
  grid-column: 2; grid-row: 1 / span 2;
  background: var(--tq-carte); color: var(--tq-encre);
  border-radius: 6px; padding: 1.4rem;
}
/* Le vert en filigrane, ton sur ton : il occupe le bas de la colonne de gauche,
   qui reste vide dès que le texte est court. Assez proche du fond pour ne rien
   disputer au formulaire. */
.tq-acces-filigrane { grid-column: 1; grid-row: 3; width: 190px; margin-top: 1.6rem; }
.tq-acces-panneau { grid-template-rows: auto auto 1fr; }
.tq-acces-filigrane .tq-vert-plein  { fill: #2a5439; }
.tq-acces-filigrane .tq-vert-courbe { stroke: #4c8560; stroke-opacity: 0.7; }
/* Sur fond vert profond, une fosse de sable ne peut être ni sable ni verte : elle
   vire au gris et salit le dessin. On la retire plutôt que de chercher un ton qui
   n'existe pas. */
.tq-acces-filigrane .tq-fosse       { display: none; }
.tq-acces-filigrane .tq-vert-trou   { fill: var(--tq-panneau); }
.tq-acces-filigrane .tq-vert-mat    { stroke: #9fb9a6; }
.tq-acces-filigrane .tq-vert-drapeau{ fill: #8d4327; }
.tq-acces-carte { grid-row: 1 / span 3; }

.tq-formulaire { display: flex; flex-direction: column; gap: 0.35rem; }
.tq-formulaire label { font-size: 0.82rem; color: var(--tq-doux); margin-top: 0.5rem; }
.tq-formulaire input[type=email], .tq-formulaire textarea {
  font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--tq-trait);
  border-radius: 4px; background: #fff; color: var(--tq-encre); width: 100%;
}
.tq-formulaire input:focus, .tq-formulaire textarea:focus {
  outline: 2px solid var(--tq-terre); outline-offset: 1px; border-color: var(--tq-terre);
}
.tq-formulaire .tq-bouton { margin-top: 1rem; align-self: flex-start; }
.tq-note { font-size: 0.78rem; color: var(--tq-doux); margin: 0.7rem 0 0; }
.tq-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tq-reponse { margin: 0.9rem 0 0; font-size: 0.92rem; }
.tq-reponse.tq-ok { color: var(--tq-vert); }
.tq-reponse.tq-erreur { color: var(--tq-terre); }

/* --- pied ------------------------------------------------------------- */
.tq-pied {
  border-top: 1px solid var(--tq-trait); background: var(--tq-carte);
  padding: 1.6rem 1.25rem; font-size: 0.82rem; color: var(--tq-doux);
}
.tq-pied p { margin: 0 auto 0.4rem; max-width: var(--tq-mesure); }
.tq-version { font-variant-numeric: tabular-nums; font-size: 0.74rem; }

/* --- méthode ---------------------------------------------------------- */
.tq-methode { max-width: var(--tq-mesure); margin: 0 auto; padding: 3rem 1.25rem 3.5rem; }
.tq-methode h1 { font-size: clamp(1.7rem, 4.6vw, 2.4rem); margin: 0 0 1.4rem; }
.tq-methode h2 { font-size: 1.25rem; margin: 2.2rem 0 0.8rem; }
.tq-methode p, .tq-methode li { max-width: var(--tq-texte); color: var(--tq-encre-douce); }
.tq-methode ul { padding-left: 1.1rem; }
.tq-methode li { margin-bottom: 0.4rem; }
.tq-tableau { width: 100%; max-width: 44rem; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.9rem; }
.tq-tableau th, .tq-tableau td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--tq-trait); }
.tq-tableau th { font-weight: 580; color: var(--tq-doux); font-size: 0.8rem; }
.tq-tableau td.tq-nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tq-drapeau { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 3px; font-size: 0.72rem; font-weight: 560; white-space: nowrap; }
.tq-publie { background: var(--tq-vert-pale); color: var(--tq-vert); }
.tq-probation { background: var(--tq-sable-fonce); color: var(--tq-doux); }
.tq-tableau caption, .tq-legende-table {
  caption-side: bottom; text-align: left; font-size: 0.78rem;
  color: var(--tq-doux); padding: 0.5rem 0 0;
}
.tq-tableau tbody th[scope=row] { font-weight: 440; color: var(--tq-encre-douce); }
.tq-empreinte { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; }
.tq-conditions { padding-left: 1.2rem; }
.tq-conditions li { margin-bottom: 0.7rem; }
.tq-retour { margin-top: 2.5rem; }
/* Un tableau plus large que l'écran défile tout seul, sans emporter la page avec lui. */
.tq-defile { overflow-x: auto; margin: 1rem 0 1.5rem; }
.tq-defile .tq-tableau { margin: 0; }

/* --- téléphone -------------------------------------------------------- */
@media (max-width: 780px) {
  .tq-bandeau { grid-template-columns: repeat(2, 1fr); }
  .tq-cartes { grid-template-columns: 1fr; }
  .tq-calib-bloc { grid-template-columns: 1fr; }
  .tq-figure { max-width: 22rem; }
  .tq-heros { padding-top: 3rem; }
  .tq-heros-dedans { grid-template-columns: 1fr; }
  .tq-heros-vert { display: none; }
  .tq-acces-panneau { grid-template-columns: 1fr; padding: 1.8rem 1.3rem; }
  .tq-acces-panneau h2, .tq-acces-panneau > p, .tq-acces-carte { grid-column: 1; }
  .tq-acces-panneau h2 { grid-row: auto; }
  .tq-acces-filigrane { display: none; }
  .tq-acces-panneau > p { grid-row: auto; margin-bottom: 1.4rem; }
  .tq-acces-carte { grid-row: auto; }
}
@media (max-width: 420px) {
  .tq-bandeau { grid-template-columns: 1fr; }
  .tq-valeur { font-size: 1.35rem; }
}

/* --- espace privé ------------------------------------------------------
   La connexion et l'administration partagent la feuille des pages publiques :
   une deuxième feuille finirait par diverger de la première, et c'est toujours
   la page qu'on regarde le moins qui se met à jurer. */
.tq-entree { max-width: 34rem; margin: 0 auto; padding: 4rem 1.25rem 5rem; }
.tq-entree-carte {
  background: var(--tq-carte); border: 1px solid var(--tq-trait);
  border-radius: 8px; padding: 2rem 1.8rem;
}
.tq-entree-carte h1 { margin: 0 0 1rem; font-size: clamp(1.5rem, 4vw, 2rem); }
.tq-entree-carte .tq-formulaire { margin-top: 1.4rem; }
.tq-entree-carte .tq-note { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--tq-trait); }

.tq-membre { max-width: var(--tq-mesure); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.tq-membre h1 { font-size: clamp(1.6rem, 4.4vw, 2.2rem); margin: 0 0 1rem; }
.tq-membre .tq-bandeau {
  margin: 2rem auto 2.5rem; max-width: none;
  /* auto-fit et non repeat(4) : les bandeaux de l'espace membre ont trois, quatre ou
     huit cases selon la page. Et le fond passe en couleur de carte, avec les séparateurs
     portés par les cases elles-mêmes : avec la grille en fond, une rangée incomplète
     laissait un rectangle beige là où il n'y a rien — un trou qui a l'air d'un bogue. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0; background: var(--tq-carte);
}
.tq-membre .tq-chiffre { border-right: 1px solid var(--tq-trait); border-bottom: 1px solid var(--tq-trait); }
.tq-membre .tq-chiffre:last-child { border-right: 0; }
.tq-section-membre { margin-bottom: 3rem; }
.tq-section-membre h2 { font-size: 1.25rem; margin: 0 0 0.6rem; }
.tq-section-membre .tq-discret { max-width: var(--tq-texte); margin: 0.8rem 0 1rem; }
.tq-a-venir { border-top: 1px solid var(--tq-trait); padding-top: 2rem; }
.tq-lien-admin { font-size: 0.9rem; }

/* Un formulaire réduit à son bouton : il ne doit pas casser l'alignement de la barre. */
.tq-form-mini { display: inline; margin: 0; }
.tq-formulaire-large { max-width: 26rem; }
.tq-bouton-mini {
  font: inherit; font-size: 0.78rem; padding: 0.25rem 0.6rem; border-radius: 3px;
  background: var(--tq-vert); color: #fff; border: 0; cursor: pointer; white-space: nowrap;
}
.tq-bouton-mini:hover { background: var(--tq-vert-moyen); }
.tq-bouton-fade { background: transparent; color: var(--tq-doux); border: 1px solid var(--tq-trait); }
.tq-bouton-fade:hover { background: transparent; color: var(--tq-terre); border-color: var(--tq-terre); }
.tq-actions { white-space: nowrap; }
.tq-actions .tq-form-mini + .tq-form-mini { margin-left: 0.35rem; }
.tq-quand { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--tq-doux); white-space: nowrap; }
.tq-mot-attente { max-width: 22rem; font-size: 0.85rem; color: var(--tq-encre-douce); }

@media (max-width: 780px) {
  .tq-membre .tq-bandeau { grid-template-columns: repeat(2, 1fr); }
}

/* --- menu de téléphone --------------------------------------------------
   Mesuré avant d'être écrit : sur un écran de 390 px, l'en-tête des pages
   membres se cassait sur quatre lignes et mangeait 178 px sur 844, soit un
   cinquième de l'écran avant le premier mot.

   Le bouton et le repli de la navigation sont conditionnés à .tq-js, posée
   par le script au tout début. SANS JavaScript, on retrouve exactement
   l'en-tête d'avant : encombrant mais entier. Un menu qui exige un script
   pour exister ne doit pas emporter la navigation avec lui s'il n'existe pas.

   Le panneau est en position absolue sous l'en-tête, qui est déjà en sticky
   et sert donc de repère. Son fond est OPAQUE : à 97 % le titre du héros se
   lisait au travers, sur BaseOdds, et c'était laid. */
.tq-menu { display: none; }

@media (max-width: 780px) {
  .tq-js .tq-menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;      /* 44 px : la cible tactile minimale */
    padding: 0; margin: -0.4rem -0.35rem -0.4rem 0;
    border: 1px solid var(--tq-tete-trait); border-radius: 8px;
    background: transparent; cursor: pointer;
  }
  .tq-js .tq-menu:hover { border-color: var(--tq-terre); }
  .tq-js .tq-menu-barres,
  .tq-js .tq-menu-barres::before,
  .tq-js .tq-menu-barres::after {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: var(--tq-tete-texte); transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .tq-js .tq-menu-barres { position: relative; }
  .tq-js .tq-menu-barres::before,
  .tq-js .tq-menu-barres::after { content: ""; position: absolute; }
  .tq-js .tq-menu-barres::before { transform: translateY(-6px); }
  .tq-js .tq-menu-barres::after  { transform: translateY(6px); }
  /* Ouvert, les trois barres deviennent une croix : l'état se voit sans lire. */
  .tq-js .tq-menu[aria-expanded="true"] .tq-menu-barres { background: transparent; }
  .tq-js .tq-menu[aria-expanded="true"] .tq-menu-barres::before { transform: rotate(45deg); }
  .tq-js .tq-menu[aria-expanded="true"] .tq-menu-barres::after  { transform: rotate(-45deg); }

  /* flex-direction: column rend le justify-content: flex-end et le flex-wrap
     de la règle d'origine SANS EFFET, quelle que soit celle qui l'emporte.
     Une correction qui dépend de gagner la cascade se défait au patch suivant. */
  .tq-js .tq-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.4rem 1.25rem 1rem;
    background: var(--tq-tete-fond);
    border-bottom: 1px solid var(--tq-tete-trait);
    box-shadow: 0 10px 22px rgba(31, 26, 21, 0.10);
  }
  .tq-js .tq-nav[data-ouvert] { display: flex; }
  .tq-js .tq-nav > a,
  .tq-js .tq-nav > button,
  .tq-js .tq-nav > form > button {
    display: block; width: 100%; text-align: left;
    padding: 0.75rem 0; font-size: 0.98rem;
    border-bottom: 1px solid var(--tq-tete-trait);
    color: var(--tq-tete-douce);
  }
  .tq-js .tq-nav > form { width: 100%; }
  .tq-js .tq-nav > button,
  .tq-js .tq-nav > form > button {
    border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
    color: var(--tq-encre-douce); background: transparent;
  }
  /* Les deux boutons d'appel gardent leur allure de bouton, pleine largeur. */
  .tq-js .tq-nav > a.tq-bouton {
    margin-top: 0.9rem; padding: 0.7rem 1rem;
    text-align: center; border-bottom: 0;
  }
  .tq-js .tq-nav > :last-child { border-bottom: 0; }
}

/* --- pages de données de l'espace membre ------------------------------- */
.tq-nav-membre { font-size: 0.9rem; }
/* La navigation de l'espace membre s'était donné ses propres couleurs, écrites du temps
   où l'en-tête était clair : encre foncée et vert foncé sur un en-tête devenu vert
   profond, soit 1,05:1 et 2,08:1 — illisible. Trouvé par l'audit de contraste, pas à
   l'œil. Elle suit maintenant les jetons de l'en-tête, comme le reste de la barre. */
.tq-nav-membre a { color: var(--tq-tete-douce); text-decoration: none; }
.tq-nav-membre a:hover { color: var(--tq-tete-accent); }
.tq-nav-membre a.tq-actif { color: var(--tq-tete-texte); font-weight: 600; }

.tq-age { font-size: 0.8rem; color: var(--tq-doux); margin: 0 0 1.5rem; }

.tq-filtres {
  display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.9rem;
  margin: 0 0 1.2rem; padding: 0.9rem 1rem;
  background: var(--tq-carte); border: 1px solid var(--tq-trait); border-radius: 6px;
}
.tq-filtres label { font-size: 0.78rem; color: var(--tq-doux); display: block; margin-bottom: 0.2rem; }
.tq-filtres input {
  font: inherit; font-size: 0.9rem; padding: 0.35rem 0.55rem;
  border: 1px solid var(--tq-trait); border-radius: 4px; background: #fff; color: var(--tq-encre);
}
.tq-filtres input[type=search] { min-width: 12rem; }
.tq-filtres input[type=number] { width: 6rem; }
.tq-filtres input:focus { outline: 2px solid var(--tq-terre); outline-offset: 1px; }
.tq-filtres > button { align-self: end; }

.tq-onglets { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.8rem; }
.tq-onglets a {
  font-size: 0.82rem; padding: 0.3rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--tq-trait); color: var(--tq-doux); text-decoration: none;
}
.tq-onglets a:hover { color: var(--tq-encre); border-color: var(--tq-doux); }
.tq-onglets a.tq-actif { background: var(--tq-vert); border-color: var(--tq-vert); color: #fff; }

.tq-pagination { display: flex; align-items: center; gap: 0.8rem; margin: 1rem 0 1.4rem; }
.tq-pagination .tq-bouton-mini { text-decoration: none; display: inline-block; }
.tq-page { font-size: 0.82rem; color: var(--tq-doux); }

/* La forme : le signe porte le sens, la couleur le souligne sans le remplacer —
   un lecteur qui ne distingue pas le rouge du vert lit encore le + et le −. */
.tq-mieux { color: var(--tq-vert); }
.tq-moins { color: var(--tq-terre); }
.tq-peu-appuye { color: var(--tq-doux); font-style: italic; }
.tq-amateur { font-size: 0.7rem; color: var(--tq-doux); }
.tq-tableau th[scope=row] a { color: var(--tq-encre); text-decoration: none; }
.tq-tableau th[scope=row] a:hover { color: var(--tq-terre); text-decoration: underline; }
.tq-membre .tq-cartes { margin-top: 1rem; }
.tq-carte h3 a { color: var(--tq-encre); text-decoration: none; }
.tq-carte h3 a:hover { color: var(--tq-terre); }

/* Une plage de dates est plus longue qu'un nombre : au corps des autres valeurs elle
   passe à la ligne et étire tout le bandeau. */
.tq-valeur-dates { font-size: 1.05rem; letter-spacing: 0; white-space: nowrap; }

/* Un avis qui nuance un chiffre doit se voir autant que le chiffre. */
.tq-avis {
  border-left: 3px solid var(--tq-terre); padding: 0.6rem 0 0.6rem 0.9rem;
  margin: 0 0 1.2rem; max-width: 44rem;
}

/* Le lien d'accès dans l'en-tête public, et le rappel sous le formulaire : sans eux,
   un membre qui arrive sur l'accueil n'a aucun moyen d'entrer, et il remplit une
   deuxième fois la liste d'attente. */
.tq-lien-acces { font-size: 0.9rem; color: var(--tq-vert); font-weight: 560; text-decoration: none; }
.tq-lien-acces:hover { color: var(--tq-terre); }
.tq-deja {
  margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--tq-trait);
  font-size: 0.85rem; color: var(--tq-doux);
}

.tq-formulaire input[type=text] {
  font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--tq-trait);
  border-radius: 4px; background: #fff; color: var(--tq-encre); width: 100%;
}

/* --- deux appels côte à côte, comme sur YardOdds ------------------------
   Un seul bouton « demander un accès » laissait un membre déjà inscrit sans issue :
   il n'avait de chemin vers la connexion nulle part sur la page. */
.tq-appels { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0; }
.tq-bouton-petit { padding: 0.35rem 0.8rem; font-size: 0.82rem; }
.tq-bouton-contour {
  background: transparent; color: var(--tq-encre-douce);
  border: 1px solid var(--tq-trait);
}
.tq-bouton-contour:hover { background: transparent; color: var(--tq-terre); border-color: var(--tq-terre); }

/* La case de consentement : le texte doit rester lisible et cliquable en entier. */
.tq-consentement {
  display: flex; align-items: flex-start; gap: 0.55rem;
  margin-top: 1rem; font-size: 0.84rem; color: var(--tq-encre-douce);
  line-height: 1.45; cursor: pointer;
}
.tq-consentement input { margin-top: 0.2rem; accent-color: var(--tq-vert); flex: none; }

/* --- la page de connexion ------------------------------------------------
   Un champ seul sous un titre a l'air d'une page inachevée. Les trois étapes disent
   ce qui va se passer, et la confirmation ESCAMOTE le formulaire : le laisser en place
   invite à redemander un lien, ce qui invalide celui qu'on vient de recevoir. */
.tq-entree-carte { position: relative; overflow: hidden; }
.tq-entree-marque { position: absolute; top: -1.2rem; right: -2.2rem; width: 150px; opacity: 0.13; pointer-events: none; }
.tq-entree-carte .tq-etiquette { margin-bottom: 0.5rem; }
.tq-entree-carte .tq-texte { margin-bottom: 1.2rem; }

.tq-etapes { margin: 0 0 1.6rem; padding-left: 1.2rem; }
.tq-etapes li { margin-bottom: 0.4rem; font-size: 0.92rem; color: var(--tq-encre-douce); }
.tq-etapes li::marker { color: var(--tq-vert); font-weight: 640; }

.tq-envoye .tq-entree-form { display: none; }
.tq-envoi {
  border-left: 3px solid var(--tq-vert); padding: 0.2rem 0 0.2rem 1rem; margin: 0.5rem 0 0.5rem;
}
.tq-envoi-titre { margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 600; color: var(--tq-vert); }
.tq-envoi-texte { margin: 0 0 0.8rem; color: var(--tq-encre-douce); }
/* La phrase qui parle à celui qui n'a PAS d'accès : même poids que celle qui parle au
   membre, sinon on la lit comme une note de bas de page et on attend un courriel qui
   ne viendra jamais. */
.tq-envoi-attente { margin: 0 0 0.9rem; color: var(--tq-encre-douce); }
.tq-envoi-note { margin: 0 0 1rem; font-size: 0.85rem; color: var(--tq-doux); }
.tq-entree-carte .tq-appels { margin-top: 1.2rem; }

/* --- portraits -----------------------------------------------------------
   Le monogramme est le FOND ; la photo se pose par-dessus, en position absolue.
   Si elle ne vient jamais, rien ne bouge : on voit les initiales, et la page
   garde exactement la même géométrie. Aucune réserve d'espace à corriger, aucun
   saut de mise en page au chargement. */
.tq-portrait {
  position: relative;
  display: inline-block;
  width: var(--tq-portrait);
  height: var(--tq-portrait);
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tq-panneau);
  /* Le liseré a un VRAI travail : empêcher un portrait pâle de se fondre dans une
     page pâle. Mesuré, --tq-trait donnait 1,38:1 sur le fond de page — un trait que
     personne ne voit ne sépare rien. --tq-doux tient 4,97:1 sur la page et 6,14:1
     sur les cartes, et c'est un jeton qui existe déjà : pas une couleur de plus. */
  box-shadow: 0 0 0 1px var(--tq-doux);
}

.tq-portrait > svg,
.tq-portrait-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.tq-portrait-photo {
  object-fit: cover;
  /* Cadrage CENTRÉ, volontairement neutre. Je n'ai pas vu les portraits réels de la
     source depuis l'atelier — ses hôtes y sont bloqués — et inventer un décalage
     « pour garder le visage » serait un chiffre que je ne peux pas défendre. À
     ajuster une fois, en regardant la production, si le cadrage coupe mal. */
  object-position: 50% 50%;
  border: 0;
}

.tq-fiche-tete {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 0.4rem;
}

.tq-fiche-tete-mots { min-width: 0; }
.tq-fiche-tete-mots > .tq-etiquette { margin-bottom: 0.15rem; }
.tq-fiche-tete-mots > h1 { margin: 0; }

/* Dans la liste : le portrait et le nom sur une seule ligne, le nom pouvant se
   couper sans jamais écraser le disque. */
.tq-nom-joueur {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

/* Les tailles, NOMMÉES. Elles doublent la table TAILLES_PORTRAIT de Fiches.php, et
   la sonde refuse l'installation si l'une des deux perd une entrée : un nom sans
   règle donnerait un disque de largeur nulle, sans le moindre message. */
.tq-portrait-fiche { --tq-portrait: 112px; }
.tq-portrait-liste { --tq-portrait: 28px; }


@media (max-width: 560px) {
  .tq-fiche-tete { gap: 0.8rem; }
  .tq-portrait-fiche { --tq-portrait: 76px; }
  /* Au téléphone, la colonne des noms est déjà serrée : le disque y prendrait la
     place du nom lui-même. */
  .tq-nom-joueur .tq-portrait { display: none; }
}

/* --- carte de parcours ---------------------------------------------------
   Le dessin est fait pour un repère large (720 × 210) et se redimensionne tout
   seul. Pas de hauteur fixe : à 320 px de large, dix-huit colonnes doivent
   rester dix-huit colonnes, plus courtes, jamais écrasées. */
.tq-carte-cadre {
  background: var(--tq-carte);
  border: 1px solid var(--tq-trait);
  border-radius: 6px;
  padding: 0.9rem 0.6rem 0.4rem;
  margin: 0.9rem 0 0.6rem;
  /* Le seul débordement toléré du site : sous ~340 px, les chiffres des trous
     deviendraient illisibles avant que les barres ne gênent. On laisse alors
     défiler CE cadre, jamais la page. */
  overflow-x: auto;
}

.tq-carte-cadre .tq-carte-parcours {
  display: block;
  width: 100%;
  /* 620 px, pas 320 : le dessin fait 720 unités de large, donc à 320 px les chiffres
     des trous tombaient à 5 px — présents, et illisibles. À 620 px le par se lit à
     ~13 px et le numéro à ~9,5 px. Au téléphone le cadre défile donc horizontalement,
     et c'est le bon compromis : une carte qu'on lit en la faisant glisser vaut mieux
     qu'une carte entière qu'on ne peut pas lire. */
  min-width: 620px;
  height: auto;
}

/* L'incertitude d'une mesure, écrite à côté d'elle. Plus discrète que le chiffre,
   parce qu'elle le nuance sans le remplacer — mais jamais invisible : une marge
   qu'on ne voit pas ne nuance rien. Le contraste est éprouvé par l'atelier. */
.tq-marge { font-size: 0.82em; font-weight: 400; color: var(--tq-encre-douce); white-space: nowrap; }

/* « Pas mesuré » n'est pas une valeur basse : c'est une absence. Il ne prend donc ni
   la couleur du bon ni celle du mauvais — un tiret vert se lirait « facile ». */
.tq-non-mesure { color: var(--tq-encre-douce); font-style: italic; }

/* La carte de pointage. La couleur suit l'ÉCART AU PAR du trou, jamais le score brut :
   un 4 est bon sur une normale 5 et mauvais sur une normale 3.
   
   Les teintes reprennent les jetons DÉJÀ éprouvés au contraste (--tq-vert et --tq-terre,
   ceux de .tq-mieux et .tq-moins). J'avais d'abord inventé --tq-voile et --tq-mieux :
   des variables inexistantes ne provoquent aucune erreur, elles prennent la couleur du
   parent — le commentaire en tête de ce fichier le dit déjà, et je m'y suis repris. */
.tq-carte-pointage td, .tq-carte-pointage th { padding: 0.32rem 0.45rem; }
.tq-carte-pointage .tq-neuf, .tq-carte-pointage .tq-total {
  font-weight: 600; background: var(--tq-vert-pale);
}
.tq-carte-pointage .tq-aigle   { font-weight: 700; color: var(--tq-vert); }
.tq-carte-pointage .tq-oiselet { font-weight: 600; color: var(--tq-vert); }
.tq-carte-pointage .tq-boguey  { color: var(--tq-terre); }
.tq-carte-pointage .tq-double  { font-weight: 600; color: var(--tq-terre); }

/* Le trou le plus dur et le plus facile. Un fond discret, pas une couleur de texte :
   le chiffre garde sa propre lecture, et deux signaux de couleur sur la même cellule
   n'en font plus qu'un seul, illisible. */
.tq-trou-dur, .tq-trou-facile { background: var(--tq-vert-pale); }