/*
 * Polices Chirp (charte docs/brand/charte-chirp.html, section 04). Pas de
 * `next/font` ici : Thymeleaf/CSS pur, sans etape de build - contrairement a
 * l'app web (globals.css), donc l'import de la charte tel quel plutot qu'un
 * auto-hebergement.
 */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

/*
 * Palette Chirp — remplace « noir + rouge » (v précédente), constitution
 * Principe VI toujours en vigueur. Source : docs/brand/charte-chirp.html,
 * section 06 « Fiche résumé ».
 *
 * Source partagee : ces valeurs sont aussi definies dans le theme Tailwind de
 * l'app web (apps/sports-league-app/web/src/app/globals.css). Si une valeur
 * change ici, elle change la-bas.
 *
 * SOMBRE = DEFAUT (charte section 03, "marque nuit de patinoire").
 *
 * Deux rouges, pas un seul (charte section 03) :
 *   --accent         rouge vif, GROS TEXTE / GRAPHISME SEULEMENT - jamais du
 *                     texte courant.
 *   --accent-strong   rouge profond, tout ce qui porte un vrai texte lisible
 *                     (fond de bouton avec --accent-text dessus).
 * --ember n'est JAMAIS du texte (charte : "au trait seulement").
 *
 * --danger et --danger-text NE SONT PAS dans la charte (aucun jeton d'erreur
 * fourni) - choix ajoute ici, signale a l'auteur de la charte plutot
 * qu'invente en silence. Ambre distinct des deux rouges en teinte (~35 deg
 * contre ~350 deg) ET en luminance.
 *
 * REGLE : --border ne porte JAMAIS de texte. Bordures, separateurs, decor.
 *
 * Contrastes mesures (WCAG 2.2, seuil AA = 4.5:1 texte courant, 3:1 grand
 * texte et elements non textuels) :
 *
 *   SOMBRE (defaut)  text/ink            18.09:1   OK
 *                     text/surface        16.39:1   OK
 *                     text-muted/ink       7.47:1   OK
 *                     accent-text/accent-strong (bouton)  5.84:1  OK
 *                     accent-strong/ink (lien)             3.35:1  OK-3:1 seult
 *                     danger/ink                           8.18:1  OK
 *                     danger-text/danger (bouton)          8.18:1  OK
 *                     link/surface (lien)                  5.50:1  OK
 *                     ok/surface                          10.17:1  OK
 *
 *   CLAIR             text/ink            17.00:1   OK
 *                     text/surface        18.23:1   OK
 *                     text-muted/ink       5.35:1   OK
 *                     accent-text/accent-strong (bouton)  5.84:1  OK
 *                     accent-strong/ink (lien)             5.44:1  OK
 *                     danger/ink                           7.86:1  OK
 *                     danger-text/danger (bouton)         10.50:1  OK
 *                     link/surface (lien)                  5.44:1  OK
 *                     ok/surface                           5.02:1  OK
 *
 *   NON-TEXTE (seuil 3:1, SC 1.4.11) - mesure sur la surface reellement
 *   bordee, et non sur --ink. Cette section manquait : un tableau qui ne
 *   liste que des paires de TEXTE ne peut pas rattraper un champ sans bord,
 *   et c'est exactement par la que les defauts sont passes.
 *
 *   SOMBRE           border-control/surface (champ)       3.09:1  OK
 *                    border-control/surface-2 (champ rempli) 3.04:1  OK
 *                    focus/surface (anneau)               6.28:1  OK
 *                    ember/surface                        6.28:1  OK
 *   CLAIR            border-control/surface (champ)       3.24:1  OK
 *                    border-control/surface-2 (champ rempli) 3.14:1  OK
 *                    focus/surface (anneau)               4.24:1  OK
 *                    ember/surface                        4.24:1  OK
 *
 * A NOTER (ecart de la charte, pas invente) : --accent-strong comme texte
 * COURANT (pas un bouton) ne passe l'AA texte (4.5:1) qu'en mode clair
 * (5.44:1) - en sombre il tombe a 3.35:1. La charte ne donne qu'un seul ratio
 * (5,4:1) sans preciser qu'il ne vaut que pour le clair. Ici `a { color:
 * var(--accent); }` reste la variante FAIBLE (graphisme) par defaut - voir
 * plus bas.
 *
 * Reverifier ces valeurs avant de toucher a une couleur.
 */
