/* ============================================================
   NOTES BY OPTIMIZERLABS — Charte graphique
   ------------------------------------------------------------
   Reprend l'architecture d'Atelyo (variables, conventions de
   composants, polices locales) mais pas ses couleurs : deux
   applications ouvertes côte à côte doivent se distinguer, et le
   vert « cuisine et anti-gaspi » ne dit rien d'un carnet d'atelier.

   Bleu encre, comme un carnet.

   Contraintes qui priment sur l'esthétique (CADRAGE.md §11) :
   éclairage violent, écran sale ou vu à travers une visière,
   doigts gantés, mains froides. Les contrastes ci-dessous sont
   calculés, pas choisis à l'œil, et les cibles tactiles sont
   nettement plus grandes que dans Atelyo — où l'on clique à la
   souris, assis.

   Thème clair uniquement, et c'est délibéré : un atelier est un
   environnement très éclairé, un thème sombre y serait moins
   lisible, pas plus. Décision à revoir si l'usage en chambre
   froide dit le contraire.

   Noms de variables en français, comme le reste du projet.
   ============================================================ */

/* ── Polices locales ─────────────────────────────────────────
   Servies depuis le projet, jamais depuis un CDN : une PWA qui
   doit démarrer hors ligne ne peut pas dépendre d'un tiers. */
@font-face {
  font-family: 'Ubuntu';
  src: url("/static/fonts/ubuntu/ubuntu-400.0e8eefb4549a.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url("/static/fonts/ubuntu/ubuntu-500.0e7e5f9d3a8e.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url("/static/fonts/ubuntu/ubuntu-700.ab1fc8621287.woff2") format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/inter/inter-400.73aaa95eab31.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/inter/inter-500.96948ea7ac03.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/inter/inter-600.0bf7eadca131.woff2") format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/inter/inter-700.d41d8cd98f00.woff2") format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ── Couleurs de marque — bleu encre ──────────────────────
     Contrastes sur blanc, calculés (WCAG) :
       --encre         8,3:1   texte et boutons pleins
       --encre-sombre 11,6:1   survol, titres
       --encre-claire  4,0:1   décor uniquement, jamais du texte */
  --encre:              #1d4e89;
  --encre-sombre:       #143a66;
  --encre-claire:       #3e7cb1;
  --encre-tres-claire:  #e3edf6;
  --encre-pale:         #f2f7fb;

  /* ── Signature de l'éditeur ────────────────────────────────
     Les deux moitiés du nom OptimizerLabs portent chacune leur
     couleur, partout où le nom apparaît — ici, dans Atelyo, sur
     le site. C'est la signature de l'éditeur, pas la couleur de
     cette application-ci : Notes reste bleu encre, et c'est ce
     qui permet aux deux applications de se distinguer côte à
     côte (CADRAGE.md §11).

     Contrastes sur blanc, calculés :
       --editeur-optimizer  4,4:1
       --editeur-labs       2,2:1
     Les deux passent sous le seuil de 4,5:1 du texte courant.
     C'est admis pour un nom propre, qu'on reconnaît à sa forme
     plutôt qu'on ne le déchiffre, et que WCAG dispense
     explicitement à ce titre. Ces deux verts ne doivent donc
     jamais servir à autre chose qu'écrire ce nom. */
  --editeur-optimizer:  #458651;
  --editeur-labs:       #97b879;

  /* ── Neutres ───────────────────────────────────────────── */
  --blanc:              #ffffff;
  --fond:               #f7f8fa;
  --surface:            #ffffff;
  --bordure:            #d8dee6;
  --bordure-claire:     #e8ecf1;

  /* ── Textes ────────────────────────────────────────────────
     Volontairement plus sombres que dans Atelyo. Les gris moyens
     d'un thème de bureau (3:1) disparaissent sous un éclairage
     d'atelier ou derrière un écran gras.
       --texte             17,8:1
       --texte-secondaire   9,6:1
       --texte-attenue      5,8:1   (Atelyo : ~3:1)
       --texte-desactive    3,5:1   réservé au réellement inactif */
  --texte:              #14181f;
  --texte-secondaire:   #3c4655;
  --texte-attenue:      #5b6675;
  --texte-desactive:    #8a95a5;

  /* ── États ─────────────────────────────────────────────────
     Sémantiques, pas de marque. Ce sont les couleurs de
     l'indicateur de synchronisation, qui est l'information la
     plus importante de l'application (principe 6). */
  --succes:             #15803d;
  --succes-fond:        #e8f5ec;
  --attention:          #b45309;
  --attention-fond:     #fdf3e3;
  --danger:             #b91c1c;
  --danger-fond:        #fdecea;
  --info:               var(--encre);
  --info-fond:          var(--encre-tres-claire);

  /* ── Typographie ───────────────────────────────────────── */
  --police-titre:       'Ubuntu', sans-serif;
  --police-corps:       'Inter', sans-serif;
  --taille-xs:          0.8125rem;  /* 13px — plancher, jamais moins */
  --taille-sm:          0.9375rem;  /* 15px */
  --taille-base:        1.0625rem;  /* 17px — corps, plus grand qu'Atelyo */
  --taille-lg:          1.25rem;
  --taille-xl:          1.5rem;
  --taille-2xl:         1.875rem;
  --taille-3xl:         2.25rem;

  /* ── Espacements ───────────────────────────────────────── */
  --espace-1:  0.25rem;
  --espace-2:  0.5rem;
  --espace-3:  0.75rem;
  --espace-4:  1rem;
  --espace-5:  1.25rem;
  --espace-6:  1.5rem;
  --espace-8:  2rem;
  --espace-10: 2.5rem;
  --espace-12: 3rem;

  /* ── Rayons et ombres ──────────────────────────────────── */
  --rayon-sm:    4px;
  --rayon-md:    8px;
  --rayon-lg:    12px;
  --rayon-plein: 9999px;

  --ombre-xs: 0 1px 2px rgba(20, 24, 31, 0.06);
  --ombre-sm: 0 1px 4px rgba(20, 24, 31, 0.10);
  --ombre-md: 0 4px 12px rgba(20, 24, 31, 0.12);
  --ombre-lg: 0 8px 24px rgba(20, 24, 31, 0.16);

  /* ── Cibles tactiles ───────────────────────────────────────
     48px : minimum pour un doigt ganté sur un écran de 5 pouces,
     debout. Atelyo descend à 36px parce qu'on y clique à la
     souris. Ce n'est pas la même application. */
  --cible-tactile:      48px;
  --hauteur-barre:      56px;
  --hauteur-barre-basse: 64px;

  --transition-rapide: 150ms ease;
  --transition-base:   250ms ease;
}

