/* ==========================================================================
   identite.css — DIRECTION 1B, « INSTRUMENT »
   --------------------------------------------------------------------------
   POURQUOI UN FICHIER À PART

   systeme.css porte ce qui a été gagné à la mesure : 44 px de zone tactile,
   16 px dans les champs pour qu'iOS ne zoome pas, les contrastes remontés
   au-dessus du seuil, le plancher de 11 px sur le petit texte. Rien de tout
   cela n'est une question de goût, et rien ne doit disparaître en changeant
   d'identité.

   Ce fichier ne porte QUE l'identité : couleurs, formes, typographie. Il se
   charge après systeme.css, il a donc le dernier mot sur l'apparence — et on
   peut l'enlever d'une ligne pour revenir à l'ancienne peau sans toucher au
   reste.

   L'IDENTITÉ, EN TROIS PHRASES

   Noir pur, rien d'arrondi, et la couleur ne sert qu'à signaler. Les titres
   portent la hiérarchie par leur taille et leur graisse, pas par une teinte.
   Le tricolore marque l'app ; le rouge ne dit qu'une chose, « regarde ici ».

   CE QUI DISPARAÎT

   Le vert. Il était partout — action, succès, accent, décoration. Il est
   remplacé selon le RÔLE qu'il tenait à chaque endroit, jamais par une autre
   couleur unique : une action devient blanche, un signal devient rouge, un
   repère devient bleu. C'est le seul moyen de ne pas obtenir une app rouge
   là où elle était verte.
   ========================================================================== */

:root {
    /* --- Les surfaces ---------------------------------------------------
       Trois niveaux, très proches, séparés par un trait plutôt que par un
       écart de luminosité : c'est ce qui donne l'aspect « instrument ».   */
    --i-sol:        #000000;   /* le fond de la page */
    --i-surface:    #0A0A0A;   /* une carte posée dessus */
    --i-creux:      #050505;   /* un champ, un bloc en retrait */
    --i-trait:      #262626;   /* toutes les séparations */
    --i-trait-fort: #3D3D3D;   /* une bordure qu'on doit voir */

    /* --- L'encre --------------------------------------------------------- */
    --i-encre:      #FFFFFF;
    --i-encre-2:    #B3B3B3;   /* texte secondaire  — 9,4:1 sur le noir */
    --i-encre-3:    #8A8A8A;   /* labels, unités    — 5,7:1 sur le noir */

    /* --- Les deux signaux, et rien d'autre -------------------------------
       Le rouge dit « regarde ici » : un seuil dépassé, un client qui
       décroche, une action destructrice. Le bleu marque et relie : la
       séance suggérée, l'état de synchro, un écart mesuré.               */
    --i-rouge:      #E5322D;
    --i-rouge-sourd:#7F1D1B;
    --i-bleu:       #2563EB;   /* traits, marqueurs, fonds */
    --i-bleu-texte: #60A5FA;   /* quand le bleu doit se LIRE — 7,7:1 */
    --i-bleu-sourd: #1E3A8A;

    /* --- Le tricolore ---------------------------------------------------- */
    --i-tricolore: linear-gradient(to right,
        var(--i-bleu) 0 33.33%, #FFFFFF 33.33% 66.66%, var(--i-rouge) 66.66% 100%);

    /* --- Les fontes ------------------------------------------------------ */
    --i-titre: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --i-mono:  ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
}


/* --------------------------------------------------------------------------
   1. LE FOND, ET LA FIN DES ARRONDIS
   --------------------------------------------------------------------------
   L'ancienne peau avait trois rayons ; celle-ci n'en a aucun. Un angle droit
   n'est pas une absence de soin : c'est ce qui fait lire l'écran comme un
   cadran plutôt que comme une carte de réseau social.

   `!important` est nécessaire ici : les classes Tailwind arrivent avec la
   même spécificité et l'emportent sinon par l'ordre du fichier.
   -------------------------------------------------------------------------- */

html, body {
    background-color: var(--i-sol) !important;
    color: var(--i-encre);
}

[class*="rounded"] {
    border-radius: 0 !important;
}

/* L'exception, et elle est unique : ce qui doit se lire comme une pastille —
   un compteur de messages non lus, un avatar. Un carré s'y confondrait avec
   le reste de l'interface. */
.rounded-full.w-2, .rounded-full.w-3, .rounded-full.h-2, .rounded-full.h-3,
img.rounded-full, .rounded-full[id*="avatar"], .rounded-full[class*="badge"] {
    border-radius: 9999px !important;
}


/* --------------------------------------------------------------------------
   2. LES SURFACES
   --------------------------------------------------------------------------
   On reprend les classes que l'app emploie déjà et on les redirige. Aucun
   balisage à réécrire : c'est ce qui permet de changer toute la peau sans
   toucher une ligne de logique, donc sans risque de perdre une fonction.
   -------------------------------------------------------------------------- */

.bg-zinc-900, .bg-zinc-900\/80, .bg-zinc-900\/50, .bg-zinc-900\/60,
.bg-zinc-900\/40, .bg-zinc-800, .bg-black, .exo-block, #recovery-heatmap {
    background-color: var(--i-surface) !important;
    border-color: var(--i-trait) !important;
}

