/* =====================================================================
   Fourrière Animale de Lozère : feuille de style unique, mobile d'abord.
   Identité : sérieuse et rassurante, sans être froide.
   Les couleurs se changent ici, dans :root.
   ===================================================================== */

/* Police des titres : Fraunces (licence libre OFL, voir fonts/OFL-Fraunces.txt).
   Hébergée sur le site (pas de Google Fonts : RGPD et rapidité). */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Deux familles seulement : titres (caractère) + texte (police de l'appareil, très lisible) */
  --police-titres: "Fraunces", Georgia, "Times New Roman", serif;
  --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Vert forêt : confiance, institution */
  --vert: #1f5a4a;
  --vert-fonce: #16433a;
  --vert-clair: #e4efea;
  /* Couleurs des 4 catégories (boutons de l'accueil et éléments liés).
     Perdu, trouvé et recueillis : texte blanc. Adoption (beige) : texte FONCÉ, le blanc y serait illisible. */
  --couleur-perdu: #C2522D;      /* orange */
  --couleur-trouve: #6B6F73;     /* gris */
  --couleur-recueillis: var(--vert); /* même vert que le site et le logo */
  --couleur-adoption: #D9C9B1;   /* beige */

  /* Déclinaisons utilisées ailleurs sur le site */
  --terre: var(--couleur-perdu); /* aussi pour les alertes */
  --terre-fonce: #9a3d1f;
  --terre-clair: #f8e6de;
  --bleu: var(--couleur-trouve);
  --bleu-fonce: #55595d;
  --bleu-clair: #eceeef;
  --ocre: #7a6440; /* beige foncé, lisible sur fond clair */
  --ocre-clair: #f1ebe1;

  --fond: #f6f4ef;
  --surface: #ffffff;
  --texte: #1c2422;
  --texte-doux: #56615d;
  --bordure: #dcdfda;
  --erreur: #b3261e;
  --erreur-clair: #fdecea;
  --a-completer: #fff3b0;

  --rayon: 14px;
  --rayon-petit: 10px;
  --ombre: 0 1px 2px rgba(20, 35, 30, 0.06), 0 4px 16px rgba(20, 35, 30, 0.06);
  --largeur: 1120px;
  --hauteur-entete: 78px; /* logo 58px + marges (nom sur 2 lignes sur téléphone) */
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hauteur-entete) + 16px);
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--vert);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--vert-fonce);
}

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

h1,
h2,
h3,
.marque,
.acces-titre {
  font-family: var(--police-titres);
  font-weight: 700;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 1.8rem;
}

h2 {
  font-size: 1.35rem;
}

h3 {
  font-size: 1.1rem;
}

p {
  margin: 0 0 1em;
}

svg {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg.icone-pleine {
  fill: currentColor;
  stroke: none;
}

[hidden] {
  display: none !important;
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Lien "Aller au contenu" : visible seulement au clavier */
.lien-evitement {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 50;
  padding: 10px 14px;
  background: var(--vert);
  color: #fff;
  border-radius: var(--rayon-petit);
  font-weight: 700;
}

.lien-evitement:focus {
  top: 8px;
  color: #fff;
}

/* Texte provisoire, à remplacer avant la mise en ligne */
.a-completer {
  background: var(--a-completer);
  padding: 0 4px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- En-tête ---------- */

.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--hauteur-entete);
}

.entete-inner {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--texte);
  text-decoration: none;
  min-height: 44px;
  flex: 1 1 0;
  min-width: 0;
}

.marque-logo {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
}

.logo-presentation {
  width: min(240px, 70%);
  height: auto;
  justify-self: center;
  border-radius: 50%;
}

.marque-icone {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
  flex-shrink: 0;
}

.marque-icone svg {
  width: 20px;
  height: 20px;
}

