/*
 * Jetons de design Stringerz.
 *
 * Seul fichier du dépôt où une couleur, une taille ou une police a le droit
 * d'être écrite en dur (CLAUDE.md, règle 6). Toute valeur visuelle utilisée
 * ailleurs passe par une de ces variables. Référence : docs/design-system.md.
 *
 * Passe interface du 02/09/2026 (Vincent) : Stringerz reprend exactement la
 * palette d'encre de LCS Shop (même société, référence de Vincent) — encre
 * noir-vert #15201C pour le texte, papier chaud, filets, bleu LCS pour
 * l'action, boutons petits et propres (rayon 9) comme l'admin LCS.
 * Typographie unifiée sur Inter. Le marine #021122 ne sert plus qu'au logo,
 * au geste rond et à la carte de mise en avant ; l'accent de marque reste
 * réservé au logo et aux accents sur fond marine (décisions 003, 004).
 *
 * Accent de marque du 07/09/2026 (décision 009, en attente de validation des
 * associés) : la menthe #3DF5B0 remplace l'ancien vert fluo, jugé trop
 * proche d'un concurrent. Trois jetons : --accent-marque (aplats, logo,
 * corde), --accent-marque-encre (texte et liens sur fond clair, 5,2 : 1 sur
 * papier) et --accent-marque-voile (fonds de badge). L'accent brut n'est
 * jamais utilisé pour du texte sur fond clair (1,3 : 1).
 *
 * Langage visuel « vraie app » du 09/09/2026 (issue #140, maquettes validées
 * par Vincent dans docs/maquettes/2026-09-09/) : fond crème plutôt que
 * blanc cassé pour que les cartes blanches ressortent par contraste, ombres
 * quasi nulles (esprit Fresha/Doctolib/shadcn, pas d'élévation Material
 * 2015). Reprend les mêmes valeurs que les maquettes de référence.
 */