.bg-zinc-950, .bg-zinc-950\/80, .bg-zinc-950\/50, .bg-zinc-950\/90 {
    background-color: var(--i-creux) !important;
    border-color: var(--i-trait) !important;
}

.bg-zinc-950\/95, .bg-zinc-900\/95 {
    background-color: color-mix(in srgb, var(--i-sol) 92%, transparent) !important;
}

.border-zinc-700, .border-zinc-800, .border-zinc-800\/60, .border-zinc-600 {
    border-color: var(--i-trait) !important;
}

/* --- Le trait qui sépare, partout la même épaisseur ---------------------
   Chaque classe ne touche QUE son côté. Écrites ensemble, elles posaient
   `border-width: 1px` sur les quatre côtés : un `border-b` seul — une ligne
   de détail, un en-tête de tableau, un jour du calendrier — se retrouvait
   encadré au lieu d'être souligné. */
.border   { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-l { border-left-width: 1px; }
.border-r { border-right-width: 1px; }


/* --------------------------------------------------------------------------
   3. LE VERT DEVIENT CE QU'IL VOULAIT DIRE
   --------------------------------------------------------------------------
   Emerald tenait quatre rôles à la fois. On les sépare :

     action principale   → blanc plein, texte noir
     état positif        → blanc, sans fond
     repère / lien       → bleu
     alerte              → rouge (déjà rouge dans l'ancienne peau)

   L'ordre compte : la règle des surfaces pleines vient d'abord, les règles
   de texte ensuite, pour qu'un bouton plein garde son texte sombre.
   -------------------------------------------------------------------------- */

/* L'ORDRE DE CE BLOC EST LE SUJET.
   `.text-emerald-500` et `.bg-emerald-500/10` peuvent porter sur le MÊME
   élément — une pastille verte à texte vert. À spécificité égale, c'est la
   dernière règle écrite qui gagne. En posant d'abord les couleurs de texte,
   puis les surfaces pleines, un fond blanc impose son texte noir et la
   pastille reste lisible. Dans l'autre sens, on obtenait du blanc sur blanc :
   la remise « Jusqu'à -10 % » devenait un rectangle vide. */

/* Un texte vert marquait un état positif ou un repère : il devient blanc. */
.text-emerald-400, .text-emerald-500, .text-emerald-600 {
    color: var(--i-encre) !important;
}

.text-zinc-400 { color: var(--i-encre-2) !important; }
.text-zinc-500, .text-zinc-600 { color: var(--i-encre-3) !important; }

/* Une action principale : fond blanc, texte noir, majuscules. */
.bg-emerald-600, .bg-emerald-500, .bg-emerald-400,
.bg-emerald-600\/20, .bg-emerald-500\/10, .bg-emerald-500\/20,
.bg-emerald-600 *, .bg-emerald-500 *, .bg-emerald-400 *,
.bg-emerald-600\/20 *, .bg-emerald-500\/10 *, .bg-emerald-500\/20 * {
    color: #000000 !important;
}

.bg-emerald-600, .bg-emerald-500, .bg-emerald-400,
.bg-emerald-600\/20, .bg-emerald-500\/10, .bg-emerald-500\/20 {
    background-color: var(--i-encre) !important;
    border-color: var(--i-encre) !important;
}

button.bg-emerald-600:hover, button.bg-emerald-500:hover,
.bg-emerald-600:hover, .bg-emerald-500:hover {
    background-color: var(--i-encre-2) !important;
}

/* Sauf sur une teinte de fond très légère, où le vert servait de repère
   mesuré : là, c'est le bleu qui relie. */
.bg-emerald-500\/5 {
    background-color: color-mix(in srgb, var(--i-bleu) 10%, transparent) !important;
}

.border-emerald-500\/20, .border-emerald-500\/30, .border-emerald-500\/40,
.border-emerald-900\/40, .border-emerald-500 {
    border-color: var(--i-trait-fort) !important;
}

/* --- Le rouge garde son rôle, en plus net ------------------------------- */
.text-red-400, .text-red-500, .text-red-300 { color: var(--i-rouge) !important; }
.bg-red-500\/10, .bg-red-600\/10, .bg-red-500\/20, .bg-red-600\/20 {
    background-color: transparent !important;
    border-color: var(--i-rouge-sourd) !important;
}
.border-red-500\/20, .border-red-500\/30 { border-color: var(--i-rouge-sourd) !important; }

/* --- L'ambre du premium devient blanc : une seule couleur d'action ------ */
.text-amber-400, .text-amber-500, .text-yellow-500 { color: var(--i-encre) !important; }
.bg-amber-500\/10, .bg-yellow-500\/10 { background-color: transparent !important; }
.border-amber-500\/30, .border-amber-500\/20, .border-yellow-500\/20 {
    border-color: var(--i-trait-fort) !important;
}


/* --------------------------------------------------------------------------
   4. LA TYPOGRAPHIE PORTE LA HIÉRARCHIE
   --------------------------------------------------------------------------
   Les titres sont lourds, serrés, en capitales. Les labels sont en
   monospace largement espacé — c'est ce qui donne le ton « instrument de
   mesure », et c'est aussi ce qui distingue une étiquette d'une valeur sans
   avoir besoin d'une couleur.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--i-titre);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--i-encre);
}

/* Les libellés : petits, en capitales, très espacés, en monospace. On vise
   les classes que l'app emploie déjà pour ses étiquettes. */
.uppercase.tracking-widest,
.uppercase.tracking-\[0\.2em\],
.text-\[10px\].uppercase,
.text-\[11px\].uppercase {
    font-family: var(--i-mono);
    letter-spacing: 0.16em !important;
    color: var(--i-encre-3);
    font-weight: 400;
}

/* Les chiffres : c'est la matière première de l'app, ils doivent dominer.
   `tabular-nums` évite que la largeur saute quand une valeur change. */
.text-4xl, .text-3xl, .text-2xl {
    font-weight: 900;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

/* Un code, un chrono, une charge : chasse fixe, toujours. */
.font-mono, #timer-display, [id^="prev-"], [id^="target-"] {
    font-family: var(--i-mono) !important;
    font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   5. LE BANDEAU TRICOLORE
   --------------------------------------------------------------------------
   Trois bandes au-dessus de l'en-tête. C'est la seule décoration de toute
   l'interface, et elle porte l'identité à elle seule — d'où le droit de ne
   servir à rien d'autre.
   -------------------------------------------------------------------------- */

header {
    position: relative;
    background-color: var(--i-sol) !important;
    border-color: var(--i-trait) !important;
}

/* LE TRICOLORE PASSE SOUS L'EN-TÊTE, PAS AU-DESSUS.
   Collé au bord supérieur de l'écran, sous la barre d'état de l'iPhone, un
   filet de 3 px bleu-blanc-rouge pleine largeur ne se lit pas comme une
   signature : il se lit comme une barre de défilement ou une jauge de
   chargement. Posé sous l'en-tête, à la place de son trait gris, il redevient
   ce qu'il est — une règle qui sépare, aux couleurs de la marque. */
header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--i-tricolore);
}
header { border-bottom-color: transparent !important; }