.entete-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bouton-appel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--vert);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* Petit écran : bouton d'appel réduit à l'icône (le libellé reste lu par les lecteurs d'écran) */
@media (max-width: 479px) {
  .bouton-appel {
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .bouton-appel-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

.bouton-appel:hover {
  background: var(--vert-fonce);
  color: #fff;
}

.bouton-menu {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--surface);
  color: var(--texte);
  cursor: pointer;
}

.menu {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  padding: 4px 0 8px;
}

.menu.menu-ouvert {
  display: flex;
}

.menu a {
  padding: 12px 8px;
  border-bottom: 1px solid var(--bordure);
  color: var(--texte);
  text-decoration: none;
  font-weight: 600;
}

.menu a:last-child {
  border-bottom: none;
}

.menu a[aria-current="page"] {
  color: var(--vert);
}

.menu a.menu-secondaire {
  font-weight: 400;
  color: var(--texte-doux);
}

/* ---------- Structure des pages ---------- */

.contenu {
  flex: 1;
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.contenu-etroit {
  max-width: 760px;
}

.page-titre {
  margin-bottom: 24px;
}

/* Bandeau de titre aux couleurs de la rubrique (mêmes couleurs et icônes que les boutons de l'accueil) */
.rubrique {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 20px;
  border-radius: var(--rayon);
  color: #fff;
  box-shadow: var(--ombre);
}

.rubrique h1 {
  margin: 0 0 6px;
}

.rubrique .chapo {
  color: inherit; /* pas d'opacité : le contraste doit rester ≥ 4,5 sur l'orange */
  margin: 0;
}

.rubrique-icone {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}

.rubrique-icone svg {
  width: 30px;
  height: 30px;
}

.rubrique-perdu { background: var(--couleur-perdu); }
.rubrique-trouve { background: var(--couleur-trouve); }
.rubrique-recueillis { background: var(--couleur-recueillis); }

/* Adoption : fond beige, donc texte foncé */
.rubrique-adoption {
  background: var(--couleur-adoption);
  color: var(--texte);
}

.rubrique-adoption .rubrique-icone {
  background: rgba(28, 36, 34, 0.1);
}

@media (max-width: 559px) {
  .rubrique {
    align-items: flex-start;
    gap: 14px;
    padding: 18px 16px;
  }

  .rubrique-icone {
    width: 46px;
    height: 46px;
  }

  .rubrique-icone svg {
    width: 24px;
    height: 24px;
  }

  .rubrique h1 {
    font-size: 1.55rem;
  }
}

.chapo {
  font-size: 1.1rem;
  color: var(--texte-doux);
  max-width: 62ch;
}

.bloc {
  background: var(--surface);
  border-radius: var(--rayon);
  padding: 20px;
  box-shadow: var(--ombre);
  margin-bottom: 20px;
}

.bloc > :last-child {
  margin-bottom: 0;
}

.section {
  margin-top: 40px;
}

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

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: var(--rayon-petit);
  padding: 10px 18px;
  min-height: 48px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
}

.bouton:disabled {
  opacity: 0.6;
  cursor: wait;
}

.bouton-principal,
.bouton-vert {
  background: var(--vert);
  color: #fff;
}

.bouton-principal:hover,
.bouton-vert:hover {
  background: var(--vert-fonce);
  color: #fff;
}

.bouton-secondaire,
.bouton-discret {
  background: var(--surface);
  color: var(--texte);
  border-color: var(--bordure);
}

.bouton-secondaire:hover,
.bouton-discret:hover {
  border-color: var(--vert);
  color: var(--vert);
}

.bouton-orange {
  background: var(--terre);
  color: #fff;
}

.bouton-orange:hover {
  background: var(--terre-fonce);
  color: #fff;
}

.bouton-large {
  width: 100%;
}

.bouton-petit {
  min-height: 40px;
  padding: 6px 14px;
  font-size: 0.9rem;
}

/* ---------- Accueil ---------- */

/* Fond de l'accueil : contour de la Lozère à droite, en haut (coupé par le bord de l'écran),
   traces de pattes et petites feuilles. Ce sont des images de fond : elles ne peuvent
   pas créer de défilement horizontal. */
body[data-page="accueil"] {
  --taille-lozere: clamp(420px, 52vw, 780px);
  /* Décor : chaque motif est différent (orientation intégrée au dessin) et posé à une taille variée.
     Ordre : trace en diagonale, grosse patte, petite patte, deux feuilles,
     feuille seule, brin d'olivier, carte de la Lozère (toujours en dernier = tout au fond). */
  background-image:
    url("../img/deco-pattes-1.svg"),
    url("../img/deco-patte-seule.svg"),
    url("../img/deco-patte-seule.svg"),
    url("../img/deco-feuilles-1.svg"),
    url("../img/deco-feuille-2.svg"),
    url("../img/deco-feuilles-3.svg"),
    url("../img/lozere.svg");
  background-repeat: no-repeat;
  background-size:
    150px auto,
    74px auto,
    30px auto,
    62px auto,
    38px auto,
    84px auto,
    var(--taille-lozere) auto;
  background-position:
    left calc(50% + 30px) top calc(var(--hauteur-entete) + 16px),
    left calc(50% - 625px) top 330px,
    left calc(50% - 150px) top calc(var(--hauteur-entete) + 6px),
    left calc(50% + 548px) top 460px,
    left calc(50% - 590px) top 730px,
    left calc(50% - 615px) top calc(var(--hauteur-entete) + 40px),
    right var(--decalage-lozere, calc(var(--taille-lozere) * -0.3)) top calc(var(--hauteur-entete) + 24px);
}

/* Petit écran : la carte est plus cachée, pour que ses noms de villes ne passent pas sous le titre */
@media (max-width: 959px) {
  body[data-page="accueil"] {
    --decalage-lozere: calc(var(--taille-lozere) * -0.62);
  }
}
.accueil-titre {
  margin: 8px 0 24px;
}

.accueil-titre h1 {
  font-size: 1.65rem;
  margin-bottom: 6px;
}

.accueil-titre p {
  color: var(--texte-doux);
  font-size: 1.05rem;
  margin: 0;
}

/* Haut de l'accueil : titre + boutons, avec la photo arrondie à droite (ordinateur) */
.accueil-haut {
  position: relative;
}

body[data-page="accueil"] .contenu {
  padding-top: 12px;
}

.hero-photo {
  display: none;
}

.acces {
  position: relative;
  z-index: 1; /* les boutons passent devant la photo */
}

@media (min-width: 960px) {
  .hero-photo {
    display: block;
    position: absolute;
    top: 4px;
    right: 26px; /* laisse la place au halo, qui déborde de ~30px, sans créer de défilement horizontal */
    width: 300px;
    height: 230px;
  }

  /* Halo organique : deux taches floues et décalées aux couleurs du site, derrière la photo */
  .hero-photo::before,
  .hero-photo::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .hero-photo::before {
    inset: -26px -30px -22px -34px;
    border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%;
    background:
      radial-gradient(circle at 30% 30%, rgba(31, 90, 74, 0.20), transparent 60%),
      radial-gradient(circle at 75% 80%, rgba(169, 96, 67, 0.16), transparent 58%);
    filter: blur(10px);
  }

  .hero-photo::after {
    inset: -11px -9px -13px -12px;
    border: 2px solid rgba(31, 90, 74, 0.28);
    border-radius: 52% 48% 41% 59% / 47% 56% 44% 53%;
    transform: rotate(-4deg);
  }

  /* La photo elle-même, découpée en forme arrondie */
  .hero-photo-cadre {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 58% 42% 46% 54% / 52% 44% 56% 48%;
    background: #e5ebde;
    box-shadow: 0 10px 30px rgba(20, 35, 30, 0.16);
  }

  .hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%; /* cadre le chien ET le chat */
    display: block;
  }

  /* Variante "logo" (en attendant une photo) : le logo entier, centré */
  .hero-photo-logo img {
    object-fit: contain;
    padding: 22px 40px 34px;
  }

  /* Le titre occupe l'espace à gauche de la photo, centré verticalement */
  .accueil-titre {
    max-width: calc(100% - 360px);
    min-height: 174px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .accueil-haut .accueil-titre h1 {
    font-size: 2.6rem;
    margin-bottom: 10px;
  }

  .accueil-haut .accueil-titre p {
    font-size: 1.2rem;
    max-width: 46ch;
    text-wrap: balance; /* lignes de longueur équilibrée : jamais un mot seul sur la dernière ligne */
  }
}

/* Variante "accueil-animaux" : le chien et le chat de la photo, détourés, passent la tête
   par le dessus du bouton "J'ai trouvé un animal" (2e bouton = colonne de droite).
   Ordinateur uniquement : sur téléphone les boutons sont empilés. */
.animaux-sortants {
  display: none;
}

@media (min-width: 960px) {
  .accueil-animaux .hero-photo {
    display: none; /* le chien détouré remplace la photo arrondie */
  }

  .accueil-animaux .acces-trouve .acces-illu {
    visibility: hidden; /* idem pour la silhouette du bouton "trouvé" */
  }

  .accueil-animaux .animaux-sortants {
    display: block;
    position: absolute;
    z-index: 0; /* derrière les boutons : le bas de l'illustration est caché par le bouton */
    width: 210px;
    height: auto;
    right: 80px;
    bottom: 100%;
    margin-bottom: -48px; /* bas des poitrails caché derrière le bouton */
    pointer-events: none;
    /* petite ombre portée, comme s'ils se penchaient au-dessus du bouton */
    filter: drop-shadow(0 6px 10px rgba(20, 35, 30, 0.28));
  }

  .accueil-animaux .acces-carte {
    position: relative;
    z-index: 1; /* les boutons passent devant les animaux */
  }
}

/* Bloc "Nous joindre" : bordure verte et icône devant l'adresse */
.contact-express {
  border: 1.5px solid var(--vert);
}

.contact-adresse dt {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-adresse dt svg {
  width: 18px;
  height: 18px;
  color: var(--couleur-perdu);
}

.acces {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.acces-carte {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: var(--rayon);
  text-decoration: none;
  color: #fff;
  box-shadow: var(--ombre);
  min-height: 108px;
  overflow: hidden;
  /* léger dégradé pour donner du relief, par-dessus la couleur de la rubrique */
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.08));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.acces-carte:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(20, 35, 30, 0.16);
}

.acces-icone {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}

.acces-icone svg {
  width: 28px;
  height: 28px;
}

/* Pastille du nombre d'animaux, sur l'icône */
.acces-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: #fff;
  color: var(--texte);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.acces-badge:empty {
  display: none;
}

.acces-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.acces-titre {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.acces-detail {
  font-size: 0.95rem;
}

.acces-compteur {
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 4px;
}

.acces-compteur:empty {
  display: none;
}

/* Illustration à droite du bouton (fichiers remplaçables dans img/illustrations/) */
.acces-illu {
  display: none;
  align-self: flex-end;
  flex-shrink: 0;
  height: 96px;
  margin: -8px 0 -18px;
}

.acces-illu img {
  height: 100%;
  width: auto;
  display: block;
  transition: transform 0.25s ease;
}

.acces-carte:hover .acces-illu img {
  transform: translateY(-3px) scale(1.03);
}

/* Illustrations seulement là où il y a la place à côté du texte :
   téléphone large (1 bouton par ligne) et grand écran (2 par ligne) */
@media (min-width: 480px) and (max-width: 639px), (min-width: 1040px) {
  .acces-illu {
    display: block;
  }
}

.acces-fleche {
  font-size: 1.5rem;
  opacity: 0.8;
}

.acces-perdu { background-color: var(--couleur-perdu); }
.acces-trouve { background-color: var(--couleur-trouve); }
.acces-recueillis { background-color: var(--couleur-recueillis); }
/* Adoption : fond beige, donc texte et illustration foncés */
.acces-adoption {
  background-color: var(--couleur-adoption);
  color: var(--texte);
}

.acces-adoption:hover {
  color: var(--texte);
}

.acces-adoption .acces-icone {
  background: rgba(28, 36, 34, 0.1);
}

.acces-adoption .acces-illu img {
  filter: brightness(0.22); /* l'illustration crème devient foncée, lisible sur le beige */
}

@media (prefers-reduced-motion: reduce) {
  .acces-carte:hover,
  .acces-carte:hover .acces-illu img {
    transform: none;
  }
}

/* À la souris (ordinateur) : l'illustration est cachée sous le bord bas du bouton
   et sort au survol. Sur écran tactile, ou si l'on a demandé moins d'animations,
   elle reste toujours visible (sinon on ne la verrait jamais). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .acces-illu img {
    transform: translateY(105%);
    transition: transform 0.35s ease-out;
  }

  .acces-carte:hover .acces-illu img,
  .acces-carte:focus-visible .acces-illu img {
    transform: translateY(0);
  }
}

.contact-express {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.contact-express-tel {
  font-size: 1.6rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--vert);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.contact-express > dl,
.infos-pratiques {
  margin: 0;
  display: grid;
  gap: 12px;
}

.contact-express dt,
.infos-pratiques dt {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texte-doux);
}

.contact-express dd,
.infos-pratiques dd {
  margin: 0;
}

/* Horaires : jours à gauche, créneaux à droite */
.horaires {
  margin: 0;
  display: grid;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.horaires div {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  gap: 12px;
}

.contact-express .horaires dt,
.infos-pratiques .horaires dt,
.horaires dt {
  font-weight: 700;
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}

.horaires dd {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.horaires-ferme dd {
  opacity: 0.7;
}

.horaires-note {
  font-size: 0.8rem;
  opacity: 0.75;
}

.presentation {
  display: grid;
  gap: 16px;
}

.chiffre-cle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--vert);
}

.chiffre-cle strong {
  font-size: 2.4rem;
  line-height: 1;
}

.liens-secondaires {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
}

.liens-secondaires a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  font-weight: 600;
  text-decoration: none;
  color: var(--texte);
}

.liens-secondaires a:hover {
  border-color: var(--vert);
  color: var(--vert);
}

.lien-icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--vert-clair);
  color: var(--vert);
}

