/* SPA de l'Enclave des Papes : feuille de style unique, sans dépendance
   externe. Reprend la maquette validée par l'association : fond ivoire
   chaud, encre brune, accent bleu repris du logo, titres en Lexend.
   Pas d'animation, pas d'effet clignotant (demande du cahier des charges). */

/* Lexend et Inter sont servis depuis assets/fonts/ : aucune requête vers
   un serveur tiers, le site fonctionne à l'identique hors ligne et ne
   dépose rien chez Google. Lexend est un fichier variable : un seul
   fichier par plage de caractères couvre les graisses 400 à 700. */
@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-700-latin.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-700-latin-ext.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ivoire: #FAF7F2;
  --creme: #F2ECDF;
  --encre: #231612;
  --texte: #3D352E;
  --texte-doux: #6B6157;
  --bordure: #E0D5C1;
  --bleu: #007ACC;
  --bleu-fonce: #0055B8;
  --bleu-clair: #E3F0FA;
  --gris-picto: #E4E3E2;   /* pastille des pictogrammes, relevée sur la maquette */
  --blanc: #FFFFFF;
  --urgent: #B3261E;
  --succes: #2F6B4F;

  --rayon: 16px;
  --rayon-petit: 10px;
  --rayon-grand: 28px;
  --ombre: 0 10px 30px rgba(35, 22, 18, 0.07);
  --ombre-forte: 0 16px 44px rgba(35, 22, 18, 0.13);

  /* Largeur du contenu. Mesurée sur la maquette et non choisie au
     jugé : à 1440 px de fenêtre, son contenu commence à 27 px du bord et
     occupe donc 1386 px. La marge fixe de 1.7rem reproduit ce calage, et
     --largeur ne sert que de garde-fou sur les très grands écrans. */
  --largeur: 1600px;
  --marge-bord: 1.7rem;
  --largeur-texte: 74ch;    /* colonne de lecture confortable */
  --largeur-lecture: 68rem; /* colonne centrée des pages rédigées */
  /* Colonne de prose des bandes centrées : 954 px sur la maquette, mesurée
     sur /conseils/avant-d-adopter. En rem et non en em : dans une variable,
     l'em se résout sur la police de l'élément qui l'utilise, et un h2 de
     37,6 px transformait 53 em en 1 993 px. */
  --largeur-prose: 59.6rem;
  /* La galerie ne remplit pas ses trois colonnes : elle est centree a 61 %.
     Le recit s'aligne sur SON bord droit, pas sur celui de la colonne, donc
     les deux lisent la meme valeur ici. */
  --galerie-largeur: 61%;
  /* Gouttière calculée : elle centre le contenu sur --largeur tout en
     laissant la section occuper toute la largeur de l'écran. C'est ce qui
     permet les bandes de couleur pleine largeur sans emballer chaque bloc
     dans un conteneur supplémentaire. */
  --gouttiere: max(var(--marge-bord), calc((100% - var(--largeur)) / 2));
  --hauteur-entete: 74px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ivoire);
  color: var(--texte);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14.4px;
  line-height: 1.65;
  /* Filet de sécurité : ne masque pas les bugs de mise en page (traités
     via min-width:0 sur les grilles), protège seulement contre un
     débordement ponctuel de contenu (long mot, longue adresse). */
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
p, li, h1, h2, h3, h4, a { overflow-wrap: break-word; }
a { color: var(--bleu-fonce); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--bleu); }

h1, h2, h3, h4 {
  font-family: 'Lexend', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.55em;
  color: var(--encre);
  text-wrap: balance;
}
h1 { font-size: clamp(1.68rem, 3.68vw, 2.88rem); }
h2 { font-size: clamp(1.32rem, 2.4vw, 1.688rem); }  /* 33,8 px sur la maquette */
h3 { font-size: clamp(0.96rem, 1.44vw, 1.2rem); line-height: 1.3; }
h4 { font-size: 0.88rem; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: 0.5em; }
li:last-child { margin-bottom: 0; }

/* Titre à deux graisses, repris de la maquette : la première moitié en
   gras plein, la fin en graisse normale. Utilisé sur les grands titres
   de page via <span class="titre-leger">. */
.titre-leger { font-weight: 500; }  /* 500 : valeur relevée sur la maquette */

table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; }
/* Les tableaux (tarifs) sont enveloppés dans .tableau-scroll : au lieu
   d'écraser les colonnes ou de déborder hors de l'écran, ils défilent
   horizontalement dans leur propre boîte. */
.tableau-scroll {
  overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch;
  background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.tableau-scroll table { width: 100%; min-width: 480px; margin: 0; }
td, th { padding: 0.85em 1.1em; text-align: left; border: 0; border-top: 1px solid var(--bordure); }
tr:first-child td, tr:first-child th { border-top: 0; }
/* Première colonne : c'est l'intitulé de la ligne (une tranche d'âge, un
   document à fournir), il porte l'information autant que le prix. */
td:first-child { font-weight: 600; color: var(--encre); }
th {
  background: var(--encre); color: var(--blanc); font-family: 'Lexend', system-ui, sans-serif;
  font-weight: 700; font-size: 0.656rem; letter-spacing: 0.1em; text-transform: uppercase;
  border-top: 0;
}
.tarif {
  display: inline-block; background: var(--bleu); color: var(--blanc);
  padding: 0.25em 0.85em; border-radius: 999px; font-weight: 600; font-size: 0.736rem;
  white-space: nowrap;
}

/* Grilles de tarifs : deux cartes côte à côte, en-tête brun et corps
   blanc. Les valeurs ci-dessous (rayon 24 px, filet 1 px, gouttière 2 em,
   pastille 14 px) sont RELEVÉES sur la maquette Lovable, dans le
   navigateur, et non estimées à l'œil : voir maquette_tarifs.py. */
.grille-tarifs { display: grid; gap: 2em; margin: 0; }
@media (min-width: 760px) { .grille-tarifs { grid-template-columns: 1fr 1fr; align-items: start; } }
.carte-tarifs {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: 24px; overflow: hidden; min-width: 0;
}
.carte-tarifs h3 {
  margin: 0; background: var(--encre); color: var(--blanc);
  font-family: 'Lexend', system-ui, sans-serif;
  font-size: 1.25em; font-weight: 700; letter-spacing: 0.025em; text-transform: uppercase;
  /* 1 em et 1,6 em de SA propre taille (22,5 px) = 22,5 px et 36 px, les
     valeurs de la maquette. En 1.25em/2em, l'em se calculait sur la
     police agrandie du titre et donnait 28 px / 45 px. */
  padding: 1em 1.6em; line-height: 1.4;
}
/* Une ligne = un intitulé puis sa pastille, empilés. En colonnes, les
   deux cartes côte à côte cassaient les intitulés longs en deux lignes. */
.tarifs-lignes { list-style: none; margin: 0; padding: 0; }
.tarifs-lignes li { padding: 1.25em 2em; border-top: 1px solid var(--bordure); }
/* La première ligne est mise en évidence, et n'a pas de filet au-dessus :
   l'en-tête brun fait déjà la séparation. */
.tarifs-lignes li:first-child { border-top: 0; background: rgba(35, 22, 18, 0.1); }
.tarif-libelle { margin: 0; font-weight: 600; color: var(--texte); }
.tarif-ligne-prix { margin: 0.25em 0 0; }
.tarif-prix {
  display: inline-block; background: var(--bleu); color: var(--blanc);
  padding: 0.29em 0.74em; border-radius: 14px;
  font-size: 0.85em; font-weight: 500; line-height: 1.65; white-space: nowrap;
}

.lien-evitement {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--encre); color: var(--blanc); padding: 0.8em 1.2em; border-radius: var(--rayon-petit);
}
.lien-evitement:focus { left: 1em; top: 1em; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

/* Surtitre bleu en capitales espacées, au-dessus des grands titres. */
.surtitre {
  display: block;
  font-family: 'Lexend', system-ui, sans-serif;
  /* 15,75 px sur la maquette pour une base de 18 px, soit 0.875em. */
  font-size: 0.875em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bleu); margin: 0 0 0.6em;
}

/* --- En-tête ------------------------------------------------------- */
/* La barre n'est jamais tout à fait opaque : elle laisse deviner ce qui
   passe dessous, sur le héros comme au défilement d'une page intérieure.
   Deux nuances seulement : très transparente sur la photo du héros, où
   c'est la photo qu'on veut voir, un peu moins partout ailleurs, où du
   texte défile dessous et doit rester lisible. Le flou d'arrière-plan
   fait le reste du travail : il détaille le fond sans l'effacer.
   La classe .entete--defile est posée par site.js sur l'accueil. */
.entete {
  background: rgba(35, 22, 18, 0.82);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  position: sticky; top: 0; z-index: 30;
}
/* Sans flou d'arrière-plan (Firefox avant la 103, vieux Safari), une barre
   à 82 % laisse passer le texte du dessous en clair sur clair. On épaissit
   alors le fond : la lisibilité passe avant l'effet. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .entete { background: rgba(35, 22, 18, 0.94); }
}
.entete__barre {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0.7em 1.4em;
  display: flex; align-items: center; gap: 1.4em;
  min-height: var(--hauteur-entete);
}
.entete__logo { display: flex; align-items: center; flex-shrink: 0; }
/* Le logo est fourni en bleu sur fond transparent : sur la barre brune on
   le passe en blanc plutôt que de maintenir un second fichier. */
.entete__logo img { height: 46px; width: auto; filter: brightness(0) invert(1); }
/* Le menu est étalé au centre de la barre et non tassé à droite : sur la
   maquette il démarre juste après le logo et court jusqu'au bouton de
   don, avec de l'air entre les entrées. */
.entete__nav { flex: 1; min-width: 0; }
.entete__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 0.4em; justify-content: center; }
.entete__nav > ul > li { position: relative; }
.entete__nav a {
  display: block; padding: 0.6em 0.75em; color: rgba(255, 255, 255, 0.94);
  font-weight: 500; text-decoration: none; border-radius: var(--rayon-petit);
  font-size: 0.8rem; white-space: nowrap;
}
.entete__nav a:hover { background: rgba(255, 255, 255, 0.12); color: var(--blanc); }
.entete__nav a.actif { color: var(--blanc); box-shadow: inset 0 -2px 0 var(--bleu); border-radius: 0; }
.entete__nav li.a-des-enfants > a { display: inline-flex; align-items: center; gap: 0.35em; }
/* Le chevron des sous-menus est bleu : c'est le rappel de couleur de la
   maquette, et il signale au passage qu'il y a quelque chose à déplier. */
.entete__nav li.a-des-enfants > a::after {
  content: ''; width: 7px; height: 7px; border-right: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu);
  transform: rotate(45deg); margin-top: -0.3em;
}
.entete__nav li.a-des-enfants.ouvert > a::after { transform: rotate(-135deg); margin-top: 0.2em; }
.entete__nav .sous-menu {
  /* Pas de marge entre le lien et le sous-menu : un espace ici crée une
     zone morte où la souris « sort » du survol avant d'atteindre le
     sous-menu, qui se referme alors avant qu'on ait pu cliquer dessus. */
  display: none; position: absolute; left: 0; top: 100%; min-width: 240px;
  background: var(--blanc); border-radius: var(--rayon-petit);
  box-shadow: var(--ombre-forte); padding: 0.5em 0.45em; list-style: none; margin: 0;
}
.entete__nav li.a-des-enfants:hover .sous-menu,
.entete__nav li.a-des-enfants.ouvert .sous-menu { display: block; }
.entete__nav .sous-menu a { font-size: 0.76rem; padding: 0.55em 0.8em; color: var(--texte); }
.entete__nav .sous-menu a:hover { background: var(--creme); color: var(--encre); }
/* Sous 1 360 px, les sept entrées ne tiennent plus entre le logo et le
   bouton de don : elles débordaient par-dessus l'un et l'autre, sans que
   rien ne le signale : le contenu d'une ligne en nowrap déborde de sa boîte
   au lieu de la faire grandir. On les resserre plutôt que de basculer en
   menu au doigt un ecran d'ordinateur portable. */