/* Le nom de l'app : monospace espacé, pas un dégradé. */
header h1 {
    font-family: var(--i-mono) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--i-encre) !important;
    color: var(--i-encre) !important;
}

/* Les boutons d'en-tête : encadrés, minuscules, en chasse fixe.
   `#sync-status` n'en fait PLUS partie : ce n'est pas un bouton, et
   l'encadrer en faisait le seul élément cerclé de bleu de tout l'écran — donc
   le plus voyant — pour la seule chose sur laquelle on ne peut pas appuyer.
   Son traitement est plus bas, dans « L'ÉTAT DE SYNCHRO ». */
header button {
    font-family: var(--i-mono) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background-color: transparent !important;
    border: 1px solid var(--i-trait-fort) !important;
    color: var(--i-encre) !important;
}


/* --------------------------------------------------------------------------
   6. LA NAVIGATION
   --------------------------------------------------------------------------
   UNE ICÔNE ET UN MOT PAR ONGLET, ET TOUS LES ONGLETS DANS LA BARRE.

   L'ancienne barre affichait des mots seuls : les icônes avaient été
   supprimées pour laisser la place au texte quand dix onglets devaient tenir
   sur 320 px. On avait un pied de page, pas une barre d'onglets.

   Les icônes reviennent, et le mot reste. C'est ce couple qui fait
   reconnaître une barre d'onglets d'app installée — et c'est aussi ce qui
   permet aux libellés de rétrécir sans que la barre devienne illisible : dès
   que le mot se fait petit, c'est l'icône qui porte le sens. ajusterNav()
   (js/ui.js) choisit le corps à la mesure, selon le nombre d'onglets que ce
   compte affiche.

   Ce qui reste de l'identité : le mot en capitales, en mono, et l'onglet
   ouvert marqué par un trait blanc plutôt que par une couleur.
   -------------------------------------------------------------------------- */