/* ── Reset et base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police-corps);
  font-size: var(--taille-base);
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

/* ── Tout bouton est une cible tactile ─────────────────────
   Défaut trouvé à l'usage, sur la tablette : poser le pouce sur
   le texte d'un bouton **sélectionne ce texte** au lieu de
   déclencher le bouton. Le doigt reste sur place plus longtemps
   qu'une souris ne clique, et Android y voit un début de
   sélection. Le symptôme est déroutant — le bouton semble mort,
   et un curseur de sélection apparaît à la place.

   Invisible au développement : à la souris, aucune de ces quatre
   règles ne change quoi que ce soit. C'est le même angle mort que
   `touch-action` sur la toile du croquis, dont l'absence ne se
   voyait qu'au doigt.

   `touch-action: manipulation` fait plus que du confort : il
   supprime l'attente du second appui — le navigateur n'a plus à
   guetter un double-tapotement pour zoomer — et le bouton répond
   immédiatement au lieu d'après trois cents millisecondes. Sur
   une marque de tâche qu'on appuie ligne après ligne, l'écart se
   sent. */
button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(29, 78, 137, 0.18);
}

/* Le focus doit rester très visible : sur un écran sale, la
   discrétion est un défaut. */
:focus-visible {
  outline: 3px solid var(--encre-claire);
  outline-offset: 2px;
}

/* ── Typographie ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 700;
  color: var(--texte);
  line-height: 1.25;
  margin: 0 0 var(--espace-4);
}
h1 { font-size: var(--taille-2xl); }
h2 { font-size: var(--taille-xl); }
h3 { font-size: var(--taille-lg); }

a { color: var(--encre); }
a:hover { color: var(--encre-sombre); }

/* ── Marque ────────────────────────────────────────────────
   Lockup en **deux lignes** : le nom du produit, la signature de
   l'éditeur dessous. C'est le gabarit des autres produits de
   l'atelier (Repère), et ce n'est pas qu'une question de
   cohérence de marque.

   La version horizontale précédente — « Notes  by OptimizerLabs »
   sur une ligne — était trop large pour la barre haute d'un
   téléphone, où elle dispute la place à l'indicateur de
   synchronisation. La charte réglait ça en cachant la signature
   sous 640 px : le nom de l'éditeur disparaissait donc de
   l'appareil sur lequel l'application sert le plus.

   Empilé, l'ensemble tient dans la largeur du seul mot « Notes »
   et dans les 56 px de la barre (≈24 px + ≈15 px), sur toutes les
   tailles d'écran. La règle qui le masquait a été retirée : la
   contrainte de place n'existe plus, la parade non plus. */
.marque {
  font-family: var(--police-titre);
  font-weight: 700;
  color: var(--encre);
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
.marque-nom { font-size: var(--taille-xl); line-height: 1.1; }
.marque-editeur {
  font-family: var(--police-corps);
  font-size: var(--taille-xs);
  font-weight: 500;
  line-height: 1.15;
  color: var(--texte-attenue);
  letter-spacing: 0;
}

/* Le nom de l'éditeur se colorie en deux moitiés, ce qui impose de
   le couper en deux éléments dans le balisage — une couleur ne
   s'applique pas à une portion de nœud texte. Les deux `span` se
   touchent sans espace : « OptimizerLabs » est un seul mot. */
.mot-optimizer { color: var(--editeur-optimizer); }
.mot-labs      { color: var(--editeur-labs); }

/* ── Coquille applicative ────────────────────────────────── */
.appli { display: flex; flex-direction: column; min-height: 100vh; }

.barre-haute {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--hauteur-barre);
  display: flex;
  align-items: center;
  gap: var(--espace-4);
  padding: 0 var(--espace-4);
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  box-shadow: var(--ombre-xs);
}

.barre-haute .pousse { margin-left: auto; }

.contenu {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--espace-6) var(--espace-4);
}

/* ── Alpine ────────────────────────────────────────────────
   `x-cloak` est retiré du DOM par Alpine une fois qu'il a pris
   la main. Sans cette règle, tout ce qu'un `x-show` doit cacher
   apparaît en clair le temps du chargement — ici, la question du
   mode de stockage clignoterait par-dessus le formulaire de
   connexion à chaque affichage. */
[x-cloak] { display: none !important; }

/* ── Question du mode de stockage ──────────────────────────
   Posée une seule fois par navigateur, avant toute descente de
   données (CADRAGE.md §8). Deux boutons de même poids, aucune
   valeur pré-sélectionnée : le choix engage la confidentialité
   des notes sur une machine qui sera rendue au client. */
