:root {
  /* Blanc pur + nuances de teal (charte demandée), accent chaud corail
     conservé pour les avertissements ("à ne pas faire") : tout en teal
     aurait fait perdre le signal d'alerte. */
  --paper: #FFFFFF;
  --paper-soft: #EAF4F3;
  --ink: #4A4038;
  --ink-soft: #6C6258;
  --line: #D3E5E2;
  --forest: #166B5E;
  --terracotta: #A84E32;
  /* Teinte corail très diluée : pour faire ressortir un bloc daté ou
     ponctuel (ex. carte PIAF) sans virer à l'alerte. */
  --highlight-bg: #FBEDE1;
  --highlight-line: #EED9C7;
  --border-soft: 1px solid var(--line);
  /* Deux rayons d'arrondi choisis, pas un par composant : les gros blocs
     respirent (--radius), les éléments imbriqués sont plus resserrés
     (--radius-sm). Les formes en pilule (boutons, badges) utilisent 999px. */
  --radius: 20px;
  --radius-sm: 10px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* --page-ground est pose en style inline par build.js sur les fiches et les
     pages de categorie : une version tres diluee de la couleur de la famille.
     Les .card-block restent blancs et se detachent alors comme des cartes, au
     lieu de se confondre avec la page. Absent ailleurs -> blanc. */
  background: var(--page-ground, var(--paper));
  color: var(--ink);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  font-weight: 600;
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

.hidden { display: none !important; }


.beta-banner {
  background: #FBF0D9;
  border-bottom: 1px solid #EDDBAE;
}
.beta-banner a {
  color: var(--forest);
  font-weight: 700;
  text-decoration: underline;
}
.beta-banner p {
  margin-top: 0;
  margin-bottom: 0;
  padding: 10px 48px;
  position: relative;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
}
.beta-banner button {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  /* Le glyphe fait 13 px de large : la croix mesurait 21 x 24, sous le minimum
     de 24 x 24 exige par WCAG 2.5.8. On lui donne une vraie cible carree sans
     changer sa taille apparente. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
}
.beta-banner button:hover { color: var(--ink); }

/* Header */
/* L'en-tete est l'etage de l'identite : le nom du site et la regle d'or, qui
   s'affichent tous deux sur TOUTES les pages. Il reste blanc partout et se
   ferme par un filet, meme quand le contenu en dessous est sur fond teinte :
   c'est ce filet qui dit ou finit le site et ou commence la page. */
.site-header {
  padding: 40px 0 26px;
  text-align: center;
  background: var(--paper);
  border-bottom: var(--border-soft);
}
.site-header .golden-rule {
  margin: 16px auto 0;
}
.brand {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  /* Sur une fiche, ce titre devient l'espèce ("J'ai trouvé une chouette, un
     hibou ou un rapace") : il peut passer sur deux lignes, on les équilibre. */
  line-height: 1.15;
  text-wrap: balance;
}
.tagline {
  margin: 10px 0 0;
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.brand-link {
  color: inherit;
  text-decoration: none;
}

/* ATTENTION au selecteur. `main { padding }` ne s'applique JAMAIS : <main>
   porte toujours une classe (.wrap ou .bands), et .wrap { padding: 0 20px }
   l'emporte sur un selecteur d'element. La regle est donc posee sur main.wrap.

   Cet espace n'etait pas necessaire tant que la regle d'or ouvrait <main> avec
   sa marge. Depuis qu'elle est remontee dans l'en-tete, le premier element de
   la page se retrouvait colle au filet de l'en-tete. */
main.wrap {
  padding-top: 20px;
}

.golden-rule {
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--paper-soft);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  margin: 4px auto 28px;
  max-width: 480px;
}
.golden-rule strong {
  /* Sur son propre niveau : la consigne d'abord, le « pourquoi » en dessous. */
  display: block;
  color: var(--ink);
}

.section-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 28px;
}

.home-intro {
  text-align: center;
  color: var(--ink-soft);
  margin: -18px 0 24px;
}

.search-wrap {
  max-width: 420px;
  margin: 0 auto 8px;
}
.animal-search {
  width: 100%;
  font-family: inherit;
  font-size: 0.98rem;
  padding: 12px 18px;
  border: var(--border-soft);
  border-radius: var(--radius-pill);
  background: white;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(74, 64, 56, 0.05);
}
.animal-search:focus {
  outline: none;
  border-color: var(--forest);
}
.animal-search::placeholder { color: var(--ink-soft); }

.home-search-form {
  display: flex;
  gap: 8px;
}
/* Fond clair volontaire : l'emoji 🔍 garde ses propres couleurs (gris-bleu
   foncé) quoi qu'on mette en `color`, il devenait donc illisible sur le vert
   foncé. Le fond pâle et la bordure reprennent ceux du champ de recherche,
   pour que les deux se lisent comme un seul contrôle. */
.search-submit {
  flex-shrink: 0;
  width: 46px;
  font-size: 1.05rem;
  background: var(--paper-soft);
  border: var(--border-soft);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.search-submit:hover {
  background: white;
  border-color: var(--forest);
}

.see-all-wrap {
  text-align: center;
  margin: 8px 0 4px;
}
.see-all-btn {
  display: inline-block;
  padding: 12px 22px;
  background: var(--paper-soft);
  border-radius: var(--radius-pill);
  color: var(--forest);
  font-weight: 700;
  font-size: 0.94rem;
  text-decoration: none;
}
.see-all-btn:hover { text-decoration: underline; }

.search-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 480px;
  margin: 0 auto 24px;
}

/* Compteur de résultats (animaux.html), juste sous le champ : « 12 espèces »,
   « 1 espèce » ou « Aucune espèce ne correspond ». C'est le seul retour visible
   quand la grille passe sous la ligne de flottaison (mobile, clavier ouvert).
   Vide, il se replie complètement pour ne pas écarter les filtres du champ. */
.search-count {
  min-height: 1.4em;
  margin: 6px 0 16px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--forest);
}
.search-count:empty {
  min-height: 0;
  margin: 0;
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto 28px;
}
.category-filter,
.category-link {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cat-color, var(--ink-soft));
  background: var(--cat-bg, var(--paper-soft));
  border: var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  cursor: pointer;
}
.category-filter.active {
  color: white;
  background: var(--forest);
  border-color: var(--forest);
}
/* Même pastille que les filtres, mais c'est un lien : pas de soulignement, et
   une cible tactile un peu plus haute puisqu'on la vise sur mobile en urgence. */