nav {
    background-color: var(--i-sol) !important;
    border-color: var(--i-trait) !important;
    backdrop-filter: none;
}

/* `.text-white` DANS LE SÉLECTEUR, ET C'EST INDISPENSABLE.

   Les boutons de la barre portent tous la classe Tailwind `text-white`, et
   css/styles.css la redirige avec `h1, h2, h3, h4, .text-white { color: … 
   !important }` — spécificité (0,1,0). Un sélecteur de type pur comme
   `nav > div > button` ne pèse que (0,0,3) : il PERDAIT, et les cinq onglets
   restaient blancs. L'onglet ouvert ne se distinguait alors plus des autres,
   ce qui supprime le seul repère de la barre. En reprenant la classe, on
   monte à (0,1,3) et on repasse devant. */
nav > div > button,
nav > div > button.text-white {
    font-family: var(--i-mono);
    letter-spacing: 0.06em;
    border-top: 2px solid transparent;
    opacity: 1 !important;
    color: var(--i-encre-3) !important;
}

/* L'icône revient. 22 px : au-dessus, le mot est chassé de sa ligne sur un
   écran de 320 px ; en dessous, le trait de 2 px se referme sur lui-même. */
nav > div > button svg {
    display: block;
    width: 22px;
    height: 22px;
    margin-bottom: 0 !important;
    stroke-width: 1.75;
    /* `!important` est obligatoire ici, et pas par confort : css/styles.css
       porte `nav button svg { color: var(--color-text-main) !important }`.
       Entre deux déclarations `!important` de la même origine, c'est la
       spécificité qui tranche — mais face à un `!important`, une déclaration
       normale perd quelle que soit sa spécificité. Sans lui, TOUTES les icônes
       de la barre restaient blanches : l'onglet ouvert ne se distinguait plus
       des quatre autres, et le repère principal de la barre disparaissait.
       `currentColor` fait le reste, les icônes étant tracées en stroke. */
    color: inherit !important;
}