:root {
  /* Sans ça, le navigateur peint ses propres commandes en clair sous ce thème
     sombre - et l'autofill repeint le formulaire de connexion en lavande chez
     tout utilisateur qui revient avec un mot de passe enregistré. */
  color-scheme: dark;

  --ink: #0b0c0f;
  --surface: #17181d;
  --surface-2: #1f2127;
  --text: #f5f6f8;
  --text-muted: #9ca0aa;
  --accent: #e01b3d;
  --accent-strong: #c81430;
  --accent-text: #ffffff;
  --ember: #ff6b47;
  --border: rgba(245, 246, 248, 0.1);
  /* Un champ ou un bouton a son propre seuil (3:1, SC 1.4.11) que le filet
     décoratif --border n'atteint pas : il mesurait 1,31:1, et les deux champs
     de /login n'avaient donc pas de bord visible. */
  --border-control: rgba(245, 246, 248, 0.35);
  --focus: #ff6b47;
  --danger: #e0993a;
  /* Était #ffffff : blanc sur cet ambre donne 2,39:1, et c'est le bouton
     « Supprimer mon compte » qui le portait. Encre sur ambre : 8,18:1. */
  --danger-text: #0b0c0f;
  --ok: #4ade80;
  /* --accent en lien donne 3,71:1 sur la carte, et --accent-strong 3,04:1 :
     les deux rouges de la charte échouent en sombre. Rouge éclairci, même
     famille, 5,50:1. */
  --link: #ff4d6a;

  /*
   * DEUX rayons, et ils disent deux choses différentes :
   *   --radius-card     une SURFACE qui porte du contenu (la carte)
   *   --radius-control  quelque chose qui se clique ou se remplit
   *
   * Le second existait déjà en fait, écrit « 8px » à la main sur les champs,
   * les boutons et les alertes - trois endroits qui pouvaient dériver sans
   * qu'aucun diff ne le montre. Même découpage et mêmes valeurs que le
   * `@theme` de globals.css côté app web : c'est le même produit.
   *
   * --radius reste, en alias : rien ne justifie de renommer une variable
   * utilisée par un seul sélecteur.
   */
  --radius-card: 10px;
  --radius-control: 8px;

  /*
   * Jumeaux des jetons de mouvement de globals.css, même règle que les
   * couleurs et les rayons : les VALEURS sont identiques des deux côtés.
   *
   * La courbe s'écrit en clair, jamais `ease-out`. Le mot-clé CSS nu vaut
   * cubic-bezier(0, 0, 0.58, 1) ; l'utilitaire `ease-out` de Tailwind, que
   * l'app web compile de son côté, vaut cubic-bezier(0, 0, 0.2, 1). Les deux
   * fichiers écrivaient bien « ease-out », et le même bouton rouge freinait
   * quand même différemment sur les deux moitiés du produit. C'est exactement
   * l'arrondi silencieux que controls.ts raconte avoir corrigé sur les
   * rembourrages, revenu par la propriété de durée.
   */
  --motion-fast: 120ms;
  --motion-entrance: 240ms;
  --motion-emphasis: 900ms;
  --motion-ease: cubic-bezier(0, 0, 0.2, 1);
  --motion-emphasis-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: var(--radius-card);
  --space: 1rem;
  --measure: 26rem;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --ink: #f7f7f5;
    --surface: #ffffff;
    --surface-2: #efeeea;
    --text: #14151a;
    --text-muted: #63666f;
    --accent: #e01b3d;
    --accent-strong: #c81430;
    --accent-text: #ffffff;
    /* #ff6b47 tombe à 2,82:1 sur blanc - sous le seuil non textuel. */
    --ember: #d94a24;
    --border: rgba(20, 21, 26, 0.12);
    /* 0,48 : a 0,46 le bord tombait a 2,97:1 sur surface-2. Suit globals.css. */
    --border-control: rgba(20, 21, 26, 0.48);
    /* Valait #c81430, soit exactement --accent-strong : l'anneau de focus
       avait la couleur de la face du bouton qu'il entoure. Suit --ember dans
       les deux modes, pour que l'affordance s'apprenne. */
    --focus: #d94a24;
    /* Assombri : écart de luminance avec --accent-strong porte de 1,45:1 à
       1,80:1, ce que la note sur la daltonie en tête de fichier promet. */
    --danger: #5a3800;
    --danger-text: #ffffff;
    --ok: #15803d;
    --link: #c81430;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.55 'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.card {
  width: 100%;
  max-width: var(--measure);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}

/* Meme hauteur que BrandMark.tsx cote app web (h-4). A 0,75rem les deux barres
   se confondent en une seule masse : la marque perd ce qu'elle dit. Le mot
   reste a 0,75rem -- c'est un reperage, pas un titre, et le h1 en dessous doit
   rester la premiere chose qu'on lit. */