:root {
  /* Couleurs — rôles, pas teintes (valeurs LCS Shop, assets/lcs-styles.css). */
  --fond: #f9f7f2;
  --surface: #ffffff;
  --surface-haute: #021122;
  --surface-douce: #eef1f7;
  --trait: #e3e1d7;
  --texte: #15201c;
  /* Assombri de #6b7468 (audit accessibilité du 25/09) : 4,5:1 minimum
     (WCAG AA) sur blanc, crème, voiles menthe/ok et fond attention. */
  --texte-secondaire: #61695e;
  --texte-sur-sombre: #8fa2b8;
  --action: #15201c; /* encre : liens, focus, onglet actif, pastille « prête » — .bouton--principal (boutons.css, y compris sa redéfinition dans la coquille admin, lcs.css) est en menthe depuis l'issue n°249, voir --accent-marque ; --action reste l'aplat plein d'autres composants non concernés (connexion, fil de messages) */
  --action-pressee: #000000; /* état pressé des mêmes usages */
  --action-douce: #f1f2ee; /* fond des pastilles de créneau, ligne active */
  --sur-action: #ffffff;
  --accent-marque: #3df5b0; /* menthe : logo, corde, aplats sur marine (décision 009) */
  --accent-marque-encre: #0a7551; /* menthe encre : texte et liens sur fond clair */
  --accent-marque-voile: #dcfbef; /* menthe voile : fond de badge sur fond clair */
  --vert-vif: #0a7551; /* accent assombri pour les glyphes sur blanc (étoiles) — alias historique de --accent-marque-encre */
  --voile-sombre: rgba(2, 17, 34, 0.92); /* voile plein écran (figure agrandie, document des associés) */
  --halo-marque: rgba(61, 245, 176, 0.35); /* halo du rond au lancement (splash.css) */
  --halo-marque-fin: rgba(61, 245, 176, 0);

  /* Vitrine publique, héros « place de marché » (07/09) : titres en
     Bricolage Grotesque 800 (la vitrine est le seul écran où la typo de
     marque s'exprime ; l'app reste en Inter), ombres portées sur marine et
     filets clairs sur fond sombre. */
  --police-vitrine-titres: 'Bricolage Grotesque', 'Inter', sans-serif;
  --ombre-vitrine: 0 20px 50px rgba(0, 0, 0, 0.35);
  --ombre-vitrine-forte: 0 28px 60px rgba(0, 0, 0, 0.45);
  --filet-sur-sombre: rgba(255, 255, 255, 0.22);
  /* Connexion (issue #118) : rond du monogramme et carte centrée — encore
     utilisé par mot-de-passe-oublie.tsx, mot-de-passe-nouveau.tsx et
     inscription-role.tsx, pas par /connexion ni /inscription depuis la
     maquette Voissa (issue n°190) ci-dessous. */
  --taille-rond-connexion: 96px;
  --largeur-carte-connexion: 420px;
  /* Connexion / inscription, maquette Voissa retenue par Vincent le 12/09
     (issue n°190, docs/maquettes/2026-09-12/connexion.html et
     inscription.html) : fond des champs gris sans bordure (`.champ-g`),
     seule valeur en dur de la maquette hors palette existante. */
  --fond-champ-doux: #efede6;
  /* Mon compte (issue n°121) : colonne de réglages, une seule largeur de carte. */
  --largeur-colonne-reglages: 760px;
  /* Carte cordeur place de marché (issue n°124). */
  --taille-avatar-cordeur: 52px;
  /* Connexion avec Google (issue n°139) : couleurs exactes du logo « G »
     imposées par la charte de marque Google, jamais un choix de style
     Stringerz — voir src/web/google-logo.tsx, seule référence. */
  --google-bleu: #4285f4;
  --google-vert: #34a853;
  --google-jaune: #fbbc05;
  --google-rouge: #ea4335;
  /* --ok et --attention-texte : 4,5:1 minimum (WCAG AA) sur blanc et sur
     leur fond d'état (audit accessibilité du 25/09 ; --ok valait #1f8a5b).
     --attention reste l'orange d'origine pour les aplats, points et
     filets (3:1 suffit hors texte) ; tout texte d'attention passe par
     --attention-texte. */
  --ok: #1c7d52;
  --ok-fond: #e6f4ec;
  --attention: #c9821b;
  --attention-fond: #f3e3c9;
  --attention-texte: #885f13;
  --erreur: #b23a3a;
  --blanc: #ffffff;

  /* Coquille LCS (lcs.css) : gris du menu et des tableaux, fonds d'état. */
  --lcs-gris-menu: #5c6459;
  --lcs-gris-groupe: #6c7061; /* assombri de #a8ac9f (2,3:1) pour AA, audit accessibilité du 25/09 */
  --lcs-survol: #f6f6f3;
  --lcs-actif: #f1f2ee;
  --lcs-tete-tableau: #fbfbf8;
  --lcs-attention-fond: #fff7ed;
  --lcs-attention-texte: var(--attention-texte);
  --lcs-erreur-fond: #fceeea;
  --lcs-ok-fond: #f0f7f3;
  --lcs-ok-trait: #bfdecb;
  --lcs-largeur-menu: 248px;
  /* Quasi nulle (issue #140) : un simple trait de séparation, jamais une
     élévation façon Material — la variable garde son nom pour ne pas
     réécrire tous les appelants. */
  --ombre-carte: 0 1px 2px rgba(21, 32, 28, 0.08);

  /* Typographie — une seule famille pour le texte et les titres. */
  --police-titres: 'Inter', sans-serif;
  --police-texte: 'Inter', sans-serif;
  /* Chiffres, dates, montants : Inter en chiffres tabulaires (07/09, retour
     Vincent : la chasse fixe façon code était illisible). */
  --police-nombre: 'Inter', system-ui, sans-serif;
  /* URL affichées en toutes lettres (/admin/outils, issue n°201) : chasse
     fixe système, jamais téléchargée, pour distinguer une adresse à copier
     d'un texte courant — aucune autre police en dur (CLAUDE.md, règle 6). */
  --police-mono: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  --graisse-regular: 400;
  --graisse-medium: 500;
  --graisse-semibold: 600;
  --graisse-titre: 600;
  --taille-titre-1: 22px;
  --taille-titre-2: 18px;
  --taille-titre-3: 16px;
  --taille-titre-4: 15px;
  --taille-texte-1: 15px;
  --taille-texte-2: 13.5px;
  --taille-texte-3: 12px;
  --taille-texte-4: 11px;
  /* Lecture longue (article de blog, sur bureau) : 17px pour une colonne
     d'environ 70 caractères — le corps d'application à 15px reste réservé aux
     écrans d'usage (docs/design-system.md, « Lecture longue »). */
  --taille-lecture: 17px;
  /* Palier « affichage » (passe typographie du 23/09, issue n°243) : titres
     héros en Bricolage Grotesque (grammaire bureau, vitrine), gros nombres
     (prix, statistiques, tension) et initiales d'avatar — tout ce qui
     dépasse --taille-titre-1 (22/26px). Repris de l'existant, arrondi au
     palier le plus proche (307 valeurs en dur mesurées, homogénéisées sur
     ces 5 niveaux plutôt qu'une conservation au pixel). Pas de variante
     bureau : les fichiers appelants portent déjà leur propre `@media`. */
  --taille-affichage-1: 26px;
  --taille-affichage-2: 30px;
  --taille-affichage-3: 34px;
  --taille-affichage-4: 40px;
  --taille-affichage-5: 44px;
  --interligne: 1.45;
  --interlettrage-titre: -0.01em;
  --interlettrage-etiquette: 0.05em;

  /* Formes et espacements — grille de 4 px, densité mobile. */
  --rayon: 12px;
  --rayon-bouton: 9px;
  --rayon-bouton-compact: 7px;
  --rayon-etiquette: 6px;
  --rayon-pastille: 999px;
  --marge-ecran: 16px;
  --espacement-section: 16px;
  --grille-base: 4px;
  --bouton-padding-vertical: 9px;
  --bouton-padding-horizontal: 14px;
  --bouton-padding-horizontal-bureau: 14px;
  --bouton-padding-vertical-bureau: 9px;
  --carte-padding-vertical: 12px;
  --carte-padding-horizontal: 14px;
  --cible-tactile-min: 44px;
  --hauteur-barre-haute: 56px;
  /* .topbar (lcs.css) mobile : avatar 29px + padding vertical 10px×2 + trait
     — hauteur mesurée sur la coquille admin/relais, pour poser la recherche
     de liste collante juste dessous en mobile (issue #195). */
  --hauteur-barre-admin: 50px;
  --taille-avatar: 40px;
  --taille-geste: 84px;

  --epaisseur-trait: 1px;
  --epaisseur-focus: 2px;
  --espacement-petit: 8px;
  --espacement-champ-vertical: 9px;
  --espacement-champ-horizontal: 12px;

  /* Gabarit responsive (issue #25). Les seuils 600 et 900 sont dupliqués en
     dur dans les @media (une variable CSS n'y est pas utilisable). */
  --palier-tablette: 600px;
  --palier-bureau: 900px;
  --largeur-colonne-tablette: 640px;
  --largeur-contenu-bureau: 960px;
  --largeur-formulaire: 520px;
  --largeur-laterale: 240px;
  --largeur-lecture: 720px;
  --contenu-padding-bureau: 32px;

  /* Navigation basse mobile (issue #58). */
  --hauteur-nav-basse: 60px;
  --taille-icone-nav-basse: 22px;
  /* Bouton central de la barre du bas (Corder / Scanner) : décroché de la barre,
     liseré blanc, fin anneau gris et ombre douce — validé Vincent 12/09 (variante C). */
  --decalage-bouton-commander: 26px;
  --liseret-bouton-commander: 4px;

  /* Cartes « Mes raquettes » compactes (issue #153). */
  --taille-icone-carte-raquette: 34px;

  /* État vide (composant <EtatVide>, issue n°246) : médaillon d'icône du
     système au-dessus du titre, menthe voile. */
  --taille-badge-etat-vide: 64px;
  --taille-icone-etat-vide: 28px;

  /* Suivi de commande mobile (issue n°178, maquette
     docs/maquettes/2026-09-09/suivi-commande.html) : bouton de retour rond
     de l'entête. */
  --taille-bouton-retour: 34px;
  --taille-icone-retour: 16px;

  /* Moments (issue n°140, règle 7) : confirmation de réservation et
     célébration à la récupération — docs/maquettes/2026-09-09/confirmation.html
     et celebration-notation.html. */
  --taille-motif-moment: 130px;
  --taille-icone-moment: 17px;
  --taille-avatar-celebration: 88px;
  --taille-badge-celebration: 28px;
  --epaisseur-accent-avatar: 4px;
  --epaisseur-accent-badge: 3px;

  /* Vitrine publique (issue #58). */
  --taille-visuel-heros: 140px;
  --taille-logo-monogramme: 56px;

  /* Cartes Leaflet (issue #61). */
  --hauteur-carte: 320px;
  --hauteur-carte-tablette: 480px;

  /* Aperçu HTML d'un modèle d'e-mail (Admin → E-mails, issue n°134). */
  --hauteur-apercu-email: 640px;

  /* Carte plein écran de /commander (issue #84) : bureau seulement — sur
     mobile, .carte-plein-ecran passe en position fixe et occupe tout
     l'espace sous la barre du haut (voir ecrans-commande.css). */
  --hauteur-carte-plein-ecran: calc(100vh - 280px);
  /* Carte collante au-dessus de la liste (issue #95, bureau uniquement,
     façon Booking) : voir lcs.css. */
  --hauteur-carte-recherche: 360px;
  --taille-bouton-rond: 48px;
  --taille-marqueur-carte: 30px;
  --taille-marqueur-carte-actif: 36px;
  --taille-marqueur-groupe: 34px;

  /* Fiche cordeur : photo pleine largeur + avatar flottant (issue n°163,
     maquette docs/maquettes/2026-09-09/fiche-cordeur.html). */
  --taille-avatar-fiche-cordeur: 72px;
  --chevauchement-avatar-fiche-cordeur: 32px;
  /* Bouton de réservation collant (issue n°176, même maquette) : hauteur
     réservée en bas du calendrier pour que le dernier créneau ne se cache
     pas sous la barre collante. */
  --hauteur-collant-reserver: 96px;

  /* Commande côté cordeur : décision + bon de cordage + gains (issue n°164,
     maquette docs/maquettes/2026-09-11/commande-cordeur.html). */
  --graisse-forte: 700;
  --graisse-noire: 800;
  --taille-avatar-decision: 48px;
  --taille-cordage-tension: 40px;
  --taille-gains-net: 32px;
  --largeur-carte-gains: 300px;
  /* Bascule sur une colonne sous ce seuil, distinct de --palier-tablette
     (600px) : dupliqué en dur dans le @media (une variable CSS n'y est pas
     utilisable, voir plus haut). */
  --palier-commande-cordeur: 760px;
  /* Grammaire bureau joueur/cordeur (issue n°166, maquettes validées du
     11/09/2026, docs/maquettes/2026-09-11/bureau/) : titres en Bricolage
     Grotesque (la police auto-hébergée de la vitrine, désormais aussi
     chargée sur les écrans connectés — voir fonts.mjs), quatre dégradés
     d'avatar (fond + couleur de texte assortie) et trois teintes de
     placeholder clair pour les photos de cordeur sans couverture, repris
     tels quels de bureau.css. */
  --police-titres-site: 'Bricolage Grotesque', var(--police-titres);
  --avatar-1-fond: linear-gradient(135deg, #cfe3d8, #9cc4b0);
  --avatar-1-texte: #1e4d3a;
  --avatar-2-fond: linear-gradient(135deg, #f0c9a8, #d9a47e);
  --avatar-2-texte: #5a3a22;
  --avatar-3-fond: linear-gradient(135deg, #d5d9f0, #a2a8d6);
  --avatar-3-texte: #2f3567;
  --avatar-4-fond: linear-gradient(135deg, #e6dccd, #c9b7a0);
  --avatar-4-texte: #5a4a33;
  --placeholder-clair-1: #dbe4ea;
  --placeholder-clair-2: #e6dccd;
  --placeholder-clair-3: #d8e2d6;
  /* Trait au survol d'une carte cordeur, légèrement plus soutenu que --trait. */
  --trait-cordeur-survol: #cfcdc3;
  /* Ombre de la carte flottante du héros — seule carte bureau à porter une
     élévation (le reste de la grammaire bureau garde l'ombre nulle de la
     décision d'issue n°140). */
  --ombre-flottante: 0 18px 44px rgba(2, 17, 34, 0.18);
  --ombre-bouton-central: 0 0 0 1px var(--trait), 0 6px 14px rgba(2, 17, 34, 0.14);
  /* Fond translucide de l'entête de site collante — mêmes composantes que
     --fond (#f9f7f2), à tenir synchronisées si --fond change. */
  --fond-translucide: rgba(249, 247, 242, 0.88);

  /* Médiathèque admin mobile (issue n°186, refus de recette du 12/09 :
     cibles tactiles et dossiers utilisables au doigt). Bureau inchangé
     (--rayon-etiquette, tuiles KPI existantes). */
  --hauteur-zone-depot: 96px;
  --rayon-vignette-galerie-mobile: 10px;

  /* Infobulles d'aide « i » (issue n°198, retour Vincent du 13/09). */
  --taille-icone-aide-bulle: 20px;
  --taille-cible-aide-bulle: 40px;

  /* Mascotte Ball-E (issue n°214, tunnel à écrans) : jamais affichée
     au-delà de 180px (CHANGELOG 1.3.46) — les PNG sources restent en rendu
     3D, seule exception au design system plat (décision de Vincent). */
  --taille-mascotte-ball-e: 120px;
}

/* Bureau : titres et espacements élargis. */
@media (min-width: 900px) {
  :root {
    --taille-titre-1: 26px;
    --taille-titre-2: 20px;
    --taille-titre-3: 17px;
    --taille-titre-4: 16px;
    --marge-ecran: 24px;
    --espacement-section: 24px;
    --carte-padding-vertical: 16px;
    --carte-padding-horizontal: 18px;
  }
}

/* Impression : encre sur blanc, sans accent (décision 003). */
@media print {
  :root {
    --fond: #ffffff;
    --surface: #ffffff;
    --surface-haute: #ffffff;
    --surface-douce: #ffffff;
    --trait: #d9d6c9;
    --texte: #15201c;
    --texte-secondaire: #61695e;
    --action: #15201c;
    --action-pressee: #15201c;
    --sur-action: #ffffff;
    --ombre-carte: none;
  }
}