nav > div > button span {
    color: inherit !important;
    /* Le corps est POSÉ ICI et RÉGLÉ À LA MESURE par ajusterNav() (js/ui.js).
       Une valeur en dur ne peut pas être juste : six onglets sur un écran de
       390 px et dix sur un 320 px ne demandent pas la même chose. */
    font-size: var(--nav-corps, 10px) !important;
    letter-spacing: var(--nav-espacement, 0.02em) !important;
    text-transform: uppercase;
    white-space: nowrap;
    /* On annule l'ellipse posée par styles.css : ici, aucun mot ne se coupe. */
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
}

/* Pas de défilement : une barre du bas qui glisse sous le doigt donne
   l'impression d'une app cassée, et les onglets hors champ n'existent plus
   pour personne. La rangée tient toujours en entier. */
/* ⚠️  TOUT CE BLOC EST RÉSERVÉ À LA BARRE HORIZONTALE, DONC AU TÉLÉPHONE.
   Au-delà de 768 px, `md:flex-col` retourne la rangée en colonne latérale. En
   colonne, `flex: 1 0 auto` ne fait plus grandir les boutons en largeur mais
   EN HAUTEUR : mesuré à 874 px par bouton, neuf boutons, dans une colonne de
   898 px avec overflow:hidden et justify-center. Résultat : un seul onglet à
   l'écran, les huit autres poussés à des milliers de pixels et rognés. La
   barre de navigation avait disparu sur ordinateur.

   La gouttière vit sur <nav>, pas sur la rangée : la mesure de ajusterNav()
   compare scrollWidth et clientWidth DE LA RANGÉE. Un padding posé sur la
   rangée elle-même fausserait cette comparaison ; posé sur le parent, il
   réduit honnêtement la largeur disponible. Sans elle, « SÉANCE » commençait à
   1 px du bord de l'écran et « COACH » finissait à 1 px de l'autre. */
@media (max-width: 767px) {
    nav {
        padding-left: var(--nav-gouttiere, 12px);
        padding-right: var(--nav-gouttiere, 12px);
    }

    nav > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 0 !important;
        overflow: hidden;
    }
}

/* DES EMPLACEMENTS ÉGAUX, ET C'EST CE QUI CHANGE TOUT.

   `flex: 1 0 auto` donnait à chaque onglet la largeur de son mot : « DIÈTE »
   occupait moitié moins que « AGENDA », les icônes ne s'alignaient sur rien,
   et la rangée se lisait comme une phrase plutôt que comme une barre. Avec
   `flex: 1 1 0`, tous les emplacements font exactement la même largeur —
   c'est la géométrie de toutes les barres d'onglets natives, et c'est aussi
   ce qui rend la cible tactile prévisible : un cinquième d'écran chacun, du
   bord gauche au bord droit, sans trou entre deux. */
@media (max-width: 767px) {
    nav > div > button {
        /* La marge fait partie de l'échelle de ajusterNav() : elle se resserre
           avec le corps, ce qui rend un cran de plus disponible avant de
           devoir descendre d'une taille. Figée en dur, la moitié des crans
           devenaient des doublons et la barre passait de 9 px à 7 px d'un
           coup, en sautant le 8. */
        padding-left: var(--nav-marge, 4px) !important;
        padding-right: var(--nav-marge, 4px) !important;
        flex: 1 1 0;
        min-width: 0;
        gap: 3px !important;
    }
}

/* La colonne latérale : chaque onglet prend sa hauteur naturelle, et le
   libellé peut respirer — on n'est plus à un pixel près sur un écran de 1 440.

   L'ESPACEMENT EST ÉLASTIQUE, ET C'EST NÉCESSAIRE. `md:gap-10` valait 40 px
   en dur : dix onglets de 44 px plus neuf écarts de 40 réclament 800 px, ce
   qui déborde de toute fenêtre d'ordinateur portable un peu courte — mesuré à
   1 280 × 650, le premier et le dernier onglet sortaient de l'écran. Le
   `clamp` rend l'écart proportionnel à la hauteur disponible : 40 px sur un
   grand écran, 14 px sur une fenêtre basse. `overflow-y: auto` n'est qu'un
   filet pour les cas extrêmes — à moins de 500 px de haut, plus rien ne tient
   de toute façon, et une barre latérale qui défile à la souris n'a rien à voir
   avec une barre du bas qui bouge sous le doigt. */