.brand-mark {
  height: 1rem;
  width: auto;
  flex-shrink: 0;
}

h1 {
  font-family: 'Baloo 2', ui-sans-serif, sans-serif;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.lede {
  margin: 0 0 1.75rem;
  color: var(--text-muted);
}

.field { margin-bottom: 1.25rem; }

label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/*
 * Hierarchie de boutons. `button` seul etait `width: 100%` : sur /account les
 * deux formulaires se lisaient comme deux actions principales, et sur
 * /account/sessions chaque appareil recevait un bloc pleine largeur. Pire,
 * la suppression definitive du compte portait exactement le meme habit que
 * « Enregistrer le nom ».
 *
 * Trois niveaux, et la largeur devient explicite (.btn-block) au lieu d'etre
 * imposee a tout le monde.
 */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent-strong);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  text-decoration: none;
  transition-property: color, background-color, border-color, opacity, filter;
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--motion-ease);
}

/* Les pages d'authentification n'ont qu'une action : elle occupe la carte. */
.btn-block { width: 100%; }

/*
 * Champ de mot de passe avec bouton « afficher » : le bouton se pose dans le
 * champ, sans en prendre l'habit d'action principale. Caché sans script, il
 * n'apparaît que lorsque le basculement fonctionne.
 */
.password { position: relative; }
.password input[type="password"],
.password input[type="text"] { padding-right: 2.75rem; }
.reveal {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-control);
}
.reveal:hover { color: var(--text); background: transparent; filter: none; }
/* Les yeux faisaient 1.25rem et un trait de 2, contre 1rem et 1.75 pour toutes
   les autres icônes du produit : 25% plus grands et 14% plus gras, sans raison
   écrite nulle part. Ils passent par `.icon` comme le reste, et le basculement
   se fait sur un <span> - un vrai élément HTML, que `hidden` cache tout seul,
   ce qui retire la règle qu'il fallait écrire pour un SVG en ligne. */
.reveal > span { display: flex; }

/* Action secondaire : presente, jamais concurrente de l'action principale. */
.btn-quiet {
  color: var(--text);
  background: transparent;
  border-color: var(--border-control);
  font-weight: 500;
}

.btn-quiet:hover { background: var(--surface-2); filter: none; }

/* Action destructrice. Contrastes mesures plus haut dans ce fichier. */
.btn-danger {
  color: var(--danger-text);
  background: var(--danger);
}

/* Le pas irreversible se declare avant de se remplir : bordure seule tant que
   la page n'est pas la confirmation elle-meme. */
.btn-danger-quiet {
  color: var(--danger);
  background: transparent;
  border-color: var(--danger);
  font-weight: 500;
}

.btn-danger-quiet:hover { background: transparent; filter: brightness(1.15); }

button:hover,
.btn:hover { filter: brightness(1.08); }

button:disabled,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: none;
}

/* role="alert" sur ce conteneur : les erreurs sont annoncees, pas seulement
   colorees (FR-037 / SC-010). */
.alert {
  padding: 0.75rem 0.9rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  font-size: 0.9375rem;
}

.alert-error {
  border-color: var(--danger);
  color: var(--danger);
}

/* Le succès ne se dit pas en rouge de marque : « Adresse confirmée » arrivait
   dans un cadre rouge, la couleur de l'échec partout ailleurs en logiciel. Le
   pictogramme porte l'état en FORME autant qu'en couleur - une bordure
   rouge/ambre de 1px était la seule différence entre succès et erreur, donc
   invisible en daltonie rouge-vert. */
.alert-ok {
  border-color: var(--ok);
  color: var(--ok);
}

/* Ces deux états portaient leur marqueur en `content` CSS : U+2713 et U+26A0.
   Aucune des trois polices du produit ne porte ces caractères, ils tombaient
   donc sur une substitution système - et U+26A0 n'a pas de présentation texte
   par défaut sur les plateformes Apple, d'où un triangle jaune EMOJI au milieu
   d'un cadre rouge, le seul emoji du produit, sur l'écran le plus tendu qu'il
   ait. Ce sont maintenant les MÊMES dessins que Alert.tsx, posés par
   fragments/icons.html : voir design-tokens/icons.json.

   D'où le flex : le pictogramme est un frère du texte, pas un préfixe. Le
   décalage vertical reprend le `mt-0.5` du jumeau React - une icône de 16px
   centrée sur une ligne de 15px flotte d'un demi-pixel vers le haut. */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.alert > .icon {
  margin-top: 0.15rem;
}

