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

body {
  font-family: 'Roboto', sans-serif;
  background: #22234f;
  color: #fff;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 2rem 1.25rem 3rem;
}

main { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 1.5rem; }

a { color: inherit; }

.muted { color: rgba(255,255,255,.5); font-size: .8rem; }
.muted ul { list-style-position: inside; margin-top: .3rem; }
.muted li { margin-bottom: .2rem; }

header.page-header { display: flex; flex-direction: column; gap: 0.5rem; }
header.page-header h1 { font-size: 1.05rem; font-weight: 400; }
header.page-header .header-row { display: flex; align-items: center; gap: 0.75rem; }


.brand { display: flex; align-items: center; gap: .6rem; }
.brand h1 { font-size: 1.3rem; font-weight: 700; }
.brand-icon { width: 2rem; height: 2rem; }
.organization-name { color: rgba(255,255,255,.6); font-size: .9rem; }

.back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1;
}
.back-icon:hover { background: rgba(255,255,255,.16); }

/* ─── Icône de connexion / menu compte (discrète, coin haut-droit) ───────── */

.account-bar { position: fixed; top: 1rem; right: 1rem; z-index: 50; }

.login-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  text-decoration: none;
  font-size: .95rem;
  opacity: .6;
}
.login-icon:hover { opacity: 1; background: rgba(255,255,255,.16); }

.account-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.account-menu summary::-webkit-details-marker { display: none; }

.account-menu-content {
  position: absolute;
  top: 2.5rem;
  right: 0;
  background: #2a2b60;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .75rem;
  padding: .4rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 200px;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
.account-menu-name { font-size: .8rem; font-weight: 700; opacity: .8; padding: .6rem .75rem .3rem; }
.account-menu-content a,
.account-menu-content form button {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: .9rem;
  text-decoration: none;
  opacity: .9;
  background: none;
  border: none;
  border-radius: .5rem;
  padding: .75rem;
  cursor: pointer;
}
.account-menu-content a:hover,
.account-menu-content a:active,
.account-menu-content form button:hover,
.account-menu-content form button:active {
  background: rgba(255,255,255,.08);
  opacity: 1;
}
.account-menu-content form button { color: #ee4d55; }

.public-messages { list-style: none; }
.public-messages li {
  background: rgba(255,255,255,.08);
  border-radius: .5rem;
  padding: .5rem .8rem;
  font-size: .85rem;
}

.welcome-message {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(74, 144, 226, .2);
  border: 1px solid rgba(74, 144, 226, .5);
  border-radius: .75rem;
  padding: .85rem 1.1rem;
  margin-bottom: 1.1rem;
  color: #fff;
  font-size: .9rem;
}
.welcome-message i { font-size: 1.1rem; flex-shrink: 0; }

/* ─── Accueil (choix par emoji) ─────────────────────────────────────────── */

.home-choices { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }

.home-choices a, .home-choices .choice--disabled {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.25rem;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  color: #fff;
}

.home-choices .emoji { font-size: 2rem; }
.home-choices .label { font-weight: 700; font-size: 1.05rem; }
.home-choices .sublabel { font-size: .8rem; color: rgba(255,255,255,.55); }

.home-choices .choice--disabled { opacity: .45; }

/* ─── Recherche live (nom / race / box) ──────────────────────────────────── */

.search { position: relative; z-index: 5; }
.search .icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: .5;
  font-size: .9rem;
  pointer-events: none;
}
.search input {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
}
.search input::placeholder { color: rgba(255,255,255,.4); }
.search input:focus { outline: none; border-color: #8f9aff; background: rgba(255,255,255,.1); }
.search input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }

/* Champs de formulaire "classiques" (texte, select, textarea) — style commun
   à tout le site public, même famille de couleurs/focus que .search input
   ci-dessus, pour que tout futur formulaire en hérite sans rien redéfinir. */
input[type=text],
input[type=email],
input[type=url],
input[type=tel],
input[type=password],
textarea,
select {
  width: 100%;
  font-family: inherit;
  font-size: .88rem;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: .6rem;
  padding: .65rem .85rem;
  transition: border-color .15s ease, background .15s ease;
}
textarea { resize: vertical; line-height: 1.5; min-height: 3.2rem; }
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=url]::placeholder,
input[type=tel]::placeholder,
textarea::placeholder { color: rgba(255,255,255,.4); }
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=tel]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #8f9aff;
  background: rgba(255,255,255,.12);
}
select { cursor: pointer; }
select option { color: #000; } /* menu déroulant natif : rendu par l'OS, pas stylable en dark */

/* Bulle d'aide à la recherche — exemples par type de critère, révélée
   automatiquement quand le champ a le focus et est vide (pas de bouton à
   cliquer) ; se cache dès la première frappe, réapparaît si on efface tout
   (:placeholder-shown ne matche que quand le champ est vide). */
.search-help-content {
  position: absolute;
  top: calc(100% + .6rem);
  left: 0;
  right: 0;
  background: #2a2b60;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .9rem;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  z-index: 20;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
#dog-search:focus:placeholder-shown ~ .search-help-content {
  opacity: 1;
  transform: translateY(0);
}
.search-help-content p { font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.65); }
.search-help-content strong { color: #fff; font-weight: 700; }

/* ─── Cartes chien ────────────────────────────────────────────────────────── */

.dog-list { display: flex; flex-direction: column; gap: 1.25rem; }

.dog-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.25rem;
  overflow: hidden;
}