@media (min-width: 1141px) and (max-width: 1360px) {
  .entete__nav ul { gap: 0.1em; }
  .entete__nav a { padding: 0.6em 0.45em; font-size: 0.752rem; }
  .entete__barre { gap: 0.9em; }
  .entete__don { padding: 0.6em 1em; font-size: 0.704rem; }
}
.entete__don {
  display: inline-flex; align-items: center; gap: 0.45em; flex-shrink: 0;
  background: var(--bleu); color: var(--blanc); padding: 0.6em 1.3em;
  border-radius: 999px; font-weight: 600; font-size: 0.736rem; text-decoration: none; white-space: nowrap;
}
.entete__don:hover { background: var(--bleu-fonce); color: var(--blanc); }
.entete__don .ico { color: var(--blanc); }
.entete__bascule {
  display: none; margin-left: auto; background: rgba(255, 255, 255, 0.14); color: var(--blanc);
  border: 0; padding: 0.6em 1em; border-radius: var(--rayon-petit); font-weight: 600; cursor: pointer;
  font-family: inherit; font-size: 0.76rem;
}

/* Accueil : la barre flotte au-dessus de la photo. */
body.a-hero .entete {
  background: rgba(35, 22, 18, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Au défilement elle rejoint la teinte des pages intérieures, sans jamais
   redevenir opaque : c'est ce que demandait l'association. */
body.a-hero .entete--defile {
  background: rgba(35, 22, 18, 0.82);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.a-hero .entete--defile { background: rgba(35, 22, 18, 0.94); }
}
/* Le héros remonte sous la barre : c'est la photo qui commence en haut de
   page, pas un bandeau brun suivi d'une photo. */
body.a-hero main { margin-top: calc(-1 * var(--hauteur-entete)); }

/* --- Boutons -------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.8em 1.7em; border-radius: 999px;
  font-weight: 600; font-size: 0.784rem; text-decoration: none; border: 2px solid transparent;
  margin: 0.3em 0.6em 0.3em 0; line-height: 1.3;
}
.bouton--primaire { background: var(--bleu); color: var(--blanc); }
.bouton--primaire:hover { background: var(--bleu-fonce); color: var(--blanc); }
.bouton--secondaire { background: transparent; color: var(--encre); border-color: var(--bordure); }
.bouton--secondaire:hover { border-color: var(--bleu); color: var(--bleu-fonce); }
/* Sur fond sombre (héros, bandes brunes) le bouton secondaire s'inverse. */
.sur-fond-sombre .bouton--secondaire { color: var(--blanc); border-color: rgba(255, 255, 255, 0.55); }
.sur-fond-sombre .bouton--secondaire:hover { border-color: var(--blanc); background: rgba(255, 255, 255, 0.1); color: var(--blanc); }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 0.4em;
  color: var(--bleu-fonce); font-weight: 600; font-size: 0.76rem; text-decoration: none;
}
.lien-fleche::after { content: '→'; transition: transform 0.15s ease; }
.lien-fleche:hover { color: var(--bleu); }
.lien-fleche:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .lien-fleche::after { transition: none; } }
.lien-fleche--mobile { display: none; }
@media (max-width: 640px) {
  .lien-fleche--desktop { display: none; }
  .lien-fleche--mobile { display: inline-flex; }
}

/* --- Héros ---------------------------------------------------------- */
/* Photo pleine largeur, texte en bas à gauche sur un dégradé sombre :
   c'est la première chose que voit le visiteur, il faut que la photo
   respire et que le texte reste lisible quelle que soit l'image. */
.hero {
  position: relative;
  /* Pleine page : la photo occupe toute la hauteur de l'écran. Le svh
     mesure la fenêtre barres du navigateur déployées ; sur mobile, un
     100vh fait passer les boutons sous la barre d'adresse. Le vh reste
     en repli pour les navigateurs qui ignorent svh. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--hauteur-entete) + 3rem) var(--gouttiere) 3.5rem;
  background: var(--encre);
  overflow: hidden;
  color: var(--blanc);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(35, 22, 18, 0.86) 0%, rgba(35, 22, 18, 0.55) 45%, rgba(35, 22, 18, 0.15) 78%, rgba(35, 22, 18, 0.05) 100%),
    linear-gradient(to top, rgba(35, 22, 18, 0.6) 0%, rgba(35, 22, 18, 0) 45%);
}
.hero__contenu { position: relative; z-index: 2; max-width: 40rem; min-width: 0; }
.hero h1 { color: var(--blanc); margin-bottom: 0.45em; }
/* L'accroche s'arrête à l'aplomb du titre : au-delà, ses lignes partaient
   sur la partie claire de la photo, là où sont les animaux, et devenaient
   illisibles. Elle prend une ligne de plus, le héros fait toute la hauteur
   de l'écran, la place ne manque pas. */
.hero__soustitre {
  font-size: 0.896rem; color: rgba(255, 255, 255, 0.88); margin-bottom: 1.6em;
  max-width: 31rem;
}
.hero__actions { margin-bottom: 0.6em; }
.hero__confiance { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6em 1.6em; padding: 0; margin: 1.8em 0 0; }
.hero__confiance li {
  display: flex; align-items: center; gap: 0.5em; font-size: 0.736rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.9); margin: 0;
}
.hero__confiance .ico { color: var(--blanc); opacity: 0.9; }
@media (max-width: 720px) {
  .hero { padding-bottom: 2.6rem; }
  /* Sur un écran étroit il n'y a plus d'animal à droite du texte : brider
     l'accroche ne ferait que la casser au tiers de la largeur. */
  .hero__soustitre { max-width: none; }
  /* Sur mobile le texte occupe presque toute la photo : un dégradé qui
     s'éclaircit vers le haut laisserait le titre sur une zone claire.
     On assombrit donc partout, plus franchement en bas où est le texte,
     et on laisse respirer le haut où l'on voit les animaux. */
  .hero::after {
    background:
      linear-gradient(to top, rgba(35, 22, 18, 0.92) 0%, rgba(35, 22, 18, 0.8) 48%, rgba(35, 22, 18, 0.42) 100%);
  }
  /* Le cadrage vertical remonte : au centre, l'écran étroit ne montrait
     que le poitrail du chien, les têtes passaient au-dessus du bord. */
  .hero__media img { object-position: 52% 28%; }
}

/* Bandeau de titre des pages intérieures : pas de photo, juste le
   surtitre bleu et le grand titre, sur le fond ivoire. */
.page-entete {
  /* Le titre tombe à 221 px du haut sur la maquette, contre 186 avec
     l'ancien clamp : on rapproche sans copier le 180 px de padding, notre
     en-tête n'ayant pas la même hauteur.
     Le bas est serré à 18 px, valeur de la maquette : le bandeau de titre
     et la première bande partagent le même fond, leurs deux marges
     s'additionnaient et laissaient 187 px de vide sous le titre au lieu
     de 81. */
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--gouttiere) 1.15rem;
  background: var(--ivoire);
}
.page-entete h1 { margin-bottom: 0; }
.page-entete__intro { max-width: var(--largeur-texte); color: var(--texte-doux); font-size: 0.864rem; margin: 0.9em 0 0; }
/* Le bandeau de titre et la première section partagent le même fond :
   sans cette règle leurs deux marges s'additionnent et laissent un trou
   d'une centaine de pixels entre le titre et le premier paragraphe. */
.page-entete + .section { padding-top: 0; }
.page-entete + .section--creme, .page-entete + .section--encre { padding-top: 2.85rem; }
/* 63 px sur la maquette entre le bandeau de titre et la première bande de
   même fond : 18 + 63 = 81 px sous le titre. */
.page-entete + .section:not(.section--creme):not(.section--encre) { padding-top: 2.85rem; }
/* Le premier bloc d'une bande porte parfois sa propre marge haute (la
   grille d'animaux en pose 36 px) : elle s'ajoutait au padding de bande
   et creusait 117 px sous le titre au lieu de 64. */
.page-entete + .section > *:first-child { margin-top: 0; }

/* --- Bandes de contenu ---------------------------------------------- */
/* Chaque section occupe toute la largeur de l'écran et centre son contenu
   grâce à --gouttiere. Les fonds alternent ivoire / crème / brun pour
   découper la page en tranches lisibles. */
main { display: block; }
.section {
  /* 108 px de padding vertical sur la maquette pour les bandes de contenu,
     soit 6 rem. Le clamp plafonnait à 4,5 rem et serrait les bandes. */
  padding: clamp(2.75rem, 7.6vw, 6.75rem) var(--gouttiere);
  margin: 0;
  background: var(--ivoire);
}
.section > *:last-child { margin-bottom: 0; }
/* Mesure de lecture des paragraphes courants, relevée sur la maquette :
   864 px pour une police de 18 px, soit 48 em. Les tableaux, grilles et
   cartes gardent la pleine largeur.
   On raccourcit la ligne par un retrait à DROITE, sans toucher au
   max-width : la colonne est centrée par des marges auto sur chaque
   enfant, et réduire sa largeur recentrerait le paragraphe, donc
   décalerait son bord gauche. Le texte se raccourcit, l'axe ne bouge pas. */
.section--texte > p, .section--liste > p {
  /* Le retrait ne peut pas dépasser ce que la colonne peut céder. Écrit
     en constante (1 088 px moins 48 em, soit 224 px), il s'appliquait
     aussi à un téléphone de 320 px : le paragraphe débordait alors de
     119 px hors de l'écran, sur /contact, /credits-photos,
     /mentions-legales et /pension. Le min() le ramène à zéro dès que la
     colonne descend sous 26 rem, sans rien changer au rendu sur
     ordinateur, où c'est toujours la première valeur qui gagne. */
  padding-right: max(0px, min(calc(var(--largeur-lecture) - 48em), calc(100% - 26rem)));
}
/* Retrait des puces : 1,5 em = 27 px, valeur de la maquette. */
.section--liste > ul:not(.liste-cartes),
.section--liste > ol:not(.liste-cartes) { padding-left: 1.5em; }
.section--liste > ul > li, .section--liste > ol > li { margin-bottom: 0.5em; }
.section--creme { background: var(--creme); }
.section--encre {
  background: var(--encre);
  color: rgba(255, 255, 255, 0.82);
}
/* .sur-fond-sombre ne peint rien : c'est un simple marqueur de contexte
   qui inverse les couleurs de texte et de bouton là où le fond est déjà
   sombre (héros, bandes brunes). */
.section--encre h1, .section--encre h2, .section--encre h3,
.sur-fond-sombre h1, .sur-fond-sombre h2, .sur-fond-sombre h3 { color: var(--blanc); }
.section--encre a:not(.bouton), .sur-fond-sombre a:not(.bouton) { color: var(--blanc); }
/* Le gris des textes secondaires est calculé pour un fond clair : posé sur
   la bande brune il tombe à un rapport de contraste de 2,9, sous le
   minimum de 4,5. Sur fond sombre, c'est du blanc adouci. */
.section--encre .section__intro, .sur-fond-sombre .section__intro,
.section--encre .section__soustitre, .sur-fond-sombre .section__soustitre {
  color: rgba(255, 255, 255, 0.82);
}
.section--encre .lien-fleche, .sur-fond-sombre .lien-fleche { color: var(--blanc); }

/* Une section de texte sans illustration en face centre sa colonne de
   lecture au lieu de la coller à gauche : collée, elle laissait la moitié
   droite de la page vide sur toute sa hauteur. C'est ce que fait la
   maquette sur ses pages de conseils. La colonne reste courte, au delà
   d'environ 85 caractères l'œil perd la ligne. */