.question-mode h2 { margin-bottom: var(--espace-2); }
.question-mode > .attenue { margin: 0 0 var(--espace-5); }

.bouton-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-1);
  width: 100%;
  min-height: var(--cible-tactile);
  padding: var(--espace-4);
  margin-bottom: var(--espace-3);
  background: var(--blanc);
  border-color: var(--bordure);
  color: var(--texte);
  text-align: left;
  white-space: normal;
}
.bouton-mode:last-child { margin-bottom: 0; }
.bouton-mode:hover { border-color: var(--encre); background: var(--encre-pale); }
.bouton-mode strong { font-family: var(--police-titre); font-size: var(--taille-lg); }
.bouton-mode span { font-weight: 400; font-size: var(--taille-sm); color: var(--texte-secondaire); }
/* Deux boutons de bloc plutôt qu'une liste de boutons radio :
   avec des gants, sur un écran sale, une pastille de 20 px se
   rate. La cible est ici la carte entière. */

/* ── Menu utilisateur ──────────────────────────────────────
   Bâti sur `<details>` / `<summary>`, pas sur un composant de
   bibliothèque. Trois raisons, dans cet ordre :

   - il s'ouvre et se ferme sans une ligne de JavaScript, donc il
     fonctionne quoi qu'il arrive au réseau et au cache ;
   - le navigateur lui donne gratuitement la sémantique de
     divulgation (rôle bouton, `aria-expanded`, clavier) qu'un
     `<div>` piloté à la main oblige à réécrire, et à réécrire
     mal ;
   - Bootstrap et Alpine sont écartés du projet (CADRAGE.md §11),
     et un menu déroulant ne justifie pas de les rouvrir.

   Le script `menu.js` n'ajoute que la fermeture au clic extérieur
   et à Échap. Sans lui, le menu reste utilisable. */
.menu-utilisateur { position: relative; }

.menu-declencheur {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  min-height: var(--cible-tactile);
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-md);
  font-size: var(--taille-sm);
  font-weight: 600;
  color: var(--texte-secondaire);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
/* Retire le triangle natif. Les deux règles sont nécessaires :
   `list-style` couvre les navigateurs récents, la pseudo-classe
   WebKit couvre Safari, qui ne l'écoute pas encore. */
.menu-declencheur::-webkit-details-marker { display: none; }

.menu-declencheur:hover { background: var(--encre-pale); color: var(--encre); }
[open] > .menu-declencheur { background: var(--encre-tres-claire); color: var(--encre); }

.menu-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--rayon-plein);
  background: var(--encre);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-weight: 700;
}
/* La pastille n'est pas décorative : sur un écran de 5 pouces
   l'identifiant est masqué, et sans elle le déclencheur se
   réduirait à un chevron de 8 px — une cible que l'on rate avec
   des gants. Elle porte le repère visuel, le chevron ne dit que
   l'état ouvert ou fermé. */

.menu-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-rapide);
}
[open] .menu-chevron { transform: translateY(2px) rotate(-135deg); }

.menu-panneau {
  position: absolute;
  top: calc(100% + var(--espace-2));
  right: 0;
  z-index: 200;
  min-width: 16rem;
  padding: var(--espace-2);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-lg);
}
/* Ancré à droite et non à gauche : le déclencheur est en bout de
   barre, un panneau aligné à gauche déborderait de l'écran sur le
   T5. */

.menu-entete {
  margin: 0 0 var(--espace-2);
  padding: var(--espace-2) var(--espace-3) var(--espace-3);
  border-bottom: 1px solid var(--bordure-claire);
  font-size: var(--taille-xs);
  color: var(--texte-attenue);
  line-height: 1.4;
}
.menu-entete strong {
  display: block;
  font-size: var(--taille-sm);
  color: var(--texte);
}

.menu-panneau form { margin: 0; }

.menu-element {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--cible-tactile);
  padding: var(--espace-3);
  background: transparent;
  border: none;
  border-radius: var(--rayon-md);
  font-family: var(--police-corps);
  font-size: var(--taille-base);
  font-weight: 500;
  line-height: 1.3;
  color: var(--texte);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
/* Une seule classe pour un `<a>` et un `<button>` : « Changer le
   mot de passe » est un lien, « Déconnexion » doit être un envoi
   de formulaire en POST — Django refuse la déconnexion en GET
   depuis la version 5, et il a raison, un lien se précharge. Deux
   éléments HTML différents, un seul aspect. */

.menu-element:hover { background: var(--encre-pale); color: var(--encre); }

.menu-separateur {
  height: 1px;
  margin: var(--espace-2) 0;
  border: 0;
  background: var(--bordure-claire);
}

.menu-element-danger { color: var(--danger); }
.menu-element-danger:hover { background: var(--danger-fond); color: var(--danger); }

/* ── Bandeau d'état ────────────────────────────────────────
   L'application ne doit jamais laisser deviner son état
   (principe 6) : synchronisation, notes en attente, mode de
   stockage. Le bandeau est permanent, jamais escamotable. */
.bandeau-etat {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-md);
  font-size: var(--taille-sm);
  font-weight: 600;
  white-space: nowrap;
}
.bandeau-etat::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: var(--rayon-plein);
  background: currentColor;
  flex-shrink: 0;
}
/* Variante cliquable : forcer une synchronisation est le seul geste
   manuel qui reste, et sa place est là où l'on regarde déjà pour
   connaître l'état. Hauteur de cible pleine — c'est un bouton
   d'atelier, pas une pastille de tableau de bord. */
