/* Idées du foyer.
 *
 * On prend le comportement de la porte du frigo — on épingle, on regarde,
 * on décroche — jamais sa texture : ni aimant, ni papier, ni relief. Toute
 * la personnalité tient dans le ruban de statut et dans le surtitre.
 *
 * Aucun style en ligne nulle part : la page sert une CSP stricte
 * (style-src 'self'), et un attribut style serait bloqué en silence.
 */

:root {
  --papier: #FBF8F3;
  --encre:  #1C1B19;
  --craie:  #6E6A62;
  --sauge:  #5B7355;
  --brique: #B4553C;
  --trait:  #E5DFD4;

  /* La pile système : sur iPhone c'est SF. Une application posée sur
     l'écran d'accueil ne doit pas sembler étrangère à son téléphone. */
  --pile: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --gouttiere: 1rem;
  --touche: 44px;   /* la plus petite cible qu'un pouce trouve à coup sûr */

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #1A1917;
    --encre:  #F2EFE9;
    --craie:  #9A958C;
    --sauge:  #8CA885;
    --brique: #C97158;
    --trait:  #302E2A;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--pile);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* L'encoche et la barre d'accueil : la colonne s'arrête avant elles. */
main {
  max-width: 34rem;
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top) + 0.6rem)
    calc(env(safe-area-inset-right) + var(--gouttiere))
    calc(env(safe-area-inset-bottom) + 2.5rem)
    calc(env(safe-area-inset-left) + var(--gouttiere));
}

:focus-visible {
  outline: 2px solid var(--brique);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------- entête */

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--touche);
}

.entete h1 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* La recherche vit repliée derrière une loupe : on parcourt bien plus
   souvent qu'on ne cherche. Repliée en <details>, donc sans JavaScript —
   et dépliée d'office quand une recherche est en cours. */
.chercher { margin-left: auto; }

.chercher[open] {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.2rem 0 0;
}

.chercher[open] form { flex: 1 1 auto; margin: 0; }

.loupe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touche);
  height: var(--touche);
  margin-right: -0.6rem;
  color: var(--craie);
  cursor: pointer;
  list-style: none;
  border-radius: 999px;
}

.loupe::-webkit-details-marker { display: none; }
.chercher[open] .loupe { margin-right: 0; margin-left: -0.6rem; }

.chercher input[type="search"] {
  width: 100%;
  min-height: var(--touche);
  padding: 0 0.75rem;
  font: inherit;
  color: var(--encre);
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
}

/* --------------------------------------------------------------- filtres */

.filtres {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--gouttiere));
  padding: 0.6rem var(--gouttiere) 0.9rem;
}

.filtres::-webkit-scrollbar { display: none; }

.filtre {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--touche);
  padding: 0 0.85rem;
  font-size: 0.9rem;
  color: var(--craie);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--trait);
  border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.filtre--actif {
  color: var(--papier);
  background: var(--encre);
  border-color: var(--encre);
}

/* --------------------------------------------------------------- cartes */

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

.carte {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--trait);
}

.carte:last-child { border-bottom: 1px solid var(--trait); }

/* Le ruban : 3 px au bord gauche, et une cible de 44 px autour de lui.
   La barre visible est le ::before ; le bouton, lui, est aussi haut que la
   carte et assez large pour un pouce. */
.ruban-forme {
  flex: 0 0 var(--touche);
  display: flex;
  margin: 0;
}

.ruban {
  position: relative;
  width: var(--touche);
  min-height: var(--touche);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ruban::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  bottom: 0.9rem;
  left: 0;
  width: 3px;
  border-radius: 2px;
}

/* rien n'a encore été décidé : un contour, creux */
.ruban--to_explore::before { box-shadow: inset 0 0 0 1px var(--craie); }

/* on la garde */
.ruban--kept::before { background: var(--sauge); }

/* c'est fait */
.ruban--done::before { background: var(--craie); }