.section--centre > * { max-width: var(--largeur-prose); margin-left: auto; margin-right: auto; }
.encart--centre { max-width: var(--largeur-lecture); }
.section--texte img, .section--liste img { border-radius: var(--rayon); margin: 1.4em 0; }
/* Dans un duo, c'est la boîte qui porte le rayon (24 px, maquette) et la
   photo la remplit : pas de rayon ni de marge propres, sinon un liseré
   blanc apparaît dans les angles. */
.duo__media img { border-radius: 0; margin: 0; }
.section--texte blockquote {
  margin: 1.6em 0; padding: 0.2em 0 0.2em 1.4em;
  border-left: 3px solid var(--bleu); color: var(--texte-doux); font-style: italic;
}
/* L'intro d'une bande occupe toute la colonne : bornée à 784 px, elle
   revenait à la ligne trois fois alors que la moitié droite de la page
   était vide. */
.section__intro { color: var(--texte-doux); max-width: none; font-size: 0.9rem; }

.section__entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.8em 1.6em; margin-bottom: 0.9em; }
.section__entete h2 { margin-bottom: 0; }
.ico--titre { color: var(--bleu); width: 20px; height: 20px; margin-right: 0.45em; vertical-align: -0.1em; }
.section__pied { display: flex; justify-content: flex-end; margin-top: 1.8em; }
.section__pied--gauche { justify-content: flex-start; }

/* --- Gabarit des pages rédigées ------------------------------------- */
/* Un seul axe : le titre, les paragraphes, les listes, les encarts et les
   boutons tombent tous sur la même colonne centrée. Les bandes de couleur
   alternées disparaissent, elles hachaient le texte tous les deux
   paragraphes ; seuls les blocs illustrés gardent leur fond, parce que
   là le changement de couleur marque un vrai changement de rythme. */
body.page-redigee .section { background: transparent; padding-top: 0; padding-bottom: 0; }
body.page-redigee .section + .section,
body.page-redigee .encart + .section { padding-top: clamp(2rem, 3vw, 3rem); }
/* Un encart n'est pas une section : sans cette règle, il vient coller le
   titre qui le suit et le bloc qui le précède. */
body.page-redigee .encart { margin-top: clamp(1.8rem, 3vw, 2.8rem); margin-bottom: clamp(1.8rem, 3vw, 2.8rem); }
/* La section qui suit un encart a déjà l'espace de l'encart : sans cette
   remise à zéro, les deux marges s'ajoutent. */
body.page-redigee .encart + .section { padding-top: 0; }
/* Une seule valeur de bas de bandeau pour tout le site : cette règle le
   portait à 28 px sur les pages rédigées, contre 18 partout ailleurs,
   d'où trois écarts différents sous les titres (81, 91 et 117 px). */
/* La maquette ne centre AUCUNE page dans une colonne étroite : sur
   /tarifs-et-conditions comme sur /jai-perdu-mon-animal, tout démarre sur
   la gouttière de gauche (x = 27 px à 1424 px de large) et la grille des
   tarifs occupe les 1 354 px de la colonne. Seuls les paragraphes de prose
   sont bornés, à 864 px (max-w-3xl), et bornés à DROITE : ils restent
   calés à gauche. La colonne centrée que j'avais posée ici rétrécissait la
   page à 1 088 px et la décalait de 133 px par rapport à toutes les
   autres. */
/* Les paragraphes occupent toute la colonne. La maquette les borne à
   864 px, mais le texte y saute alors des lignes au tiers de la page :
   sur demande, on garde la pleine largeur. */
body.page-redigee .section > p { max-width: none; margin-left: 0; margin-right: auto; }
/* Et ce qui les accompagne suit le même axe. Sans cette ligne, le
   paragraphe démarre sur la gouttière et le titre qui l'annonce
   209 px plus loin, centré par .section--centre : deux axes de gauche
   dans une seule section. Mesuré sur /mentions-legales et
   /credits-photos, les deux seules pages où le cas se présente. Les
   pages qui ne sont pas « rédigées » gardent leur colonne centrée : là,
   le titre ET le texte sont centrés ensemble, ce qui se tient. */
body.page-redigee .section--centre > * { margin-left: 0; margin-right: auto; }
/* Un bloc illustré garde son fond, qui donne le rythme de la page, mais
   son texte reste dans la colonne de lecture : c'est la photo qui prend
   la place à droite. Quand la photo passait à gauche, le titre du bloc
   démarrait 380 px plus loin que tous les autres titres de la page, et
   la page comptait quatre axes de gauche différents au lieu d'un. */
body.page-redigee .section:has(.duo) {
  background: var(--creme); padding-top: clamp(2.5rem, 4vw, 4rem); padding-bottom: clamp(2.5rem, 4vw, 4rem);
}
body.page-redigee .section:has(.duo) + .section { padding-top: clamp(2.5rem, 4vw, 4rem); }
/* Le duo occupe toute la colonne, comme sur la maquette. */
/* La grille d'animaux porte sa propre marge raccourcie, qui remettait
   margin-left et margin-right à zéro : elle restait collée à gauche avec
   150 px de vide à droite au lieu d'être centrée comme le reste. */
/* Les grilles occupent toute la colonne : pas de recentrage. */
/* Duos : proportions et gouttière relevées sur la maquette (/le-refuge),
   714 px de texte contre 595 px de photo, soit 1.2fr / 1fr, gouttière
   45 px, blocs centrés verticalement. Les côtés ALTERNENT d'une bande à
   l'autre, comme sur la maquette : c'est ouvrir_duo() qui décide, à partir
   de la couleur de la bande. On ne force donc plus la photo à droite. */
@media (min-width: 860px) {
  /* Dans le HTML, la photo vient avant le texte : .duo la laisse donc à
     gauche, c'est le cas des bandes crème. .duo--inverse la renvoie à
     droite, c'est le cas des bandes ivoire. La colonne de texte est la
     plus large dans les deux cas, 1.2fr contre 1fr. */
  body.page-redigee .duo,
  body.page-redigee .duo--inverse { gap: 2.5rem; align-items: center; }
  body.page-redigee .duo { grid-template-columns: 1fr 1.3fr; }
  body.page-redigee .duo .duo__media { grid-column: 1; grid-row: 1; }
  body.page-redigee .duo .duo__texte { grid-column: 2; grid-row: 1; }
  body.page-redigee .duo--inverse { grid-template-columns: 1.3fr 1fr; }
  body.page-redigee .duo--inverse .duo__media { grid-column: 2; grid-row: 1; }
  body.page-redigee .duo--inverse .duo__texte { grid-column: 1; grid-row: 1; }
}
body.page-redigee main { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
/* Le bouton d'un bloc d'appel à l'action suit le paragraphe auquel il se
   rapporte, au lieu d'occuper une bande à lui tout seul. */
body.page-redigee .section--cta { padding-top: clamp(0.6rem, 1vw, 1rem); }

/* --- Bloc texte + image alternés (pages « Le refuge », « Pension »…) -- */
/* Les deux colonnes sont centrées l'une par rapport à l'autre et la photo
   prend une hauteur proportionnelle à sa largeur. Étirée sur la hauteur
   de la ligne, elle atteignait 460 px face à un texte de 150, et tout
   l'écart tombait d'un seul côté. */
.duo {
  display: grid; gap: 2.8125rem; align-items: center;  /* 45 px, maquette */
}

.duo__media, .duo__texte { min-width: 0; }
/* La photo remplit la hauteur de la colonne voisine au lieu de flotter,
   centrée, au milieu d'un vide : c'est ce qui donne le bloc plein de la
   maquette. Le recadrage se fait en « cover », donc sans déformation. */
/* Le plafond de hauteur compte : sans lui, une photo au format portrait
   impose sa hauteur à toute la ligne et laisse la colonne de texte à
   moitié vide en face. Le recadrage en « cover » s'en charge sans
   déformer. */
/* La photo suit la hauteur du texte, entre deux bornes. Un format fixe ne
   marchait pas : trop petite en face d'un texte long, trop haute en face
   d'un texte court. Les bornes évitent les deux extrêmes, le recadrage en
   « cover » fait le reste sans déformer. */
/* Rapport et rayon relevés sur la maquette : 595 x 382 px, soit 1,56, et
   un rayon de 24 px. En min-height/max-height, la boîte plafonnait à
   260 px de haut et écrasait la photo. */
.duo__media { position: relative; aspect-ratio: 1.56; overflow: hidden; border-radius: 24px; box-shadow: var(--ombre); }
/* La chatterie est carrée sur la maquette : une photo carrée garde son
   rapport au lieu d'être recadrée en bandeau. Et la photo d'intro des
   conseils est en 3:4, qui est aussi son rapport natif (480 x 640) : le
   1,56 par défaut lui coupait le haut et le bas. */
.duo__media--carre { aspect-ratio: 1; }
.duo__media--portrait { aspect-ratio: 3 / 4; }
/* Relevés sur /nous-aider : 569 x 628 pour l'adhésion, 569 x 427 pour le
   teaming. Sans ces deux rapports, les quatre photos de la page étaient
   toutes servies au même carré et recadraient les sujets. */
.duo__media--haut { aspect-ratio: 569 / 628; }
.duo__media--paysage { aspect-ratio: 4 / 3; }
/* 1920 x 1360 servi en 609 x 431 sur /pension. */
.duo__media--paysage-large { aspect-ratio: 1920 / 1360; }
/* Le texte se cale au milieu de sa colonne : plus court que la photo, il
   restait accroché en haut et laissait tout le vide sous lui. */
.duo__texte { align-self: center; }
/* La photo est posée en absolu dans sa boîte : ainsi elle ne participe
   plus au calcul de la hauteur. Dans le flux, c'était elle qui imposait
   sa taille naturelle et la boîte allait taper le plafond des 520 px,
   quelle que soit la longueur du texte en face. */
.duo__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Sous-titres cliquables d'un bloc en colonnes (« Refuge », « Fourrière »,
   « Pension » sur l'accueil) : séparés par un filet, avec la flèche bleue
   qui signale qu'ils mènent quelque part. */
.duo__texte h3 { margin-top: 1.6em; padding-top: 1.4em; border-top: 1px solid var(--bordure); }
.duo__texte > h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.duo__texte h3 a, .section--texte h3 a {
  color: var(--encre); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4em;
}
.duo__texte h3 a::after, .section--texte h3 a::after { content: '→'; color: var(--bleu); font-weight: 400; }
.duo__texte h3 a:hover, .section--texte h3 a:hover { color: var(--bleu-fonce); }
.duo__texte p { color: var(--texte-doux); }

@media (max-width: 859px) {
  /* Une seule colonne : plus de voisine pour donner sa hauteur à la
     photo, on la lui fixe par un rapport. */
  .duo__media { aspect-ratio: 3 / 2; min-height: 0; max-height: none; height: auto; }
}
@media (min-width: 860px) {
  /* La colonne du texte est la plus large : c'est lui qu'on vient lire,
     la photo accompagne. Les proportions suivent le côté où elle tombe. */
  /* 714 px de texte contre 595 px de photo sur la maquette, soit 1.2fr
     contre 1fr. En 0.72/1.28, la photo tombait à 473 px au lieu de 595. */
  .duo { grid-template-columns: 1fr 1.3fr; }
  .duo--inverse { grid-template-columns: 1.3fr 1fr; }
  /* Proportion 700/609 de /pension, contre 740/569 ailleurs. Déclarée
     après les deux règles ci-dessus : à spécificité égale, l'ordre
     décide, et posée avant elle ne s'appliquait qu'au cas inversé. */
  .duo--equilibre { grid-template-columns: 1fr 1.15fr; }
  .duo--equilibre.duo--inverse { grid-template-columns: 1.15fr 1fr; }
  /* L'ordre visuel s'inverse une ligne sur deux sans toucher au HTML :
     le média reste avant le texte dans le document, donc dans l'ordre de
     lecture d'un lecteur d'écran. */
  .duo--inverse .duo__media { grid-column: 2; grid-row: 1; }
  .duo--inverse .duo__texte { grid-column: 1; grid-row: 1; }
}

/* --- Cartes animaux -------------------------------------------------- */
/* « auto-fit » et non « auto-fill » : avec quatre fiches, auto-fill
   réservait des colonnes vides et les cartes se tassaient à gauche en
   laissant un tiers de la page inoccupé. auto-fit supprime les colonnes
   vides et répartit la place entre les cartes présentes. */
/* Maquette : trois colonnes, gouttière 36 px, cartes blanches à rayon
   24 px avec la photo carrée en haut et le texte dans 27 px de padding.
   L'ancien minmax(240px) donnait quatre à cinq colonnes et des vignettes
   deux fois plus petites que sur la maquette. */
/* Le min() compte : à 320 px de large, une colonne minimale de 300 px plus
   les deux gouttières de 27 px ne tient pas, et la carte débordait de
   7 px hors de l'écran. Sous 300 px de place disponible, la colonne prend
   simplement toute la largeur. */
.grille-animaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 2em; margin-top: 2em; }
/* Trois colonnes pour une liste de catégorie, qui en compte des dizaines.
   L'accueil, lui, n'en présente que quatre : à trois colonnes la
   quatrième tuile restait seule sur une deuxième ligne. */