.lien-icone svg {
  width: 22px;
  height: 22px;
}

/* ---------- Étapes (procédures) ---------- */

.etapes {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 12px;
}

.etapes > li {
  counter-increment: etape;
  position: relative;
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 18px 18px 18px 64px;
}

.etapes > li::before {
  content: counter(etape);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.etapes-terre > li::before {
  background: var(--terre);
}

.etapes-bleu > li::before {
  background: var(--bleu);
}

.etapes h2,
.etapes h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.etapes p:last-child,
.etapes ul:last-child {
  margin-bottom: 0;
}

.etapes .bouton {
  margin-top: 8px;
}

.encart {
  border-radius: var(--rayon-petit);
  padding: 16px 18px;
  margin: 0 0 20px;
  background: var(--vert-clair);
  border-left: 4px solid var(--vert);
}

.encart > :last-child {
  margin-bottom: 0;
}

.encart-alerte {
  background: var(--terre-clair);
  border-left-color: var(--terre);
}

.encart-info {
  background: var(--bleu-clair);
  border-left-color: var(--bleu);
}

/* Questions à se poser avant d'adopter (page Adoption) */
.questions {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
  display: grid;
  gap: 10px;
}

.questions li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--fond);
  border-radius: var(--rayon-petit);
  font-weight: 600;
  line-height: 1.35;
}