/*
 * Connexion par un fournisseur externe. Aucun style propre : ce sont des actions
 * secondaires (.btn-quiet), séparées de l'action principale par le même filet que
 * les liens de bas de carte. Les marques des fournisseurs ne sont pas reproduites
 * — un logo Google exige de respecter sa charte, et un logo approximatif est pire
 * qu'un bouton sobre qui dit ce qu'il fait.
 */
.social {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.625rem;
}

/* Les deux régions se suivent : un seul filet entre elles, pas deux. */
.social + .links { border-top: 0; padding-top: 0; margin-top: 1.25rem; }

.links {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* Jeton dédié, ni --accent (3,71:1 en sombre) ni --accent-strong (3,04:1) :
   les deux rouges de la charte échouent comme texte de lien sur la carte. Le
   souligné évite en plus que le lien ne tienne qu'à la teinte. */
a { color: var(--link); text-decoration: underline; }

/*
 * RÉDUIRE le mouvement, pas tout retirer — même argument, mot pour mot, que
 * globals.css. Ce bloc était un `transition: none` général, c'est-à-dire tout
 * le contraire : il supprimait le fondu de 120 ms par lequel un bouton accuse
 * le survol et l'appui, le seul retour visuel qu'un contrôle a répondu. La
 * même personne, avec le même réglage, avait donc un bouton vivant dans l'app
 * et un bouton mort sur la page de connexion. Un seul produit.
 *
 * Couleur, opacité et filtre restent ; déplacement et animation sont coupés —
 * ce qui neutralise bien le `settle` de .alert, qui monte de 0,25 rem, et
 * c'est ce que son commentaire annonce plus bas.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, opacity, filter !important;
  }
}

/* ==========================================================================
   Espace compte — /account, /account/sessions, /account/delete
   --------------------------------------------------------------------------
   La carte de 26rem appartient aux inconnus : sur /login on n'a pas encore
   d'identite, et il n'y a rien a naviguer. /account en heritait par accident,
   ce qui coutait au visiteur son chemin de retour — la barre de l'app web
   pointe ici, et cette page ne pointait nulle part.

   L'espace connecte a donc sa propre coquille : une barre reprenant le
   vocabulaire de NavBar.tsx (meme marque a gauche, meme deconnexion a droite),
   puis des sections separees par des filets. Pas de cartes empilees : la carte
   est deja la grammaire des pages d'authentification, la reprendre ici
   brouillerait les deux.
   ========================================================================== */

body.app {
  display: block;
  place-items: initial;
  padding: 0;
  background: var(--surface);
}

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 40rem) {
  .wrap { padding-inline: 2rem; }
}

/* --- Barre --------------------------------------------------------------- */

.appbar {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

/* `flex-wrap` et non une seule ligne : six entrees ne tiennent pas sur 375px,
   et une barre qui deborde coupe la sortie. Memes valeurs que NavBar.tsx —
   py-3, gap-x-4, gap-y-1. */
.appbar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  padding-block: 0.75rem;
}

.appbar form { display: flex; }

.icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* --- En-tete de page ----------------------------------------------------- */

.page { padding-block: 2.5rem 4rem; }

.page h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem;
}

/* Qui tu es, en une ligne : adresse, etat de confirmation, anciennete. */
.identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 2.5rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.identity-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8125rem;
}

.badge-ok { border-color: var(--accent-strong); color: var(--text); }
.badge-todo { border-color: var(--danger); color: var(--danger); }

/* --- Sections ------------------------------------------------------------ */

.row {
  display: grid;
  gap: 0.75rem 3rem;
  padding-block: 2rem;
  border-top: 1px solid var(--border);
}

@media (min-width: 44rem) {
  .row {
    grid-template-columns: 13rem minmax(0, 1fr);
    padding-block: 2.5rem;
  }
}

.row h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
  letter-spacing: -0.01em;
}

.row-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  max-width: 32ch;
}

/* Les champs restent lisibles meme quand la colonne est large : un mot de
   passe ne se saisit pas dans un champ de 40rem. */
.control { max-width: var(--measure); }

.control .field:last-of-type { margin-bottom: 1rem; }

/* --- Liste des sessions -------------------------------------------------- */

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

.thing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--border);
}

.thing:first-child { border-top: 0; }

.thing-main { margin-right: auto; }

.thing-main strong { display: block; font-weight: 600; }

.thing .hint { margin-top: 0.125rem; }

/* --- Consequences (suppression) ------------------------------------------ */

.consequences {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  max-width: 60ch;
}

