/* ==========================================================================
   Mise en page générale : en-tête, barre d'outils, barre de formule,
   barre d'état. Les couleurs viennent de themes.css.
   Pas d'animation : l'interface reste calme et ne clignote jamais.
   ========================================================================== */

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

html {
  height: 100%;
  background: var(--fond);
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: grid;
  /* en-tête, outils, barre de formule, grille (prend la place restante),
     onglets des feuilles, barre d'état */
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  /* Une seule colonne, jamais plus large que l'écran. */
  grid-template-columns: minmax(0, 1fr);
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-interface);
  font-size: 1rem;
  line-height: 1.4;
  /* Respecte les encoches des téléphones. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--halo);
  outline-offset: 2px;
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icones {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

svg {
  width: 22px;
  height: 22px;
  flex: none;
}

/* --- En-tête --------------------------------------------------------------- */

.entete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
}

.marque {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--accent-doux);
  color: var(--halo);
}

.titre-classeur {
  flex: 1;
  min-width: 0;
}

.titre-classeur input {
  width: 100%;
  max-width: 34ch;
  min-height: 40px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.titre-classeur input:hover {
  border-color: var(--trait);
}

.titre-classeur input:focus {
  border-color: var(--accent);
  background: var(--fond);
  outline: none;
}

.entete-actions {
  display: flex;
  gap: 6px;
}

/* --- Boutons ----------------------------------------------------------------- */

/* Boutons larges, faciles à toucher au doigt (au moins 44 × 44 pixels).
   « relative » : le libellé caché (petits écrans) reste dans son bouton et
   ne fait pas déborder la page. */
.outil {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background: var(--surface);
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
}

/* Sans cette règle, « display: inline-flex » ci-dessus l'emporterait sur
   l'attribut hidden : un bouton caché resterait visible. */
.outil[hidden] {
  display: none;
}

.outil:hover:not(:disabled) {
  background: var(--survol);
}

.outil[aria-pressed="true"] {
  background: var(--accent-doux);
  border-color: var(--accent);
}

.outil:disabled {
  opacity: 0.45;
  cursor: default;
}

.outil-rond {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  touch-action: manipulation;
}

.outil-rond:hover {
  background: var(--survol);
}

/* --- Barre d'outils en onglets ---------------------------------------------- */

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

.onglets-outils {
  display: flex;
  gap: 2px;
  padding: 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--trait);
}

.onglet-outils {
  flex: none;
  min-height: 40px;
  padding: 6px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--discret);
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
}

.onglet-outils:hover {
  color: var(--texte);
}

.onglet-outils[aria-selected="true"] {
  color: var(--texte);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

/* Barre repliée : l'onglet choisi reste marqué, mais plus discrètement. */
.outils.repliee .onglet-outils[aria-selected="true"] {
  border-bottom-color: var(--trait);
}

.barre-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
}

.barre-outils[hidden] {
  display: none;
}

.separateur {
  width: 1px;
  align-self: stretch;
  margin: 4px 4px;
  background: var(--trait);
}

/* Sur petit écran, les boutons n'affichent que leur icône. */
@media (max-width: 760px) {
  .outil .libelle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .outil {
    padding: 6px 10px;
  }
}