@media (min-width: 768px) {
    nav > div > button {
        flex: 0 0 auto;
        padding: 0.35rem 0.5rem;
    }
    nav > div {
        gap: clamp(0.25rem, 2.2vh, 2.5rem) !important;
        overflow-y: auto;
    }
    nav > div > button span:last-child,
    nav button span:last-child {
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
    }
}

/* LE DERNIER RECOURS : LES ICÔNES SEULES.

   Posé par ajusterNav() (js/ui.js) quand même le plus petit cran ne suffit
   pas — dix onglets sur un très petit écran, ou une police système agrandie.
   Les deux autres réponses ont été écartées : couper les mots (« AGEND… » ne
   veut rien dire) et les laisser se chevaucher (« SÉANCEQUÊTESDATA… » sur un
   seul trait, ce qu'on a mesuré avant cette règle).

   Le libellé reste dans le balisage : il n'est pas supprimé, seulement masqué
   à l'œil. Les lecteurs d'écran continuent donc de l'annoncer. */
nav[data-sans-libelles] > div > button span:last-child {
    display: none !important;
}

/* L'onglet ouvert. `opacity-100` est la classe que switchTab pose déjà : on
   s'y accroche plutôt que d'inventer un état que le JS ne connaît pas.

   Trois choses changent à la fois — le trait du haut, l'encre, le fond — et
   c'est voulu : sur une barre étroite vue de biais, à bout de bras, une
   seule d'entre elles ne suffit pas à se repérer — et quand le compte
   affiche beaucoup d'onglets, les libellés rétrécissent, donc le repère ne
   peut pas reposer sur le texte seul. */
nav > div > button.opacity-100,
nav > div > button.text-white.opacity-100,
nav > div > button[aria-current="page"] {
    border-top-color: var(--i-encre);
    color: var(--i-encre) !important;
    background-color: var(--i-surface);
}

nav > div > button.opacity-100 span,
nav > div > button[aria-current="page"] span { color: var(--i-encre) !important; }

/* Le trait de l'icône s'épaissit avec l'état actif. C'est le détail qui fait
   « app » : l'icône ne change pas de forme, elle prend du poids. */
nav > div > button.opacity-100 svg,
nav > div > button[aria-current="page"] svg { stroke-width: 2.25; }

/* Le retour tactile. Une barre native s'enfonce sous le doigt ; sans ça, on
   ne sait pas si l'appui a été pris avant que l'écran ne change. */
nav > div > button:active {
    background-color: var(--i-surface);
    color: var(--i-encre) !important;
}


/* --------------------------------------------------------------------------
   7. LES BOUTONS
   -------------------------------------------------------------------------- */

/* On ne met PAS `text-transform: uppercase` sur tous les boutons pleine
   largeur : la propriété s'hérite, et un bouton qui porte un titre ET un
   sous-titre voyait les deux passer en capitales. Les boutons qui veulent
   des capitales le déclarent par leur classe `uppercase`. On se contente
   d'espacer un peu ceux qui les portent déjà. */
button.uppercase, .uppercase > button {
    letter-spacing: 0.04em;
}

/* Les champs : creux, cadre net, et le focus se voit. */
input, select, textarea {
    background-color: var(--i-creux) !important;
    border: 1px solid var(--i-trait) !important;
    color: var(--i-encre) !important;
    border-radius: 0 !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--i-encre) !important;
    outline: none;
}

input::placeholder, textarea::placeholder {
    color: var(--i-encre-3) !important;
    opacity: 1;
}