.consequences li {
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  position: relative;
}

.consequences li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.4rem;
  height: 1px;
  background: var(--text-muted);
}

/* Rangee d'actions : l'irreversible d'abord, la sortie a cote. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/*
 * « C'est irreversible » etait rendu dans le gris des notes secondaires : la
 * phrase qui porte toute la page en etait la plus discrete. Elle reprend le
 * corps de texte et son poids.
 */
.warning {
  margin: 0;
  font-weight: 600;
  max-width: 60ch;
}

/* --- Zone destructrice --------------------------------------------------- */

/* Separee par du vide, pas par une couleur d'alarme : la page ne crie pas,
   elle ecarte. La couleur arrive sur la page de confirmation, ou elle porte
   une decision reelle. */
.row-danger { margin-top: 1.5rem; }

.row-danger h2 { color: var(--danger); }

/* --- Retours ------------------------------------------------------------- */

/* Le seul moment anime de la page : la confirmation qui apparait apres un
   enregistrement. Neutralise par la garde prefers-reduced-motion plus haut. */
.alert { animation: settle var(--motion-entrance) var(--motion-emphasis-ease); }

@keyframes settle {
  from { opacity: 0; transform: translateY(-0.25rem); }
}

.control .alert:last-child { margin-bottom: 0; }


/* ========================================================================== *
 * Barre et pied de page — port de NavBar.tsx et Footer.tsx.
 *
 * Les valeurs viennent des utilitaires Tailwind de l'app web, resolues une
 * fois ici : px-4/sm:px-6/lg:px-8 pour le rail, py-3 pour la barre, py-8 pour
 * le pied, text-sm partout. Ce fichier n'a pas d'etape de build, donc la
 * correspondance se tient a la main — d'ou ce bloc unique plutot que des
 * valeurs semees dans la feuille.
 * ========================================================================== */

/* Empile carte + pied et pousse le pied en bas quand la page est courte.
   `body` de base est une grille centree : sans ceci, le pied se poserait au
   milieu de l'ecran a cote de la carte. */
body.shell {
  display: flex;
  flex-direction: column;
  place-items: initial;
  padding: 0;
}

body.shell > .card {
  margin: 2rem auto;
}

/* Pousse le pied en bas sans le coller a l'ecran : `auto` sur la marge du
   haut, et non `position: fixed`, pour qu'il suive le contenu s'il depasse. */
body.shell > .site-footer { margin-top: auto; }

/* --- Barre ---------------------------------------------------------------- */

.navbrand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
  transition: color var(--motion-fast) var(--motion-ease);
}

.navbrand:hover { color: var(--link); }

/* `padding-block: 0.5rem` : 36px de haut, comme le `py-2` de NavBar.tsx —
   28px passait WCAG 2.5.8 mais pas le pouce de quelqu'un debout dans un bar,
   et la cible d'a cote deconnecte. */
.navlink {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  padding: 0.5rem;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease);
}

.navlink:hover { color: var(--text); }

/* La page affichee : souligne accentue, comme l'entree courante de la barre
   web. Ce n'est pas un lien — on y est deja — donc pas de curseur main. */
.navlink-current {
  color: var(--text);
  cursor: default;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

/* La deconnexion revoque le jeton : irreversible. Elle se colore au survol
   plutot qu'au repos — la barre reste calme, mais la consequence se lit avant
   que le doigt s'engage. */
.navlink-danger:hover { color: var(--danger); }

/* Le pourboire : seule entree accentuee de la barre. --accent-strong et non
   --accent, parce qu'elle porte du texte lisible (voir l'en-tete du fichier). */
.navtip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-control);
  background: var(--accent-strong);
  color: var(--accent-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter var(--motion-fast) var(--motion-ease);
}

.navtip:hover { filter: brightness(1.1); }

/* --- Pied ----------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.site-footer .wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block: 2rem;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.footer-copy { margin: 0; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease);
}

.footer-legal a:hover { color: var(--text); }

.footer-social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Grises et desactives, pas des liens morts : aucun compte social ni app
   native n'existe. Un `<a href="#">` prendrait un arret clavier et promettrait
   une destination jamais tenue. */
.footer-social button[disabled],
.footer-stores button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-icon { padding: 0.5rem; }

.btn-sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
}

.footer-soon { font-size: 0.75rem; }

/* Sur telephone, chaque rangee du pied s'empile plutot que de se serrer :
   quatre liens legaux et deux badges ne tiennent pas sur 375px. */
@media (max-width: 40rem) {
  .footer-row { justify-content: flex-start; }
}