.bandeau-action {
  min-height: var(--cible-tactile);
  padding: var(--espace-2) var(--espace-4);
  border: 2px solid transparent;
  font-family: var(--police-corps);
  cursor: pointer;
}
.bandeau-action:hover:not(:disabled) { border-color: currentColor; }
.bandeau-action:disabled { cursor: progress; opacity: 0.7; }

.bandeau-etat.est-synchronise { color: var(--succes);    background: var(--succes-fond); }
.bandeau-etat.est-en-attente  { color: var(--attention); background: var(--attention-fond); }
.bandeau-etat.est-hors-ligne  { color: var(--danger);    background: var(--danger-fond); }
.bandeau-etat.est-en-echec    { color: var(--danger);    background: var(--danger-fond); }
/* Une invitation, pas une alerte : rien n'est cassé, il y a mieux à prendre.
   Le bleu de l'encre la distingue du rouge d'une photo perdue et du orange
   d'un envoi en attente — trois couleurs, trois natures. */
.bandeau-etat.est-nouvelle-version { color: var(--encre); background: var(--encre-tres-claire); }
.bandeau-etat.est-externe     { color: var(--encre);     background: var(--encre-tres-claire); }

/* ── Cartes ──────────────────────────────────────────────── */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-sm);
  padding: var(--espace-6);
}

/* Le grand chiffre d'un décompte. Remplace les styles en ligne qui
   traînaient dans le gabarit d'accueil : une valeur répétée dans un
   attribut `style` finit par diverger d'un écran à l'autre. */
.chiffre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-3xl);
  font-weight: 700;
  line-height: 1.1;
}
.carte .chiffre + .attenue { margin: var(--espace-2) 0 0; }

/* ── Carnet : liste et capture ─────────────────────────────
   Mode capture (§3) : debout, deux pouces, gants ou mains
   froides. Tout est dimensionné pour le pouce, pas pour la
   souris — c'est le seul écran du projet dont l'ergonomie soit
   réellement contrainte. */

.carte-note {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: var(--espace-3) var(--espace-4);
}

/* La carte entière ouvre la note. Un lien de la taille du texte se
   rate ; ici la cible fait toute la largeur et toute la hauteur. */