@media (min-width: 1100px) { .grille-animaux { grid-template-columns: repeat(3, 1fr); } }
/* L'accueil ne montre que quatre tuiles : on n'y passe jamais par trois
   colonnes, qui laissaient la quatrième seule sur une deuxième ligne.
   Deux colonnes, puis quatre : 2 x 2 ou 4 x 1, jamais 3 + 1. */
@media (min-width: 620px) {
  .section--animaux-recents .grille-animaux { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1180px) {
  .section--animaux-recents .grille-animaux { grid-template-columns: repeat(4, 1fr); }
}
.carte-animal {
  position: relative; display: block; text-decoration: none; color: var(--encre); min-width: 0;
  background: var(--blanc); border-radius: 24px; overflow: hidden; box-shadow: var(--ombre);
}
/* Photo carrée, comme sur la maquette : c'est le cadrage des photos de
   fiches, et il tient la même hauteur d'une carte à l'autre. */
.carte-animal__photo {
  position: relative; aspect-ratio: 1; background: var(--creme); overflow: hidden;
  border-radius: 0; box-shadow: none;
}
.carte-animal__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.carte-animal:hover .carte-animal__photo img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .carte-animal__photo img, .carte-animal:hover .carte-animal__photo img { transition: none; transform: none; }
}
/* Les photos sont servies en <picture> (WebP + repli JPEG). Sans cette
   règle, la balise <picture> s'intercale comme une boîte inline entre le
   conteneur et l'image, et les hauteurs en pourcentage ci-dessus n'ont
   plus de référence : la photo s'affiche à sa taille naturelle et déborde. */
picture { display: contents; }

.carte-animal__texte { padding: 1.5rem; }
.carte-animal__ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0;
}
.carte-animal__nom {
  font-family: 'Lexend', system-ui, sans-serif; font-size: 1.5em; font-weight: 700;
  letter-spacing: -0.02em; color: var(--bleu);
}
.carte-animal__sexe { font-family: 'Inter', sans-serif; font-size: 0.667em; font-weight: 400; color: var(--texte-doux); }
.carte-animal__age {
  flex: 0 0 auto; font-size: 0.875em; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--texte-doux);
}
.carte-animal__race { margin: 0.15em 0 0; color: var(--texte-doux); }
/* Les trois pictogrammes de compatibilité, sous un filet, en trois
   colonnes égales : chien, chat, enfant. */
/* Colonnes égales quel que soit le nombre de pictogrammes affichés : une
   grille figée à trois colonnes tassait à gauche une fiche qui n'en
   renseigne qu'un ou deux. */
.carte-animal__pictos {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.5rem;
  margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(35, 22, 18, 0.1);
}
.compat { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; }
.compat img { width: 27px; height: 27px; object-fit: contain; }
.compat__etat { font-size: 0.75em; color: var(--texte-doux); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.carte-animal__coeur {
  position: absolute; top: 0.75em; right: 0.75em; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); display: flex; align-items: center; justify-content: center;
}
.carte-animal__coeur .ico { width: 16px; height: 16px; color: var(--urgent); }

.badge {
  position: absolute; top: 0.75em; left: 0.75em; padding: 0.35em 0.8em; border-radius: 999px;
  font-size: 0.608rem; font-weight: 700; color: var(--blanc); letter-spacing: 0.02em;
}
.badge--urgent { background: var(--urgent); left: auto; right: 0.75em; top: auto; bottom: 0.75em; }
.badge--adopte { background: var(--succes); }
.badge--categorie { background: rgba(35, 22, 18, 0.72); backdrop-filter: blur(3px); font-weight: 600; }

.animaux-recents__vide { color: var(--texte-doux); font-style: italic; }
.section--animaux-recents__pastilles { display: none; }

/* Vignettes rondes de la bande « Ils ont trouvé leur famille » sur
   l'accueil : un aperçu, la liste complète est sur sa propre page. */
/* Une grille et non une ligne flex : le nombre de colonnes vaut le nombre
   d'animaux montres (--adoptes, pose par le gabarit), donc la rangee occupe
   toute la largeur au lieu de s'arreter au tiers. Sous 900 px on retombe sur
   un nombre fixe de colonnes, sinon les pastilles deviennent minuscules. */
.rangee-adoptes {
  display: grid; grid-template-columns: repeat(var(--adoptes, 8), minmax(0, 1fr));
  gap: 1.5em 1.2em; margin-top: 1.9em; padding: 0; list-style: none; align-items: start;
}
@media (max-width: 1100px) { .rangee-adoptes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .rangee-adoptes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .rangee-adoptes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rangee-adoptes li { margin: 0; text-align: center; min-width: 0; }
/* display:block est indispensable : sur un <span> reste inline, ni la
   largeur, ni la hauteur, ni overflow:hidden ne s'appliquent, et la photo
   sortait en portrait de 104 x 221 px au lieu d'un cercle. */
.rangee-adoptes__photo {
  display: block; margin: 0 auto;
  width: min(100%, 168px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--creme); border: 3px solid rgba(255, 255, 255, 0.2);
}
.rangee-adoptes__photo img { width: 100%; height: 100%; object-fit: cover; }
.rangee-adoptes__nom { display: block; margin-top: 0.65em; font-size: 0.8rem; color: rgba(255, 255, 255, 0.92); }
/* Sous la rangee pleine largeur, un bouton colle a droite parait perdu :
   il se centre, comme la rangee qu'il prolonge. */
.section__pied--centre { display: flex; justify-content: center; }

/* --- Catégories ------------------------------------------------------ */
.grille-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2em; margin-top: 1.6em; }
/* 6 catégories fixes : 3 colonnes donnent deux rangées pleines, plutôt
   que le nombre de colonnes variable de auto-fill qui isolait la dernière
   carte toute seule sur sa ligne. */
@media (min-width: 680px) { .grille-categories { grid-template-columns: repeat(3, 1fr); } }
.carte-categorie {
  display: flex; flex-direction: column; gap: 0.25em; padding: 1.4em 1.5em; text-decoration: none;
  background: var(--blanc); border-radius: var(--rayon); color: var(--encre); box-shadow: var(--ombre);
  border: 1px solid transparent; min-width: 0;
}
.carte-categorie:hover { border-color: var(--bleu); color: var(--encre); }
.carte-categorie__libelle {
  font-family: 'Lexend', system-ui, sans-serif; font-weight: 700; font-size: 0.944rem; letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 0.4em;
}
.carte-categorie__libelle::after { content: '→'; color: var(--bleu); font-weight: 400; }
.carte-categorie__compte { color: var(--texte-doux); font-size: 0.76rem; }
/* Catégorie momentanément sans fiche : la carte reste à la hauteur de ses
   voisines illustrées (la grille les aligne), donc on centre son texte
   plutôt que de le laisser collé en haut d'une boîte vide. */
.grille-categories .carte-categorie:not(.carte-categorie--photo) { justify-content: center; }

/* Version illustrée : la photo d'un animal réellement disponible occupe
   toute la carte, le libellé passe par-dessus sur un dégradé. */
.carte-categorie--photo {
  position: relative; padding: 0; overflow: hidden; aspect-ratio: 1;
  justify-content: flex-end; border: 0;
}
.carte-categorie__photo { position: absolute; inset: 0; background: var(--creme); }
.carte-categorie__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.carte-categorie--photo:hover .carte-categorie__photo img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .carte-categorie__photo img, .carte-categorie--photo:hover .carte-categorie__photo img { transition: none; transform: none; }
}
.carte-categorie--photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(35, 22, 18, 0.88) 0%, rgba(35, 22, 18, 0.35) 42%, rgba(35, 22, 18, 0) 68%);
}
.carte-categorie__texte { position: relative; z-index: 1; display: grid; gap: 0.15em; }
.carte-categorie--photo .carte-categorie__texte { padding: 1.3em 1.4em; }
.carte-categorie--photo .carte-categorie__libelle { color: var(--blanc); font-size: 1.12rem; }
.carte-categorie--photo .carte-categorie__libelle::after { color: var(--blanc); }
.carte-categorie--photo .carte-categorie__compte { color: rgba(255, 255, 255, 0.85); }

/* --- Cartes « Nous aider » ------------------------------------------- */
.grille-aide { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5em; margin-top: 2em; }
.carte-aide {
  display: flex; flex-direction: column; gap: 0.6em; align-items: flex-start;
  background: var(--blanc); border-radius: var(--rayon); padding: 2em 1.9em;
  text-decoration: none; color: var(--texte); border: 1px solid var(--gris-picto);
}
.carte-aide:hover { border-color: var(--bleu); color: var(--texte); }
/* Pastille grise et pictogramme dessiné, repris de la maquette. */
.carte-aide__icone {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  border-radius: 50%; margin-bottom: 0.5em; background: var(--gris-picto);
}
.picto { width: 32px; height: 32px; object-fit: contain; }
.carte-aide__icone .picto { width: 34px; height: 34px; }
.carte-aide strong { font-family: 'Lexend', system-ui, sans-serif; font-size: 1.024rem; letter-spacing: -0.02em; color: var(--texte); }
.carte-aide > span:not([class]) { color: var(--texte-doux); font-size: 0.784rem; }
.carte-aide .lien-fleche { margin-top: auto; padding-top: 0.5em; }