.question-icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vert-clair);
  color: var(--vert);
  flex-shrink: 0;
}

.question-icone svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 640px) {
  .questions {
    grid-template-columns: 1fr 1fr;
  }
}

.liste-simple {
  padding-left: 1.2em;
  margin: 0 0 1em;
}

.liste-simple li {
  margin-bottom: 4px;
}

/* ---------- Parcours de l'animal (page Animal trouvé) ---------- */

.parcours {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.parcours-etape {
  position: relative;
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 18px 16px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.parcours-etape p {
  margin: 0;
}

.parcours-etape small {
  color: var(--texte-doux);
  white-space: nowrap;
}

.parcours-icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--vert-clair);
  color: var(--vert);
}

.parcours-icone svg {
  width: 24px;
  height: 24px;
}

/* Étiquette de chaque cas ("S'il est identifié"…) */
.parcours-tag {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vert);
}

.parcours-depart,
.parcours-commun {
  background: var(--vert);
  color: #fff;
}

.parcours-depart a,
.parcours-commun a {
  color: #fff;
}

.parcours-depart .parcours-icone,
.parcours-commun .parcours-icone {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Flèche vers le bas entre deux niveaux */
.parcours-fleche {
  align-self: center;
  width: 2px;
  height: 30px;
  margin: 4px 0 10px;
  background: var(--bordure);
  position: relative;
}

.parcours-fleche::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--bordure);
  border-bottom: 0;
}