.note-ouvrir {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
  min-height: var(--cible-tactile);
  justify-content: center;
  padding: var(--espace-2) 0;
  background: none;
  border: 0;
  font-family: var(--police-corps);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.note-apercu {
  font-size: var(--taille-base);
  font-weight: 500;
  color: var(--texte);
  /* Une ligne, coupée net. Un aperçu qui déborde sur trois lignes
     fait défiler la liste au lieu de la survoler. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-meta { font-size: var(--taille-sm); color: var(--texte-attenue); }

.note-action { flex-shrink: 0; padding: var(--espace-2) var(--espace-3); }

/* La zone de saisie occupe l'écran et grandit avec le texte —
   `carnet.js` ajuste sa hauteur. Une zone qui défile à l'intérieur
   d'une page qui défile aussi est ingérable à deux pouces. */
.zone-note {
  min-height: 60vh;
  margin-top: var(--espace-4);
  border-width: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-size: var(--taille-lg);
  line-height: 1.7;
  resize: none;
  overflow: hidden;
}
.zone-note:focus { border-width: 0; box-shadow: none; }
/* Ni cadre ni ombre : on écrit sur une page, pas dans un champ de
   formulaire. Le focus reste signalé par le curseur clignotant, et
   la zone est de toute façon la seule chose sur l'écran. */

/* ── Recherche ─────────────────────────────────────────────
   Toujours visible : c'est la douleur n°2, et elle doit servir en
   atelier. La replier derrière une loupe ajouterait un appui à
   chaque usage, sur un écran où l'on porte des gants. */
.barre-recherche {
  display: flex;
  gap: var(--espace-2);
  align-items: stretch;
  /* La rangée du dessus porte « Nouvelle note », le geste le plus
     fréquent : sans respiration au-dessus, la boîte de recherche
     devient une cible voisine qu'on touche à sa place, avec des
     gants (principe 7). */
  margin-top: var(--espace-5);
  margin-bottom: var(--espace-4);
}
.barre-recherche .saisie { flex: 1; }
.barre-recherche .bouton { flex-shrink: 0; white-space: nowrap; }

/* Le bouton signale qu'un filtre est posé : sans cela, une liste
   rétrécie ressemble à une liste vide, et on croit avoir perdu des
   notes (principe 6 appliqué au filtre). */
.bouton.est-actif {
  background: var(--encre-tres-claire);
  border-color: var(--encre);
  color: var(--encre);
}

.outils-liste { margin-bottom: var(--espace-4); }
.outils-liste .saisie { width: 100%; }

/* ── Étiquettes ────────────────────────────────────────────
   Une couleur par axe. Ce n'est pas de la décoration : une note
   porte des étiquettes des trois axes en même temps, et sans
   distinction visuelle la ligne de pastilles devient illisible —
   on ne sait plus si « qualité » est le thème ou le sujet. Or
   l'unicité porte sur le couple (axe, nom) : les deux peuvent
   coexister. */
.jeton {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  min-height: 40px;
  padding: var(--espace-2) var(--espace-3);
  border: 2px solid transparent;
  border-radius: var(--rayon-plein);
  font-family: var(--police-corps);
  font-size: var(--taille-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
/* 40 px et non 48 : ce sont des cibles de synthèse, à la souris,
   assis. Les 48 px de la charte valent pour ce qui se touche avec
   des gants — et l'étiquetage, précisément, ne s'y fait pas. */

.jeton-theme  { background: var(--encre-tres-claire); color: var(--encre-sombre); }
.jeton-angle  { background: var(--attention-fond);    color: var(--attention); }
.jeton-sujet  { background: var(--succes-fond);       color: var(--succes); }

/* Non posée : contour seul. La différence plein/creux dit
   « posée / disponible » sans recourir à une case à cocher. */
.jeton-libre {
  background: transparent;
  border-color: var(--bordure);
  color: var(--texte-secondaire);
  font-weight: 500;
}
.jeton-libre:hover { border-color: var(--encre); color: var(--encre); }

.jeton-creer {
  background: transparent;
  border-color: var(--encre);
  border-style: dashed;
  color: var(--encre);
}

.etiquetage { margin-top: var(--espace-5); }
.jetons { margin-top: var(--espace-3); gap: var(--espace-2); }
.axe + .axe { margin-top: var(--espace-6); }

/* ── Vue de lecture ────────────────────────────────────────
   L'« aperçu avant impression » : la note mise au propre, les
   photos et les croquis à leur place. C'est aussi la surface de
   tri — « c'est en relisant que je fais le tri ». */
.lecture { margin-bottom: var(--espace-6); }
.lecture-bloc + .lecture-bloc { margin-top: var(--espace-3); }

.lecture-paragraphe {
  margin: 0;
  font-size: var(--taille-base);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lecture-puce {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-2);
}

/* La marque *est* le bouton : aucun widget ajouté sur trente
   lignes de constats. La zone de tapotement fait 48 px — celle-ci
   se touche en atelier, contrairement aux jetons d'étiquette. */
.lecture-marque {
  flex: 0 0 auto;
  width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--police-corps);
  font-size: var(--taille-lg);
  line-height: 1.4;
  color: var(--texte-attenue);
  text-align: left;
  cursor: pointer;
}
.lecture-marque:active { background: var(--encre-tres-claire); border-radius: var(--rayon-sm); }
.lecture-puce.est-faite .lecture-marque { color: var(--succes); }

.lecture-texte {
  padding-top: 0.35rem;
  font-size: var(--taille-base);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Une tâche faite reste lisible : elle est barrée et atténuée, pas
   effacée. Elle est la trace de ce qui a été traité — c'est tout
   l'intérêt de la cocher plutôt que de la supprimer. */
.lecture-puce.est-faite .lecture-texte {
  text-decoration: line-through;
  color: var(--texte-attenue);
}

/* « Ni vignette minuscule, ni pleine page » (§4) : lisible dans le
   fil du texte, agrandissement au clic. */
.lecture-piece { margin: var(--espace-4) 0; }
.lecture-piece img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: var(--rayon-md);
  border: 1px solid var(--bordure-claire);
  cursor: zoom-in;
}

.lecture-absente {
  margin: 0;
  padding: var(--espace-3);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon-md);
  font-size: var(--taille-sm);
  color: var(--texte-attenue);
}

.lecture-restantes { margin-top: var(--espace-6); }

/* ── Tâches ────────────────────────────────────────────────
   La liste dérivée : ce qu'on doit, et à qui. Elle réemploie la
   marque de la vue de lecture — cocher est le même geste au même
   endroit de l'œil, et deux dessins pour un geste unique se
   paieraient en hésitation. */
.tache {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-2);
  padding: var(--espace-2) var(--espace-3);
  background: var(--surface);
  border: 1px solid var(--bordure-claire);
  border-radius: var(--rayon-md);
}

.tache-texte {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
  min-height: var(--cible-tactile);
  padding: var(--espace-2) 0;
  border: 0;
  background: none;
  font-family: var(--police-corps);
  font-size: var(--taille-base);
  line-height: 1.5;
  color: var(--texte);
  text-align: left;
  cursor: pointer;
}

/* De quelle note elle vient. Sans ce rappel, une tâche isolée de
   son contexte est souvent intraitable — « rappeler le chef » ne
   dit pas de quoi. */
.tache-note {
  font-size: var(--taille-xs);
  color: var(--texte-attenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tache.est-faite .tache-texte > span:first-child {
  text-decoration: line-through;
  color: var(--texte-attenue);
}
.tache.est-faite .lecture-marque { color: var(--succes); }

/* Un en-tête de groupe qui ne se replie pas : ici on ouvre l'écran
   pour faire le travail, le replier le cacherait. Il garde
   l'apparence de celui du carnet — même objet, même dessin — sans
   le chevron ni le curseur, qui promettraient un appui. */
.groupe-entete.est-fixe { cursor: default; background: var(--encre-pale); }

/* ── Le panier de temps d'une tâche ────────────────────────
   Même mécanique de teinte que les groupes, mais les valeurs
   sont fixes et non tirées d'un rang : sur le temps l'ordre
   existe, et la couleur peut le porter — le retard tire vers le
   rouge, la fin de semaine vers le bleu. C'est la seule
   différence de principe entre les deux, et elle est justifiée
   dans `lecture.js`.

   Le déclencheur reste une cible de synthèse, à la souris : 40 px
   comme les jetons d'étiquette, et non les 48 px des gestes qui
   se font avec des gants. */
.plan { position: relative; flex-shrink: 0; }

.plan-declencheur {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: var(--espace-1) var(--espace-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-plein);
  background: var(--surface);
  font-family: var(--police-corps);
  font-size: var(--taille-xs);
  font-weight: 600;
  color: var(--texte-attenue);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.plan-declencheur::-webkit-details-marker { display: none; }
.plan-declencheur:hover { border-color: var(--encre); color: var(--encre); }

.plan-declencheur.est-teinte {
  background: hsl(var(--teinte), 62%, 92%);
  border-color: hsl(var(--teinte), 42%, 78%);
  color: var(--texte);
}

.plan-choix {
  position: absolute;
  top: calc(100% + var(--espace-1));
  right: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: var(--espace-2);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-md);
}

.plan-option {
  min-height: var(--cible-tactile);
  padding: var(--espace-2) var(--espace-3);
  border: 0;
  border-radius: var(--rayon-md);
  background: none;
  font-family: var(--police-corps);
  font-size: var(--taille-sm);
  color: var(--texte);
  text-align: left;
  cursor: pointer;
}
.plan-option:hover { background: var(--encre-pale); color: var(--encre); }

/* Dans la vue de lecture : une marque, pas un bouton. Le geste
   de planification vit sur l'écran des tâches, celui-ci ne fait
   que rendre visible un état qui serait sinon caché par le
   retrait du marqueur. */
.plan-marque {
  flex-shrink: 0;
  align-self: center;
  padding: 2px var(--espace-2);
  border-radius: var(--rayon-plein);
  background: var(--fond);
  font-size: var(--taille-xs);
  font-weight: 600;
  color: var(--texte-attenue);
  white-space: nowrap;
}
.plan-marque.est-teinte {
  background: hsl(var(--teinte), 62%, 92%);
  color: var(--texte);
}

/* ── La couleur d'un groupe de tâches ──────────────────────
   Une seule teinte, déclinée : le bandeau la porte en clair, le
   filet vertical la prolonge le long des lignes du groupe. C'est
   ce que donnait un tri par domaine dans Excel — des blocs qu'on
   distingue sans les lire — et c'est tout ce qu'on lui demande :
   séparer, pas signifier. Aucune de ces couleurs n'a de sens à
   mémoriser, elles n'existent que les unes par rapport aux autres.

   Les valeurs sont contraintes par l'atelier avant de l'être par
   le goût : clarté à 92 %, donc le texte reste à 13:1 sous un
   éclairage violent ou derrière une visière — bien au-delà du
   minimum d'accessibilité, comme le reste de cette palette.
   Saturation modérée : ce sont des pastels, l'écran est regardé
   des heures.

   `--teinte` est posée en ligne par le gabarit, seul endroit où
   du style est calculé — la valeur vient du **rang** de
   l'étiquette, pas d'une couleur stockée (voir `etiquettes.js`). */
.groupe-entete.est-teinte {
  background: hsl(var(--teinte), 62%, 92%);
  border-color: hsl(var(--teinte), 42%, 78%);
}

/* Sur fond teinté, le compteur reprend le blanc : le bleu encre
   du carnet y deviendrait une seconde couleur qui n'est pas la
   sienne, et la pastille se lirait comme une information. */
.groupe-entete.est-teinte .groupe-compte {
  background: var(--blanc);
  color: var(--texte);
}

.groupe-contenu.est-teinte {
  margin-left: var(--espace-3);
  padding-left: var(--espace-3);
  border-left: 3px solid hsl(var(--teinte), 42%, 82%);
}

/* ── Bandeau du client actif ───────────────────────────────
   Il remplace un second cahier papier : il doit se lire d'un coup
   d'œil, sans être cherché. D'où le fond plein et la taille de
   titre, là où les indicateurs de l'en-tête sont des pastilles.

   Le §10 craignait « on arrive chez B, on oublie de changer,
   trente notes partent chez A ». Ce bandeau est à la fois ce
   risque et sa parade : il ne vaut que s'il est pénible à
   ignorer (principe 8). Le discréter serait le supprimer. */
.bandeau-client {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espace-1) var(--espace-3);
  margin-bottom: var(--espace-5);
  padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon-md);
  background: var(--encre-tres-claire);
  border-left: 5px solid var(--encre);
}

/* « Tous les clients » n'est pas un client : le bandeau perd sa
   couleur pour que l'état se distingue à l'œil, sans le lire.
   C'est aussi l'état où les notes naissent sans rattachement —
   celui qu'il ne faut pas confondre avec « je suis chez Dupont ». */
.bandeau-client.est-tous {
  background: var(--fond);
  border-left-color: var(--bordure);
}

.bandeau-client-nom {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  font-weight: 700;
  color: var(--encre-sombre);
  text-align: left;
  cursor: pointer;
}
.est-tous .bandeau-client-nom { color: var(--texte-secondaire); font-weight: 500; }

.bandeau-client-chevron {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform var(--transition-rapide);
}
.bandeau-client-chevron.est-ouvert { transform: rotate(180deg); }

/* La seconde ligne, qui dit ce dont héritera la prochaine note.
   Jamais masquée quand elle annonce « sans client » : c'est
   précisément l'état qu'on doit remarquer. */
.bandeau-client-suite {
  font-size: var(--taille-sm);
  color: var(--texte-secondaire);
}

/* ── Client de la note ─────────────────────────────────────
   Délibérément différent d'un jeton d'étiquette. Un client n'est
   pas un quatrième axe : une note n'en porte qu'un, et c'est ce
   qui rend le *tri* par client possible là où les étiquettes
   exigent le regroupement (§4). Lui donner l'apparence d'une
   pastille d'axe ferait croire le contraire.

   48 px et non 40 : contrairement à l'étiquetage, ce bouton se
   touche en atelier, avec des gants (§11). */
.client-note { margin-bottom: var(--espace-4); }

.client-poser {
  display: inline-flex;
  align-items: baseline;
  gap: var(--espace-2);
  min-height: 48px;
  padding: var(--espace-2) var(--espace-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  background: var(--surface);
  font-family: var(--police-corps);
  font-size: var(--taille-base);
  text-align: left;
  cursor: pointer;
}
.client-poser:hover { border-color: var(--encre-claire); }

.client-etiquette {
  font-size: var(--taille-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.client-nom { font-weight: 600; color: var(--encre-sombre); }

/* « Sans client » est une valeur, pas un champ vide (§4) : les
   idées attrapées en vitrine relèvent d'Optimizer Labs. Atténué
   pour se distinguer d'un nom, jamais grisé comme une erreur. */
.client-nom.est-sans { font-weight: 400; font-style: italic; color: var(--texte-attenue); }

.jeton-client { background: var(--encre); color: var(--blanc); }

/* ── Groupes pliables ──────────────────────────────────────
   « Range sans rien cacher, groupes pliables et comptés » (§4).
   L'en-tête entière est la cible : le chevron seul se raterait. */
.groupe + .groupe { margin-top: var(--espace-2); }

.groupe-entete {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  width: 100%;
  min-height: var(--cible-tactile);
  padding: var(--espace-3) var(--espace-4);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  font-family: var(--police-corps);
  text-align: left;
  cursor: pointer;
}
.groupe-entete:hover { border-color: var(--encre); }

.groupe-chevron {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-right: 2px solid var(--texte-attenue);
  border-bottom: 2px solid var(--texte-attenue);
  transform: rotate(-45deg);
  transition: transform var(--transition-rapide);
}
.groupe-chevron.est-ouvert { transform: rotate(45deg); }

.groupe-nom {
  flex: 1;
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Le groupe « sans » est atténué : il désigne le travail qui
   reste, pas une catégorie de lecture. Atténué mais présent —
   l'omettre ferait du regroupement un filtre. */
.groupe-nom.est-sans { font-weight: 400; color: var(--texte-attenue); font-style: italic; }

.groupe-compte {
  flex-shrink: 0;
  min-width: 2.5em;
  padding: var(--espace-1) var(--espace-2);
  border-radius: var(--rayon-plein);
  background: var(--encre-tres-claire);
  color: var(--encre-sombre);
  font-size: var(--taille-sm);
  font-weight: 700;
  text-align: center;
}

.groupe-contenu { margin: var(--espace-2) 0 var(--espace-4) var(--espace-5); }

/* ── Voisinage par sujet ───────────────────────────────────
   Navigation de proche en proche. Volontairement sobre : c'est
   un pied de page, pas une seconde liste de notes. */
.voisinage {
  margin-top: var(--espace-8);
  padding-top: var(--espace-4);
  border-top: 1px solid var(--bordure-claire);
}
.voisinage h2 { font-size: var(--taille-lg); margin-bottom: var(--espace-2); }
.liste-nue { list-style: none; margin: 0; padding: 0; }

.lien-note {
  display: block;
  width: 100%;
  min-height: var(--cible-tactile);
  padding: var(--espace-2) 0;
  background: none;
  border: 0;
  font-family: var(--police-corps);
  font-size: var(--taille-base);
  color: var(--encre);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lien-note:hover { color: var(--encre-sombre); text-decoration: underline; }

/* ── Photos ────────────────────────────────────────────────
   Un bandeau de vignettes sous la zone de saisie, dans l'ordre
   des marqueurs. Pas d'image dans le fil du texte en capture :
   une zone de saisie ne peut pas en contenir, et en chambre
   froide on vient de prendre la photo — on a besoin qu'elle soit
   rattachée au bon endroit, pas de la revoir. L'image dans le
   fil viendra en mode synthèse, là où l'on lit sans écrire. */
.bandeau-photos {
  margin-top: var(--espace-4);
  padding-top: var(--espace-4);
  border-top: 1px solid var(--bordure-claire);
}

.vignette { position: relative; display: inline-block; }
.vignette img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  cursor: zoom-in;
  background: var(--fond);
}
/* 88 px : on doit reconnaître l'étagère photographiée sans
   agrandir. Une vignette de 48 px ne dit que « il y a une
   photo », ce qui ne sert à rien quand il y en a quatre. */

.vignette-retirer {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 32px;
  height: 32px;
  border: 2px solid var(--surface);
  border-radius: var(--rayon-plein);
  background: var(--danger);
  color: var(--blanc);
  font-size: var(--taille-lg);
  line-height: 1;
  cursor: pointer;
}
/* Débordante et à 32 px : plus petite, elle se raterait avec des
   gants — et la rater signifie ouvrir la photo en plein écran au
   lieu de la retirer. Retirer reste réversible (pierre tombale),
   donc pas de confirmation. */

.editeur-traces {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: var(--fond);
}
.editeur-outils {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  flex-wrap: wrap;
  padding: var(--espace-3) var(--espace-4);
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}
.editeur-outils .pousse { margin-left: auto; }

.editeur-toile {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-4);
  overflow: auto;
}
.editeur-toile canvas {
  max-width: 100%;
  max-height: 100%;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-sm);
  cursor: crosshair;
  /* Sans cela, dessiner au doigt fait défiler la page au lieu
     de tracer. C'est la ligne qui rend le croquis utilisable au
     doigt, et son absence ne se voit qu'à la tablette. */
  touch-action: none;
}

.outil {
  display: grid;
  place-items: center;
  width: var(--cible-tactile);
  height: var(--cible-tactile);
  padding: 0;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--rayon-md);
  cursor: pointer;
}
.outil .pastille {
  width: 26px;
  height: 26px;
  border-radius: var(--rayon-plein);
  background: var(--teinte);
  border: 1px solid rgba(20, 24, 31, 0.2);
}
.outil.est-choisi { border-color: var(--encre); background: var(--encre-pale); }
/* Cibles pleines à 48 px : le croquis se fait au doigt, parfois
   ganté — contrairement à l'étiquetage, qui est un geste de
   bureau à la souris. */

.plein-ecran {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-4);
  background: rgba(20, 24, 31, 0.92);
}
.plein-ecran img { cursor: zoom-out; }
.plein-ecran { flex-direction: column; gap: var(--espace-4); }
.plein-ecran img { max-width: 100%; max-height: 100%; object-fit: contain; }
.plein-outils { display: flex; gap: var(--espace-3); }

.rangee.entre { justify-content: space-between; }
.rangee.entre h1 { margin: 0; }
.espace-haut { margin-top: var(--espace-6); }

@media (max-width: 640px) {
  .zone-note { font-size: var(--taille-base); min-height: 55vh; }
}

/* ── Formulaires ─────────────────────────────────────────── */
.champ { margin-bottom: var(--espace-5); }

.etiquette-champ {
  display: block;
  margin-bottom: var(--espace-2);
  font-size: var(--taille-sm);
  font-weight: 600;
  color: var(--texte-secondaire);
}

.saisie {
  display: block;
  width: 100%;
  min-height: var(--cible-tactile);
  padding: var(--espace-3);
  font-family: var(--police-corps);
  font-size: 1.0625rem;  /* ≥16px : évite le zoom automatique sur mobile */
  color: var(--texte);
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-md);
  transition: border-color var(--transition-rapide);
}
.saisie:focus {
  outline: none;
  border-color: var(--encre);
  box-shadow: 0 0 0 3px rgba(29, 78, 137, 0.18);
}
.saisie.est-invalide { border-color: var(--danger); }
.saisie::placeholder { color: var(--texte-desactive); }