/* le worker travaille encore : des pointillés */
.ruban--pending::before {
  background-image: repeating-linear-gradient(
    to bottom, var(--craie) 0 3px, transparent 3px 7px);
}

/* on laisse, ou c'est rangé : présent, mais ne demande rien */
.ruban--dropped::before,
.ruban--archived::before { box-shadow: inset 0 0 0 1px var(--trait); }

.carte-corps {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.85rem 0.25rem 0.85rem 0;
  color: inherit;
  text-decoration: none;
}

/* Surtitre, pas pastille : une pastille par catégorie transforme une liste
   en soupe colorée, et la couleur ne dit alors plus rien du statut. */
.surtitre {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--sauge);
}

.titre {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.25;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.meta {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--craie);
}

.carte--done .titre {
  color: var(--craie);
  text-decoration: line-through;
}

/* Écartée volontairement : la grande image d'en-tête. Beaucoup d'idées n'en
   ont pas, et l'usage est de parcourir. Un carré de 64 px, ou rien. */
.vignette {
  flex: 0 0 auto;
  align-self: center;
  width: 64px;
  height: 64px;
  margin-left: 0.75rem;
  object-fit: cover;
  border-radius: 6px;
  background: var(--trait);
}

/* L'accusé de réception d'une suppression : une ligne, à sa place dans le
   flux, au-dessus des cartes. Pas une bannière — on vient voir des idées. */
.avis {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  color: var(--craie);
}

.vide {
  margin: 3.5rem 0;
  color: var(--craie);
  line-height: 1.7;
  text-align: center;
}

/* Le seul chemin vers les idées au-delà de la première page : il doit se
   voir et se laisser toucher au pouce, comme un filtre. */
.plus {
  margin: 1.4rem 0 0;
  text-align: center;
}

.plus-anciennes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touche);
  padding: 0 1.1rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--craie);
  text-decoration: none;
}

/* ----------------------------------------------------------------- fiche */

.retour { margin: 0 0 0.4rem; }

.retour a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touche);
  font-size: 0.92rem;
  color: var(--craie);
  text-decoration: none;
}

.titre--grand {
  margin: 0.1rem 0 0;
  font-size: 1.6rem;
  line-height: 1.2;
}

.resume { margin: 0.6rem 0 0; color: var(--craie); }

.bande {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 1.2rem calc(-1 * var(--gouttiere)) 0;
  padding: 0 var(--gouttiere) 0.4rem;
}

.bande::-webkit-scrollbar { display: none; }

.bande img {
  flex: 0 0 auto;
  width: auto;
  max-width: 86%;
  height: 12rem;
  object-fit: cover;
  border-radius: 8px;
  background: var(--trait);
}

.source { margin: 1.2rem 0 0; }
.source a { color: var(--brique); }

.details { margin: 1.3rem 0 0; padding: 0; font-size: 0.95rem; }

.details dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--sauge);
}

.details dd { margin: 0 0 0.7rem; }

.statuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.8rem 0 0;
}

.statuts form { margin: 0; }

.statut {
  display: inline-flex;
  align-items: center;
  min-height: var(--touche);
  padding: 0 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--craie);
  background: none;
  border: 1px solid var(--trait);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.statut--actuel {
  color: var(--papier);
  background: var(--sauge);
  border-color: var(--sauge);
}

/* Requalifier : une rangée, le libellé au-dessus. Les deux commandes se
   touchent le pouce — 44 px chacune — et restent dans le flux : rien n'est
   sorti du flux sur cette page hormis la visionneuse, donc rien ne peut en
   recouvrir une autre. C'est la leçon du 2026-08-26, où une zone tactile
   voisine avalait la croix de fermeture. */
.requalifier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
}

.requalifier-nom {
  flex: 0 0 100%;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--sauge);
}

.requalifier-choix {
  flex: 1 1 10rem;
  min-height: var(--touche);
  padding: 0 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 10px;
}