.category-link {
  display: inline-block;
  text-decoration: none;
  padding: 10px 16px;
}
.category-link:hover { text-decoration: underline; }

/* Grid of animal cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.animal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border: var(--border-soft);
  border-radius: var(--radius);
  padding: 22px 14px 20px;
  box-shadow: 0 2px 10px rgba(74, 64, 56, 0.06);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.2s ease, transform 0.2s ease;
  font-family: inherit;
}
/* Effet "bulle" à l'entrée/sortie du filtre (catégorie ou recherche),
   voir search.js pour la logique d'animation (technique FLIP). */
.animal-card.card-leaving {
  opacity: 0;
  transform: scale(0.55) translateY(-8px);
  pointer-events: none;
}
.animal-card.card-entering {
  opacity: 0;
  transform: scale(0.55) translateY(8px);
}
.animal-card:hover, .animal-card:focus-visible {
  box-shadow: 0 4px 14px rgba(74, 64, 56, 0.08);
  border-color: var(--card-color, var(--forest));
}
.icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper-soft);
  line-height: 1;
}
.icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.animal-card .icon-wrap {
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.animal-card:hover .icon-wrap {
  transform: scale(1.08);
}

/* Accueil simplifié : moins de cartes, plus grandes, pour mettre en valeur les
   illustrations de Sophie (voir buildHome). Les dessins sont détaillés, ils ont
   besoin de place pour être lisibles — d'où un cercle nettement plus grand que
   les icônes provisoires. */
.grid-illustrated {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid-illustrated .animal-card .icon-wrap {
  width: 136px;
  height: 136px;
}
/* En-tête de fiche d'un animal illustré : même taille de cercle que sur
   l'accueil. Sélecteur à double classe pour passer devant
   `.detail-header .icon-wrap`. */
.detail-header .icon-wrap.icon-wrap-drawing {
  width: 136px;
  height: 136px;
}
.animal-card .name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  line-height: 1.3;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}
.animal-card .category-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cat-color, var(--ink-soft));
  background: var(--cat-bg, var(--paper-soft));
  border-radius: var(--radius-pill);
}
.animal-card .subtitle {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Detail view */
.back-btn {
  display: inline-block;
  background: none;
  border: none;
  color: var(--forest);
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 0 22px;
  font-family: inherit;
  text-decoration: none;
}
.back-btn:hover { text-decoration: underline; }

/* Barre haut de fiche : retour à gauche, partager à droite. Le bouton
   Partager est surtout là pour la PWA (display: standalone), sans barre
   d'adresse ni menu de partage du navigateur. Voir share.js. */
.detail-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.detail-top .back-btn { padding-bottom: 10px; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--forest);
  background: var(--paper-soft);
  border: var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  /* 44 px : cible tactile confortable a une main, sur un site qu'on consulte
     souvent avec un animal dans l'autre. Le bouton mesurait 34 px. */
  min-height: 44px;
  cursor: pointer;
}
.share-btn:hover { background: white; border-color: var(--forest); }
.share-btn svg { width: 15px; height: 15px; }

