/* ═══════════════════════════════════════════════════════════════════════════
   TIRE OU POINTE — les jetons et le kit du site, au dessin de l'application.

   Le cahier : .travaux/refonte-tire-ou-pointe/SITE-DESIGN.md, lui-meme tire de
   passion-petanque-app/.travaux/tire-ou-pointe/DESIGN.md (la source de verite
   du dessin, avec ses maquettes).

   LA DIRECTION, en une phrase : papier creme, encre bleu nuit, UN SEUL accent
   or. Cartes blanches rayon 16 posees sur un creme texture, boutons pilule,
   titres Playfair en casse normale, intitules Inter 700 en petites capitales
   espacees. La nuit, le papier devient bleu nuit et les cartes un bleu plus
   clair — jamais du gris.

   DEUX REGLES QUI NE SE DISCUTENT PAS
     · L'or ne s'ECRIT jamais en petit sur du clair : #F5B41C sur blanc donne
       1,9:1. Tout or qui porte du texte passe par --tp-or-lisible (#9A6B00 le
       jour, #F5B41C la nuit). L'or plein reste l'or plein : c'est un FOND.
     · On ne renomme rien. Les classes .adm-*, .est-*, les #id et les data-*
       sont vises par p-admin.js, p-poste.js, guide.js et 99 ancres de visite
       guidee : ce fichier leur donne un DESSIN, pas un autre nom.

   Cette feuille est dans la couche « tire », declaree EN DERNIER : elle passe
   donc devant socle, composants, pages, utilitaires, sable, panneau et poste
   sans un seul !important.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer tire {

/* ─────────────────────────────────────────────────────────── LES JETONS ──
   light-dark() demande que color-scheme soit pose. Les trois etats du site
   sont conserves : auto (le reglage du telephone), cagnard (le plein soleil),
   buvette (le soir au comptoir). L'attribut est ecrit avant le premier peint
   par le script anti-scintillement de site.php. */