.dog-card[hidden] { display: none; }
.dog-card-link { display: block; color: inherit; text-decoration: none; }

/* Étoile favoris — superposée en haut à droite de la photo (carte) comme
   .new-badge l'est en haut à gauche ; en dehors du <a> de la carte pour
   éviter un élément interactif imbriqué dans un autre (bouton dans un lien).
   Même jaune que .new-badge pour l'état "actif" — seul accent jaune de
   l'app, cohérent avec "mis en avant". */
.favorite-form { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; margin: 0; }
.favorite-star {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: rgba(255,255,255,.8);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.favorite-star:hover, .favorite-star:focus-visible { background: rgba(0,0,0,.65); }
.favorite-star--active { color: #ffce45; }

/* Fiche chien : même étoile, non superposée cette fois (dans .detail-title__badges). */
.detail-title__badges { display: flex; align-items: center; gap: .5rem; }
.detail-title__badges .favorite-form { position: static; }
.detail-title__badges .favorite-star { width: 2rem; height: 2rem; background: rgba(255,255,255,.1); }
.detail-title__badges .favorite-star:hover, .detail-title__badges .favorite-star:focus-visible { background: rgba(255,255,255,.18); }

/* Pastille "chien privé" (specs/04-frontoffice.md) — visible seulement des
   comptes connectés (seuls à qui un chien privé est montré, voir
   public/views.py). Rouge distinct de #ee4d55 (réservé aux alertes
   canicule, voir .dog-card--new) pour ne pas laisser croire à une urgence. */
.private-badge {
  background: #c0392b;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.photo-container .private-badge { position: absolute; bottom: 0.75rem; left: 0.75rem; }

/* Gommette de couleur (specs/11-gommettes.md) — simple disque plein, la
   couleur elle-même vient du style inline (`Animal.sticker_color_hex`,
   8 valeurs fixes) : pas de classe par couleur, juste le gabarit du disque.
   `--empty` (aucune gommette assignée) : gris neutre, jamais transparent —
   affiché en permanence sur la fiche pour signaler que le réglage existe,
   contrairement à la vignette qui reste épurée si rien n'est assigné. */
.sticker-dot {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6);
  flex-shrink: 0;
}
.sticker-dot--empty { background: rgba(255,255,255,.25); }
.sticker-dot--card {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  box-shadow: 0 0 0 0.5rem rgba(255,255,255,.1);
}

/* Déclencheur de la modale gommette, juste après l'étoile favoris (même
   gabarit de bouton rond que `.favorite-star`, mais sans superposition sur
   la photo : ici dans `.detail-title__badges`, pas `.photo-container`). */
.sticker-trigger {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  cursor: pointer;
  transition: background .15s ease;
}
.sticker-trigger:hover, .sticker-trigger:focus-visible { background: rgba(255,255,255,.18); }

/* Liste de choix dans la modale — même gabarit que `.tag-choice-row`
   (ligne cliquable pleine largeur), mais sélection simple (surbrillance)
   plutôt qu'un vote immédiat : voir `.sticker-choice-row--selected`. */
.sticker-choice-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.sticker-choice-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: .85rem;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .6rem;
  padding: .55rem .75rem;
  cursor: pointer;
}
.sticker-choice-row:hover { background: rgba(255,255,255,.12); }
.sticker-choice-row--selected { background: rgba(150,160,255,.18); border-color: rgba(150,160,255,.4); }

/* Barre d'onglets Disponibles/Favoris/Adoptés (comptes connectés uniquement)
   — vraie navigation (3 URLs), pas des panneaux togglés en JS comme
   .profile-tabs sur "Mon profil" ; même langage visuel malgré tout. */
.dog-tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.dog-tabs__tab {
  flex: 1;
  text-align: center;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  border-radius: .6rem;
  padding: .6rem;
}
.dog-tabs__tab--active { background: rgba(150,160,255,.3); border-color: rgba(150,160,255,.6); }
.dog-tabs__tab--alert { background: rgba(238,77,85,.15); border-color: rgba(238,77,85,.5); }
.dog-tabs__tab--alert.dog-tabs__tab--cold { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }

/* Bulle de compte d'alertes non clôturées — identique à staff/style.css
   (.badge-count), #ee4d55 recopié en dur : pas de custom property de couleur
   dans cette feuille de style. */
.badge-count {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #ee4d55;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.3rem;
  text-align: center;
}

/* Bulle "refroidie" (géré en JS via localStorage, aucune donnée serveur) :
   après 10 secondes passées sur l'onglet Alertes, la bulle repasse en gris
   neutre jusqu'à ce que le nombre d'alertes change. */
.badge-count--cold { background: rgba(255, 255, 255, .25); }

/* Surbrillance des chiens "Nouveaux" (arrivée récente) — remplace l'ancien
   switch Nouveaux/Tous par un tri unique + mise en avant visuelle. Jaune
   plutôt que le rouge d'accent (réservé aux alertes canicule) pour ne pas
   laisser penser à une urgence. */
.dog-card--new {
  border-color: #ffce45;
  background: rgba(255,206,69,.12);
}

.photo-container { position: relative; }
.new-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: #ffce45;
  color: #22234f;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.dog-card .photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: rgba(255,255,255,.1); }
.dog-card .photo--missing { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }

.dog-card .content {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.dog-card .content-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.dog-card .name { font-size: 1.15rem; font-weight: 700; }
.dog-card .meta { font-size: 0.85rem; color: rgba(255,255,255,.65); }
.dog-card .since { font-size: 0.78rem; color: rgba(255,255,255,.45); }

/* Aperçu des 3 étiquettes les plus votées — lecture seule, pas de vote possible
   depuis la liste (uniquement depuis la fiche du chien). */
.dog-card .content-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  flex-shrink: 0;
}
.bubble--mini { padding: .2rem .6rem; font-size: .7rem; white-space: nowrap; }

/* Bandeau d'alerte — pied de carte séparé plutôt qu'entassé dans .content
   (colonnes déjà compactes), pour ne pas empiéter sur la gommette (dans
   .photo-container, jamais concernée par ce bloc) ni le reste de la carte. */
.dog-card .content-alert {
  padding: 0 1.25rem 1rem;
  border-top: 1px solid rgba(238,77,85,.3);
  margin-top: -.25rem;
  padding-top: .75rem;
}
.content-alert__title { font-weight: 700; font-size: .88rem; margin-bottom: .3rem; color: #ff8b91; }
.content-alert__meta, .content-alert__repliers { font-size: .78rem; color: rgba(255,255,255,.6); margin-bottom: .2rem; }
.content-alert__repliers { margin-bottom: 0; }

.empty-state { text-align: center; color: rgba(255,255,255,.45); padding: 2rem 0; font-size: 0.9rem; }

.info-card {
  background: #2a2b60;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.25rem;
  padding: 1.25rem 1.5rem;
  margin: 0 auto;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.info-card h2 { font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.info-card p { font-size: .85rem; line-height: 1.6; color: rgba(255,255,255,.7); }

/* ─── Cartes organisation (accueil global, specs/07-organisation.md) ───────── */

.organization-list { display: flex; flex-direction: column; gap: 1rem; }

.organization-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.25rem;
  padding: 1rem 1.25rem;
}
.organization-card .logo { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.organization-card .logo--missing { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: rgba(255,255,255,.1); }
.organization-card .name { font-size: 1.1rem; font-weight: 700; }
.organization-card .meta { font-size: 0.85rem; color: rgba(255,255,255,.65); }

/* ─── Fiche chien ─────────────────────────────────────────────────────────── */

.carousel-container { position: relative; }

.carousel-track { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 1.25rem; }
.carousel-track img { width: 100%; flex: 0 0 100%; aspect-ratio: 4/3; object-fit: cover; scroll-snap-align: start; border-radius: 1.25rem; }

/* Flèches signalant qu'il y a d'autres photos. */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background .15s ease;
}
.carousel-arrow:hover, .carousel-arrow:focus-visible { background: rgba(0,0,0,.8); }
.carousel-arrow.prev { left: 0.6rem; }
.carousel-arrow.next { right: 0.6rem; }

.detail-title { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.detail-title h1 { font-size: 1.4rem; }
.box-badge { font-size: .75rem; background: rgba(255,255,255,.1); padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }

.detail-info { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; }

/* Bulle partagée par les caractéristiques du chien (Mâle, race, taille...) et
   les étiquettes votées — même apparence, look and feel commun côté fronto. */
.bubble {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  border-radius: 999px;
  padding: .4rem .8rem;
  font-size: .82rem;
}

.detail-description { font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.85); display: flex; flex-direction: column; gap: .8rem; }
.detail-description--muted { color: rgba(255,255,255,.6); }
.detail-section-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.5); margin: 0; }
/* Resserre spécifiquement l'écart après la timeline (dernier item déjà
   paddé + gap générique de `main`) sans toucher au gap entre les autres
   sections de la fiche. */
.timeline + .detail-description { margin-top: -1rem; }

.detail-video { width: 100%; border-radius: 1.25rem; }

/* ─── Tags (specs/05-tags-chiens.md) ─────────────────────────────────────── */

.detail-tags { display: flex; flex-direction: column; gap: 1rem; }
.detail-tags h2 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255,255,255,.45);
  margin-bottom: .5rem;
}
.detail-tags-group { display: flex; flex-wrap: wrap; gap: .5rem; }