.quick-contact {
  display: inline-block;
  margin: 4px 0 20px;
  padding: 11px 16px;
  background: var(--paper-soft);
  border-radius: var(--radius-pill);
  color: var(--forest);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.quick-contact:hover { text-decoration: underline; }

.stage-picker h2 {
  color: var(--ink);
  margin-bottom: 14px;
}
.stage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.stage-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--paper-soft);
  border: var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  cursor: pointer;
}
.stage-icon {
  line-height: 1;
  filter: grayscale(1) opacity(0.55);
}
.stage-tab.active .stage-icon {
  filter: none;
}
.stage-icon.stage-icon-sm { font-size: 0.75rem; }
.stage-icon.stage-icon-md { font-size: 0.95rem; }
.stage-icon.stage-icon-lg { font-size: 1.2rem; }
.stage-tab.active {
  color: white;
  background: var(--forest);
  border-color: var(--forest);
}
.stage-panel {
  display: none;
  margin: 14px 0 0;
  line-height: 1.55;
}
.stage-panel.active {
  display: block;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 6px;
}
.detail-header .icon-wrap {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}
.detail-header h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
  text-wrap: balance;
}
.detail-header .subtitle {
  color: var(--ink-soft);
  margin: 4px 0 0;
  font-family: inherit;
}

.card-block {
  background: white;
  border: var(--border-soft);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 18px 0;
}
.card-block h2 {
  margin: 0 0 14px;
  font-size: 1.08rem;
}

/* Code couleur "feu tricolore" pour les trois blocs d'action, avec un fond
   teinté pour les repérer d'un coup d'œil :
     Vérifie d'abord  → bleu   (information, on regarde avant d'agir)
     À ne pas faire    → rouge  (stop)
     À faire           → vert   (on y va)  */
