/* Charte de la zone parent du Pixel : papier, encre, cartes arrondies et
   séparateurs fins, façon Réglages iPhone. Mobile d'abord : la console se
   lit sur l'iPhone de Benoît, et s'élargit sans effort sur le Mac.

   Trois regles tactiles s'ajoutent a la charte, sans la changer : rien sous
   l'encoche ni sous la barre d'accueil, rien a viser sous 44 px, et la
   navigation sous le pouce des que l'ecran est etroit. */

:root {
  /* Les deux schemas existent : sans ca les champs et les ascenseurs que le
     systeme dessine resteraient clairs sur une page sombre. */
  color-scheme: light dark;

  --papier: #F2F1EC;
  --carte: #FFFFFF;
  --encre: #1C1C1E;
  --gris: #6E6E73;
  --trait: rgba(60, 60, 67, 0.29);
  --accent: #1C1C1E;
  --alerte: #B3261E;
  /* Fond de l'onglet courant : un gris translucide, lisible aussi bien sur
     le papier que sur une carte, de jour comme de nuit. */
  --pastille: rgba(60, 60, 67, 0.10);

  /* Les marges du materiel. Nulles sur le Mac ; l'encoche, la barre
     d'accueil et, en paysage, les bords arrondis de l'iPhone une fois la
     console ajoutee a l'ecran d'accueil (`viewport-fit=cover`). Nommees ici
     une fois pour toutes : le reste de la feuille ne parle plus que de
     `--haut`, `--bas`, `--gauche`, `--droite`. */
  --haut: env(safe-area-inset-top, 0px);
  --bas: env(safe-area-inset-bottom, 0px);
  --gauche: env(safe-area-inset-left, 0px);
  --droite: env(safe-area-inset-right, 0px);
}

/* La nuit, meme charte : un papier sombre et des cartes a peine plus
   claires, comme les Reglages iPhone — jamais du noir pur, qui ferait
   flotter les cartes. Seuls les huit tons changent, pas une regle. */
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #1C1C1E;
    --carte: #2C2C2E;
    --encre: #F2F1EC;
    --gris: #9B9BA1;
    --trait: rgba(84, 84, 88, 0.70);
    --accent: #F2F1EC;
    --alerte: #FF7A6E;
    --pastille: rgba(235, 235, 245, 0.16);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding:
    var(--haut)
    calc(16px + var(--droite))
    calc(48px + var(--bas))
    calc(16px + var(--gauche));
  background: var(--papier);
  color: var(--encre);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Un numero, un paquet ou un lien trop long revient a la ligne au lieu
     de pousser toute la page de cote. */
  overflow-wrap: break-word;
  max-width: 44rem;
}

.entete h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 24px 4px 12px;
}

h2 {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris);
  margin: 0 0 8px 4px;
}

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

.carte {
  background: var(--carte);
  border-radius: 18px;
  padding: 14px 16px;
  margin: 0 0 20px;
}

.liste { list-style: none; margin: 0; padding: 0; }

.ligne { padding: 10px 0; border-bottom: 0.5px solid var(--trait); }
.ligne:last-child, .liste .ligne:last-child { border-bottom: none; }

.titre { font-weight: 600; }
.detail { color: var(--gris); font-size: 0.88rem; }

blockquote {
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--trait);
  color: var(--encre);
}

/* Huit chiffres tres espaces : la taille suit la largeur de l'ecran pour
   qu'ils tiennent sur une ligne meme sur le plus etroit des iPhone. */
.code {
  font: 700 clamp(1.4rem, 9vw, 2rem)/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  overflow-wrap: anywhere;
  margin: 4px 0 8px;
}

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

label {
  display: block;
  margin: 12px 0;
  color: var(--gris);
  font-size: 0.88rem;
}

input {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 11px 12px;
  border: 0.5px solid var(--trait);
  border-radius: 12px;
  background: var(--papier);
  color: var(--encre);
  font-size: 17px; /* 17 px au moins : sinon Safari iOS zoome à la saisie */
}

button {
  appearance: none;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: var(--papier);
  min-height: 44px; /* la cible tactile la plus petite qui se vise sans rater */
  padding: 12px 18px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}

button.discret {
  background: var(--carte);
  color: var(--alerte);
  border: 0.5px solid var(--trait);
}

button.lien {
  display: inline-flex;
  align-items: center;
  background: none;
  color: var(--gris);
  font-weight: 400;
  padding: 0;
}

.boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

progress {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 8px;
  border: none;
  border-radius: 4px;
  background: var(--trait);
  accent-color: var(--accent);
}

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.filtres a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--carte);
  border-radius: 999px;
  padding: 0 16px;
  font-size: 0.88rem;
  text-decoration: none;
}

.filtres a.actif { background: var(--accent); color: var(--papier); }

/* La photo d'une alerte est ce qu'on vient voir : elle prend toute la
   largeur de la carte sur le telephone, et s'arrete la sur le Mac. */
.photo img {
  display: block;
  margin-top: 8px;
  width: 100%;
  max-width: 30rem;
  border-radius: 12px;
}

details summary {
  color: var(--gris);
  font-size: 0.88rem;
  cursor: pointer;
  padding: 12px 0;
}

/* Les liens au fil d'une phrase — le titre d'une demande, « Tout le
   journal » — ne bougent pas d'un pixel a l'ecran : la marge negative
   reprend exactement ce que le remplissage ajoute. Seule la zone a viser
   grandit, jusqu'aux 44 px. */
.titre a, .detail a {
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}

.barre {
  display: flex;
  gap: 8px;
  padding: 12px 4px;
  border-top: 0.5px solid var(--trait);
}

.barre a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 12px;
  color: var(--gris);
  font-size: 0.85rem;
  text-decoration: none;
}

.barre a.actif {
  background: var(--pastille);
  color: var(--encre);
  font-weight: 600;
}

.pied {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4px 4px 0;
}

.pied a, .pied button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--gris);
  font-size: 0.88rem;
  text-decoration: none;
}

/* Telephone : la navigation descend sous le pouce, fixee en bas et posee
   au-dessus de la barre d'accueil. Le bas du contenu recule d'autant :
   sinon la derniere carte finirait cachee dessous. Sur le Mac, rien de
   tout cela : la barre reste une rangee en fin de page. */
@media (max-width: 600px) {
  body { padding-bottom: calc(76px + var(--bas)); }

  /* Le Oui et le Non d'une demande de Lucas se partagent la ligne et
     prennent toute la largeur de la carte : impossibles a manquer au
     pouce. Sur le Mac ils gardent leur taille d'avant. */
  .boutons button { flex: 1 1 6rem; }

  .barre {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    gap: 4px;
    padding:
      6px
      calc(8px + var(--droite))
      calc(6px + var(--bas))
      calc(8px + var(--gauche));
    background: var(--carte);
  }
}