/* Sur téléphone, la barre d'outils défile de côté au lieu de prendre deux lignes. */
@media (max-width: 760px) {
  .barre-outils {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .barre-outils > * {
    flex: none;
  }
  .onglet-outils {
    padding: 6px 10px;
    font-size: 0.95rem;
  }
}

/* Icône « fond » avec, dessous, la couleur de la cellule active. */
.icone-fond {
  display: grid;
  justify-items: center;
  gap: 1px;
}

.icone-fond svg {
  width: 20px;
  height: 20px;
}

.temoin-fond {
  width: 20px;
  height: 5px;
  border-radius: 2px;
  border: 1px solid var(--trait);
  background: var(--teinte, transparent);
}

/* --- Panneaux (couleur de fond, largeur) ------------------------------------ */

.panneau {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(290px, calc(100vw - 16px));
  padding: 14px;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: var(--surface);
  color: var(--texte);
  box-shadow: var(--ombre);
  overflow-y: auto;
}

.panneau-titre {
  margin: 0 0 10px;
  font-weight: 700;
}

.panneau-aide {
  margin: 10px 0 0;
  color: var(--discret);
  font-size: 0.85rem;
}

.nuancier {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pastille {
  height: 48px;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background: var(--teinte, var(--cellule));
  cursor: pointer;
  touch-action: manipulation;
}

.pastille.aucune::before {
  content: "Aucune";
  font-size: 0.85rem;
  color: var(--discret);
}

.pastille[aria-pressed="true"] {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

/* Pastilles de couleur du texte (et des bordures) : « Abc » écrit dans la couleur. */
.pastille-encre {
  background: var(--cellule);
  font-family: var(--police-cellules);
  font-weight: 700;
  font-size: 1rem;
}

.pastille-encre.aucune::before {
  content: none;
}

.pastille-encre.aucune {
  color: var(--texte);
  font-weight: 500;
  font-size: 0.85rem;
  font-family: var(--police-interface);
}

/* Témoin sous l'icône « Texte » / « Couleur » des bordures : la couleur choisie. */
.temoin-encre {
  background: var(--bordure-auto);
}

.temoin-encre[data-encre] {
  background: var(--encre, var(--bordure-auto));
}

[data-encre="rouge"] { --encre: var(--encre-rouge); }
[data-encre="orange"] { --encre: var(--encre-orange); }
[data-encre="jaune"] { --encre: var(--encre-jaune); }
[data-encre="vert"] { --encre: var(--encre-vert); }
[data-encre="bleu"] { --encre: var(--encre-bleu); }
[data-encre="violet"] { --encre: var(--encre-violet); }
[data-encre="gris"] { --encre: var(--encre-gris); }

/* Panneau « Format » : un bouton par format, avec un exemple dessous. */
.choix-formats {
  display: grid;
  gap: 6px;
}

.choix-format {
  display: grid;
  justify-items: start;
  justify-content: stretch;
  gap: 1px;
  margin-top: 0;
  padding: 8px 14px;
  text-align: left;
}

.choix-format small {
  color: var(--discret);
  font-variant-numeric: tabular-nums;
}

.panneau-sous-titre {
  margin-top: 14px;
}

/* Boutons « Fin » et « Épais » côte à côte (un seul choisi). */
.groupe-choix {
  display: inline-flex;
  gap: 4px;
}

.reglage-largeur {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.reglage-largeur .outil {
  font-size: 1.3rem;
  min-width: 52px;
}

.largeur-valeur {
  flex: 1;
  text-align: center;
  font-family: var(--police-entetes);
}

.outil.large {
  width: 100%;
  margin-top: 6px;
}

/* Boutons du panneau « Exporter » : format en gros, explication dessous. */
.choix-export {
  display: grid;
  justify-items: start;
  justify-content: stretch;
  gap: 2px;
  padding: 10px 14px;
  text-align: left;
}

.choix-export small {
  color: var(--discret);
}

/* --- Barre de formule ------------------------------------------------------- */

.barre-formule {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
}

.nom-cellule {
  width: 7.5em;
  flex: none;
  min-height: 40px;
  padding: 4px 8px;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--police-entetes);
  font-size: 0.95rem;
  text-align: center;
  text-transform: uppercase;
}

.fx {
  font-family: var(--police-entetes);
  font-style: italic;
  color: var(--discret);
  padding: 0 2px;
}

.champ-formule {
  flex: 1;
  width: 0;
  min-width: 0;
  min-height: 40px;
  padding: 4px 10px;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--police-cellules);
  font-size: 1rem;
}

.champ-formule:focus,
.nom-cellule:focus {
  border-color: var(--accent);
  outline: none;
}

/* Les boutons ✓ et ✕ n'apparaissent que pendant la saisie. */
.barre-formule .outil-rond {
  display: none;
}

.en-edition .barre-formule .outil-rond {
  display: inline-grid;
}

/* --- Onglets des feuilles (en bas) ------------------------------------------- */

.onglets-feuilles {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  padding: 0 8px;
  background: var(--surface);
  border-top: 1px solid var(--trait);
}

.ajouter-feuille {
  flex: none;
  align-self: center;
  width: 40px;
  height: 36px;
  margin: 3px 0;
}

.liste-feuilles {
  display: flex;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.onglet-feuille {
  flex: none;
  max-width: 14em;
  min-height: 42px;
  padding: 6px 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  border-top: 3px solid transparent;
  background: transparent;
  color: var(--discret);
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
}

/* Zoom (à droite de la barre des onglets) : − 100 % + */
.zoom {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-left: 6px;
}

.bouton-zoom {
  width: 40px;
  height: 36px;
}

.bouton-zoom:disabled {
  opacity: 0.45;
  cursor: default;
}

.zoom-valeur {
  min-width: 4.4em;
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--texte);
  font-family: var(--police-entetes);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.zoom-valeur:hover {
  background: var(--survol);
}

.onglet-feuille:hover {
  color: var(--texte);
  background: var(--survol);
}

/* Feuille affichée : on la voit au premier coup d'œil. */
.onglet-feuille[aria-selected="true"] {
  color: var(--texte);
  font-weight: 700;
  background: var(--cellule);
  border-top-color: var(--accent);
}

/* --- Barre « Rechercher et remplacer » (sous la barre d'outils) ------------ */

.barre-recherche {
  display: grid;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--trait);
  background: var(--surface);
}

.barre-recherche[hidden] {
  display: none;
}

.recherche-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.recherche-champ {
  flex: 1 1 10em;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.recherche-etiquette {
  flex: none;
  width: 7.5em;
  color: var(--discret);
  font-size: 0.92rem;
}

.recherche-champ input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 4px 10px;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background: var(--fond);
  font-size: 1rem;
}

.recherche-champ input:focus {
  border-color: var(--accent);
  outline: none;
}

.recherche-compte {
  min-width: 7.5em;
  font-weight: 700;
  color: var(--discret);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.recherche-compte.aucun {
  color: var(--erreur);
}

.recherche-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  font-size: 0.92rem;
}

.recherche-options .case {
  min-height: 36px;
}

/* Téléphone : les étiquettes laissent la place aux champs (le texte gris
   dans le champ dit à quoi il sert). */
@media (max-width: 520px) {
  .recherche-etiquette {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .recherche-compte {
    min-width: 0;
  }

  .barre-recherche {
    padding: 6px 8px;
    gap: 4px;
  }

  .recherche-options {
    gap: 0 12px;
  }

  .recherche-options .case {
    min-height: 32px;
    gap: 6px;
  }

  .recherche-options .precision {
    display: none;
  }
}

.panneau-texte {
  margin: 0 0 8px;
}

/* --- Barre d'état (en bas) -------------------------------------------------- */

.barre-etat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding: 4px 12px;
  padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--trait);
  color: var(--discret);
  font-size: 0.88rem;
}

.message {
  min-width: 0;
  overflow: hidden;
  /* Deux lignes au maximum (utile sur téléphone pour lire l'explication). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.3;
}

.message.erreur {
  color: var(--erreur);
}

.statistiques {
  margin-left: auto;
  font-family: var(--police-entetes);
  white-space: nowrap;
}

.etat-sauvegarde {
  white-space: nowrap;
}

.etat-sauvegarde.erreur {
  color: var(--erreur);
}

/* Très petits téléphones : un peu plus de place pour le titre et les onglets. */
@media (max-width: 380px) {
  .marque {
    display: none;
  }
  .entete {
    gap: 6px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .onglet-outils {
    padding: 6px 7px;
    font-size: 0.9rem;
  }
}

@media (max-width: 520px) {
  .statistiques {
    display: none;
  }
  .nom-cellule {
    width: 5em;
    font-size: 0.85rem;
  }
  .fx {
    display: none;
  }
}