:root {
  color-scheme: light dark;

  /* Les surfaces */
  --tp-sol:        light-dark(#FDF7F1, #101838);
  --tp-carte:      light-dark(#FFFFFF, #1A2247);
  --tp-creux:      light-dark(#E7E9EC, #232B52);

  /* L'encre, du plus noir au plus pale */
  --tp-encre:      light-dark(#1D1838, #FFFFFF);
  --tp-encre-2:    light-dark(#3F475B, #D6DDF0);
  --tp-encre-3:    light-dark(#6B7280, #9FAAC9);
  --tp-encre-4:    light-dark(#A5A7B3, #8593B7);

  /* L'or. Trois nuances pour les fonds, une quatrieme pour ce qui s'ecrit. */
  --tp-or:         #F5B41C;
  --tp-or-vif:     #FFCE4A;
  --tp-or-profond: #D99A0E;
  --tp-or-lisible: light-dark(#9A6B00, #F5B41C);
  --tp-sur-or:     light-dark(#1D1838, #101838);

  /* Les traits et l'ombre */
  --tp-trait:      light-dark(#E7E9EC, rgb(255 255 255 / .09));
  --tp-trait-fort: light-dark(#D3D6DC, rgb(255 255 255 / .16));
  /* ⚠️ SURTOUT PAS de light-dark() ici. La fonction n'accepte qu'une <color>,
     jamais une ombre entière. Écrite ainsi, la déclaration était INVALIDE et
     chaque élément retombait sur « none » sans le moindre avertissement :
     toutes les cartes du site sont restées plates depuis le premier jour.
     Les deux valeurs sont donc posées par thème, juste en dessous. */
  --tp-ombre:      0 3px 12px rgb(29 24 56 / .08);
  --tp-ombre-haut: 0 10px 28px rgb(29 24 56 / .14);

  /* Les trois teintes de sens. Jamais une couleur seule : toujours le duo
     texte + fond, pour que l'etat tienne aussi en petite taille. */
  --tp-vert:       light-dark(#1F8A4C, #6CD79D);
  --tp-vert-fond:  light-dark(#DDF3E5, rgb(14 122 79 / .28));
  --tp-rouge:      light-dark(#C9342B, #F68675);
  --tp-rouge-fond: light-dark(#FDE3DE, rgb(193 58 34 / .25));
  --tp-ambre:      light-dark(#9A6B00, #F7B83D);
  --tp-ambre-fond: light-dark(#FBEFCF, rgb(130 86 4 / .25));

  /* Les metaux du podium : de vraies teintes, pas trois gris. */
  --tp-argent:     #C8CCD4;
  --tp-bronze:     #C9915A;

  /* Les caracteres */
  --tp-titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --tp-texte: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tp-main:  "Caveat Brush", "Brush Script MT", cursive;

  /* Les rayons */
  --tp-r-carte:  16px;
  --tp-r-champ:  12px;
  --tp-r-tuile:  10px;
  --tp-r-pilule: 999px;

  /* Le papier. Une tuile de 512, posee en fond de page et de bandeau. */
  --tp-papier: url("../img/charte/papier_clair.png");

  /* Le mouvement. 180 ms sortant : on sent la carte repondre, on ne l'attend
     pas. Aucune animation d'entree en cascade — une page qui se monte sous
     les yeux fait perdre plus de temps qu'elle n'en donne. */
  --tp-elan: 180ms cubic-bezier(.2, .7, .3, 1);
}

/* La nuit du téléphone, sauf si le lecteur a explicitement demandé le plein
   cagnard : son choix passe avant le réglage de l'appareil. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="cagnard"]) {
    --tp-papier:     url("../img/charte/papier_nuit.png");
    --tp-ombre:      0 6px 18px rgb(5 9 22 / .45);
    --tp-ombre-haut: 0 14px 34px rgb(5 9 22 / .55);
  }
}

/* Les deux choix explicites l'emportent sur le reglage du telephone. */
:root[data-theme="cagnard"] {
  color-scheme: light;
  --tp-papier: url("../img/charte/papier_clair.png");
}

:root[data-theme="buvette"] {
  color-scheme: dark;
  --tp-papier:     url("../img/charte/papier_nuit.png");
  --tp-ombre:      0 6px 18px rgb(5 9 22 / .45);
  --tp-ombre-haut: 0 14px 34px rgb(5 9 22 / .55);
}

/* ───────────────────────────────────────────────────────── LE PAPIER ──
   Le fond du site : le creme (ou le bleu nuit) avec sa texture par-dessus,
   en repetition. L'image est une tuile sans raccord : elle ne se voit pas,
   elle se sent. */

body {
  background-color: var(--tp-sol);
  background-image: var(--tp-papier);
  background-repeat: repeat;
  background-size: 512px;
  color: var(--tp-encre);
  font-family: var(--tp-texte);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ──────────────────────────────────────────────────────── LES TITRES ──
   Playfair en CASSE NORMALE. Les capitales integrales appartenaient a
   l'ancienne direction (Big Shoulders) : en Playfair elles crient. */

.tp-titre-1,
.tp-titre-2,
.tp-titre-3 {
  font-family: var(--tp-titre);
  font-weight: 700;
  color: var(--tp-encre);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0;
}

.tp-titre-1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); }  /* 24 → 34 */
.tp-titre-2 { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem); }  /* 20 → 30 */
.tp-titre-3 { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); }    /* 18 → 24 */

/* Le surtitre : Inter 700, onze pixels, capitales espacees. C'est lui qui
   donne le ton « fiche de resultats » de toute la maquette. */
.tp-surtitre {
  font-family: var(--tp-texte);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tp-encre-3);
  margin: 0 0 .5rem;
}

.tp-surtitre--or { color: var(--tp-or-lisible); }

/* Le slogan et les citations : la main, jamais le corps de texte. */
.tp-main {
  font-family: var(--tp-main);
  font-weight: 400;
  line-height: 1.25;
}

/* ───────────────────────────────────────────────────────── LA CARTE ──
   La brique de tout le site. Blanche sur le creme, rayon 16, un trait fin et
   une ombre basse : elle se detache du papier sans flotter. */

.tp-carte {
  background: var(--tp-carte);
  border: 1px solid var(--tp-trait);
  border-radius: var(--tp-r-carte);
  box-shadow: var(--tp-ombre);
  padding: 1rem 1.125rem;
}

/* Le liseré or : la ligne « Vous » du classement, la journee du jour. Un
   trait a gauche, pas un fond — l'or en aplat mangerait le texte. */
.tp-carte--or {
  border-color: color-mix(in oklab, var(--tp-or) 45%, var(--tp-trait));
  box-shadow: var(--tp-ombre), inset 3px 0 0 var(--tp-or);
}

.tp-carte--nuit {
  background: #101838;
  border-color: rgb(255 255 255 / .1);
  color: #FFFFFF;
}

.tp-carte--nuit .tp-titre-1,
.tp-carte--nuit .tp-titre-2,
.tp-carte--nuit .tp-titre-3 { color: #FFFFFF; }

.tp-carte--nuit .tp-surtitre { color: var(--tp-or); }

/* La carte cliquable repond au survol : un pixel vers le haut, l'ombre qui
   s'ouvre. Sortant seulement — au retour elle retombe tout de suite. */
a.tp-carte,
.tp-carte--clic {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--tp-elan), box-shadow var(--tp-elan), border-color var(--tp-elan);
}

a.tp-carte:hover,
.tp-carte--clic:hover {
  transform: translateY(-1px);
  box-shadow: var(--tp-ombre-haut);
  border-color: var(--tp-trait-fort);
}

/* Le papier froisse, legerement tourne : la citation, le mot du comite. */
.tp-papier-carte {
  background-color: light-dark(#FBF3E7, #1A2247);
  background-image: var(--tp-papier);
  background-size: 512px;
  border: 1px solid var(--tp-trait);
  border-radius: var(--tp-r-carte);
  box-shadow: var(--tp-ombre);
  padding: 1.25rem 1.375rem;
  rotate: -.6deg;
  font-family: var(--tp-main);
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--tp-encre-2);
}

/* ────────────────────────────────────────────────────────── LA LISTE ──
   Une carte sans rembourrage, des lignes separees par un trait EN RETRAIT de
   72 px : le trait part sous le texte, pas sous l'icone. C'est ce decalage
   qui fait la liste d'application plutot que le tableau. */

.tp-liste {
  background: var(--tp-carte);
  border: 1px solid var(--tp-trait);
  border-radius: var(--tp-r-carte);
  box-shadow: var(--tp-ombre);
  padding: 0;
  overflow: hidden;
  list-style: none;
  margin: 0;
}

.tp-ligne {
  display: flex;
  align-items: center;
  gap: .875rem;
  min-height: 60px;
  padding: .75rem 1rem;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--tp-trait);
  transition: background var(--tp-elan);
}

.tp-liste > .tp-ligne:first-child,
.tp-liste > li:first-child .tp-ligne { border-top: 0; }

a.tp-ligne:hover,
.tp-ligne--clic:hover { background: color-mix(in oklab, var(--tp-creux) 45%, transparent); }

/* Le corps de la ligne : titre net, meta grise, et rien qui deborde. */
.tp-ligne-corps { flex: 1 1 auto; min-width: 0; }

.tp-ligne-titre {
  font-weight: 700;
  font-size: 15px;
  color: var(--tp-encre);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp-ligne-meta {
  font-size: 13px;
  color: var(--tp-encre-3);
  margin: .125rem 0 0;
}

.tp-ligne-fin {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--tp-encre-4);
  flex: 0 0 auto;
}

/* Le chevron : il dit « ca s'ouvre ». Il glisse d'un pixel au survol. */
.tp-chevron {
  width: 20px;
  height: 20px;
  color: var(--tp-encre-4);
  transition: transform var(--tp-elan);
}

a.tp-ligne:hover .tp-chevron { transform: translateX(2px); }

/* Le bloc date : le jour en Playfair, le jour de semaine en capitales. Deux
   lignes dans 48 px, alignees sur la ligne de base du titre. */
.tp-ligne-date {
  flex: 0 0 auto;
  width: 48px;
  text-align: center;
  line-height: 1;
}

.tp-ligne-date b {
  display: block;
  font-family: var(--tp-titre);
  font-weight: 700;
  font-size: 20px;
  color: var(--tp-encre);
}

.tp-ligne-date span {
  display: block;
  margin-top: .1875rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tp-encre-3);
}

/* La date du jour se dore : c'est la seule de la liste. */
.tp-ligne--aujourdhui .tp-ligne-date b { color: var(--tp-or-lisible); }

/* La ligne de menu : l'icone dans un carre creux. Le « Mon espace » de la
   maquette, et le rail du comite. */
.tp-ligne-menu {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 56px;
  padding: .625rem 1rem;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--tp-trait);
  transition: background var(--tp-elan);
}

.tp-liste > .tp-ligne-menu:first-child { border-top: 0; }

.tp-ligne-menu:hover { background: color-mix(in oklab, var(--tp-creux) 45%, transparent); }

.tp-ligne-menu .tp-carre {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--tp-r-tuile);
  background: var(--tp-creux);
  color: var(--tp-encre-2);
  transition: background var(--tp-elan), color var(--tp-elan);
}

.tp-ligne-menu[aria-current] .tp-carre,
.tp-ligne-menu.est-actif .tp-carre {
  background: var(--tp-or);
  color: var(--tp-sur-or);
}

.tp-ligne-menu b {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: var(--tp-encre);
}

.tp-ligne-menu small {
  display: block;
  font-size: 12px;
  color: var(--tp-encre-3);
}

/* ──────────────────────────────────────────────────────── LES BOUTONS ──
   Pilules de 52 px (44 en petit), Inter 700 15. Cinq tons, un seul par
   ecran en or : l'or designe LE geste, pas les gestes. */

.tp-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: 0 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--tp-r-pilule);
  font-family: var(--tp-texte);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--tp-elan), box-shadow var(--tp-elan),
              background var(--tp-elan), border-color var(--tp-elan);
}

.tp-bouton:active { transform: translateY(1px); }

.tp-bouton--petit { min-height: 44px; padding: 0 1.125rem; font-size: 14px; }
.tp-bouton--large { width: 100%; }

.tp-bouton--or {
  background: var(--tp-or);
  color: var(--tp-sur-or);
  box-shadow: 0 2px 10px rgb(245 180 28 / .35);
}

.tp-bouton--or:hover {
  background: var(--tp-or-vif);
  box-shadow: 0 4px 16px rgb(245 180 28 / .45);
}

.tp-bouton--marine {
  background: light-dark(#1D1838, #FFFFFF);
  color: light-dark(#FFFFFF, #101838);
}

.tp-bouton--marine:hover { background: light-dark(#2B2450, #E9EDF8); }

.tp-bouton--secondaire {
  background: var(--tp-creux);
  color: var(--tp-encre);
}

.tp-bouton--secondaire:hover { background: color-mix(in oklab, var(--tp-creux) 70%, var(--tp-encre) 8%); }

.tp-bouton--fantome {
  background: transparent;
  border-color: var(--tp-trait-fort);
  color: var(--tp-encre);
}

.tp-bouton--fantome:hover { background: color-mix(in oklab, var(--tp-creux) 45%, transparent); }

.tp-bouton--danger {
  background: var(--tp-rouge-fond);
  color: var(--tp-rouge);
}

.tp-bouton--danger:hover { background: color-mix(in oklab, var(--tp-rouge-fond) 75%, var(--tp-rouge) 12%); }

.tp-bouton[disabled],
.tp-bouton[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* La rangee de gestes : elle passe a la ligne plutot que de deborder. */
.tp-gestes {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
}

/* ────────────────────────────────────────────────────────── LES PUCES ──
   Les filtres : serie, annee, type. Or quand la puce est tenue, creux
   sinon. La rangee defile horizontalement sur telephone, sans barre. */

.tp-puces {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: .125rem;
  margin-inline: calc(var(--gouttiere, 1rem) * -1);
  padding-inline: var(--gouttiere, 1rem);
}

.tp-puces::-webkit-scrollbar { display: none; }

.tp-puce {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 38px;
  padding: 0 .9375rem;
  border: 1px solid var(--tp-trait);
  border-radius: var(--tp-r-pilule);
  background: var(--tp-carte);
  color: var(--tp-encre-2);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--tp-elan), color var(--tp-elan), border-color var(--tp-elan);
}

.tp-puce:hover { border-color: var(--tp-trait-fort); }

.tp-puce[aria-pressed="true"],
.tp-puce[aria-current],
.tp-puce.est-actif {
  background: var(--tp-or);
  border-color: var(--tp-or);
  color: var(--tp-sur-or);
  font-weight: 700;
}

/* ───────────────────────────────────────────────────── LES ETIQUETTES ──
   Vingt-quatre pixels, Inter 700 11 capitales. Le duo texte + fond de
   chaque teinte de sens : l'etat reste lisible a cette taille. */

.tp-etiquette {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  height: 24px;
  padding: 0 .5625rem;
  border-radius: var(--tp-r-pilule);
  background: var(--tp-creux);
  color: var(--tp-encre-2);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tp-etiquette--or     { background: var(--tp-ambre-fond); color: var(--tp-or-lisible); }
.tp-etiquette--vert   { background: var(--tp-vert-fond);  color: var(--tp-vert); }
.tp-etiquette--rouge  { background: var(--tp-rouge-fond); color: var(--tp-rouge); }
.tp-etiquette--ambre  { background: var(--tp-ambre-fond); color: var(--tp-ambre); }
.tp-etiquette--marine { background: light-dark(#1D1838, #FFFFFF); color: light-dark(#FFFFFF, #101838); }
.tp-etiquette--gris   { background: var(--tp-creux); color: var(--tp-encre-3); }

/* La pastille : un point de couleur et son mot. « Pluie probable »,
   « Confirme », « Annulee » — la couleur ne porte jamais seule le sens. */
.tp-pastille {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--tp-encre-2);
}

.tp-pastille::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.tp-pastille--vert  { color: var(--tp-vert); }
.tp-pastille--rouge { color: var(--tp-rouge); }
.tp-pastille--ambre { color: var(--tp-ambre); }

/* ──────────────────────────────────────────────────────── LA SECTION ──
   Un titre a gauche, « Voir tout » en or a droite. Le meme bloc revient une
   dizaine de fois sur l'accueil : il tient le rythme vertical. */

.tp-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.75rem 0 .75rem;
}

.tp-section > h2,
.tp-section > h3 {
  font-family: var(--tp-texte);
  font-weight: 700;
  font-size: 15px;
  color: var(--tp-encre);
  margin: 0;
}

.tp-section a {
  font-weight: 700;
  font-size: 13px;
  color: var(--tp-or-lisible);
  text-decoration: none;
  white-space: nowrap;
}

.tp-section a:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────── LES TUILES ──
   Trois chiffres cote a cote : journees, licencies, clubs. Icone or,
   chiffre Playfair 26, intitule 11 gris. */

.tp-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: .75rem;
}

.tp-tuile {
  background: var(--tp-carte);
  border: 1px solid var(--tp-trait);
  border-radius: var(--tp-r-carte);
  box-shadow: var(--tp-ombre);
  padding: .875rem .75rem;
  text-align: center;
  color: inherit;
  text-decoration: none;
}

.tp-tuile svg { color: var(--tp-or-lisible); }

.tp-tuile b {
  display: block;
  font-family: var(--tp-titre);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  color: var(--tp-encre);
  font-variant-numeric: tabular-nums;
}

.tp-tuile span {
  display: block;
  margin-top: .125rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tp-encre-3);
}

/* ─────────────────────────────────────────────────────── LES CHAMPS ──
   Rayon 12, fond carte, bordure marquee, et un focus qui se VOIT : l'anneau
   or double d'un halo. Un champ dont on ne sait pas qu'il a le curseur est
   un formulaire qu'on remplit deux fois. */

.tp-champ {
  width: 100%;
  min-height: 48px;
  padding: .75rem .875rem;
  background: var(--tp-carte);
  border: 1px solid var(--tp-trait-fort);
  border-radius: var(--tp-r-champ);
  font-family: var(--tp-texte);
  font-size: 15px;
  color: var(--tp-encre);
  transition: border-color var(--tp-elan), box-shadow var(--tp-elan);
}

.tp-champ::placeholder { color: var(--tp-encre-4); }

.tp-champ:focus-visible,
.tp-champ:focus {
  outline: none;
  border-color: var(--tp-or);
  box-shadow: 0 0 0 3px rgb(245 180 28 / .28);
}

/* :user-invalid plutot que :invalid — on ne souligne pas en rouge un champ
   que la personne n'a pas encore touche. */
.tp-champ:user-invalid {
  border-color: var(--tp-rouge);
  box-shadow: 0 0 0 3px rgb(201 52 43 / .18);
}

.tp-intitule {
  display: block;
  margin-bottom: .375rem;
  font-weight: 700;
  font-size: 13px;
  color: var(--tp-encre-2);
}

.tp-aide {
  margin: .375rem 0 0;
  font-size: 12.5px;
  color: var(--tp-encre-3);
}

/* La recherche : la loupe dans le champ, a gauche. */
.tp-recherche { position: relative; }

.tp-recherche svg {
  position: absolute;
  left: .8125rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--tp-encre-4);
  pointer-events: none;
}

.tp-recherche .tp-champ { padding-left: 2.5rem; }

/* ───────────────────────────────────────────────────────── LE HEROS ──
   La carte photo de la prochaine journee. Le degrade bleu nuit monte du bas :
   sans lui, un titre blanc sur une photo de terrain en plein soleil devient
   illisible une fois sur deux. */

.tp-heros {
  position: relative;
  border-radius: var(--tp-r-carte);
  overflow: hidden;
  box-shadow: var(--tp-ombre-haut);
  aspect-ratio: 16 / 10;
  background: #101838;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.tp-heros > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tp-heros::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgb(16 24 56 / .92) 0%,
    rgb(16 24 56 / .72) 34%,
    rgb(16 24 56 / .15) 72%,
    rgb(16 24 56 / .05) 100%);
}

.tp-heros-corps {
  position: relative;
  z-index: 1;
  padding: 1.25rem;
}

.tp-heros .tp-surtitre { color: var(--tp-or); }

.tp-heros h1,
.tp-heros h2 {
  font-family: var(--tp-titre);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.75rem);
  color: #FFFFFF;
  margin: 0 0 .5rem;
  text-wrap: balance;
}

@media (min-width: 900px) { .tp-heros { aspect-ratio: 21 / 9; } }

/* ──────────────────────────────────────────────────────── LE PODIUM ──
   Trois cartes dans l'ordre 2 · 1 · 3, la premiere plus haute et doree.
   C'est le dessin d'un podium, pas un classement a trois lignes. */

.tp-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: .625rem;
}

.tp-podium-carte {
  background: var(--tp-carte);
  border: 1px solid var(--tp-trait);
  border-radius: var(--tp-r-carte);
  box-shadow: var(--tp-ombre);
  padding: 1rem .625rem .875rem;
  text-align: center;
  color: inherit;
  text-decoration: none;
  position: relative;
}

.tp-podium-carte--1 {
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
  border-color: color-mix(in oklab, var(--tp-or) 50%, var(--tp-trait));
  box-shadow: var(--tp-ombre-haut);
}

.tp-podium-carte b {
  display: block;
  margin-top: .5rem;
  font-weight: 700;
  font-size: 14px;
  color: var(--tp-encre);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp-podium-carte span {
  display: block;
  font-size: 12px;
  color: var(--tp-encre-3);
  font-variant-numeric: tabular-nums;
}

/* La pastille de rang, posee sur l'avatar. */
.tp-rang {
  position: absolute;
  top: -10px;
  left: 50%;
  translate: -50% 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--tp-carte);
  font-family: var(--tp-titre);
  font-weight: 700;
  font-size: 13px;
  color: #1D1838;
}

.tp-rang--1 { background: var(--tp-or); }
.tp-rang--2 { background: var(--tp-argent); }
.tp-rang--3 { background: var(--tp-bronze); color: #FFFFFF; }

/* L'ordre visuel 2 · 1 · 3 sans toucher a l'ordre du document : le lecteur
   d'ecran entend bien premier, deuxieme, troisieme. */
.tp-podium > :nth-child(1) { order: 2; }
.tp-podium > :nth-child(2) { order: 1; }
.tp-podium > :nth-child(3) { order: 3; }

/* ───────────────────────────────────────────────────────── L'AVATAR ── */

.tp-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tp-creux);
  border: 2px solid var(--tp-carte);
  color: var(--tp-encre-2);
  font-weight: 700;
  font-size: 15px;
  flex: 0 0 auto;
  overflow: hidden;
}

.tp-avatar img { width: 100%; height: 100%; object-fit: cover; }

.tp-avatar--grand { width: 88px; height: 88px; font-size: 28px; border-width: 4px; }
.tp-avatar--petit { width: 32px; height: 32px; font-size: 12px; }

/* ───────────────────────────────────────────────────────── LA TABLE ──
   Le classement. En-tete en petites capitales grises, lignes de 52 px,
   zebrage tres leger, et des chiffres TABULAIRES : sans eux les colonnes de
   points dansent d'une ligne a l'autre. */

.tp-table-boite {
  background: var(--tp-carte);
  border: 1px solid var(--tp-trait);
  border-radius: var(--tp-r-carte);
  box-shadow: var(--tp-ombre);
  overflow-x: auto;
}

.tp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tp-table th {
  position: sticky;
  top: 0;
  background: var(--tp-carte);
  padding: .75rem .75rem;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tp-encre-3);
  border-bottom: 1px solid var(--tp-trait);
  white-space: nowrap;
}

.tp-table td {
  padding: .75rem;
  height: 52px;
  border-bottom: 1px solid var(--tp-trait);
  color: var(--tp-encre);
}

.tp-table tbody tr:nth-child(even) td {
  background: color-mix(in oklab, var(--tp-creux) 40%, transparent);
}

.tp-table tbody tr:last-child td { border-bottom: 0; }

.tp-table .tp-nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* La ligne « Vous » : doree, et elle le reste par-dessus le zebrage. */
.tp-table tbody tr.est-moi td,
.tp-table tbody tr.tp-moi td {
  background: var(--tp-ambre-fond);
  font-weight: 700;
}

.tp-table tbody tr.est-moi td:first-child,
.tp-table tbody tr.tp-moi td:first-child {
  box-shadow: inset 3px 0 0 var(--tp-or);
}

/* ───────────────────────────────────────────────────── LES MESSAGES ──
   Le duo icone + phrase sur fond teinte. Jamais la couleur seule. */

.tp-message {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .875rem 1rem;
  border-radius: var(--tp-r-champ);
  background: var(--tp-creux);
  color: var(--tp-encre);
  font-size: 14px;
}

.tp-message svg { flex: 0 0 auto; margin-top: .0625rem; }

.tp-message--succes { background: var(--tp-vert-fond);  color: var(--tp-vert); }
.tp-message--erreur { background: var(--tp-rouge-fond); color: var(--tp-rouge); }
.tp-message--info   { background: var(--tp-ambre-fond); color: var(--tp-ambre); }

/* ──────────────────────────────────────────────────────── LE VIDE ──
   Un ecran vide dit ce qui manque ET donne le geste pour le remplir. Une
   page blanche avec « aucun resultat » laisse la personne sur place. */

.tp-vide {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: var(--tp-encre-3);
}

.tp-vide svg { color: var(--tp-encre-4); margin-bottom: .75rem; }

.tp-vide h3 {
  font-family: var(--tp-titre);
  font-weight: 700;
  font-size: 20px;
  color: var(--tp-encre);
  margin: 0 0 .375rem;
}

.tp-vide p { margin: 0 0 1rem; font-size: 14px; }

/* ─────────────────────────────────────────────────── LE FOCUS CLAVIER ──
   Une seule regle pour tout le kit : l'anneau or et son halo. On garde
   :focus-visible — l'anneau apparait au clavier, pas sous la souris. */

.tp-bouton:focus-visible,
.tp-puce:focus-visible,
.tp-ligne:focus-visible,
.tp-ligne-menu:focus-visible,
.tp-carte:focus-visible,
.tp-tuile:focus-visible,
.tp-podium-carte:focus-visible {
  outline: 2px solid var(--tp-or);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgb(245 180 28 / .25);
}

/* ────────────────────────────────────────────── LE MOUVEMENT, EN MOINS ──
   Qui demande moins d'animation la coupe entierement : pas de « version
   allegee » qui bouge quand meme. */

@media (prefers-reduced-motion: reduce) {
  .tp-carte,
  a.tp-carte,
  .tp-carte--clic,
  .tp-bouton,
  .tp-puce,
  .tp-ligne,
  .tp-ligne-menu,
  .tp-chevron,
  .tp-champ {
    transition: none;
  }

  a.tp-carte:hover,
  .tp-carte--clic:hover,
  .tp-bouton:active { transform: none; }

  a.tp-ligne:hover .tp-chevron { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE CHROME DU SITE

   Ici on ne renomme RIEN : .entete, .nav, .bande, .pied, .barre-onglets
   gardent leurs noms parce que eclat.js accroche « .entete » pour la coller
   au defilement et que app.js vise [data-choix-theme] et [data-choix-texte]
   dans le pied. On leur donne un DESSIN, pas un autre nom.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────── L'EN-TETE ──
   Une barre blanche collante de 64 px : le logo a gauche, la navigation au
   centre, le geste a droite. Elle ne prend une ombre qu'une fois DECOLLEE du
   haut (eclat.js pose .est-collee) — au repos elle reste plate, posee sur le
   papier. */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--tp-carte) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--tp-trait);
  transition: box-shadow var(--tp-elan);
}

.entete.est-collee { box-shadow: var(--tp-ombre); }

.entete .enveloppe {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}

.entete .marque {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

/* L'emblème est presque carré (1200 × 788) : on le tient par sa HAUTEUR et on
   laisse la largeur suivre, sinon il s'écrase. Les attributs width/height du
   gabarit portent le vrai rapport, pour que la barre ne saute pas au
   chargement de l'image. */
.entete .marque img {
  display: block;
  width: auto;
  height: 44px;
  object-fit: contain;
}

/* Le selecteur de province : discret tant qu'une seule province joue. */
.entete .prov > summary {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  height: 34px;
  padding: 0 .75rem;
  border-radius: var(--tp-r-pilule);
  background: var(--tp-creux);
  color: var(--tp-encre-2);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.entete .prov > summary::-webkit-details-marker { display: none; }

/* La navigation : Inter 600, et la page courante soulignee d'or. Le soulignage
   porte le reperage tout seul — la couleur ne le porte jamais seule. */
/* ⚠️ On DEFAIT ici, propriete par propriete, l'ancien tiroir mobile.
   Sous 900 px, app.css faisait de .nav un panneau deroulant — position
   absolute, fond bleu nuit, colonne, ombre — puis le masquait. Redeclarer le
   seul « display » le revelait avec tout le reste : une deuxieme rangee bleu
   nuit sous l'en-tete. Une couche ne gagne que sur les proprietes qu'elle
   ecrit : celles qu'on laisse passer restent a l'ancienne feuille. */
.nav {
  display: flex;
  position: static;
  inset: auto;
  flex-direction: row;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.nav > a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 .75rem;
  border-radius: var(--tp-r-pilule);
  color: var(--tp-encre-2);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background var(--tp-elan), color var(--tp-elan);
}

.nav > a:hover { background: var(--tp-creux); color: var(--tp-encre); }

.nav > a[aria-current="page"] {
  color: var(--tp-encre);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--tp-or);
  border-radius: 0;
}

.nav .nav-cta {
  height: 44px;
  padding: 0 1.125rem;
  margin-left: .375rem;
  background: var(--tp-or);
  color: var(--tp-sur-or);
  font-weight: 700;
  border-radius: var(--tp-r-pilule);
  box-shadow: 0 2px 10px rgb(245 180 28 / .35);
}

.nav .nav-cta:hover { background: var(--tp-or-vif); color: var(--tp-sur-or); }

/* Le bouton de déconnexion garde la couleur que lui donne sable.css. On avait
   tenté de la reprendre avec un !important : il était INOPÉRANT. Pour les
   déclarations !important, la cascade INVERSE l'ordre des couches — « tire »
   étant déclarée en dernier, elle est la plus faible sur ce terrain, et le
   !important de « sable » l'emporte quoi qu'on écrive ici. L'encre de sable
   est de toute façon lisible sur la barre blanche : on retire le bruit
   plutôt que d'en ajouter. */

/* La pastille de compteur : elle doit se lire a cette taille, donc du rouge
   plein et du blanc dessus, jamais un pale sur pale. */
.pastille,
.barre-onglets .puce {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 .3125rem;
  border-radius: var(--tp-r-pilule);
  background: var(--tp-rouge);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* La bande sous l'en-tete : un filet d'or, le liseré de la maquette.
   sable.css la masquait (display: none) : on la redonne explicitement. */
.bande {
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--tp-or-profond), var(--tp-or), var(--tp-or-vif));
}

/* Sur telephone la navigation du haut disparait : elle vit en bas, dans la
   barre d'onglets, comme dans l'application. */
/* 900 px, et pas 860 : c'est le point de rupture de app.css. Un point
   different laisserait une bande de quarante pixels ou ni la navigation du
   haut ni la barre du bas ne serait a sa place. */
@media (max-width: 900px) {
  .nav > a:not(.nav-cta) { display: none; }
  .nav .nav-sortie { display: none; }
}

/* ───────────────────────────────────────────────── LA BARRE D'ONGLETS ──
   Cinq places, en bas, comme l'application. La place courante prend le
   disque d'or. La barre respecte l'encoche (safe-area). */

.barre-onglets {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  background: color-mix(in oklab, var(--tp-carte) 96%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-top: 1px solid var(--tp-trait);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.barre-onglets > a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1875rem;
  min-height: 58px;
  padding: .375rem .25rem;
  color: var(--tp-encre-3);
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
}

.barre-onglets .rond {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: background var(--tp-elan), color var(--tp-elan);
}

.barre-onglets > a[aria-current="page"] { color: var(--tp-encre); font-weight: 700; }

.barre-onglets > a[aria-current="page"] .rond {
  background: var(--tp-or);
  color: var(--tp-sur-or);
}

/* La barre masque le bas de la page : on rend la hauteur au contenu. */
@media (max-width: 900px) {
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 901px) {
  .barre-onglets { display: none; }
}

/* ──────────────────────────────────────────────────────────── LE PIED ──
   Bleu nuit texture, plein cadre : il ferme la page comme la tranche d'un
   livre. Les intitules en petites capitales or, les liens en blanc casse. */

.pied {
  margin-top: 3rem;
  background-color: #101838;
  background-image: url("../img/charte/papier_nuit.png");
  background-size: 512px;
  color: #E9EDF8;
  padding-block: 2.25rem 1.5rem;
}

.pied .intitule {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tp-or);
  margin: 0 0 .625rem;
}

.pied-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
}

.pied-marque {
  font-family: var(--tp-titre);
  font-weight: 700;
  font-size: 1.5rem;
  color: #FFFFFF;
  margin: 0 0 .5rem;
}

.pied-baseline {
  max-width: 42ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: #B9C4E0;
  margin: 0;
}

.pied-liens { list-style: none; margin: 0; padding: 0; }

.pied-liens a {
  display: inline-block;
  padding: .1875rem 0;
  color: #E9EDF8;
  font-size: 14px;
  text-decoration: none;
}

.pied-liens a:hover { color: var(--tp-or); text-decoration: underline; }

.pied-app {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-top: 1rem;
  padding: .5rem .875rem .5rem .5rem;
  border-radius: var(--tp-r-pilule);
  background: rgb(255 255 255 / .07);
  border: 1px solid rgb(255 255 255 / .12);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.pied-app img { border-radius: 9px; }
.pied-app small { display: block; font-weight: 500; font-size: 11.5px; color: #B9C4E0; }

.pied-reglages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / .12);
}

/* Les deux groupes de reglage : des puces, comme les filtres du site. */
.choix-theme,
.choix-texte { display: flex; flex-wrap: wrap; gap: .5rem; }

.choix-theme button,
.choix-texte button {
  height: 38px;
  padding: 0 .9375rem;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: var(--tp-r-pilule);
  background: rgb(255 255 255 / .06);
  color: #E9EDF8;
  font-family: var(--tp-texte);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background var(--tp-elan), color var(--tp-elan);
}

.choix-theme button[aria-pressed="true"],
.choix-texte button[aria-pressed="true"] {
  background: var(--tp-or);
  border-color: var(--tp-or);
  color: #101838;
  font-weight: 700;
}

.pied .aide { margin: .625rem 0 0; font-size: 12.5px; color: #97A3C4; }

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / .12);
  font-size: 12.5px;
  color: #97A3C4;
}