.aide-champ {
  margin-top: var(--espace-2);
  font-size: var(--taille-xs);
  color: var(--texte-attenue);
}
.aide-champ ul { margin: var(--espace-1) 0 0; padding-left: var(--espace-5); }

.erreur-champ {
  margin-top: var(--espace-2);
  font-size: var(--taille-sm);
  font-weight: 500;
  color: var(--danger);
}

/* ── Boutons ─────────────────────────────────────────────── */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  min-height: var(--cible-tactile);
  padding: var(--espace-3) var(--espace-5);
  font-family: var(--police-corps);
  font-size: var(--taille-base);
  font-weight: 600;
  line-height: 1.2;
  border: 2px solid transparent;
  border-radius: var(--rayon-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-rapide), border-color var(--transition-rapide);
}
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }

.bouton-principal {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--blanc);
}
.bouton-principal:hover {
  background: var(--encre-sombre);
  border-color: var(--encre-sombre);
  color: var(--blanc);
}

.bouton-secondaire {
  background: transparent;
  border-color: var(--encre);
  color: var(--encre);
}
.bouton-secondaire:hover { background: var(--encre-tres-claire); }

.bouton-discret {
  background: transparent;
  border-color: transparent;
  color: var(--texte-secondaire);
}
.bouton-discret:hover { background: var(--encre-pale); color: var(--encre); }