.parcours-cas {
  display: grid;
  gap: 12px;
}

.parcours-ou {
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: var(--texte-doux);
  font-style: italic;
}

/* Les 3 issues, chacune avec sa couleur */
.parcours-issue {
  border-top: 4px solid var(--vert);
}

.parcours-issue-adoption {
  border-top-color: var(--couleur-adoption);
}

.parcours-issue-adoption .parcours-icone {
  background: var(--couleur-adoption);
  color: var(--texte);
}

.parcours-issue-adoption .parcours-tag {
  color: var(--ocre);
}

.parcours-issue-alerte {
  border-top-color: var(--terre);
}

.parcours-issue-alerte .parcours-icone {
  background: var(--terre-clair);
  color: var(--terre);
}

.parcours-issue-alerte .parcours-tag {
  color: var(--terre-fonce);
}

.parcours-lien {
  font-size: 0.9rem;
  color: var(--texte-doux);
}

.parcours-plus {
  margin-top: 20px;
}

.section-parcours {
  margin-bottom: 28px;
}

@media (min-width: 700px) {
  .parcours-cas-2 {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
  }

  .parcours-cas-2 .parcours-ou {
    align-self: center;
  }

  .parcours-cas-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Carte des communes partenaires (page Collectivités) ---------- */

.carte-partenaires {
  margin: 16px 0 8px;
}

.carte-partenaires svg {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
}

.carte-partenaires path {
  stroke: #fff;
  stroke-width: 1;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.15s;
}

.commune-cc { fill: var(--vert); }
.commune-commune { fill: #6fa48f; }
.commune-non { fill: #e1ded6; }

.carte-partenaires path:hover,
.carte-partenaires path.commune-active {
  fill: var(--couleur-perdu);
}

.carte-reperes circle,
.carte-reperes .carte-niche {
  fill: #fff;
  stroke: var(--texte);
  stroke-width: 2;
  pointer-events: none;
}

.carte-reperes text {
  font: 700 22px var(--police-texte);
  fill: #fff;
  stroke: var(--texte);
  stroke-width: 4;
  paint-order: stroke;
  pointer-events: none;
}

.carte-info {
  text-align: center;
  min-height: 3em;
  margin: 4px 0 12px;
  color: var(--texte-doux);
}

.carte-legende {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font-size: 0.92rem;
}

.carte-legende li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pastille-legende {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.legende-cc { background: var(--vert); }
.legende-commune { background: #6fa48f; }
.legende-non { background: #e1ded6; }

.carte-listes {
  display: grid;
  gap: 8px 24px;
}

.carte-listes h3 {
  font-size: 1.02rem;
  margin: 8px 0 6px;
}

.liste-nb {
  color: var(--texte-doux);
  font-size: 0.9em;
}

@media (min-width: 640px) {
  .carte-listes {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Bandeau d'appel (bas des pages) ---------- */

.bandeau-appel {
  background: var(--vert);
  color: #fff;
  border-radius: var(--rayon);
  padding: 24px 20px;
  margin-top: 32px;
  display: grid;
  gap: 12px;
}

.bandeau-appel h2 {
  margin: 0;
}

.bandeau-appel p {
  margin: 0;
  opacity: 0.92;
}

.bandeau-appel a.bouton {
  background: #fff;
  color: var(--vert);
  justify-self: start;
}

.bandeau-appel a.bouton:hover {
  background: var(--vert-clair);
}

/* ---------- Tableau (tarifs) ---------- */

.tarifs-espece {
  font-size: 1.05rem;
  color: var(--vert);
  margin: 18px 0 8px;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  margin-bottom: 20px;
}

.tableau th,
.tableau td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}

.tableau th {
  background: var(--vert-clair);
  font-size: 0.9rem;
}

.tableau tr:last-child td {
  border-bottom: none;
}

.tableau td:last-child {
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Filtres ---------- */

.barre-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.filtres {
  display: flex;
  gap: 8px;
}

.filtres button {
  font: inherit;
  font-weight: 600;
  padding: 8px 18px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--bordure);
  background: var(--surface);
  color: var(--texte);
  cursor: pointer;
}

.filtres button[aria-pressed="true"] {
  background: var(--texte);
  border-color: var(--texte);
  color: #fff;
}

.compteur-liste {
  color: var(--texte-doux);
  font-size: 0.95rem;
}

/* ---------- Cartes animaux ---------- */

.grille {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.carte {
  background: var(--surface);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
}

.carte-lien-photo {
  display: block;
}

.carte-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--vert-clair);
}

.photo-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--vert);
  font-size: 0.9rem;
  font-weight: 600;
}

.photo-vide svg {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

/* Photo entière (rien n'est coupé) sur un fond flou fait de la même photo */
.photo-entiere {
  position: relative;
  overflow: hidden;
  background: #e6e4de;
}

.photo-entiere::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: var(--photo) center / cover no-repeat;
  filter: blur(18px) brightness(0.9);
}

.photo-entiere img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.carte-corps {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.carte-nom {
  font-size: 1.35rem;
  margin-bottom: 2px;
}

.carte-nom a {
  color: var(--texte);
  text-decoration: none;
}

.carte-nom a:hover {
  text-decoration: underline;
}

.carte-resume {
  color: var(--texte-doux);
  margin: 0 0 12px;
}

/* En-tête des animaux à l'adoption : "MAYA ♀" / "Malinois - env. 5 ans" */
.titre-adoption {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700; /* seule graisse de Fraunces installée */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.titre-adoption a {
  color: var(--texte);
  text-decoration: none;
}

.titre-adoption a:hover {
  text-decoration: underline;
}

h1.titre-adoption {
  font-size: 2.2rem;
}

.sexe {
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1;
}

.sexe-femelle {
  color: #d63384;
}

.sexe-male {
  color: #2b6cb0;
}

.sous-titre-adoption {
  font-size: 1.15rem;
  margin: 2px 0 12px;
}

.carte-infos {
  margin: 0 0 12px;
  display: grid;
  gap: 4px;
}

.carte-infos div,
.fiche-liste div {
  display: flex;
  gap: 6px;
}

.carte-infos dt,
.fiche-liste dt {
  font-weight: 700;
}

.carte-infos dt::after,
.fiche-liste dt::after {
  content: " :";
}

.carte-infos dd,
.fiche-liste dd {
  margin: 0;
}

.carte-texte {
  margin: 0 0 16px;
  color: var(--texte-doux);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
}

.carte-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.carte-actions .bouton {
  flex: 1 1 140px;
}

.pastille {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0 0 8px;
}

/* Pastilles des fiches : recueillis (vert du site) / adoption (orange clair) */
.pastille-recherche_proprietaire {
  background: var(--vert-clair);
  color: var(--vert-fonce);
}

.pastille-adoption {
  background: var(--terre-clair);
  color: var(--terre-fonce);
}

/* ---------- Témoignages d'adoptants (page Adoption) ---------- */

.temoignage {
  margin: 0;
}

.temoignage-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.temoignage-texte {
  margin: 4px 0 12px;
  padding-left: 14px;
  border-left: 3px solid var(--couleur-adoption);
  font-style: italic;
}

.temoignage-texte p {
  margin: 0;
  white-space: pre-line;
}

.temoignage-signature {
  margin-top: auto;
  color: var(--texte-doux);
  font-size: 0.92rem;
}

/* Espace équipe : statut et suppression des témoignages */
.pastille-publie {
  background: var(--vert-clair);
  color: var(--vert-fonce);
}

.pastille-masque {
  background: var(--bleu-clair);
  color: var(--bleu-fonce);
}

.bouton-danger {
  color: var(--erreur);
}

.bouton-danger:hover {
  border-color: var(--erreur);
  color: var(--erreur);
}

.liste-temoignages-admin {
  margin-top: 16px;
}

/* ---------- Fiche individuelle ---------- */

.lien-retour {
  display: inline-block;
  margin-bottom: 16px;
  font-weight: 600;
  text-decoration: none;
}

.fiche {
  display: grid;
  gap: 24px;
}

.fiche-photo {
  background: var(--surface);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
}

.fiche-image {
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  display: block;
  background: #eceae4;
}

.fiche-image.photo-vide {
  aspect-ratio: 4 / 3;
  background: var(--vert-clair);
}

.fiche-liste {
  margin: 0 0 20px;
  display: grid;
  gap: 6px;
  font-size: 1.05rem;
}

.fiche-section h2 {
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.fiche-section p {
  white-space: pre-line;
}

.fiche-contact {
  background: var(--vert-clair);
  border-radius: var(--rayon);
  padding: 18px;
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.fiche-contact p {
  margin: 0;
  font-weight: 600;
}

/* Partage d'une fiche */
.fiche-partage {
  margin-top: 20px;
}

.fiche-partage h2 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.partage-boutons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bouton-partage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}

.bouton-partage:hover {
  border-color: currentColor;
}

.bouton-partage svg {
  width: 20px;
  height: 20px;
}

.partage-whatsapp svg { color: #1fa855; }
.partage-facebook svg { color: #1877f2; }
.partage-sms svg,
.partage-lien svg,
.partage-plus svg { color: var(--vert); }

/* ---------- Messages ---------- */

.message {
  color: var(--texte-doux);
  text-align: center;
  padding: 32px 16px;
  grid-column: 1 / -1;
  background: var(--surface);
  border-radius: var(--rayon);
}

.message-erreur {
  color: var(--erreur);
  background: var(--erreur-clair);
  border-radius: var(--rayon-petit);
  padding: 12px;
}

/* ---------- Pied de page ---------- */

.pied {
  background: var(--vert-fonce);
  color: #e6efeb;
  font-size: 0.95rem;
}

.pied a {
  color: #fff;
}

.pied-inner {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 32px 16px 16px;
  display: grid;
  gap: 24px;
}

.pied-bloc {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pied-bloc p {
  margin: 0;
}

.pied-bloc a {
  text-decoration: none;
  padding: 2px 0;
}

.pied-bloc a:hover {
  text-decoration: underline;
}

.pied-titre {
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px !important;
}

.pied-legal {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
  color: #b9cdc5;
}

.pied-legal a {
  color: #b9cdc5;
}

.pied-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
}

.pied-legal p {
  margin: 0;
}

.pied-credit {
  margin-left: auto !important; /* reste à droite, même quand la ligne passe en dessous */
  font-size: 0.8rem;
  opacity: 0.75;
}

/* =====================================================================
   Espace équipe (admin)
   ===================================================================== */

.contenu-admin {
  max-width: 760px;
}

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formulaire label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}

.formulaire input[type="text"],
.formulaire input[type="number"],
.formulaire input[type="email"],
.formulaire input[type="password"],
.formulaire input[type="file"],
.formulaire select,
.formulaire textarea,
.recherche {
  font: inherit;
  font-weight: 400;
  font-size: 16px; /* évite le zoom automatique sur iPhone */
  width: 100%;
  padding: 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--texte);
}

.formulaire textarea {
  resize: vertical;
}

.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus,
.recherche:focus {
  outline: 3px solid var(--vert-clair);
  border-color: var(--vert);
}

.formulaire .aide {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--texte-doux);
}

.obligatoire {
  font-weight: 400;
  color: var(--texte-doux);
  font-size: 0.9em;
}

.choix {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.choix legend {
  font-weight: 600;
  margin-bottom: 6px;
  padding: 0;
}

.formulaire .choix-option {
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  min-height: 52px;
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  cursor: pointer;
}

.choix-option:has(input:checked) {
  border-color: var(--vert);
  background: var(--vert-clair);
}

.age {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.age legend {
  font-weight: 600;
  margin-bottom: 6px;
  padding: 0;
}

.age-ligne {
  display: flex;
  gap: 8px;
}

.age-ligne input {
  flex: 1;
}

.export-precision .age-ligne label {
  flex: 1;
}

.formulaire .export-precision .age-ligne select {
  flex: none;
  width: 100%;
}

.formulaire .age-ligne select {
  width: auto;
  flex: 0 0 110px;
}

.formulaire .case {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  min-height: 44px;
  cursor: pointer;
}

.case input {
  width: 22px;
  height: 22px;
  accent-color: var(--vert);
}

.apercu-photo {
  max-width: 100%;
  max-height: 260px;
  border-radius: var(--rayon-petit);
  object-fit: contain;
  align-self: flex-start;
}

.panneau-login {
  max-width: 420px;
  margin: 24px auto;
  background: var(--surface);
  padding: 24px 20px;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.onglets {
  display: flex;
  gap: 4px;
  background: var(--surface);
  padding: 4px;
  border-radius: 12px;
  box-shadow: var(--ombre);
  margin-bottom: 20px;
  position: sticky;
  top: calc(var(--hauteur-entete) + 4px);
  z-index: 5;
}

.onglets button {
  flex: 1;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 6px;
  min-height: 48px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--texte);
  cursor: pointer;
}

/* 4 onglets : grille 2 × 2 sur téléphone */
@media (max-width: 559px) {
  .onglets {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .onglets button {
    min-height: 44px;
  }
}

.onglets button[aria-selected="true"] {
  background: var(--vert);
  color: #fff;
}

.recherche {
  margin-bottom: 16px;
}

.liste-admin {
  display: grid;
  gap: 16px;
}

.carte-admin {
  display: grid;
  grid-template-columns: 96px 1fr;
  position: relative;
}

/* Bouton stylo "Modifier la fiche", en haut à droite de chaque carte */
.bouton-modifier {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  background: var(--surface);
  color: var(--vert);
  cursor: pointer;
}

.bouton-modifier:hover {
  border-color: var(--vert);
  background: var(--vert-clair);
}

.bouton-modifier svg {
  width: 20px;
  height: 20px;
}

.carte-admin .carte-corps {
  padding-right: 60px; /* place pour le stylo */
}

.modifier-photo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carte-admin .carte-photo {
  width: 96px;
  height: 96px;
  aspect-ratio: auto;
  margin: 14px 0 0 14px;
  border-radius: var(--rayon-petit);
}

.carte-admin .photo-vide span {
  display: none;
}

.carte-admin .photo-vide svg {
  width: 36px;
  height: 36px;
}

.carte-admin .carte-corps {
  min-width: 0;
  padding-bottom: 4px;
}

.carte-admin .carte-nom {
  font-size: 1.15rem;
}

.carte-admin .carte-resume {
  margin-bottom: 2px;
}

.carte-admin .carte-detail {
  margin: 0;
  font-size: 0.95rem;
}

.carte-admin .carte-actions {
  grid-column: 1 / -1;
  flex-direction: column;
  padding: 8px 14px 14px;
}

.carte-admin .carte-actions .bouton {
  flex: none;
}

.alerte-droits {
  text-align: left;
  margin-bottom: 16px;
  overflow-wrap: anywhere;
}

.dialogue {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border: none;
  border-radius: var(--rayon);
  padding: 22px 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  color: var(--texte);
}

.dialogue::backdrop {
  background: rgba(20, 30, 25, 0.5);
}

.dialogue-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 8px;
}

.dialogue-actions .bouton {
  flex: 1 1 140px;
}

.notification {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 480px;
  margin: 0 auto;
  padding: 14px 18px;
  border-radius: var(--rayon-petit);
  background: var(--vert-fonce);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.notification-erreur {
  background: var(--erreur);
}

/* =====================================================================
   Écrans plus larges
   ===================================================================== */

@media (min-width: 640px) {
  h1 {
    font-size: 2.2rem;
  }

  .accueil-titre h1 {
    font-size: 2.1rem;
  }

  .acces {
    grid-template-columns: 1fr 1fr;
  }

  .grille {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-express {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 24px;
  }

  .contact-express > dl,
  .infos-pratiques {
    grid-template-columns: 1fr 1fr;
  }

  .liens-secondaires {
    grid-template-columns: repeat(4, 1fr);
  }

  .bandeau-appel {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 28px;
  }

  .bandeau-appel a.bouton {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  .pied-inner {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .carte-admin {
    grid-template-columns: 130px 1fr;
  }

  .carte-admin .carte-photo {
    width: 130px;
    height: 130px;
  }

  .carte-admin .carte-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* En-tête : menu complet sur une ligne seulement quand il tient (logo + 5 liens + Appeler).
   En dessous de 1080px, menu repliable (☰). */
@media (min-width: 1080px) {
  :root {
    --hauteur-entete: 76px;
  }

  .entete-inner {
    flex-wrap: nowrap;
  }

  .marque {
    flex: 0 0 auto;
    margin-right: auto;
  }

  .bouton-menu {
    display: none;
  }

  .menu {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    order: 1;
    padding: 0;
    gap: 2px;
  }

  .entete-actions {
    order: 2;
  }

  .menu a {
    border: none;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .menu a:hover {
    background: var(--vert-clair);
  }

  .menu a[aria-current="page"] {
    background: var(--vert-clair);
  }

  .menu a.menu-secondaire {
    display: none;
  }
}

@media (min-width: 960px) {
  .acces-carte {
    padding: 18px 22px;
    min-height: 112px;
  }

  .acces-titre {
    font-size: 1.4rem;
  }

  .grille {
    grid-template-columns: repeat(3, 1fr);
  }

  .presentation {
    grid-template-columns: 2fr 1fr;
    align-items: center;
  }

  .fiche {
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
  }

  .fiche-photo {
    position: sticky;
    top: calc(var(--hauteur-entete) + 16px);
  }
}