.card-block.checks {
  background: #EBF3F8;
  border-color: #C6DCEA;
}
.card-block.checks h2 { color: #2C6C8F; }
.card-block.checks li::before { color: #2C6C8F; }

.card-block.dont {
  background: #FCECEA;
  border-color: #F1CFCA;
}
.card-block.dont h2 { color: #B23A2B; }
.card-block.dont li::before { color: #B23A2B; }

.card-block.todo {
  background: #E9F5EE;
  border-color: #C6E5D4;
}
.card-block.todo h2 { color: var(--forest); }

.card-block ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.card-block li {
  margin-bottom: 12px;
  padding-left: 28px;
  position: relative;
}
.card-block li:last-child { margin-bottom: 0; }

.card-block.checks li::before { content: "?"; }
.card-block.dont li::before { content: "✕"; }
.card-block.checks li::before,
.card-block.dont li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 0.85rem;
}

/* "À faire" : étapes numérotées, empilées. Un emplacement illustration par
   étape est prévu (voir renderSteps dans build.js) : le réintroduire ici le
   jour où les dessins d'action arrivent. */
/* Variantes du bloc « À faire », une par stade. L'intitulé n'est utile que
   sans JavaScript, quand les trois listes s'affichent à la suite : avec JS une
   seule reste, et l'onglet actif dit déjà de laquelle il s'agit. On le garde
   discret plutôt que de le masquer — un titre de trop coûte moins cher qu'une
   liste dont on ne sait plus à quelle situation elle répond. */
.todo-variant + .todo-variant {
  margin-top: 18px;
}
.todo-variant-label {
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.todo-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.todo-panel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: white;
  border: 1px solid #C6E5D4;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.todo-panel-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--forest);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.todo-panel-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
}

.contact-box {
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--paper-soft);
}
.contact-box .contact-name {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.03em;
  border: 1px solid currentColor;
}
.badge.idf { color: var(--forest); }
.badge.national { color: var(--terracotta); }

.contact-box .contact-detail {
  margin: 8px 0 10px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.contact-box a.contact-link {
  display: inline-block;
  padding: 10px 2px;
  margin: -10px -2px;
  color: var(--forest);
  font-weight: 700;
  text-decoration: none;
}
.contact-box a.contact-link:hover { text-decoration: underline; }
.contact-box a.tel-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* Titres des deux sections de la liste ("Les plus fréquents" / "Toutes les
   autres espèces"). Discrets : ils expliquent l'ordre, ils ne sont pas le
   contenu. Sans eux, la rupture alphabétique passerait pour un bug. */
.animal-section + .animal-section {
  margin-top: 34px;
}
/* Capitales et lettres espacees donnaient un ton administratif a ce qui n'est
   qu'un intitule de section, et surtout lui donnaient le meme poids visuel
   qu'un vrai titre : empile sous le titre du site, la regle d'or et la
   recherche, ca faisait quatre lignes de meme importance. */
.grid-heading {
  margin: 0 0 14px;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

/* Icônes provisoires (game-icons) : des aplats bruns pleins, alors que les
   dessins de Sophie sont clairs et colorés. Côte à côte dans la grille, le
   provisoire attirait l'oeil plus que le définitif. On l'atténue pour rétablir
   la hiérarchie : les illustrations ressortent, les icônes accompagnent.

   Ces icônes sont décoratives (alt=""), baisser leur contraste ne retire donc
   aucune information — le nom de l'animal est juste en dessous. La règle
   disparaît d'elle-même quand la fiche passe `illustrated: true`. */
.icon-wrap.icon-placeholder img {
  opacity: 0.35;
}

/* Question de localisation : une ligne discrète en tête du bloc contacts, pas
   une étape. Elle ne doit jamais donner l'impression qu'il faut répondre pour
   accéder aux contacts, qui sont juste en dessous. */
.loc {
  margin-bottom: 18px;
}
.loc-label {
  display: block;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.loc-input {
  width: 5.5em;
  padding: 9px 12px;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: var(--border-soft);
  border-radius: var(--radius-sm);
}
.loc-input:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
}
.loc-result:empty { display: none; }
.loc-result {
  margin: 8px 0 0;
  font-size: 0.88rem;
  color: var(--forest);
  font-weight: 700;
}

/* Contact régional alors que le visiteur est ailleurs : on ne le masque pas
   (il peut rester utile, et masquer une info de secours est risqué), on dit
   simplement pourquoi il ne s'applique probablement pas. */
.contact-far-note {
  margin: 8px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--terracotta);
}

/* Recours national : visuellement séparé des contacts locaux par un filet et
   un léger retrait, pour qu'on comprenne d'un coup d'oeil que c'est un autre
   niveau de réponse — et non un contact de plus dans la même liste. */
.national-fallback {
  margin-top: 22px;
  padding-top: 18px;
  border-top: var(--border-soft);
}
.national-fallback h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--forest);
}
.national-fallback-intro {
  margin: 6px 0 14px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.fallback-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 10px;
}
.fallback-note a { color: var(--forest); }

.see-also {
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: var(--paper-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 4px 0 20px;
}
.see-also a { color: var(--forest); font-weight: 700; }

.source-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 18px;
  font-style: italic;
}

/* Bloc sources en bas de fiche. Un <details> : replié quand il y a beaucoup
   de références, mais toujours dépliable, imprimable et lisible par un
   moteur de recherche — pas de JavaScript pour l'ouvrir. */
.sources-block { padding: 0; }
.sources-block details { padding: 18px 24px; }
.sources-block summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.sources-block summary::-webkit-details-marker { display: none; }
/* Chevron dessiné en CSS, tourné à l'ouverture : le marqueur natif ne
   s'aligne pas correctement avec un <h2> à l'intérieur du <summary>. */
.sources-block summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  align-self: center;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.sources-block details[open] summary::after { transform: rotate(-135deg); }
.sources-block summary h2 {
  display: inline;
  margin: 0;
  font-size: 1.08rem;
  color: var(--ink-soft);
}
.sources-block summary:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.sources-count {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.sources-list {
  margin: 16px 0 0;
  padding-left: 0;
  list-style: none;
  counter-reset: source;
}
.sources-list li {
  counter-increment: source;
  position: relative;
  padding-left: 28px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.sources-list li:last-child { margin-bottom: 0; }
.sources-list li::before {
  content: counter(source);
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--paper-soft);
  border-radius: var(--radius-pill);
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sources-list a {
  color: var(--forest);
  font-weight: 600;
  text-underline-offset: 2px;
}
.source-org {
  display: block;
  color: var(--ink-soft);
  font-size: 0.82rem;
}
.source-detail {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .sources-block summary::after { transition: none; }
}

/* Video block */
.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper-soft);
  margin-top: 4px;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Sortie de secours du bloc video : discrete quand le lecteur marche, mais
   toujours presente. Voir renderVideo dans build.js. */
.video-fallback {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.video-fallback a {
  color: var(--forest);
  font-weight: 700;
  /* Cible tactile : le lien fait 20 px de haut, on l'agrandit par le padding
     en reprenant la marge en negatif. */
  display: inline-block;
  padding: 11px 4px;
  margin: -11px -4px;
}

.video-caption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* Aide / engagement */
#help-section {
  margin-top: 36px;
  padding-top: 30px;
  border-top: var(--border-soft);
}
.help-intro {
  text-align: center;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.help-card {
  background: white;
  border: var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: background 0.18s ease;
}
.help-card:hover {
  background: var(--paper-soft);
}
/* Carte mise en avant (programme daté). Sélecteurs assez spécifiques pour
   passer devant .help-card et .help-card:hover, qui sont juste au-dessus. */
.help-card.help-card-featured {
  background: var(--highlight-bg);
  border-color: var(--highlight-line);
}
.help-card.help-card-featured:hover {
  background: #F8E4D3;
}
.help-card h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
}
.help-card p {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
/* Échéance d'un programme daté (ex. PIAF) : discrète mais repérable, pas une
   alarme. Sélecteur volontairement plus spécifique que `.help-card p`
   au-dessus, sinon la couleur --ink-soft de ce dernier l'emporterait. */
.help-card .help-deadline {
  margin: -4px 0 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--terracotta);
}
.help-links {
  font-size: 0.9rem;
  font-weight: 700;
}
.help-links a {
  display: inline-block;
  padding: 10px 2px;
  margin: -10px -2px;
  color: var(--forest);
  text-decoration: none;
}
.help-links a:hover { text-decoration: underline; }

.impact-block {
  background: var(--paper-soft);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.impact-block h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}
.impact-block p {
  margin: 0 0 12px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.impact-block ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.impact-block li {
  margin-bottom: 6px;
  font-size: 0.92rem;
}
.impact-block a {
  color: var(--forest);
  font-weight: 700;
  text-decoration: none;
}
.impact-block a:hover { text-decoration: underline; }

/* Barre sticky (contact -> invitation à témoigner, voir sticky-bar.js) */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: white;
  border-top: var(--border-soft);
  box-shadow: 0 -4px 16px rgba(74, 64, 56, 0.08);
}
.sticky-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
  background: var(--forest);
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px 22px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.sticky-bar-btn:hover { opacity: 0.9; }
/* Compense la barre fixe pour que le bas du footer reste lisible et
   cliquable au lieu d'être recouvert. */
.has-sticky-bar .site-footer {
  padding-bottom: 100px;
}

/* Témoignage "j'ai aidé cet animal" */
.helped-block {
  text-align: center;
  margin: 24px 0;
}
.helped-btn {
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 700;
  color: white;
  background: var(--forest);
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px 24px;
  cursor: pointer;
}
.helped-btn:hover { opacity: 0.9; }
.helped-btn:disabled {
  cursor: default;
  opacity: 0.75;
}
.helped-btn.helped-btn-done {
  background: var(--paper-soft);
  color: var(--forest);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(74, 64, 56, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.modal-box {
  position: relative;
  max-width: 420px;
  width: 100%;
  background: white;
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  box-shadow: 0 8px 30px rgba(74, 64, 56, 0.2);
}
.modal-box h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.modal-box p {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 0.94rem;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px;
}
.modal-close:hover { color: var(--ink); }
.helped-comment-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.helped-comment-label span {
  font-weight: 400;
  color: var(--ink-soft);
}
.helped-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.92rem;
  padding: 12px 14px;
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 80px;
  color: var(--ink);
  background: var(--paper-soft);
}
.helped-textarea:focus {
  outline: none;
  border-color: var(--forest);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.modal-btn {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  cursor: pointer;
  border: var(--border-soft);
}
.modal-btn-secondary {
  background: white;
  color: var(--ink-soft);
}
.modal-btn-secondary:hover { border-color: var(--ink-soft); }
.modal-btn-primary {
  background: var(--forest);
  color: white;
  border-color: var(--forest);
}
.modal-btn-primary:hover { opacity: 0.9; }

/* Page "Ils l'ont fait" (temoignages.html, générée mais pas reliée au site
   pour l'instant). Réutilise les tokens : rien de spécifique à cette page
   côté couleurs. */
.testimonial-counter {
  text-align: center;
  background: var(--paper-soft);
  border-radius: var(--radius);
  padding: 22px 24px;
  max-width: 460px;
  margin: 0 auto 32px;
}
.testimonial-counter-num {
  display: block;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--forest);
}
.testimonial-counter-text {
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.testimonial-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: start;
}
.testimonial-card {
  margin: 0;
  background: white;
  border: var(--border-soft);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.testimonial-card blockquote {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
}
.testimonial-card blockquote::before { content: "« "; color: var(--ink-soft); }
.testimonial-card blockquote::after { content: " »"; color: var(--ink-soft); }
.testimonial-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: var(--border-soft);
}
.testimonial-animal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--forest);
  text-decoration: none;
}
.testimonial-animal:hover { text-decoration: underline; }
.testimonial-animal .icon-wrap {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.testimonial-date {
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.testimonial-empty,
.testimonial-note {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.testimonial-empty {
  background: var(--paper-soft);
  border-radius: var(--radius);
  padding: 32px 24px;
}
.testimonial-note {
  margin-top: 28px;
}

/* Page "Être prêt à aider un animal" (etre-pret.html) */
.block-lead {
  margin: -4px 0 14px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.gear-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.gear-list li {
  padding: 14px 0;
  border-top: var(--border-soft);
}
.gear-list li:first-child { border-top: none; padding-top: 0; }
.gear-list li:last-child { padding-bottom: 0; }
.gear-list strong {
  display: block;
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 3px;
}
.gear-list span {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
/* Liste "gestes qui marchent" : coche teal, alignée comme les puces de
   .card-block.checks / .dont (qui posent déjà padding-left + position). */
.moves-block li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--forest);
}

/* Lien discret vers "Être prêt" sous la grille de l'accueil : action calme,
   à ne pas mettre au même niveau que le parcours d'urgence au-dessus. */
.home-prepare {
  text-align: center;
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.home-prepare a {
  color: var(--forest);
  font-weight: 700;
  text-decoration: none;
}
.home-prepare a:hover { text-decoration: underline; }

/* Footer */
.site-footer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 30px 20px 44px;
  border-top: var(--border-soft);
  margin-top: 20px;
}
.site-footer p { margin: 6px 0; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: var(--border-soft);
}
.footer-nav a {
  color: var(--forest);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  /* Deux liens isoles de 22 px de haut, sous le minimum de 24 px (WCAG 2.5.8).
     On agrandit la cible par le padding, en reprenant la marge en negatif pour
     ne rien deplacer visuellement — meme technique que .help-links a. */
  display: inline-block;
  padding: 11px 4px;
  margin: -11px -4px;
}
.footer-nav a:hover { text-decoration: underline; }
.site-footer .credits {
  font-size: 0.75rem;
  opacity: 0.8;
}
.site-footer .credits a { color: var(--ink-soft); }

@media (max-width: 480px) {
  .brand { font-size: 1.7rem; }
  .detail-header { flex-direction: column; text-align: center; }

  /* En-tête compacté : sur mobile la tagline répète ce que dit déjà le titre
     de la page ("Quel animal as-tu trouvé ?"), et le bloc coûtait 185px de
     hauteur avant le premier élément utile. */
  .site-header { padding: 20px 0 14px; }
  .tagline { display: none; }

  /* Deux colonnes garanties. Avec minmax(160px) + gap 20px il faut 340px de
     large : un écran de 375px n'en offre que 335 une fois les marges
     retirées, et la grille retombait en une seule colonne pour 5px. */
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
  }

  /* Cartes allégées. Le badge de catégorie n'est masqué que sur la sélection
     de l'accueil : il sert à s'y retrouver dans la liste complète
     (animaux.html), pas parmi 7 cas déjà triés. */
  .animal-card { padding: 16px 10px 14px; }
  .animal-card .icon-wrap {
    width: 60px;
    height: 60px;
    margin-bottom: 8px;
  }
  .animal-card .name { font-size: 0.94rem; }
  .grid-featured .animal-card .category-badge { display: none; }

  /* Accueil simplifié : deux colonnes, cercle d'illustration bien plus grand
     que les icônes (les dessins sont trop petits à voir sinon). */
  .grid-illustrated { grid-template-columns: repeat(2, 1fr); }
  .grid-illustrated .animal-card .icon-wrap {
    width: 108px;
    height: 108px;
  }
  .detail-header .icon-wrap.icon-wrap-drawing {
    width: 116px;
    height: 116px;
  }
}

/* Respecte le réglage "réduire les animations" du système : neutralise aussi
   les transitions posées en JS par search.js (technique FLIP), une règle
   externe !important l'emportant sur le style inline qui la déclenche. */
@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;
  }
}

/* ==========================================================================
   BANDES PLEINE LARGEUR
   --------------------------------------------------------------------------
   Utilisees par l'accueil et la liste complete. Le principe tient en deux
   regles : la bande va d'un bord a l'autre, son contenu reste dans les 880 px
   de .wrap. C'est la couleur du fond qui dit « tu changes de sujet », a la
   place d'un titre qui devrait crier.

   Un fond teinte n'est pas qu'une decoration : les cartes blanches posees
   dessus se detachent enfin, alors que sur fond blanc il ne restait que leur
   bordure pour tenir la mise en page.
   ========================================================================== */

main.bands { padding: 0; }

.band {
  position: relative;
  overflow: hidden; /* decoupe les formes qui depassent */
  padding: 52px 0;
}
.band > .wrap { position: relative; z-index: 1; }

.band-tinted { background: var(--paper-soft); }
.band-warm   { background: var(--highlight-bg); }
/* Les bandes blanches n'ont besoin d'aucune regle : c'est le fond de la page. */

/* Bandeau mince (animaux.html) : la couleur d'une bande — le fond teinte
   encadre la recherche et detache les cartes blanches posees dessous — sans
   son epaisseur. 52 px de padding repoussaient les resultats hors de l'ecran
   sur mobile (clavier ouvert) ; ici on reste sous 20. */
.band-slim { padding: 20px 0 16px; }
.band-slim .section-title { margin-bottom: 16px; }
.band-slim .back-btn { padding: 0 0 12px; }
.band-slim .category-filters { margin-bottom: 0; }

/* ATTENTION en ajoutant un composant dans une bande teintee : tout ce qui
   utilise --paper-soft comme fond (.see-all-btn, .golden-rule, .animal-search)
   y devient invisible, puisque c'est exactement la couleur de la bande. Les
   elements en relief repassent donc en blanc. */
.band-tinted .animal-card,
.band-tinted .animal-search,
.band-tinted .see-all-btn,
.band-warm .see-all-btn { background: var(--paper); }
.band-tinted .see-all-btn,
.band-warm .see-all-btn { border: var(--border-soft); }

/* Titres de bande : chaque bande est un chapitre, son titre se lit comme tel. */
.band .grid-heading {
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 6px;
}
/* Sauf dans la bande du haut, ou « Les plus frequents » n'est qu'une legende
   sous la recherche et ne doit pas concurrencer le titre de la page. */
.band-hero .grid-heading {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.band-hero .section-title { margin-bottom: 20px; }
.band-hero .search-wrap { max-width: 460px; margin-bottom: 34px; }
.band-hero .animal-section { margin-top: 6px; }
.band-intro {
  margin: 0 0 18px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Formes decoratives. Volontairement absentes des zones d'action : quelqu'un
   qui a un animal blesse dans un carton n'a pas besoin d'habillage autour de
   la recherche. Elles habillent le bas de page, ou l'urgence est passee. */
.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.blob-a { width: 380px; height: 380px; left: -160px;  top: 40px;      background: #FFFFFF; opacity: .5; }
.blob-b { width: 260px; height: 260px; right: -90px;  top: 260px;     background: #D9EDE9; opacity: .55; }
.blob-c { width: 320px; height: 320px; left: -120px;  top: -90px;     background: #D6EAF5; opacity: .55; }
.blob-d { width: 180px; height: 180px; right: -60px;  bottom: -70px;  background: #FBEFC7; opacity: .7; }
.blob-e { width: 240px; height: 240px; right: -80px;  top: 30px;      background: #F5E4E8; opacity: .55; }
.blob-f { width: 190px; height: 190px; left: -70px;   top: 40px;      background: #E5EEDD; opacity: .55; }
.blob-g { width: 300px; height: 300px; right: -110px; bottom: -110px; background: #FFFFFF; opacity: .55; }

/* --- Les familles, en cartes plutot qu'en pastilles ---------------------- */
.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.family-card {
  display: block;
  text-decoration: none;
  background: var(--cat-bg);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: transform .12s ease;
}
.family-card:hover { transform: translateY(-2px); }
.family-card .fam-name {
  display: block;
  margin-bottom: 4px;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cat-color);
}
.family-card .fam-ex {
  display: block;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.family-card .fam-count {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cat-color);
  background: rgba(255, 255, 255, .65);
  border-radius: var(--radius-pill);
}

/* --- Le petit necessaire (extrait de etre-pret.html) --------------------- */
.kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.kit-card {
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--highlight-line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.kit-card strong { display: block; margin-bottom: 3px; }
.kit-card span {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* --- Equilibrage des grilles sur grand ecran ----------------------------- */
/* 7 cartes en auto-fit donnaient 4 + 3 collees a gauche, avec un trou a
   droite ; 5 familles donnaient 3 + 2. Sur une grille a colonnes fixes, la
   seconde ligne peut etre recentree. Uniquement au-dessus de 760 px : en
   dessous, l'auto-fit existant fait deja le bon travail. */
@media (min-width: 760px) {
  .grid-featured { grid-template-columns: repeat(8, 1fr); }
  .grid-featured .animal-card { grid-column: span 2; }
  .grid-featured .animal-card:nth-child(5) { grid-column: 2 / span 2; }

  .family-grid { grid-template-columns: repeat(6, 1fr); }
  .family-card { grid-column: span 2; }
  .family-card:nth-child(4) { grid-column: 2 / span 2; }
}

@media (max-width: 700px) {
  /* Les bandes s'empilent et se resserrent : la couleur reste, l'epaisseur
     disparait. Les formes sont retirees, elles n'allongeraient la page pour
     rien sur un ecran ou l'on ne voit qu'une bande a la fois. */
  .band { padding: 34px 0; }
  .band-slim { padding: 14px 0; }
  .blob { display: none; }
  .family-grid, .kit-grid { grid-template-columns: 1fr; }
}