/* --- Bandeau d'appel à l'action -------------------------------------- */
.cta-bandeau { padding: clamp(2.75rem, 5.5vw, 4.5rem) var(--gouttiere); background: var(--encre); }
.cta-bandeau__cadre { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.cta-bandeau__media img { width: 100%; max-width: 420px; border-radius: var(--rayon-grand); }
.cta-bandeau__contenu { min-width: 0; }
.cta-bandeau__contenu h2 { color: var(--blanc); }
.cta-bandeau__contenu p { color: rgba(255, 255, 255, 0.82); max-width: 52ch; }
@media (min-width: 800px) {
  .cta-bandeau__cadre { grid-template-columns: 0.85fr 1.15fr; }
  .cta-bandeau__media img { max-width: 100%; }
}

/* --- Listes en tuiles ------------------------------------------------ */
/* Relevé sur /nous-aider : deux colonnes de 468 px, gouttière 18 px,
   boîtes blanches à rayon 24 px, filet couleur --bordure, padding 27 px,
   texte à 18 px ouvert par un tiret. */
.liste-cartes {
  list-style: none; padding: 0; display: grid; gap: 1.125rem;
  /* margin-top seul : en raccourci, « margin: 2rem 0 0 » remettait les
     marges latérales à zéro et la grille sortait de la colonne centrée,
     200 px avant son propre titre. */
  margin-top: 2rem;
}
@media (min-width: 620px) { .liste-cartes { grid-template-columns: 1fr 1fr; } }
.liste-cartes li {
  margin: 0; background: var(--blanc); border-radius: 24px; padding: 1.6875rem;
  border: 1px solid var(--bordure); font-size: 0.9rem; line-height: 1.5;
  color: var(--texte-doux); min-width: 0;
}
.liste-cartes li::before { content: '– '; }

/* --- Sommaire d'une page longue -------------------------------------- */
.sommaire {
  max-width: var(--largeur-lecture); margin: 0 auto; padding: 1.3em 1.6em;
  background: var(--creme); border-radius: var(--rayon);
}
.sommaire__intitule {
  margin: 0 0 0.7em; font-family: 'Lexend', system-ui, sans-serif; font-weight: 700;
  font-size: 0.624rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-doux);
}
.sommaire ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6em; }
.sommaire li { margin: 0; }
.sommaire a {
  display: inline-block; padding: 0.4em 1em; border-radius: 999px; background: var(--blanc);
  color: var(--texte); text-decoration: none; font-weight: 500; font-size: 0.752rem;
  border: 1px solid var(--bordure);
}
.sommaire a:hover { border-color: var(--bleu); color: var(--bleu-fonce); }
/* La cible d'une ancre s'arrête sous la barre de navigation, sinon le
   titre visé passe derrière elle. */
:target, [id] { scroll-margin-top: calc(var(--hauteur-entete) + 1.5rem); }

/* --- Encarts --------------------------------------------------------- */
/* Forme de la maquette, relevée dans le navigateur : boîte blanche à
   filet fin sur les quatre côtés, rayon 24 px, texte un cran plus grand
   et adouci. Pas de barre d'accent : elle est réservée aux encarts qui
   portent un sens (attention, important), où la couleur est l'information. */
.encart {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: 24px;
  /* 1,78 em de sa propre taille (20,25 px) = 36 px, la valeur relevée sur
     la maquette. En 2em, l'em portait sur la police agrandie de l'encart. */
  padding: 1.78em;
  margin: 0 auto; max-width: var(--largeur);
  font-size: 1.125em; line-height: 1.556; color: var(--texte-doux);
}
/* L'encart est posé dans le flux entre deux bandes : il lui faut ses
   propres marges latérales pour rester aligné sur le contenu. */
/* L'encart suit la colonne de lecture : centré et de même largeur, il
   reste dans l'axe du texte au lieu de s'étirer tout seul sur la page. */
/* Le « calc » garde la marge de bord sur petit écran : sans lui, l'encart
   centré viendrait coller les deux bords de l'écran. */
/* Par défaut l'encart occupe toute la colonne, calé à gauche : c'est ce
   que fait la carte crème de fin sur /tarifs-et-conditions (x = 27 px,
   1 354 px de large). Centré et borné à 1 088 px, il était 133 px à droite
   de tout le reste de la page. Les deux variantes ci-dessous le
   rétrécissent quand le contenu le demande. */
.encart {
  margin-left: 0; margin-right: auto; margin-bottom: 0; max-width: 100%;
}
/* Un encart posé entre deux sections est un enfant direct de <main> : il
   n'hérite d'aucune gouttière et partait donc au bord de l'écran, 27 px
   avant le titre et les paragraphes. On lui redonne la gouttière de page. */
main > .encart { margin-left: var(--gouttiere); margin-right: var(--gouttiere); }
.section + .encart, .encart + .encart { margin-top: 1.6em; }
.encart p { margin: 0 0 0.8em; max-width: var(--largeur-texte); }
.encart p:last-child { margin-bottom: 0; }
.encart__titre {
  font-family: 'Lexend', system-ui, sans-serif; font-weight: 700; font-size: 0.92rem;
  color: var(--encre); margin-bottom: 0.5em !important;
}
/* « info » est le ton neutre : c'est la boîte de la maquette, sans accent.
   Les deux autres gardent leur barre de couleur, qui porte le sens. */
/* Sur la maquette, l'encart d'une page à bandes reste dans la colonne de
   texte, calé à gauche (731 px), alors que sur une page rédigée il occupe
   toute la largeur. D'où ce modificateur, posé par le contenu. */
/* Calé sur la gouttière de page, comme le texte de l'intro : à
   margin-left 0 il partait au bord de l'écran, 27 px avant tout le reste. */
.encart--colonne { max-width: 41rem; margin-left: var(--gouttiere); margin-right: auto; }
.encart--attention, .encart--important { border-left-width: 5px; border-left-style: solid; }
.encart--attention { border-left-color: var(--urgent); background: #FDF3F2; }
.encart--important { border-left-color: var(--succes); background: #F0F6F2; }

/* --- Infos pratiques -------------------------------------------------- */
/* Le plan s'étire sur toute la hauteur de la colonne de coordonnées :
   son bord haut tombe au niveau du titre, son bord bas au niveau de la
   dernière ligne. Aligné en haut seulement, il démarrait sous le titre
   et laissait un vide au-dessus de lui. */
.contact-duo { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: stretch; }
.contact-duo__texte { min-width: 0; }
.contact-duo__texte h2 { margin-top: 0; }
@media (min-width: 900px) { .contact-duo { grid-template-columns: 1fr 1fr; } }

.infos-pratiques { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.6em; min-width: 0; }
.infos-pratiques li { display: flex; align-items: flex-start; gap: 1em; min-width: 0; margin: 0; }
.infos-pratiques__pastille {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%; background: var(--gris-picto);
}
.infos-pratiques__corps { display: grid; gap: 0.15em; min-width: 0; }
.infos-pratiques__libelle {
  font-family: 'Lexend', system-ui, sans-serif; font-weight: 700; font-size: 0.8rem; color: var(--encre);
}
.infos-pratiques__valeur { color: var(--texte-doux); }
.infos-pratiques__note { display: block; margin-top: 0.4em; font-size: 0.752rem; color: var(--texte-doux); }
.infos-pratiques a { color: var(--texte); text-decoration-color: var(--bordure); }
.infos-pratiques a:hover { color: var(--bleu-fonce); }

/* Plan de situation : cadre OpenStreetMap, chargé seulement quand on
   arrive dessus. Le bord et le rayon reprennent ceux des cartes. */
.carte-refuge { min-width: 0; display: flex; flex-direction: column; }
.carte-refuge iframe {
  display: block; width: 100%; flex: 1 1 auto; min-height: 380px;
  border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--creme);
}
/* Lien d'action isolé : au doigt, une ligne de texte de 25 px de haut est
   une cible étroite. Le retrait vertical la porte à 45 px sans rien
   changer à l'aspect. */
.carte-refuge__lien, .lien-conditions {
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.6em 0;
  font-weight: 600; font-size: 0.76rem;
}
.carte-refuge__lien { margin-top: 0.3em; }
@media (max-width: 899px) {
  /* En une seule colonne, plus rien ne donne sa hauteur au plan : on la
     lui fixe par un rapport, sinon il s'écrase à sa hauteur minimale. */
  .carte-refuge iframe { flex: 0 0 auto; aspect-ratio: 3/2; min-height: 0; }
}
.ico { color: var(--bleu); flex-shrink: 0; }
.ico--petit { width: 16px; height: 16px; }

/* --- Liste d'animaux (page catégorie) --------------------------------- */
.section--liste-animaux h1 { margin-bottom: 0.4em; }

/* --- Fiche animal ----------------------------------------------------- */
/* La gouttière centre déjà le contenu sur --largeur : elle vaut
   (100% - 1600px) / 2. Combinée à un max-width de 1600 px, elle
   s'appliquait DEUX FOIS. Sur un écran de 2 560 px, la fiche se
   retrouvait dans une bande de 640 px avec 960 px de vide de chaque
   côté. On garde la gouttière, on retire le plafond : c'est ainsi que
   fonctionnent toutes les bandes du site. */
.fiche-animal {
  margin: 0 auto;
  padding: clamp(2.2rem, 4vw, 3.4rem) var(--gouttiere) clamp(2.5rem, 5vw, 4rem);
  display: grid; gap: 2em;
}
@media (min-width: 940px) {
  /* Colonne large à gauche pour la photo et le récit, colonne étroite à
     droite pour la carte d'identité et le bouton de contact. Les places
     sont posées explicitement, ligne et colonne : sans cela l'ordre du
     HTML décide seul, et l'entête se retrouve coincé dans une bande
     étroite. Cette répartition remplit toute la largeur, alors qu'un
     récit centré sur une colonne de lecture laissait la moitié droite
     de la page vide. */
  /* Maquette : quatre colonnes egales, gouttiere 54 px. La galerie en
     occupe trois, la colonne d'informations une seule. En 1.55fr/1fr la
     colonne de droite faisait 40 % de plus que sur la maquette. */
  .fiche-animal { grid-template-columns: repeat(4, 1fr); gap: 1.6em 3rem; align-items: start; }
  .fiche-animal__entete { grid-column: 1 / -1; grid-row: 1; }
  .fiche-animal__galerie { grid-column: 1 / 4; grid-row: 2; }
  /* La carte garde sa zone sur les deux lignes, mais elle ne colle plus.
     Collante, elle descendait le long de sa zone : en scrollant, « Ses
     compatibilites » et le bouton se retrouvaient a hauteur de « Son
     histoire », a cote d'un texte qu'ils n'accompagnent pas. La borner a
     la ligne 2 n'est pas la solution : sous 1 400 px la carte est plus
     haute que la photo (jusqu'a 886 px contre 511), et la ligne se serait
     etiree, ouvrant un vide de 439 px sous la galerie. */
  .fiche-animal__resume { grid-column: 4; grid-row: 2 / 4; align-self: start; }
  /* Le recit tient les trois colonnes de la galerie, sous elle. « 1 »
     l'enfermait dans un quart de la largeur ; « 1 / -1 » le ferait passer
     SOUS la carte d'identite, qui occupe la quatrieme colonne sur la meme
     ligne, et le texte disparaitrait sous le bouton de contact.
     Le plafond le fait finir sur le bord droit de la photo, qui est
     centree a 61 % de la colonne : moitie de la colonne, plus la moitie
     de la galerie. Sans lui les lignes filaient 230 px plus loin que la
     photo, et rien ne les alignait sur quoi que ce soit. */
  .fiche-animal__texte {
    grid-column: 1 / 4; grid-row: 3;
    max-width: calc(50% + var(--galerie-largeur) / 2);
  }
  .fiche-animal__retour { grid-column: 1 / -1; grid-row: 4; }
}
.fiche-animal__retour { margin: 1.4em 0 0; }
.fiche-animal__entete h1 { margin-bottom: 0.1em; }
.fiche-animal__adopte {
  background: var(--creme); border-radius: var(--rayon); padding: 0.9em 1.1em;
  margin: 0 0 1.2em; font-size: 0.816rem; line-height: 1.55;
}
.fiche-animal__entete .badge { position: static; display: inline-block; margin-bottom: 0.8em; }
.fiche-animal__galerie, .fiche-animal__resume { min-width: 0; }
.fiche-animal__categorie {
  color: var(--bleu-fonce); font-weight: 600; font-size: 0.656rem; margin: 0;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-family: 'Lexend', system-ui, sans-serif;
}
.fiche-animal__sans-photo {
  aspect-ratio: 4/3; background: var(--creme); border-radius: var(--rayon-grand);
  display: flex; align-items: center; justify-content: center; color: var(--texte-doux);
}

/* Maquette : la photo ne remplit pas ses trois colonnes, elle en occupe
   85 % et se centre. Rayon 24 px. */
.galerie__principale {
  aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: var(--creme);
  box-shadow: var(--ombre); position: relative;
}
/* Le rétrécissement porte sur la galerie entière et non sur la seule
   photo : posé sur la photo, il laissait la mosaïque de vignettes courir
   sur toute la colonne et démarrer une quarantaine de pixels à gauche du
   bord de la photo. */
/* Le carré est plus haut que le paysage qu'il remplace : à 85 % de la
   colonne il occupait tout l'écran en hauteur et repoussait la
   description sous la ligne de flottaison. */
@media (min-width: 940px) { .galerie { width: var(--galerie-largeur); margin-left: auto; margin-right: auto; } }
.galerie__principale img, .galerie__principale video {
  width: 100%; height: 100%; object-fit: cover; display: block; background: var(--encre);
}
.galerie__principale img { cursor: zoom-in; }
.galerie__zoom {
  position: absolute; right: 0.9em; bottom: 0.9em; background: rgba(35, 22, 18, 0.75); color: var(--blanc);
  font-size: 0.656rem; font-weight: 600; padding: 0.45em 0.9em; border-radius: 999px; pointer-events: none;
}
/* Flèches de la galerie. 44 px de côté : c'est la cible minimale au doigt,
   et la pastille reste petite devant la photo. Le chevron est dessine en
   CSS, comme celui des sous-menus du menu : pas de police d'icônes à
   charger pour deux triangles. */
.galerie__fleche, .lightbox__fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(35, 22, 18, 0.62); transition: background 0.15s ease;
}
.galerie__fleche:hover { background: rgba(35, 22, 18, 0.88); }
.lightbox__fleche { background: rgba(255, 255, 255, 0.16); }
.lightbox__fleche:hover { background: rgba(255, 255, 255, 0.34); }
.galerie__fleche::before, .lightbox__fleche::before {
  content: ''; width: 11px; height: 11px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
}
.galerie__fleche--prec { left: 0.75em; }
.galerie__fleche--suiv { right: 0.75em; }
.galerie__fleche--prec::before, .lightbox__fleche--prec::before { transform: rotate(45deg); margin-left: 4px; }
.galerie__fleche--suiv::before, .lightbox__fleche--suiv::before { transform: rotate(-135deg); margin-right: 4px; }
/* En plein écran, les flèches se posent sur les bords de la fenêtre et non
   sur l'image : elles ne masquent rien de la photo. */