.requalifier-valider {
  display: inline-flex;
  align-items: center;
  min-height: var(--touche);
  padding: 0 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--craie);
  background: none;
  border: 1px solid var(--trait);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.origine {
  margin: 1.8rem 0 0;
  padding: 0 0 0 0.9rem;
  font-size: 0.95rem;
  color: var(--craie);
  border-left: 3px solid var(--trait);
}

/* --------------------------------------------------------- porte et code */

.porte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  min-height: 70vh;
  text-align: center;
}

.porte form { margin: 0; }

.mot {
  max-width: 22rem;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
}

.refus { margin: 0; color: var(--brique); }

/* La ligne qui dit à quoi sert le code qu'on est en train de choisir.
   Sous le titre, plus discrète que lui, et sans s'excuser. */
.glose {
  max-width: 22rem;
  margin: -0.5rem 0 0;
  font-size: 0.92rem;
  color: var(--craie);
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touche);
  padding: 0 1.4rem;
  font: inherit;
  font-weight: 600;
  color: var(--papier);
  background: var(--sauge);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.code-forme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Un champ et le mot qui le nomme. Le mot reprend le surtitre en sauge de
   la liste : c'est la même façon de nommer une chose sans hausser la voix. */
.champ {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.champ-nom {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--sauge);
}

.code-champ {
  width: 6ch;
  padding: 0.3rem 0;
  font: inherit;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4em;
  text-align: center;
  text-indent: 0.4em;
  color: var(--encre);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--trait);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* -------------------------------------------------------------- secours */

/* Les gestes de secours : l'oubli du code, le téléphone perdu, la
   déconnexion. On les cherche rarement et on doit les trouver alors ; ils
   ne demandent rien le reste du temps. D'où la craie, un texte plus petit,
   aucune bordure — et malgré tout 44 px de haut, parce qu'un pouce qui
   déconnecte un téléphone ne doit pas viser deux fois.

   Ce sont des boutons, et non des liens, parce que ce sont des POST : un
   lien de déconnexion serait suivi par le premier préchargeur venu. */

.secours {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  margin-top: 0.4rem;
}

/* Sous la liste, détachée d'elle : on n'y arrive qu'en descendant. */
.sortie {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0 0;
}

.sobre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touche);
  padding: 0 0.7rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--craie);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease;
}

/* ------------------------------------------------------------ le confort */

@media (hover: hover) {
  .filtre:hover,
  .requalifier-valider:hover,
  .statut:hover { color: var(--encre); border-color: var(--craie); }
  .filtre--actif:hover { color: var(--papier); }
  .bouton:hover { opacity: 0.92; }
  .sobre:hover { color: var(--encre); }
  .loupe:hover { color: var(--encre); }
}