/* Le focus clavier reste visible, et il passe au blanc comme le reste. */
:focus-visible {
    outline: 2px solid var(--i-encre) !important;
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   8. CE QUI DISPARAÎT SANS BRUIT
   --------------------------------------------------------------------------
   Ombres et dégradés : l'ancienne peau s'en servait pour créer du relief.
   Ici le relief vient du trait. Les laisser donnerait un entre-deux.
   -------------------------------------------------------------------------- */

[class*="shadow"] { box-shadow: none !important; }

[class*="bg-gradient"] {
    background-image: none !important;
}

/* Sauf l'anneau du partenaire : ce drapeau ne nous appartient pas.
   MARQUE-TIERCE — voir index.html et test/coherence.test.js. */
.bg-gradient-to-r.from-blue-600 {
    background-image: linear-gradient(to right,
        var(--i-bleu), #FFFFFF, var(--i-rouge)) !important;
    padding: 2px !important;
}

/* ==========================================================================
   L'ÉTAT DE SYNCHRO
   --------------------------------------------------------------------------
   C'était une pastille cerclée de bleu, à côté de « Profil » et
   « Déconnexion ». Trois éléments encadrés dans l'en-tête, dont le plus
   voyant était le seul sur lequel on ne peut pas appuyer.

   Un état se signale, il ne se réclame pas : un carré de 5 px et un mot.
   L'état arrive par [data-etat] (js/ui.js le déduit du texte), pas par des
   classes que cinq fichiers se disputaient.
   ========================================================================== */
#sync-status {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-family: var(--i-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 10px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--i-encre-3) !important;
}
#sync-status::before {
    content: '';
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    background: currentColor;
}
#sync-status[data-etat="ok"]         { color: var(--i-encre-2) !important; }
#sync-status[data-etat="erreur"]     { color: var(--i-rouge) !important; }
#sync-status[data-etat="hors-ligne"] { color: var(--i-bleu-texte) !important; }

/* ==========================================================================
   L'ASTUCE DU PREMIER PASSAGE
   --------------------------------------------------------------------------
   Elle était en `bg-emerald-500/10` : une teinte à 10 % dans l'ancienne
   palette. La nouvelle identité ramène les fonds émeraude au blanc — la
   teinte discrète est devenue une dalle blanche opaque, en haut de chaque
   onglet, plus forte que le contenu qu'elle explique.

   Une aparté se signale par un filet, pas par un aplat.
   ========================================================================== */
.astuce {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0.125rem 0 0.125rem 0.875rem;
    border: 0;
    border-left: 2px solid var(--i-trait-fort);
    border-radius: 0;
    background: none;
}
.astuce p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--i-encre-2);
}
.astuce button {
    flex: 0 0 auto;
    padding: 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem 0;
    background: none;
    border: 0;
    color: var(--i-encre-3);
}
.astuce button:hover { color: var(--i-encre); }

/* ==========================================================================
   LA LIGNE DE SÉRIE
   --------------------------------------------------------------------------
   Les champs sont en gras et centrés, pour se lire d'un coup d'œil à bout de
   bras. Le texte de substitution en héritait : « Kg » et « Reps » s'affichaient
   en gras, au centre, comme des valeurs déjà saisies. Une colonne d'en-tête
   les remplace (voir js/workouts.js) ; ce qui reste dans le champ n'est plus
   qu'un rappel, et doit se lire comme tel.
   ========================================================================== */
.set-row input::placeholder {
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--i-encre-3);
    opacity: 1;                 /* Firefox l'atténue encore de son côté. */
}

/* ==========================================================================
   COMME UNE APP INSTALLÉE
   --------------------------------------------------------------------------
   Installée sur l'écran d'accueil, SmartLift n'a plus de barre d'adresse : on
   la prend pour une app — jusqu'au premier geste de navigateur. On pose le
   pouce à côté d'un bouton, la page zoome. On tire vers le bas en haut de la
   liste, la page se recharge. On fait glisser le doigt sur un titre, le texte
   se surligne en bleu. Chacun de ces gestes rappelle qu'on est dans un
   navigateur déguisé.

   Ce bloc les retire. Ce que le CSS ne peut pas atteindre — le pincement de
   Safari, le menu de l'appui long — est traité dans js/app-native.js.

   ⚠️  `pan-x pan-y` PLUTÔT QUE `manipulation`, ET LA DIFFÉRENCE COMPTE.
   `manipulation` retire le double-appui mais AUTORISE le pincement.
   `pan-x pan-y` ne laisse que le défilement : les deux zooms partent.

   ⚠️  CE QUE ÇA COÛTE. Supprimer le pincement retire un moyen
   d'accessibilité. C'est un choix assumé et compensé : le plancher de 11 px
   sur le petit texte et les 16 px dans les champs (css/systeme.css) restent
   en place, et le zoom SYSTÈME — triple-appui sur iOS, agrandissement
   d'Android — vit au-dessus de la page et continue de fonctionner. Pour
   revenir en arrière : cette déclaration, plus `user-scalable=no` dans le
   viewport d'index.html.
   ========================================================================== */