.lightbox__fleche--prec { left: 1.2em; }
.lightbox__fleche--suiv { right: 1.2em; }
@media (max-width: 520px) {
  .galerie__fleche, .lightbox__fleche { width: 40px; height: 40px; }
  .galerie__fleche--prec { left: 0.5em; }
  .galerie__fleche--suiv { right: 0.5em; }
}

/* Le retrait de 0,15em existe pour que la bordure bleue de la vignette
   active ne soit pas rognée par le défilement ; on le reprend en marge
   négative pour que la première vignette tombe pile sous le bord gauche
   de la photo. */
.galerie__vignettes {
  display: flex; gap: 0.6em; margin: 0.8em -0.15em 0; overflow-x: auto; padding: 0.15em 0.15em 0.5em;
  scrollbar-width: thin;
}
.galerie__vignette {
  flex: 0 0 auto; width: 92px; height: 92px; padding: 0; border-radius: 12px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; background: var(--creme); position: relative;
}
.galerie__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie__vignette:hover { border-color: var(--bordure); }
.galerie__vignette.actif { border-color: var(--bleu); }
.galerie__vignette--video { background: var(--encre); }
.galerie__vignette-lecture {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--blanc); font-size: 0.96rem;
}

.carte-identite {
  background: var(--creme); border-radius: var(--rayon); padding: 1.5em 1.7em; margin-bottom: 1.6em;
}
.carte-identite__lignes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1em 1.4em; margin: 0 0 1.1em;
}
.carte-identite__lignes > div { display: grid; gap: 0.1em; min-width: 0; }
.carte-identite__lignes dt { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texte-doux); font-weight: 600; }
.carte-identite__lignes dd {
  margin: 0; font-weight: 700; font-family: 'Lexend', system-ui, sans-serif; font-size: 0.88rem;
  letter-spacing: -0.02em; color: var(--encre);
}
.carte-identite .fiche-animal__pictos { margin: 0; }
.fiche-animal__pictos { list-style: none; padding: 0; margin: 0 0 1.6em; display: flex; flex-wrap: wrap; gap: 0.6em; }
.fiche-animal__pictos li {
  display: flex; align-items: center; gap: 0.45em; padding: 0.5em 1em; border-radius: 999px; margin: 0;
  font-size: 0.704rem; font-weight: 600; background: var(--blanc); color: var(--texte-doux);
}
.pictos--oui { background: var(--bleu-clair) !important; color: var(--bleu-fonce) !important; }
.pictos--oui .ico { color: var(--bleu-fonce); }

.fiche-animal__texte { font-size: 1.125em; line-height: 1.625; color: var(--texte-doux); margin: 2.5rem 0 0; }
/* La mesure de lecture de 48 em ne vaut que sur une seule colonne. Au-dessus
   de 940 px, c'est la colonne de la grille qui donne la largeur : la brider
   ici aussi arretait les lignes a 778 px alors que la colonne de la galerie
   en offre 1 188, et laissait une bande vide de 400 px a droite du recit. */
@media (max-width: 939px) { .fiche-animal__texte p { max-width: 48em; } }
/* La largeur de lecture n'est bridée qu'en une seule colonne. Au-dessus,
   c'est la colonne de la grille qui la donne : la brider ici aussi
   écraserait la règle du media query, qui est déclarée plus haut dans le
   fichier et perd donc à spécificité égale. */
@media (max-width: 939px) { .fiche-animal__texte { max-width: var(--largeur-texte); } }
.fiche-animal__texte p { margin: 0 0 1.15em; }
.fiche-animal__texte > *:last-child { margin-bottom: 0; }
/* Pas de lettrine : la maquette n'en a pas, et sur un texte court elle
   deforme la premiere ligne. */
.fiche-animal__texte h3 { font-size: 1.024rem; margin: 1.4em 0 0.5em; }
.fiche-animal__texte ul, .fiche-animal__texte ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.fiche-animal__texte li { margin-bottom: 0.4em; }
.fiche-animal__texte blockquote {
  border-left: 3px solid var(--bleu); margin: 0 0 1.15em; padding: 0.2em 0 0.2em 1.2em;
  color: var(--texte-doux); font-style: italic;
}
.fiche-animal__texte img, .fiche-animal__texte video {
  max-width: 100%; border-radius: var(--rayon); margin: 0.5em 0 1.15em; display: block;
}
.fiche-animal__texte table { border-collapse: collapse; width: 100%; margin: 0 0 1.15em; }
.fiche-animal__texte td, .fiche-animal__texte th { border: 1px solid var(--bordure); padding: 0.55em 0.75em; }

/* --- Zoom photo (fiche animal) ---------------------------------------- */
.lightbox {
  position: fixed; inset: 0; background: rgba(35, 22, 18, 0.94); z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 2em;
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease;
}
.lightbox.actif { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--rayon); display: block; }
.lightbox__fermer {
  position: absolute; top: 1.2em; right: 1.2em; width: 2.6em; height: 2.6em; border-radius: 50%;
  background: var(--blanc); color: var(--encre); border: 0; font-size: 1.12rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__fermer:hover { background: var(--creme); }

/* --- Pied de page ------------------------------------------------------ */
.pied { background: var(--encre); color: rgba(255, 255, 255, 0.72); margin-top: 0; font-size: 0.76rem; }
.pied__logo { height: 44px; width: auto; margin-bottom: 0.9em; filter: brightness(0) invert(1); }
.pied__colonnes {
  max-width: var(--largeur); margin: 0 auto; padding: clamp(2.75rem, 5vw, 4rem) var(--marge-bord) 2.4rem;
  display: grid; gap: 2.4em; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.pied__colonne { min-width: 0; }
.pied__colonne strong {
  display: block; margin-bottom: 1em; color: var(--bleu);
  font-family: 'Lexend', system-ui, sans-serif; font-weight: 600;
  font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.pied__colonne--asso strong {
  color: var(--blanc); font-size: 0.84rem; letter-spacing: -0.01em; text-transform: none; margin-bottom: 0.6em;
}
.pied__colonne ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65em; }
.pied__colonne li { margin: 0; }
.pied__colonne a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.pied__colonne a:hover { color: var(--blanc); text-decoration: underline; }
.pied__colonne p { margin: 0 0 0.4em; }
.pied__reseau {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.12); margin-top: 0.8em;
}
.pied__reseau:hover { background: var(--bleu); }
.pied__reseau .ico { width: 18px; height: 18px; color: var(--blanc); }
.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  max-width: var(--largeur); margin: 0 auto; padding: 1.4rem var(--marge-bord) 2rem;
  font-size: 0.704rem; color: rgba(255, 255, 255, 0.6);
  display: flex; gap: 0.6em 1.6em; justify-content: space-between; flex-wrap: wrap; align-items: center;
}
.pied__bas a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.pied__bas a:hover { color: var(--blanc); text-decoration: underline; }
.pied__liens { display: flex; gap: 0.6em 1.6em; flex-wrap: wrap; }

/* --- Responsive : menu mobile ------------------------------------------ */
/* Seuil plus large que d'habitude : avec 8 onglets, le menu a besoin de
   place pour tenir sur une seule ligne ; en dessous on bascule sur le
   bouton « Menu » plutôt que de le laisser se tasser ou déborder. */
