/*
  Palette : --bg / --mustard / --green suffisent à changer toute l'identité
  visuelle du site. Autrefois pilotées par hugo.toml et injectées en inline
  par page (nécessaire avant l'abandon de Hugo, docs/decisions/0001) ; plus
  besoin maintenant qu'un seul moteur de rendu (html/template) sert tout le
  site — définies ici une bonne fois, ça évite en plus un <style> inline par
  page dans le Content-Security-Policy (internal/httpserver/headers.go).
  Les tons neutres ci-dessous (encre, texte atténué, contraste sur vert)
  restent fixes : ils doivent rester lisibles quelle que soit la palette choisie.
*/
:root{
  --bg: #F6EFE0;
  --mustard: #E4C14A;
  --green: #1F3A2E;
  --ink: oklch(20% 0.02 90);
  --muted: oklch(45% 0.02 90);
  --green-contrast: oklch(97% 0.01 90);
  --line: color-mix(in oklab, var(--green) 22%, transparent);
}

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

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3{ font-family: "Archivo Black", sans-serif; font-weight: 400; margin: 0; }

a{ color: var(--green); }
a:hover{ color: color-mix(in oklab, var(--green) 70%, black); }

.label{
  font: 700 11px/1 "Archivo", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.container{
  max-width: 640px;
  margin: 0 auto;
  padding: 22px 20px 40px;
}

/* Bandeau vert (en-tête de site + en-tête de fiche) */
.band{
  background: var(--green);
  color: var(--green-contrast);
  padding: 26px 20px 30px;
}
.band .container{ padding: 0; max-width: 640px; margin: 0 auto; }

.site-header{
  background: var(--green);
  color: var(--green-contrast);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__brand{
  font: 400 22px/1 "Archivo Black", sans-serif;
  color: var(--green-contrast);
  text-decoration: none;
}
.site-header__nav a{
  color: var(--green-contrast);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  opacity: .9;
}
.site-header__nav a:hover{ opacity: 1; }

.site-footer{
  text-align: center;
  padding: 24px 20px 40px;
  font-size: 13px;
  color: var(--muted);
}

/* Badges / statut */
.badge{
  display: inline-block;
  font: 700 11px/1 "Archivo", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--mustard);
  color: var(--green);
  padding: 6px 10px;
  border-radius: 3px;
}

/* Chips (paires label/valeur : robe, caractère, signes particuliers) */
.chip{
  background: var(--ink);
  color: var(--bg);
  border-radius: 6px;
  padding: 10px 12px;
}
.chip-label{
  font: 700 10px/1 "Archivo", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
}
.chip-value{ font-size: 13.5px; margin-top: 4px; font-weight: 600; }
.chip-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.chip-row > .chip{ flex: 1; min-width: 120px; }

/* Pills (foyers référents / chats d'un foyer) */
.pill{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--green);
  color: var(--green-contrast);
  border-radius: 100px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.pill:hover{ color: var(--green-contrast); opacity: .9; }
.pill svg{ flex-shrink: 0; }
.pill-list{ display: flex; flex-direction: column; gap: 8px; }

/* Photos de fiche chat */
.cat-photos{ display: flex; gap: 18px; justify-content: center; margin: 22px 0; }
.cat-photo{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cat-photo__frame{
  width: 120px; height: 120px; border-radius: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--green); overflow: hidden;
}
.cat-photo__frame img{ width: 100%; height: 100%; object-fit: cover; }
.cat-photo__frame--loin{ border: 5px solid var(--mustard); opacity: .85; }
.cat-photo__frame--pres{ border: 5px solid var(--green); }
.cat-photo__frame svg{ opacity: .5; }

.photo-gallery{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.photo-gallery__thumb{
  width: 70px; height: 70px; flex-shrink: 0; border-radius: 10px;
  background: var(--ink); opacity: .16; overflow: hidden;
}
.photo-gallery__thumb img{ width: 100%; height: 100%; object-fit: cover; }

/* Contact foyer */
.contact-buttons{ display: flex; gap: 8px; }
.contact-buttons .chip{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.contact-buttons .chip span{ font-size: 11.5px; font-weight: 600; }

/* Avatar foyer */
.household-header{ display: flex; align-items: center; gap: 16px; }
.household-avatar{
  width: 76px; height: 76px; border-radius: 100%; border: 4px solid var(--mustard);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--mustard); opacity: .9; overflow: hidden;
}
.household-avatar img{ width: 100%; height: 100%; object-fit: cover; }

/* Grilles de liste (accueil, page Foyers) */
.cards-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.card{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
}
.card:hover{ border-color: var(--green); }
.card__thumb{
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--ink);
  opacity: .16;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  overflow: hidden;
}
.card__thumb img{ width: 100%; height: 100%; object-fit: cover; opacity: 1 !important; }
.card__thumb svg{ opacity: .6; }
.card__name{ font-size: 14.5px; font-weight: 700; }

.section-title{ margin: 0 0 14px; font-size: 20px; }

@media (min-width: 560px){
  .cards-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Formulaires (connexion, invitation, réinitialisation...) */
.form{ display: flex; flex-direction: column; gap: 16px; max-width: 400px; }
.field{ display: flex; flex-direction: column; gap: 6px; }
.field label{ font-size: 13px; font-weight: 600; }
.field input, .field textarea, .field select{
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--ink);
  resize: vertical;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline: 2px solid var(--green); outline-offset: 1px; }
.field input[type="file"]{ padding: 6px 0; border: none; }

.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 14px/1 "Archivo", sans-serif;
  padding: 12px 18px;
  border-radius: 100px;
  border: none;
  background: var(--green);
  color: var(--green-contrast);
  cursor: pointer;
  text-decoration: none;
}
.button:hover{ background: color-mix(in oklab, var(--green) 85%, black); color: var(--green-contrast); }

.form-error{
  background: color-mix(in oklab, var(--green) 8%, white);
  border: 1px solid var(--green);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13.5px;
}
.form-note{ font-size: 13px; color: var(--muted); }