html, body {
    touch-action: pan-x pan-y;

    /* Plus de rebond élastique en fin de liste, plus de tirer-pour-recharger.
       Recharger au milieu d'une séance, c'est perdre ce qui n'est pas encore
       parti au serveur. */
    overscroll-behavior: none;
}

/* `touch-action` ne s'hérite pas : la restriction de l'ancêtre suffit à
   supprimer le geste, mais la valeur calculée d'un bouton resterait `auto` —
   et un test qui la lit conclurait à tort que rien n'a changé. On la pose donc
   aussi sur ce qu'on touche vraiment. */
button, a, label, summary, [role="button"], [onclick],
input, select, textarea {
    touch-action: manipulation;
}

/* --- Le texte ne se surligne plus par accident ---------------------------
   Un glissement du doigt sur un titre ouvrait une sélection bleue et ses
   poignées. Dans une app, ça n'arrive pas.

   On ne coupe la sélection que sur le CHÂSSIS — barres, boutons, libellés,
   en-têtes. Tout ce qu'on peut légitimement vouloir copier (un message reçu,
   un code d'invitation, un lien de partage) la garde, juste en dessous. */
nav, header, button, label, summary,
.tab-content h1, .tab-content h2, .tab-content h3, .tab-content h4,
#floating-timer {
    -webkit-user-select: none;
    user-select: none;
}

input, textarea, select, [contenteditable="true"],
code, pre, [data-copiable], [data-selectionnable] {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* L'appui long n'ouvre plus « Enregistrer l'image » sur les photos de repas
   ni « Copier le lien » sur les boutons. La contrepartie côté champs de
   saisie — où « Coller » doit rester — est gérée par js/app-native.js. */
nav, header, button, label, summary, img, a {
    -webkit-touch-callout: none;
}

/* Une image ne se traîne plus hors de la fenêtre en laissant un fantôme
   translucide au milieu de l'écran. */
img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* ==========================================================================
   LES JAUGES DU BILAN QUOTIDIEN
   --------------------------------------------------------------------------
   Fatigue, stress, faim, courbatures : quatre curseurs, tous en vert
   émeraude (`accent-emerald-500`) — la couleur de l'ancienne identité, et la
   seule chose verte qui restait dans l'app.

   Le dégradé bleu → blanc → rouge n'est pas qu'une couleur de marque : il dit
   quelque chose. À gauche on est frais, à droite on est cuit, et le blanc
   marque le milieu. `accent-color` ne s'applique plus dès qu'on reprend
   l'apparence du curseur, donc la classe Tailwind devient sans effet.
   ========================================================================== */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;                    /* la cible tactile, pas l'épaisseur du trait */
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 0;
    background: linear-gradient(to right,
        var(--i-bleu) 0%, #FFFFFF 50%, var(--i-rouge) 100%);
}
input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 0;
    background: linear-gradient(to right,
        var(--i-bleu) 0%, #FFFFFF 50%, var(--i-rouge) 100%);
}

/* Le curseur : un carré blanc cerclé de noir, pour rester lisible quelle que
   soit la couleur du rail sous lui. */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    background: var(--i-encre);
    border: 2px solid var(--i-sol);
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--i-trait-fort);
}
input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--i-encre);
    border: 2px solid var(--i-sol);
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--i-trait-fort);
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px var(--i-encre);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}