@media (max-width: 1140px) {
  /* flex-basis à 100 % et pas seulement width : la règle générale pose
     « flex: 1 », dont la base à 0 % l'emporte sur la largeur. Le menu
     ouvert restait donc sur la ligne du logo, réduit à rien, et ses sept
     entrées débordaient hors de l'écran par la droite ; la colonne de
     liens étirait au passage la barre à plus de 400 px de haut. */
  .entete__nav { display: none; flex: 0 0 100%; width: 100%; order: 3; padding-bottom: 0.8em; }
  .entete__nav.ouvert { display: block; }
  .entete__nav ul { flex-direction: column; gap: 0.1em; }
  .entete__nav a { font-size: 0.8rem; padding: 0.65em 0.8em; }
  .entete__nav .sous-menu {
    position: static; box-shadow: none; display: none; margin: 0.1em 0 0.3em 0.8em;
    background: transparent; padding: 0;
  }
  .entete__nav .sous-menu a { color: rgba(255, 255, 255, 0.78); }
  .entete__nav .sous-menu a:hover { background: rgba(255, 255, 255, 0.12); color: var(--blanc); }
  .entete__nav li.a-des-enfants.ouvert .sous-menu { display: block; }
  .entete__nav li.a-des-enfants:hover .sous-menu { display: none; }
  .entete__bascule { display: block; }
  .entete__barre { flex-wrap: wrap; }
  /* Menu ouvert : la barre n'est plus translucide, sinon la liste
     déroulée se superpose à la photo du héros et devient illisible. */
  /* Menu déplié au doigt : il recouvre le contenu sur toute la hauteur de
     l'écran, la transparence y rendrait les sept entrées illisibles. C'est
     le seul cas où la barre redevient pleine. */
  .entete:has(.entete__nav.ouvert) {
    background: var(--encre);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
@media (max-width: 560px) {
  .entete__don { padding: 0.55em 1em; font-size: 0.688rem; }
  .entete__logo img { height: 38px; }
  .rangee-adoptes__photo { width: min(100%, 120px); }
}

/* --- Carte « Nous rendre visite » ------------------------------------ */
/* Valeurs relevées sur la maquette : bloc centré, carte à rayon 24 px,
   ligne d'information avec pictogramme de 27 px et gouttière de 18 px,
   photo en 4/3 collée aux bords de la carte. */
/* 954 px sur la maquette, soit 53 em pour une base de 18 px. */
.visite { max-width: var(--largeur-prose); margin: 0 auto; text-align: center; }
.visite h2 { margin-bottom: 1.35rem; }
.visite__carte {
  overflow: hidden; border-radius: 24px; background: var(--blanc);
  box-shadow: var(--ombre); text-align: left;
}
.visite__info {
  display: flex; align-items: flex-start; gap: 1rem;
  margin: 0; padding: 1.5rem; color: var(--texte-doux);
}
.visite__info .ico { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin-top: 0.25rem; }
.visite__media { margin: 0; }
.visite__media img, .visite__media picture { display: block; width: 100%; }
.visite__media img { aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Titres à pictogramme -------------------------------------------- */
/* Maquette : le picto fait 32 px, se pose devant le titre avec 13,5 px de
   gouttière, et s'aligne sur la PREMIÈRE ligne quand le titre en fait deux. */
h2.titre-picto {
  display: flex; align-items: flex-start; gap: 0.75rem;
}
h2.titre-picto .titre-ico {
  flex: 0 0 auto; width: 2rem; height: 2rem; margin-top: 0.15em; color: var(--bleu);
}
/* Les pictogrammes en image sont dessinés avec de la marge dans le fichier :
   la maquette les sert entre 32 et 41 px selon la page, sans règle. On
   retient 36 px, la valeur de /jai-perdu-mon-animal, pour qu'ils pèsent
   autant à l'œil que les icônes vectorielles à 32. */
h2.titre-picto img.titre-ico { width: 2.25rem; height: auto; }

/* --- Grille de cartes à pictogramme ---------------------------------- */
/* Deux colonnes, gouttière 22,5 px, cartes blanches à rayon 24 px et
   padding 31,5 px : valeurs relevées sur /conseils/avant-d-adopter. */
/* margin-top SEUL : un « margin: 2rem 0 0 » remet margin-left et
   margin-right à zéro, ce qui annule le centrage posé par
   .section--centre > * et colle la grille à gauche, 200 px avant son
   propre titre. */
.grille-cartes { list-style: none; margin-top: 2rem; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .grille-cartes { grid-template-columns: 1fr 1fr; } }
.grille-cartes li {
  margin: 0; background: var(--blanc); border-radius: 24px; padding: 1.75rem;
  box-shadow: var(--ombre); min-width: 0;
}
.grille-cartes__titre {
  display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.7em;
  font-family: 'Lexend', system-ui, sans-serif; font-weight: 700; color: var(--encre);
}
.grille-cartes__titre .ico { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; color: var(--bleu); }
.grille-cartes__texte { margin: 0; color: var(--texte-doux); font-size: 0.98em; }

/* --- Carte finale ----------------------------------------------------- */
.carte-finale {
  max-width: var(--largeur-prose); margin: 0 auto; background: var(--blanc);
  border-radius: 24px; padding: 2.5rem; box-shadow: var(--ombre);
}
.carte-finale h2 { margin-top: 0; }
.carte-finale p:last-of-type { margin-bottom: 0; }
.carte-finale__actions { margin-top: 1.75rem; }

/* --- Sélecteur Chiens / Chats sous le titre --------------------------- */
/* Maquette : deux pastilles à filet, sous le H1, avec une flèche. */
.selecteur { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.6rem 0 0; padding: 0; }
.selecteur li { margin: 0; }
.selecteur a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--bordure); background: var(--blanc); color: var(--encre);
  border-radius: 999px; padding: 0.45em 1em; font-size: 0.9em; font-weight: 500;
  text-decoration: none;
}
.selecteur a::after { content: '→'; color: var(--bleu); }
.selecteur a:hover { border-color: var(--bleu); color: var(--bleu-fonce); }

/* Photo posée sous le texte, sur toute la largeur de la colonne, et non
   à côté : c'est le cas de « Venez plusieurs fois » sur la maquette. */
.photo-dessous { margin-top: 2rem; border-radius: 24px; overflow: hidden; box-shadow: var(--ombre); }
/* 4/3 sur la maquette (954 x 716). */
.photo-dessous img { width: 100%; display: block; border-radius: 0; margin: 0; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Échelle typographique de la maquette ---------------------------- */
/* Relevée dans le navigateur sur /le-refuge et /conseils/avant-d-adopter,
   pour une base de 18 px :
     chapô             27 px / 600 / interligne 36 px
     paragraphe        20,25 px / 400 / interligne 32,9 px, encre à 85 %
     titre de carte    22,5 px / 500, en Lexend
     ligne d'info      16,2 px
   Toutes les valeurs sont donc en em de la base, jamais en dur. */
.chapo {
  font-size: 1.5em; font-weight: 600; line-height: 1.333;
  color: var(--texte); margin: 0 0 0.8em;
}
/* Corps de texte des blocs (accueil compris) : une seule taille pour tout
   le site, legerement en dessous du corps de l'article d'une fiche animal,
   qui reste le texte qu'on vient lire en entier. */
.section--texte > p,
.section--cartes > p,
.duo__texte > p,
.carte-finale > p {
  font-size: 1.05em; line-height: 1.625; color: var(--texte-doux);
}
/* L'encart porte déjà 1.125em : le répéter sur ses paragraphes composait
   la taille deux fois et donnait 22,8 px au lieu de 20,25. */
.encart > p { font-size: 1em; line-height: 1.625; }
/* Le chapô garde sa propre taille : il ne suit pas la règle ci-dessus. */
.duo__texte > p.chapo, .section--texte > p.chapo { font-size: 1.5em; line-height: 1.333; color: var(--texte); }
.grille-cartes__titre { font-size: 1.25em; font-weight: 500; }
.grille-cartes__texte { font-size: 1.125em; line-height: 1.625; }
.visite__info { font-size: 0.9em; line-height: 1.625; }

/* Le gabarit « rédigé » garde le corps à 18 px : c'est celui de la page
   tarifs, où la maquette compose le texte plus petit que sur les pages à
   bandes (18 px contre 20,25). Le plafond de 48 em de la ligne se calcule
   sur cette taille : agrandi, il passait la mesure de 864 à 972 px. */
body.page-redigee .section--texte > p,
body.page-redigee .section--liste > p { font-size: 1em; }

/* L'encart qui suit un bloc de texte lui reste attaché : sur la maquette
   il est DANS la même bande, à 45 px sous la grille. Chez nous il était
   dehors, et cumulait le padding bas de la section avec sa propre marge,
   soit 181 px : il paraissait perdu, sans rattachement au texte. */
.section:has(+ .encart) { padding-bottom: 0; }
.section + .encart { margin-top: 2.5rem; }

/* --- Fiche animal : disposition de la maquette ------------------------ */
/* Grille de 4 colonnes égales, gouttière 54 px : la galerie en occupe 3,
   la colonne d'informations 1. Valeurs relevées sur la fiche Wonka. */
.fil-ariane {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: 0.875em; color: var(--texte-doux); margin: 0 0 0.5rem;
}
.fil-ariane a { color: var(--texte-doux); text-decoration: none; }
.fil-ariane a:hover { color: var(--bleu-fonce); text-decoration: underline; }
.fil-ariane [aria-current] { color: var(--encre); }

/* Titre d'année sur « Ils ont trouvé leur famille » : la page couvre
   plusieurs années, il faut savoir où l'on est. Le compte est posé à
   côté, en petit, plutôt que sur une ligne à lui. */
.adoptes__annee {
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  font-size: 1.6em; margin: 0 0 1.2rem;
}
.adoptes__compte {
  font-family: 'Inter', system-ui, sans-serif; font-size: 0.76rem; font-weight: 400;
  color: var(--texte-doux); letter-spacing: 0;
}
.section--adoptes + .section--adoptes { padding-top: 0; }

.fiche-infos { list-style: none; margin: 0; padding: 0; }
/* La colonne d'informations se cale sur le corps de l'article (elle le
   depassait de 2 px, ce qui se voyait cote a cote). */
.fiche-infos li { margin: 0 0 1.55rem; color: var(--texte-doux); font-size: 1.15em; }
.fiche-infos li:last-child { margin-bottom: 0; }
.fiche-infos__label { font-weight: 600; color: var(--encre); }

.fiche-compat__titre { font-size: 1.55em; margin: 2rem 0 1rem; }
.fiche-compat { list-style: none; margin: 0; padding: 0; }
.fiche-compat li {
  display: flex; align-items: center; gap: 0.85rem; margin: 0 0 0.95rem;
  color: var(--texte-doux); font-size: 1.15em;
}
.fiche-compat img { width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; }
.fiche-compat strong { color: var(--encre); font-weight: 600; }

.fiche-animal__resume .bouton { margin-top: 2.5rem; width: 100%; justify-content: center; }
.fiche-animal__texte h2 { margin-top: 0; }
.lien-retour { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.lien-retour::before { content: '←'; color: var(--bleu); }
.lien-retour:hover { text-decoration: underline; }

/* --- Colonne de contenu + photo collante ----------------------------- */
/* Maquette : 1.3fr / 1fr, gouttière 45 px, la photo carrée reste collée
   en haut pendant qu'on descend la colonne de texte. */
.colonne-photo { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 940px) {
  .colonne-photo { grid-template-columns: 1.3fr 1fr; }
}
.colonne-photo__texte { min-width: 0; }
/* Espace avant un titre de la colonne : 63 px sur la maquette (mt-14).
   Le sélecteur doit viser les enfants DIRECTS : « .colonne-photo__texte h2 »
   attrapait aussi les titres à l'intérieur des boîtes d'étapes, et
   « :first-of-type » annulait la marge du premier titre hors boîte, qui se
   retrouvait collé sous la boîte précédente. */
.colonne-photo__texte > h2 { margin-top: 3.9rem; }
.colonne-photo__texte > *:first-child { margin-top: 0; }
.colonne-photo__texte > p { font-size: 1.125em; line-height: 1.625; color: var(--texte-doux); }
.colonne-photo__texte .encart { margin-left: 0; margin-right: 0; max-width: none; }
.colonne-photo__media { min-width: 0; }
@media (min-width: 940px) {
  .colonne-photo__media { position: sticky; top: calc(var(--hauteur-entete) + 1.5rem); }
}
.colonne-photo__media img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: 24px; box-shadow: var(--ombre);
}

/* --- Cartes à grand pictogramme -------------------------------------- */
/* Deux colonnes, gouttière 27 px, picto de 72 px au-dessus du texte. */
.cartes-picto { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 620px) { .cartes-picto { grid-template-columns: 1fr 1fr; } }
.cartes-picto__carte {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: 24px;
  padding: 2.25rem; min-width: 0;  /* 36 px, valeur maquette */
}
.cartes-picto__carte img { width: 72px; height: 72px; object-fit: contain; margin: 0 0 1.5rem; }
.cartes-picto__carte p { margin: 0; font-size: 1.125em; line-height: 1.625; color: var(--texte-doux); }

/* Le titre de page est plafonné à 1 008 px sur la maquette (max-w-4xl) :
   un titre long passe sur deux lignes au lieu de traverser toute la page.
   En rem et non en em : sur un h1 de 57,6 px, « 56em » vaudrait 3 226 px. */
/* Maquette : le titre occupe toute la colonne. La borne à 63 rem que
   j'avais posée coupait « Bienvenue à la SPA de l'Enclave des Papes » en
   deux lignes alors qu'il en tient une. */
.page-entete h1 { max-width: 100%; }

/* --- Étapes numérotées ------------------------------------------------ */
/* Relevé sur la maquette : boîte blanche à filet, rayon 24 px, padding
   36 px ; pastille de 45 px cerclée de bleu, chiffre bleu, gouttière
   16 px avant l'intitulé. */
.etapes { display: grid; gap: 1.7rem; }  /* 27 px, valeur maquette */
.etapes__etape {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: 24px;
  padding: 2.25rem; min-width: 0;  /* 36 px, valeur maquette */
}
.etapes__entete { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.etapes__numero {
  flex: 0 0 auto; width: 45px; height: 45px; border-radius: 50%;
  border: 1px solid rgba(0, 122, 204, 0.6); color: var(--bleu);
  display: flex; align-items: center; justify-content: center; font-weight: 500;
}
.etapes__etape h2 { margin: 0; }
.etapes__etape p {
  margin: 0 0 1em; font-size: 1.125em; line-height: 1.625; color: var(--texte-doux);
}
.etapes__etape p:last-child { margin-bottom: 0; }
/* Boîte blanche de la page fourrière : mêmes fond, filet, rayon et padding
   que les étapes numérotées, mais sans pastille. Deux titres possibles :
   bleu à 27 px (h3, les deux cas de figure) ou encre à 33,8 px avec
   pictogramme (h2, Tarifs et Rappel légal). Valeurs relevées sur la
   maquette au pixel. */
/* Le titre d'une bande centrée l'est aussi quand le contenu le demande
   (« Les dons en nature » sur /nous-aider). */
.section--titre-centre > h2 { justify-content: center; text-align: center; }
/* La boîte de conclusion prend toute la colonne, sous la grille. */
.boite--large { margin-top: 1.125rem; }
.section--legs .boite p { font-size: 1.012rem; }
/* Dernière bande de /nous-aider : remerciement à 33,75 px, sans graisse,
   centré, à bonne distance de la boîte du legs. */
.section--legs .boite { margin-top: 2rem; }
.remerciement {
  margin-top: 3.375rem; text-align: center; font-size: 1.6872rem; font-weight: 400;
  line-height: 1.375; color: var(--texte);
}
/* Accroche du bandeau de titre : 27 px, bornée à 756 px comme sur les
   pages de conseils de la maquette, calée à gauche avec le titre. */
.page-entete__chapo {
  font-size: 1.35rem; line-height: 1.4; color: var(--texte-doux);
  max-width: 47.25rem; margin: 0.9rem 0 0;
}

/* --- Tableau de tarifs de la pension ---------------------------------
   Relevé sur /pension : conteneur au filet de la charte, rayon 24 px et
   débordement masqué (sans quoi les angles de l'en-tête dépassent),
   en-tête sur fond encre, corps sur fond crème séparé par des filets,
   cellules à 27 px de padding horizontal et 22,5 px de vertical. */
.tarifs-pension {
  margin-top: 2rem; border: 1px solid var(--bordure); border-radius: 24px;
  overflow: hidden; /* sur mobile la table déborde : on la fait défiler */
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tarifs-pension table { width: 100%; border-collapse: collapse; margin: 0; text-align: left; }
.tarifs-pension thead tr { background: var(--encre); color: var(--blanc); }
.tarifs-pension th {
  font-family: 'Lexend', system-ui, sans-serif; font-weight: 500; font-size: 0.9rem;
  padding: 1.40625rem 1.6875rem; color: inherit; background: none; border: 0;
}
.tarifs-pension__precision { font-size: 0.7rem; font-weight: 400; opacity: 0.9; }
.tarifs-pension tbody { background: var(--creme); }
.tarifs-pension tbody tr + tr { border-top: 1px solid var(--bordure); }
.tarifs-pension tbody th {
  font-weight: 500; color: var(--encre); background: none;
}
.tarifs-pension td {
  padding: 1.40625rem 1.6875rem; color: var(--texte-doux); border: 0; vertical-align: top;
}
.tarifs-pension__prix {
  display: inline-block; background: var(--bleu); color: var(--blanc);
  border-radius: 14px; padding: 0.28125rem 0.703125rem;
  font-size: 0.68rem; font-weight: 500;
}
.tarifs-pension__degressif { font-size: 0.7rem; }

/* --- Pages de conseils ----------------------------------------------
   Relevé sur /conseils/les-premiers-jours/chien et /chat : une seule
   bande à 72 px de padding vertical, une colonne de 954 px centrée,
   intertitres H3 à 31,5 px en graisse 500 avec pictogramme, corps à
   20,25 px. */
.section--conseil { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.conseil { max-width: 59.625rem; margin: 0 auto; }
.conseil h3 {
  font-size: 1.575rem; font-weight: 500; margin: 3.4rem 0 1rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.conseil > h3:first-child, .conseil-duo__texte > h3:first-child { margin-top: 0; }
.conseil h3 .titre-ico { flex: 0 0 auto; width: 1.6875rem; height: 1.6875rem; color: var(--bleu); }
.conseil h3 img.titre-ico { width: 2rem; height: auto; }
.conseil p { font-size: 1.0125rem; line-height: 1.7; color: var(--texte-doux); margin: 0 0 1.1em; }
.conseil-liste { list-style: none; margin: 0 0 1.1em; padding: 0; }
.conseil-liste li {
  font-size: 1.0125rem; line-height: 1.7; color: var(--texte-doux); margin-bottom: 0.9em;
}
/* Trois boîtes blanches, toutes au rayon 24 px et au filet de la charte.
   La citation porte en plus un filet bleu de 4 px à gauche et un corps à
   27 px ; le rappel est plus serré (27 px de padding) et en graisse 600. */
.conseil .conseil-citation, .conseil .conseil-rappel, .conseil .conseil-boite {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: 24px;
}
.conseil .conseil-citation {
  border-left: 4px solid var(--bleu); padding: 2.25rem;
  font-size: 1.35rem; font-weight: 400; line-height: 1.45; margin: 2.5rem 0;
}
.conseil .conseil-rappel {
  padding: 1.6875rem; font-size: 1.0125rem; font-weight: 600; line-height: 1.55;
  color: var(--encre); margin: 2rem 0;
}
.conseil .conseil-boite { padding: 2.25rem; margin: 2rem 0; }
.conseil-boite p:last-child { margin-bottom: 0; }
.conseil-boite__titre {
  display: flex; align-items: center; gap: 0.55rem;
  font-weight: 500; color: var(--encre) !important; margin-bottom: 0.9em !important;
}
.conseil-boite__titre .titre-ico { flex: 0 0 auto; width: 1.4375rem; height: 1.4375rem; color: var(--bleu); }
.conseil-photo { margin: 2rem 0 2.5rem; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; }
.conseil-photo--large { aspect-ratio: 16 / 9; }
.conseil-photo img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
/* Bloc « Le quotidien » : 514 px de texte, 395 px de photo carrée. */
.conseil-duo { display: grid; gap: 2.8125rem; align-items: stretch; margin: 2rem 0 2.5rem; }
@media (min-width: 860px) { .conseil-duo { grid-template-columns: 514fr 395fr; } }
.conseil-duo__texte { min-width: 0; }
.conseil-duo__texte > h3:first-child { margin-top: 0; }
/* Le dernier paragraphe emporte sa marge basse, qui vient s'ajouter à
   celle du duo : le blanc avant le titre suivant passait de 60 à 82 px
   sans qu'aucune règle ne l'ait demandé. L'encadré, lui, a déjà sa
   règle : son blanc à lui est du remplissage, à l'intérieur du cadre. */
.conseil-duo__texte > :last-child { margin-bottom: 0; }
/* La photo suit la hauteur du texte au lieu d'imposer son carré : sur « Le
   quotidien » du chat, le texte s'arrêtait 82 px au-dessus du bas de la
   photo, et le blanc avant le titre suivant paraissait deux fois plus
   grand qu'ailleurs. Elle est posée en absolu pour ne pas participer au
   calcul de la hauteur, et le plancher évite qu'un texte très court ne la
   réduise à un bandeau. */
.conseil-duo__media {
  border-radius: 24px; overflow: hidden; position: relative; min-height: 240px;
}
.conseil-duo__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; margin: 0; border-radius: 0;
}
@media (max-width: 859px) {
  /* Une seule colonne : plus de texte à côté pour donner sa hauteur, on la
     lui rend par un rapport. */
  .conseil-duo__media { aspect-ratio: 4 / 3; min-height: 0; }
}
.conseil .conseil-devise {
  font-size: 1.6875rem; line-height: 1.35; color: var(--encre) !important;
  margin: 2.5rem 0 1.6rem;
}
.conseil-devise .puce { color: var(--bleu); }
.conseil-cta { margin-top: 2.5rem; }

.colonne-chapo {
  font-size: 1.125rem; line-height: 1.5; color: var(--texte-doux); margin: 0 0 0.5em;
}
.boite {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: 24px;
  padding: 2.25rem; min-width: 0; margin-top: 1.5rem;
}
.boite + .boite { margin-top: 1rem; }
/* Une boîte n'a pas de marge basse : sur /nous-aider elle termine toujours
   son bloc, mais sur /pension une phrase la suit et venait se coller au
   trait du cadre. On rend le blanc du dessus, sans toucher à deux boîtes
   qui s'enchaînent. */
.boite + :not(.boite) { margin-top: 1.5rem; }
.boite__titre { margin: 0 0 0.6em; }
.boite__titre--bleu { color: var(--bleu); font-size: 1.35rem; }
h2.boite__titre { font-size: 1.6896rem; }
.boite p, .boite li {
  margin: 0 0 1em; font-size: 0.9rem; line-height: 1.625; color: var(--texte-doux);
}
.boite > *:last-child, .boite p:last-child, .boite li:last-child { margin-bottom: 0; }
.boite__liste { margin: 0; padding-left: 0; list-style-position: inside; }
.boite__liste li { margin-bottom: 0.4em; }

/* Photo latérale au rapport natif (page « J'ai trouvé un animal »). */
.colonne-photo__media--natif img { aspect-ratio: auto; }

/* --- Page d'erreur (404 et 410) --------------------------------------- */
/* Ces deux codes servent la même page : le visiteur qui suit un vieux lien
   n'a pas à savoir lequel des deux lui est arrivé, il a besoin de repartir
   quelque part. Les cartes sont des liens entiers, pas un titre cliquable
   au milieu d'un bloc mort. */
.section--erreur .grille-cartes-liens {
  display: grid; gap: 1rem; margin: 0 auto; max-width: var(--largeur);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.carte-lien {
  display: block; background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: 16px; padding: 1.4rem 1.5rem; text-decoration: none;
  box-shadow: var(--ombre); min-width: 0;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.carte-lien:hover, .carte-lien:focus-visible {
  border-color: var(--bleu); transform: translateY(-2px);
}
.carte-lien strong {
  display: block; margin-bottom: 0.35em; color: var(--bleu-fonce);
  font-family: 'Lexend', system-ui, sans-serif; font-weight: 700;
  letter-spacing: -0.02em; font-size: 1.05rem;
}
.carte-lien:hover strong { text-decoration: underline; }
.carte-lien span { display: block; color: var(--texte-doux); font-size: 0.9rem; line-height: 1.5; }
.section--erreur .section__pied--centre { margin-top: 2rem; }

/* --- Plan du refuge : chargement au clic ------------------------------ */
/* Le cadre Google n'apparaît qu'après un clic. L'attente occupe exactement
   la place que prendra le plan, sinon la page saute au moment où il
   arrive. */
.carte-refuge__attente {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; text-align: center; padding: 2rem 1.5rem;
  width: 100%; flex: 1 1 auto; min-height: 380px;
  border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--creme);
}
.carte-refuge__adresse { margin: 0; font-weight: 600; color: var(--encre); max-width: 24rem; }
.carte-refuge__avis { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--texte-doux); max-width: 26rem; }
@media (max-width: 899px) {
  .carte-refuge__attente { flex: 0 0 auto; aspect-ratio: 3/2; min-height: 0; }
}