/* .bubble porte l'apparence commune (voir plus haut) ; le reste n'ajoute que
   les comportements propres à un bouton interactif. */
.tag-badge {
  font-family: inherit;
  cursor: pointer;
}
.tag-badge:hover { background: rgba(255,255,255,.16); }
.tag-badge .score { opacity: .55; margin-left: .15rem; }

/* Tag déjà voté par la personne connectée — teinte neutre, jamais rouge/vert. */
.tag-badge--voted { background: rgba(150,160,255,.18); border-color: rgba(150,160,255,.4); }

/* Score confirmé négatif : barré plutôt que masqué (l'info "le collectif a
   voté contre" reste utile), toujours sans rouge/vert (05-tags-chiens.md). */
/* Porté par un <span> autour du seul libellé (pas par .tag-badge/.bubble--mini
   lui-même) : un `text-decoration: none` sur `.score` ne suffit pas à
   l'exempter du trait du parent (le trait traverse quand même un enfant
   inline, comportement CSS) — on évite le problème en ne barrant que le
   texte du libellé, jamais un ancêtre commun avec le compteur. */
.tag-negative { text-decoration: line-through; text-decoration-style: double; }

.add-tag-button {
  align-self: flex-start;
  font-family: inherit;
  background: none;
  border: 1px dashed rgba(255,255,255,.3);
  color: rgba(255,255,255,.7);
  border-radius: 999px;
  padding: .4rem .8rem;
  font-size: .82rem;
  cursor: pointer;
}
.add-tag-button:hover { border-color: rgba(255,255,255,.6); color: #fff; }

.tag-choice-list { display: flex; flex-direction: column; gap: .35rem; }
.tag-choice-row {
  font-family: inherit;
  text-align: left;
  background: rgba(255,255,255,.06);
  border: 1px solid transparent;
  color: #fff;
  border-radius: .6rem;
  padding: .55rem .75rem;
  font-size: .88rem;
  cursor: pointer;
}
.tag-choice-row:hover { background: rgba(255,255,255,.12); }
.tag-choice-row--voted { background: rgba(150,160,255,.18); border-color: rgba(150,160,255,.4); }

.modal-back-link {
  align-self: flex-start;
  font-family: inherit;
  background: none;
  border: none;
  color: rgba(255,255,255,.5);
  font-size: .8rem;
  cursor: pointer;
  padding: 0;
}

.vote-buttons { display: flex; gap: .6rem; }
.vote-button {
  flex: 1;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: .6rem;
  padding: .6rem;
  cursor: pointer;
}
.vote-button--active { background: rgba(150,160,255,.3); border-color: rgba(150,160,255,.6); }

/* ─── Modale bottom-sheet générique (comparatif canicule, détail d'un tag) ── */

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.modal__panel {
  position: relative; background: #2a2b60; border-radius: 1.5rem 1.5rem 0 0; padding: 1.5rem;
  width: 100%; max-width: 420px; max-height: 85dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.5rem; animation: slide-up .22s ease;
}
@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal__close {
  align-self: flex-end; background: rgba(255,255,255,.1); border: none; color: #fff;
  width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; font-size: .8rem;
  flex-shrink: 0; /* sinon écrasé quand le contenu (ex. longue liste d'étiquettes)
                     dépasse le max-height du panneau et force les enfants flex à rétrécir */
  display: flex; align-items: center; justify-content: center;
}
.modal__title { font-size: 1rem; font-weight: 700; margin-top: -.5rem; }
.modal__section { display: flex; flex-direction: column; gap: .5rem; }
.modal__section-title { font-size: .9rem; font-weight: 700; color: rgba(255,255,255,.85); }
.modal__detail-text { font-size: .85rem; font-weight: 300; color: rgba(255,255,255,.7); line-height: 1.6; }
.modal__vote-prompt { font-size: .78rem; font-style: italic; color: rgba(255,255,255,.5); line-height: 1.5; }
.modal__votes-count { font-size: .78rem; color: rgba(255,255,255,.55); }

/* ─── Carte Utilisateur (specs/10-profil-utilisateur.md) ─────────────────── */

/* Déclencheur : partout où un nom de personne est affiché (auteur d'un
   événement de suivi...), un simple lien plutôt qu'un bouton visuellement
   marqué, pour ne pas alourdir le texte environnant. */
.user-card-trigger {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

.user-card { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; }
.user-card__initials {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: .3rem;
}
.user-card__username { color: rgba(255,255,255,.5); font-size: .78rem; }
.user-card__group {
  display: inline-flex;
  align-self: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: .15rem .6rem;
  font-size: .72rem;
  color: rgba(255,255,255,.75);
}
.user-card__group[hidden] { display: none; }
.user-card__role { color: rgba(255,255,255,.6); font-size: .85rem; }
.user-card__role[hidden] { display: none; }
.user-card__emergency { color: rgba(255,255,255,.6); font-size: .82rem; margin-top: .5rem; }
.user-card__emergency[hidden] { display: none; }
.user-card__contacts { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; width: 100%; text-align: left; }
.user-card__contact {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .6rem;
  padding: .5rem .75rem;
  text-decoration: none;
  color: #fff;
  font-size: .88rem;
}
.user-card__contact:hover { background: rgba(255,255,255,.12); }
.user-card__contact i { width: 1.1rem; text-align: center; }

/* ─── Suivi d'événements (specs/09-suivi-evenements.md) ──────────────────── */

/* Timeline verticale (ronds reliés par un trait). Version compacte sur la
   fiche chien : 3 derniers événements + "⋯" + le lien vers le suivi complet,
   ce dernier comme item à part entière de la même timeline pour rester
   visuellement raccroché à la suite (ligne + pointillés qui laissent
   deviner que ça continue). Version complète sur /history : un item par
   événement, détail dépliable en accordéon pour ne pas noyer la liste. */
.timeline { display: flex; flex-direction: column; }
.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  position: relative;
  padding-bottom: 1rem;
}
.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: .7rem;
  top: 1.5rem;
  bottom: 0;
  width: 2px;
  background: rgba(255,255,255,.15);
}
.timeline-dot {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  z-index: 1;
}
.timeline-item--alert .timeline-dot { background: rgba(238,77,85,.25); border-color: #ee4d55; }
@keyframes alert-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.timeline-item--alert .timeline-dot i { animation: alert-blink .8s step-end infinite; }
.timeline-content { flex: 1; min-width: 0; padding-top: .1rem; }
.timeline-type { font-size: .85rem; font-weight: 700; }
.timeline-meta { font-size: .72rem; color: rgba(255,255,255,.5); }
/* Pas un vrai rond mais un trait pointillé vertical centré dans le même
   espace, comme si la ligne continue de la timeline (::before ci-dessus)
   se poursuivait en pointillés au-delà du dernier événement affiché,
   jusqu'au bouton vers le suivi complet. */
.timeline-item--link .timeline-dot {
  background: none;
  border: none;
  position: relative;
}
.timeline-item--link .timeline-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: -50%;
  border-left: 2px dashed rgba(255,255,255,.15);
}
/* Même gabarit que le bouton de soumission du formulaire de /history
   (.history-form .vote-button, étiré par le flex column parent) — ce lien
   n'a pas ce parent flex, donc étiré/centré explicitement pour paraître
   identique. */