.bouton-pleine-largeur { width: 100%; }

/* ── Alertes ─────────────────────────────────────────────── */
.alerte {
  padding: var(--espace-4);
  margin-bottom: var(--espace-5);
  border-left: 4px solid;
  border-radius: var(--rayon-md);
  font-size: var(--taille-sm);
}
.alerte-succes    { color: #0f5c2e; background: var(--succes-fond);    border-color: var(--succes); }
.alerte-attention { color: #7a3a06; background: var(--attention-fond); border-color: var(--attention); }
.alerte-danger    { color: #8a1515; background: var(--danger-fond);    border-color: var(--danger); }
.alerte-info      { color: var(--encre-sombre); background: var(--info-fond); border-color: var(--encre); }

/* ── Page de connexion ───────────────────────────────────── */
.page-connexion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-4);
  background: var(--fond);
}
.bloc-connexion { width: 100%; max-width: 26rem; }

.entete-connexion {
  text-align: center;
  margin-bottom: var(--espace-6);
}
.entete-connexion .marque-nom { font-size: var(--taille-3xl); }
.entete-connexion p {
  margin: var(--espace-2) 0 0;
  color: var(--texte-attenue);
  font-size: var(--taille-sm);
}

.pied-connexion {
  margin-top: var(--espace-5);
  text-align: center;
  font-size: var(--taille-xs);
  color: var(--texte-attenue);
}

/* ── Utilitaires ─────────────────────────────────────────── */
.attenue { color: var(--texte-attenue); }
.pile { display: flex; flex-direction: column; gap: var(--espace-4); }
.rangee { display: flex; align-items: center; gap: var(--espace-3); flex-wrap: wrap; }

/* Lu par un lecteur d'écran, invisible à l'œil. Sert au nom
   accessible du menu utilisateur : sur 5 pouces l'identifiant est
   en `display: none`, ce qui le retire aussi de la restitution
   vocale — le déclencheur n'aurait plus de nom du tout. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .contenu { padding: var(--espace-4) var(--espace-3); }
  .carte   { padding: var(--espace-4); }
  /* `.marque-editeur` était masqué ici, faute de largeur sur une
     ligne. Le lockup empilé rend la règle inutile : la signature
     reste lisible sur 5 pouces. */

  /* L'identifiant disparaît, la pastille et le chevron restent :
     la cible garde ses 48 px, la barre reste lisible sur 5 pouces.
     Le nom complet reste lisible dans l'en-tête du panneau. */
  .menu-identifiant { display: none; }
  .menu-panneau { min-width: 14rem; }
}