.pied-bas a { color: #B9C4E0; }

/* ─────────────────────────────────────────────────────── LES BANDEAUX ──
   Le bandeau de demonstration et les messages eclair, au dessin du kit. */

.bandeau-demo {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
  margin: 0;
  padding: .625rem 1rem;
  background: var(--tp-ambre-fond);
  color: var(--tp-ambre);
  font-size: 13.5px;
  font-weight: 600;
}

.message {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .875rem 1rem;
  border-radius: var(--tp-r-champ);
  background: var(--tp-creux);
  color: var(--tp-encre);
  font-size: 14px;
}

.message-succes { background: var(--tp-vert-fond);  color: var(--tp-vert); }
.message-erreur { background: var(--tp-rouge-fond); color: var(--tp-rouge); }

/* ───────────────────────────────────────────────────────── LE PORTAIL ──
   La page du compte (layout nu) : une seule carte posee au centre d'un bleu
   nuit texture. Pas de colonne jaune, pas de moitie-moitie — on se connecte,
   on ne visite pas. */

.tp-portail {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
  background-color: #101838;
  background-image: url("../img/charte/papier_nuit.png");
  background-size: 512px;
}

.tp-portail-boite { width: min(430px, 100%); }

.tp-portail-tete { text-align: center; margin-bottom: 1.5rem; }

.tp-portail-tete img {
  display: block;
  width: auto;
  max-width: 220px;
  height: auto;
  margin: 0 auto .75rem;
}

.tp-portail-tete p {
  margin: 0;
  font-family: var(--tp-main);
  font-size: 1.375rem;
  color: var(--tp-or);
}

/* La carte du portail reste BLANCHE meme la nuit : c'est une feuille posee
   sur le bleu, et un formulaire se remplit sur du clair. */
.tp-portail .tp-carte {
  background: #FFFFFF;
  border-color: rgb(255 255 255 / .16);
  box-shadow: 0 18px 40px rgb(5 9 22 / .45);
  padding: 1.5rem;
  color: #1D1838;
}

.tp-portail .tp-carte :is(h1, h2, label, p, span, strong) { color: inherit; }

.tp-portail-pied {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 13px;
  color: #97A3C4;
}

.tp-portail-pied a { color: var(--tp-or); text-decoration: none; font-weight: 600; }
.tp-portail-pied a:hover { text-decoration: underline; }

} /* @layer tire */