.timeline-button { display: block; width: 100%; text-align: center; text-decoration: none; }

/* Carte de création d'événement sur /history (specs/09-suivi-evenements.md) :
   premier item de la timeline complète, relié aux événements réels par un
   trait pointillé — la liste est antichronologique (plus récent en haut),
   donc l'événement "pas encore créé" se situe avant le plus récent
   événement réel, au-dessus, pas après comme le "..." de l'aperçu sur la
   fiche chien (.timeline-item--link ci-dessus). */
.timeline-item--new .timeline-dot {
  background: none;
  border: 1px dashed rgba(255,255,255,.35);
  color: rgba(255,255,255,.6);
}
.timeline-item.timeline-item--new:not(:last-child)::before {
  width: 0;
  background: none;
  border-left: 2px dashed rgba(255,255,255,.15);
}

/* Suivi complet (/history) : le résumé (type, titre, signature) reste seul
   visible, le détail (description, commentaires, actions) se déplie via
   <details> natif — pas de JS nécessaire. */
.timeline-card, .timeline-details {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .9rem;
  padding: .7rem .9rem;
}
/* Alerte non clôturée : même langage visuel que .card--alert de l'agenda
   bénévole (accent rouge réservé aux alertes) — perd cette mise en valeur
   dès qu'elle est clôturée (specs/09-suivi-evenements.md). */
