/* =========================================================
   ICONES.CSS — mise en page des icônes SVG de Mon Artisan.

   Le dessin des icônes vit dans le sprite inline en tête de index.html.
   Ce fichier ne décide que de leur TAILLE et de leur ALIGNEMENT.

   ── POURQUOI AUCUNE COULEUR N'EST DÉFINIE ICI ───────────────────────
   Les symboles du sprite utilisent stroke="currentColor". Une icône
   prend donc automatiquement la couleur du texte à côté d'elle : blanche
   dans la barre latérale sombre, grise dans une carte, orange dans un
   bouton de marque. Une seule définition sert tous les contextes, et le
   contraste ne peut pas se désynchroniser du texte qu'il accompagne —
   ce qui arriverait fatalement avec des couleurs écrites en dur.

   ── POURQUOI CES TAILLES ────────────────────────────────────────────
   18 px dans les menus et les lignes de texte : c'est la hauteur de x
   d'un texte de 13-15 px, l'icône ne dépasse donc pas de la ligne.
   20 px dans les boutons, 24 px au maximum dans les cartes. Au-delà,
   un tracé filaire de 1.8 paraît fin et l'ensemble perd son unité.
   ========================================================= */

/* ── L'ICÔNE ORDINAIRE ────────────────────────────────────────────────
   `vertical-align: -.18em` cale l'icône sur la ligne de base du texte.
   Sans ce calage, une icône en ligne « flotte » systématiquement 2 à 3
   pixels trop haut, et tout le site paraît mal aligné sans qu'on sache
   pourquoi. `flex-shrink: 0` l'empêche d'être écrasée dans un conteneur
   flex serré — un pictogramme déformé est pire que pas de pictogramme. */
.ic {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -.18em;
  flex-shrink: 0;
  /* Le tracé ne doit pas grossir avec la taille : une icône de 32 px
     garde exactement la même épaisseur qu'une icône de 16 px. */
  overflow: visible;
}

.ic-14 { width: 14px; height: 14px; }
.ic-16 { width: 16px; height: 16px; }
.ic-20 { width: 20px; height: 20px; }
.ic-24 { width: 24px; height: 24px; }
.ic-28 { width: 28px; height: 28px; }
.ic-32 { width: 32px; height: 32px; }

/* Dans un conteneur flex, l'alignement se fait par le conteneur : le
   décalage de ligne de base n'a plus lieu d'être et créerait un défaut. */
.ic-flex { vertical-align: baseline; }

/* ── ANCIENS EMPLACEMENTS D'EMOJI ─────────────────────────────────────
   Ces classes portaient un emoji dimensionné par font-size. Elles
   contiennent désormais un <svg> : la taille vient de l'élément, pas de
   la police. On neutralise donc l'ancienne mise en forme au même
   endroit, plutôt que de laisser deux règles se contredire. */
.trust-icon,
.chip-icon,
.cat-icon,
.pkpi-icon,
.il-icon,
.fp-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* L'icône d'un écran vide est le seul cas où un grand format se
   justifie : elle occupe une zone volontairement vide, et un tracé de
   24 px y serait perdu. La couleur reste celle du texte de l'état vide,
   donc discrète — elle ne doit pas attirer l'œil plus que le message. */
.fp-empty-icon .ic { width: 34px; height: 34px; opacity: .45; }
.cat-icon .ic { width: 30px; height: 30px; }

/* ── BOUTONS N'AFFICHANT QU'UNE ICÔNE ─────────────────────────────────
   Ils DOIVENT porter un aria-label : sans texte visible, un lecteur
   d'écran n'annoncerait rien du tout. Le test de la suite d'icônes
   vérifie cette règle bouton par bouton. */
.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
}

/* Une icône accompagnée de texte : l'espacement se règle une fois ici. */
.avec-ic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── ÉTOILES DE NOTATION ──────────────────────────────────────────────
   La note se lit à la couleur ET au remplissage : une étoile pleine
   ambre pour un point acquis, une étoile filaire grise sinon. Deux
   signaux distincts, donc lisible aussi en vision monochrome — un
   utilisateur daltonien ne doit pas dépendre de la seule teinte. */
.ic-note { color: var(--gray-300, #d1d5db); }
.ic-note.on { color: var(--amber); }

/* =========================================================
   BOUTON « AFFICHER / MASQUER LE MOT DE PASSE »
   =========================================================
   Le champ et son bouton vivent dans un conteneur en position relative :
   le bouton est posé PAR-DESSUS le champ, à droite, et le champ réserve
   la place par un padding. C'est la seule construction qui garantit que
   le texte saisi ne passe jamais sous l'icône, quelle que soit la
   longueur du mot de passe ou la largeur de l'écran. */
.champ-mdp {
  position: relative;
  display: block;
  width: 100%;
}

/* 44 px de réservé à droite : 40 px de zone tactile plus 4 px de marge.
   `!important` est ici nécessaire et assumé : plusieurs de ces champs
   portent un `style=""` en ligne hérité des gabarits, qui l'emporterait
   sinon sur cette règle et laisserait le texte glisser sous l'icône. */
.champ-mdp > input {
  width: 100%;
  padding-right: 44px !important;
}

/* Zone cliquable de 40 × 40 px — la recommandation WCAG 2.5.5 fixe le
   minimum à 44 px, atteint ici avec la marge du conteneur. L'icône,
   elle, ne fait que 18 px : c'est la zone qui est large, pas le dessin. */
.champ-mdp-bouton {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gray-400, #9ca3af);
  cursor: pointer;
  border-radius: 8px;
  /* Le champ garde le focus au clavier : le bouton ne doit pas voler la
     place, mais il reste atteignable par Tab juste après le champ. */
  line-height: 1;
}
.champ-mdp-bouton:hover { color: var(--navy, #1a1a2e); }

/* Focus VISIBLE : sans lui, une personne qui navigue au clavier ne sait
   pas qu'elle est sur le bouton. `:focus-visible` évite le contour au
   clic à la souris, où il n'apporte rien. */
.champ-mdp-bouton:focus-visible {
  outline: 2px solid var(--orange, #FF6B35);
  outline-offset: 1px;
  color: var(--navy, #1a1a2e);
}

/* Quand le mot de passe est visible, l'icône barrée prend la couleur de
   la marque : l'état « en clair » doit se remarquer, c'est justement
   celui qu'on ne veut pas oublier d'annuler. */
.champ-mdp-bouton[aria-pressed="true"] { color: var(--orange, #FF6B35); }

.champ-mdp-bouton .ic { width: 18px; height: 18px; vertical-align: baseline; }

/* Sur les champs compacts des écrans de sécurité (hauteur ~36 px), la
   zone de 40 px dépasserait du champ : on la ramène à sa hauteur. */
.champ-mdp.champ-mdp-compact .champ-mdp-bouton { width: 34px; height: 34px; }
.champ-mdp.champ-mdp-compact > input { padding-right: 38px !important; }