@font-face {
  font-family: "Lora";
  src: url("/polices/Lora-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/polices/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

/* Charte Lyksia, « L'Équilibre Végétal ». Le thème sombre n'est pas dans la charte :
   il est dérivé d'Eucalyptus pour les alertes consultées de nuit. */
:root {
  --page: #fdfbf7;
  --carte: #ffffff;
  --alt: #e8ece9;
  --filet: #d8dfda;
  --titre: #1e352f;
  --texte: #2c2c2c;
  --doux: #5c6b73;
  --sur-titre: #8c5a50;
  --ok: #7a9283;
  --doute: #d4a396;
  --doute-texte: #8c5a50;
  --panne: #c4362a;
  --inconnu: #5c6b73;
  --inverse: #1e352f;
  --sur-inverse: #fdfbf7;
  --inverse-doux: #d4a396;
  --action: #b85a3e;
  --action-appui: #a24e35;
  --sur-action: #ffffff;
  --contour: #7a9283;
  --badge-ok: #1e352f;
  --sur-badge-ok: #fdfbf7;
  --ombre: 0 2px 8px rgba(30, 53, 47, 0.06);
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #14211d;
    --carte: #1e352f;
    --alt: #233c35;
    --filet: #2f4a42;
    --titre: #fdfbf7;
    --texte: #e8ece9;
    --doux: #a9b8af;
    --sur-titre: #d4a396;
    --doute-texte: #d4a396;
    --panne: #f08a7d;
    --inconnu: #8d9ba0;
    --inverse: #2a443d;
    --badge-ok: #e8ece9;
    --sur-badge-ok: #1e352f;
    --ombre: none;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
}

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

body {
  background: var(--page);
  color: var(--texte);
  font: 400 16px/1.5 var(--sans);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#app {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-width: 640px;
  min-height: 100dvh;
}

.contenu {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: calc(env(safe-area-inset-top) + 28px) 20px 16px;
}

.motif-arcs {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgOTAwIDkwMCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN0E5MjgzIiBzdHJva2Utb3BhY2l0eT0iMC4zIiBzdHJva2Utd2lkdGg9IjEuNCI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjQ2Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iOTYiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIxNTAiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyMTAiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyNzgiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIzNTQiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI0MzgiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI1MzAiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI2MzIiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI3NDQiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4NjgiPjwvY2lyY2xlPjwvZz48L3N2Zz4=);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 520px 520px;
}

.entete {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block-end: 8px;
}

.sur-titre {
  color: var(--sur-titre);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sur-titre.discret {
  color: var(--doux);
}

.constat {
  color: var(--titre);
  font: 700 44px/1.08 var(--serif);
  letter-spacing: -0.02em;
}

.constat.doute {
  color: var(--doute-texte);
}

.constat.panne {
  color: var(--panne);
}

.secondaire {
  color: var(--doux);
  font-size: 14px;
  line-height: 1.5;
}

.bandeau {
  background: var(--alt);
  border-radius: 14px;
  color: var(--texte);
  font-size: 14px;
  padding: 12px 16px;
}

.bandeau.injoignable {
  margin: calc(env(safe-area-inset-top) + 12px) 20px 0;
}

[hidden] {
  display: none !important;
}

.carte {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: 20px;
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 24px;
}

.carte.alt {
  background: var(--alt);
  border-color: transparent;
}

.carte.inverse {
  background: var(--inverse);
  border-color: transparent;
  color: var(--sur-inverse);
}

.carte.inverse h2 {
  color: var(--sur-inverse);
}

.carte.inverse p {
  color: var(--inverse-doux);
  font-size: 14px;
}

.bloc {
  gap: 16px;
}

.bloc-court {
  gap: 6px;
}

h2 {
  color: var(--titre);
  font: 700 22px/1.2 var(--serif);
}

.groupe-titre {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.groupe-boutons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.groupes {
  gap: 2px;
  padding: 16px;
}

.groupe > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  list-style: none;
  min-height: 52px;
  padding-inline: 8px;
}

summary::-webkit-details-marker {
  display: none;
}

.compte {
  color: var(--doux);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.nom-fort {
  color: var(--titre);
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pastille {
  border-radius: 50%;
  display: inline-block;
  flex: none;
  height: 10px;
  width: 10px;
}

.pastille.ok {
  background: var(--ok);
}

.pastille.doute {
  background: var(--doute);
}

.pastille.panne {
  background: var(--panne);
}

.pastille.inconnu {
  background: var(--inconnu);
}

.liste-cibles {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0 8px 8px;
}

.ligne {
  align-items: center;
  display: flex;
  gap: 10px;
  min-height: 36px;
}

.nom {
  flex: 1;
  font-size: 14px;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail {
  color: var(--doux);
  font-size: 13px;
  white-space: nowrap;
}

.problemes,
.pannes-finies {
  gap: 18px;
}

.probleme,
.panne-finie {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panne-finie {
  gap: 10px;
}

.probleme-titre {
  align-items: center;
  display: flex;
  gap: 12px;
}

.probleme-titre h2 {
  flex: 1;
}

.badge {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  padding: 3px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge.eucalyptus {
  background: var(--badge-ok);
  color: var(--sur-badge-ok);
}

.badge.clay {
  background: #d4a396;
  color: #2c2c2c;
}

.badge.balisier {
  background: #c4362a;
  color: #ffffff;
}

.colonnes {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block-start: 6px;
}

.colonne {
  display: flex;
  flex-direction: column;
}

.legende {
  color: var(--doux);
  font-size: 12px;
}

.valeur {
  font-size: 14px;
}

.valeur.fort {
  color: var(--titre);
  font-weight: 600;
}

.valeur.fort.panne {
  color: var(--panne);
}

.onglets {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--page) 85%, transparent);
  bottom: 0;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 8px 16px calc(env(safe-area-inset-bottom) + 8px);
  position: sticky;
}

.onglet {
  align-items: center;
  border-radius: 999px;
  color: var(--doux);
  display: flex;
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
}

.onglet[aria-current="page"] {
  background: var(--inverse);
  color: var(--sur-inverse);
  font-weight: 600;
}

.etapes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-inline-start: 20px;
}

.bouton {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--titre);
  cursor: pointer;
  font: 600 16px/1 var(--sans);
  min-height: 44px;
  padding: 12px 24px;
  transition: background 140ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 100%;
}

.bouton.grand {
  font-size: 18px;
  padding: 16px 32px;
}

.bouton.principal {
  background: var(--action);
  border-color: var(--action);
  color: var(--sur-action);
}

.bouton.principal:not(:disabled):active {
  background: var(--action-appui);
}

.bouton.secondaire {
  border-color: var(--contour);
}

.bouton:not(:disabled):active {
  transform: translateY(1px);
}

.bouton:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.actions-discretes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.message {
  font-size: 14px;
}

.message:empty,
.erreur:empty {
  display: none;
}

.connexion {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgOTAwIDkwMCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN0E5MjgzIiBzdHJva2Utb3BhY2l0eT0iMC4yNCIgc3Ryb2tlLXdpZHRoPSIxLjQiPjxjaXJjbGUgY3g9IjkwMCIgY3k9IjkwMCIgcj0iNDYiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjkwMCIgY3k9IjkwMCIgcj0iOTYiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjkwMCIgY3k9IjkwMCIgcj0iMTUwIj48L2NpcmNsZT48Y2lyY2xlIGN4PSI5MDAiIGN5PSI5MDAiIHI9IjIxMCI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iOTAwIiBjeT0iOTAwIiByPSIyNzgiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjkwMCIgY3k9IjkwMCIgcj0iMzU0Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSI5MDAiIGN5PSI5MDAiIHI9IjQzOCI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iOTAwIiBjeT0iOTAwIiByPSI1MzAiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjkwMCIgY3k9IjkwMCIgcj0iNjMyIj48L2NpcmNsZT48Y2lyY2xlIGN4PSI5MDAiIGN5PSI5MDAiIHI9Ijc0NCI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iOTAwIiBjeT0iOTAwIiByPSI4NjgiPjwvY2lyY2xlPjwvZz48L3N2Zz4=);
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 620px 620px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 24px) 24px 48px;
}

.connexion .entete {
  gap: 12px;
  padding: 0;
}

.logo {
  height: 64px;
  width: 64px;
}

.accroche {
  color: var(--doux);
}

.connexion-formulaire {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.champ label {
  color: var(--titre);
  font-size: 14px;
  font-weight: 600;
}

.champ input {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: 14px;
  color: var(--texte);
  font: 400 16px/1.5 var(--sans);
  padding: 12px 16px;
  width: 100%;
}

.champ input:focus {
  border-color: var(--contour);
  box-shadow: 0 0 0 3px rgba(122, 146, 131, 0.18);
  outline: none;
}

.erreur {
  color: var(--panne);
  font-size: 14px;
}

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