.timeline-item--alert .timeline-details { background: rgba(238,77,85,.12); border-color: #ee4d55; }
.timeline-item--closed .timeline-details { opacity: .6; }
.timeline-details summary { cursor: pointer; list-style: none; }
.timeline-details summary::-webkit-details-marker { display: none; }
.timeline-summary { position: relative; display: flex; flex-direction: column; gap: .2rem; padding-right: 1.2rem; }
.timeline-summary::after {
  content: "⌄";
  position: absolute;
  right: 0;
  top: 0;
  color: rgba(255,255,255,.4);
  transition: transform .15s;
}
.timeline-details[open] .timeline-summary::after { transform: rotate(180deg); }
.timeline-details[open] .timeline-summary { margin-bottom: .6rem; }
.timeline-details__body { display: flex; flex-direction: column; gap: .6rem; }

.history-form { display: flex; flex-direction: column; gap: .75rem; }
.history-field { display: flex; flex-direction: column; gap: .3rem; }
.history-field label { font-size: .78rem; color: rgba(255,255,255,.6); }
.history-field .muted { font-weight: 300; }

/* Prénom/Nom côte à côte sur "Mon profil" (specs/10-profil-utilisateur.md) —
   chaque .history-field garde sa mise en page interne (label + champ). */
.history-field-row { display: flex; gap: .75rem; }
.history-field-row .history-field { flex: 1; min-width: 0; }

/* Champs non modifiables (prénom/nom/username sur "Mon profil") : même
   apparence que les champs actifs, juste assez estompée pour signaler
   qu'ils ne se modifient pas ici. */
input[readonly] { opacity: .6; cursor: default; }

/* Consentement RGPD (specs/10-profil-utilisateur.md) — accordéon replié par
   défaut (comme .timeline-details), pour ne pas noyer le formulaire sous un
   pavé de texte juridique tant qu'on ne l'a pas demandé. */
.rgpd-details {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .6rem;
  padding: .6rem .8rem;
}
.rgpd-details summary { cursor: pointer; font-size: .85rem; list-style: none; }
.rgpd-details summary::-webkit-details-marker { display: none; }
.rgpd-details__body {
  margin-top: .6rem;
  font-size: .8rem;
  line-height: 1.6;
  color: rgba(255,255,255,.8);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.rgpd-details__body ul { padding-left: 1.2rem; }
.rgpd-checkbox { display: flex; align-items: center; gap: .5rem; font-size: .85rem; margin-top: .6rem; }
.rgpd-status { display: flex; align-items: center; gap: .5rem; color: #7be3a8; font-size: .85rem; }

/* Onglets "Contact" / "Mot de passe" sur "Mon profil" (specs/10-profil-
   utilisateur.md). Bascule en JS (comme la modale Carte Utilisateur de
   base.html), `hidden` natif sur le panneau inactif — pas de framework. */
.profile-tabs { display: flex; flex-direction: column; gap: 1.5rem; }
.profile-tabs__nav { display: flex; gap: .5rem; }

/* Boutons d'onglet : même gabarit que .vote-button, même état "actif" que
   .vote-button--active/.tag-badge--voted (bleu-violet neutre, jamais
   rouge/vert — convention "sélectionné" déjà utilisée pour les votes/tags). */
.profile-tabs__tab {
  flex: 1;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: .6rem;
  padding: .6rem;
  cursor: pointer;
}
.profile-tabs__tab--active { background: rgba(150,160,255,.3); border-color: rgba(150,160,255,.6); }

.profile-tabs__panel { display: flex; flex-direction: column; gap: 1.5rem; }
.profile-tabs__panel[hidden] { display: none; }

/* Erreur de champ (formulaire de changement de mot de passe) — même rouge
   d'accent que .errors sur la page de login (registration/login.html),
   contexte identique (authentification), pas le rouge d'alerte canicule
   (#ee4d55 par ailleurs réservé aux alertes, voir .dog-card--new). */
.form-error { color: #ee4d55; font-size: .78rem; }

.history-event__description { font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.85); }

.history-signature { font-size: .72rem; color: rgba(255,255,255,.45); }

.history-comments { display: flex; flex-direction: column; gap: .5rem; padding-left: .75rem; border-left: 2px solid rgba(255,255,255,.1); }
.history-comment p { font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.85); }

.history-comment-form { display: flex; flex-direction: column; gap: .4rem; }

.history-close-button {
  align-self: flex-start;
  font-family: inherit;
  background: none;
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.65);
  border-radius: .6rem;
  padding: .4rem .8rem;
  font-size: .78rem;
  cursor: pointer;
}
.history-close-button:hover { background: rgba(255,255,255,.1); }