@media (min-width: 640px) {
  main { padding-top: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* La déconnexion se replie : nue sous la dernière carte, elle tombait où le
   pouce retombe après le défilement, et a été pressée deux fois par accident
   le soir de la mise en service. Le repli natif de <details> suffit — la CSP
   interdit le script en ligne. */
.sortie > summary,
.suppression > summary {
  list-style: none;
  cursor: pointer;
}
.sortie > summary::-webkit-details-marker,
.suppression > summary::-webkit-details-marker { display: none; }
.sortie[open] > summary,
.suppression[open] > summary { color: var(--craie); }

/* La suppression de la fiche : même repli en deux temps que la déconnexion,
   en colonne parce que le second temps a une phrase à dire avant son bouton.
   Dans le flux, comme tout le reste de la fiche. */
.suppression {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2.5rem 0 0;
}

.suppression-avis {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  color: var(--craie);
  text-align: center;
}
.sobre--confirme {
  color: var(--brique);
  margin-top: .25rem;
}

/* ---- La visionneuse ----------------------------------------------------
   Ouverte par `:target`, donc sans script : cliquer une photo, passer à la
   suivante et fermer sont trois liens. Le geste « retour » du téléphone
   referme, puisque chaque ouverture est une entrée d'historique.

   `display: none` sur `.visionneuse` est délibéré et sans danger pour le
   balayage négatif de la feuille : ce n'est pas un porteur, et c'est
   précisément l'état fermé.                                              */
.visionneuse {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #0d0c0bf2;
  align-items: center;
  justify-content: center;
  /* L'encoche et la barre d'accueil : sans ça, la croix passe dessous. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.visionneuse:target { display: flex; }

/* Le fond est un lien à part entière, en dessous de tout le reste :
   toucher à côté de la photo referme, comme on s'y attend. */
.visionneuse-fond {
  position: absolute;
  inset: 0;
}

.visionneuse > img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.visionneuse-fermer,
.visionneuse-pas {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touche);
  min-height: var(--touche);
  color: #f2efe9;
  text-decoration: none;
  font-size: 1.6rem;
  line-height: 1;
  border-radius: 999px;
  background: #1a1917a6;
}

/* Ces deux mesures sont liées, et le test `test_la_croix_n_est_pas_avalee`
   tient ce lien : les pas commencent SOUS la croix.

   Défaut constaté en production le 2026-08-26 : les pas occupaient toute la
   hauteur sur 22 % de largeur, donc la croix (44 px à 0,6rem du bord) tombait
   entièrement dans la bande « suivante ». Et comme les pas viennent après elle
   dans le gabarit, ils se peignaient par-dessus : cliquer la croix passait à
   la photo suivante au lieu de fermer. Les tests vérifiaient que le lien de
   fermeture EXISTAIT, jamais qu'il était atteignable.

   On dégage les coins plutôt que d'empiler des `z-index` : une géométrie qui
   ne se recouvre pas se raisonne et se teste, un ordre de peinture non. */
:root {
  --visionneuse-marge: 0.6rem;
  --visionneuse-haut-pas: 4.5rem;   /* > marge + --touche */
  --visionneuse-bas-pas: 3.5rem;    /* > --visionneuse-bas-compte */
  --visionneuse-bas-compte: 0.9rem;
}

.visionneuse-fermer {
  top: calc(env(safe-area-inset-top) + var(--visionneuse-marge));
  right: calc(env(safe-area-inset-right) + var(--visionneuse-marge));
  font-size: 1.1rem;
  z-index: 2;
}

/* Les pas restent hauts — au pouce on vise un bord, pas une cible de 44 px
   perdue au milieu — mais ils s'arrêtent avant la croix et avant le
   compteur. Le fond reste cliquable entre les deux. */
.visionneuse-pas {
  top: var(--visionneuse-haut-pas);
  bottom: var(--visionneuse-bas-pas);
  width: 22%;
  min-width: var(--touche);
  border-radius: 0;
  background: transparent;
  font-size: 2.4rem;
  z-index: 1;
}

.visionneuse-pas--avant { left: 0; justify-content: flex-start; padding-left: 0.5rem; }
.visionneuse-pas--apres { right: 0; justify-content: flex-end; padding-right: 0.5rem; }

/* Le compteur se pose SUR la photo : sans fond, il disparaît dès qu'une
   image est claire à cet endroit — vérifié sur une photo réelle du foyer.
   Une pastille plutôt qu'une bande pleine largeur, qui masquerait le bas
   de l'image pour un texte de cinq caractères. */
.visionneuse-compte {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + var(--visionneuse-bas-compte));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: #1a1917d9;
  color: #d8d3ca;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .visionneuse-compte { transition: none; }
}

/* La bande : la photo devient un bouton, elle doit le dire. */
.agrandir {
  display: block;
  flex: 0 0 auto;
  border-radius: 8px;
}

.agrandir:focus-visible { outline: 2px solid var(--sauge); outline-offset: 3px; }