/* AnimauxExpert — Design System | prefix: .a- */
:root {
  --a-green:        #2D6A4F;
  --a-green-light:  #52B788;
  --a-green-pale:   #D8F3DC;
  --a-amber:        #F4A261;
  --a-amber-dark:   #E76F51;
  --a-text:         #1C2B2B;
  --a-muted:        #6B7A7A;
  --a-bg:           #FFFFFF;
  --a-bg-soft:      #F7FAF8;
  --a-border:       #E2EAE5;
  --a-radius:       10px;
  --a-radius-sm:    6px;
  --a-shadow:       0 2px 8px rgba(0,0,0,.07);
  --a-font:         'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --a-max:          860px;
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--a-font); color: var(--a-text); background: var(--a-bg); line-height: 1.7; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--a-green); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.4rem; }

/* ── Layout ─────────────────────────────────────────── */
.a-wrap   { max-width: var(--a-max); margin: 0 auto; padding: 0 1.25rem; }
.a-main   { padding: 2rem 0 5rem; }

/* ── Nav ─────────────────────────────────────────────── */
.a-nav { background: var(--a-green); }
.a-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.a-nav__logo { color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.a-nav__logo:hover { text-decoration: none; opacity: .9; }
.a-nav__links { display: flex; gap: 1.75rem; list-style: none; padding: 0; }
.a-nav__links a { color: rgba(255,255,255,.82); font-size: .88rem; font-weight: 500; }
.a-nav__links a:hover { color: #fff; text-decoration: none; }

/* ── Breadcrumb ──────────────────────────────────────── */
.a-bread { padding: .6rem 0; border-bottom: 1px solid var(--a-border); margin-bottom: 1.5rem; }
.a-bread ol { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; font-size: .82rem; color: var(--a-muted); }
.a-bread li + li::before { content: "›"; margin-right: .25rem; }
.a-bread a { color: var(--a-muted); }
.a-bread a:hover { color: var(--a-green); text-decoration: none; }

/* ── Article prose ───────────────────────────────────── */
.a-article h1 { font-size: 1.9rem; line-height: 1.22; margin-bottom: 1.25rem; font-weight: 700; }
.a-article h2 { font-size: 1.3rem; font-weight: 700; margin: 2.25rem 0 .8rem; padding-bottom: .35rem; border-bottom: 2px solid var(--a-green-pale); color: var(--a-green); }
.a-article h3 { font-size: 1.05rem; font-weight: 600; margin: 1.4rem 0 .5rem; }
.a-article p  { margin-bottom: 1rem; }
.a-article ul, .a-article ol { margin: .6rem 0 1rem; }
.a-article li { margin-bottom: .4rem; }

/* ── Lead box ────────────────────────────────────────── */
.a-lead { background: var(--a-bg-soft); border-left: 4px solid var(--a-green); padding: 1rem 1.25rem; border-radius: 0 var(--a-radius) var(--a-radius) 0; margin-bottom: 1.75rem; font-size: 1.05rem; line-height: 1.6; }
.a-lead.a-en-bref strong { color: var(--a-green); text-transform: uppercase; letter-spacing: .02em; font-size: .9em; }

/* ── Chiffres clés (bloc symptôme) ──────────────────── */
.a-chiffres-cles { background: var(--a-bg-soft); border: 1px solid var(--a-border); border-radius: var(--a-radius); padding: .85rem 1.1rem; margin-bottom: 1.5rem; }
.a-chiffres-cles strong { display: block; color: var(--a-green); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .4rem; }
.a-chiffres-cles ul { margin: 0; padding: 0 0 0 1.1rem; display: flex; flex-wrap: wrap; gap: .15rem 1.5rem; }
.a-chiffres-cles li { font-size: .9rem; color: var(--a-text-soft); }

/* ── Disclaimer ─────────────────────────────────────── */
.a-disclaimer { background: #FFF8E1; border: 1px solid #FFD54F; border-radius: var(--a-radius); padding: .75rem 1rem; font-size: .87rem; line-height: 1.5; margin-bottom: 1.5rem; }
.a-disclaimer strong { color: #795548; }

/* ── Fiche identité table ────────────────────────────── */
.a-fiche { width: 100%; border-collapse: collapse; border-radius: var(--a-radius); overflow: hidden; border: 1px solid var(--a-border); margin: 1.25rem 0 1.75rem; font-size: .93rem; }
.a-fiche th { background: var(--a-green); color: #fff; padding: .55rem .9rem; text-align: left; width: 42%; font-weight: 600; }
.a-fiche td { padding: .55rem .9rem; border-bottom: 1px solid var(--a-border); }
.a-fiche tr:last-child td, .a-fiche tr:last-child th { border-bottom: none; }
.a-fiche tr:nth-child(even) td { background: var(--a-bg-soft); }

/* ── Tags ────────────────────────────────────────────── */
.a-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1rem; }
.a-tag { background: var(--a-green-pale); color: var(--a-green); padding: .2rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.a-tag--amber { background: #FFF3E0; color: #E65100; }

/* ── Score bars ──────────────────────────────────────── */
.a-scores { display: grid; gap: .6rem; margin: 1rem 0 1.5rem; }
.a-score  { display: grid; grid-template-columns: 145px 1fr 90px; align-items: center; gap: .75rem; font-size: .88rem; }
.a-score__bar  { height: 9px; background: var(--a-border); border-radius: 999px; overflow: hidden; }
.a-score__fill { height: 100%; background: var(--a-green-light); border-radius: 999px; transition: width .3s; }
.a-score__label { color: var(--a-muted); font-size: .8rem; }

/* ── Urgence box ─────────────────────────────────────── */
.a-urgence { background: #FFF3F3; border: 1.5px solid #EF9A9A; border-radius: var(--a-radius); padding: .9rem 1.1rem; margin: 1.5rem 0; }
.a-urgence__title { font-weight: 700; color: #C62828; margin-bottom: .4rem; }

/* ── Steps ───────────────────────────────────────────── */
.a-steps { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.a-steps li { counter-increment: step; padding: .7rem 1rem .7rem 3rem; position: relative; margin-bottom: .5rem; background: var(--a-bg-soft); border-radius: var(--a-radius-sm); }
.a-steps li::before { content: counter(step); position: absolute; left: .75rem; top: .65rem; background: var(--a-green); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; line-height: 1; text-align: center; }

/* ── FAQ ─────────────────────────────────────────────── */
.a-faq { margin: 1.75rem 0; }
.a-faq__item { border: 1px solid var(--a-border); border-radius: var(--a-radius-sm); margin-bottom: .65rem; overflow: hidden; }
.a-faq__q { font-weight: 600; padding: .85rem 1.1rem; background: var(--a-bg-soft); font-size: .97rem; }
.a-faq__a { padding: .85rem 1.1rem; font-size: .93rem; line-height: 1.65; }

/* ── Byline auteur ───────────────────────────────────── */
.a-byline { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .82rem; color: var(--a-muted); margin-bottom: 1.4rem; }
.a-byline__author { color: var(--a-green); font-weight: 600; }
.a-byline__author:hover { text-decoration: underline; }
.a-byline__sep { opacity: .4; }

/* ── Contextual inline link ──────────────────────────── */
.a-ctx-link { margin: 1.1rem 0 .6rem; padding: .5rem .9rem; background: var(--a-bg-soft); border-left: 3px solid var(--a-green-light); border-radius: 0 var(--a-radius-sm) var(--a-radius-sm) 0; font-size: .92rem; }
.a-ctx-link::before { content: "→ "; color: var(--a-green-light); font-weight: 700; }
.a-ctx-link a { color: var(--a-green); font-weight: 600; }

/* ── Related links ───────────────────────────────────── */
.a-section-related { padding: 0 0 1.5rem; }
.a-related { background: var(--a-bg-soft); border-radius: var(--a-radius); padding: 1.1rem 1.25rem; margin: 2rem 0 0; }
.a-related__title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--a-muted); font-weight: 700; margin-bottom: .65rem; }
.a-related ul { list-style: none; padding: 0; }
.a-related li { margin-bottom: .4rem; }
.a-related a::before { content: "→ "; color: var(--a-green-light); }
.a-related a { font-weight: 500; }

/* ── Bloc "Bien équiper son <animal>" (pages race, ajouté 28/07/2026) ──
   Relie les fiches races aux pages accessoires/alimentation du même silo.
   Même famille visuelle que "À lire aussi", teinte verte pâle pour le
   distinguer (intention d'achat, pas lecture complémentaire). */
.a-equipement { background: var(--a-green-pale); border: 1px solid var(--a-green-light); border-radius: var(--a-radius); padding: 1.1rem 1.25rem; margin: 2rem 0 0; }
.a-equipement__title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--a-muted); font-weight: 700; margin-bottom: .5rem; }
.a-equipement__intro { font-size: .95rem; color: var(--a-text); margin-bottom: .7rem; }
.a-equipement ul { list-style: none; padding: 0; margin: 0; }
.a-equipement li { margin-bottom: .4rem; }
.a-equipement a { font-weight: 500; }
.a-equipement a::before { content: "→ "; color: var(--a-green-light); }

/* ── Pont entre silos, sur les hubs accessoires (28/07/2026) ──
   Relie les 4 rayons matériel entre eux. Même gabarit que "À lire aussi",
   fond neutre pour ne pas concurrencer le bloc vert d'équipement. */
.a-pont { background: var(--a-bg-soft); border-radius: var(--a-radius); padding: 1.1rem 1.25rem; margin: 2rem 0 0; }
.a-pont__title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--a-muted); font-weight: 700; margin-bottom: .5rem; }
.a-pont__intro { font-size: .95rem; color: var(--a-text); margin-bottom: .7rem; }
.a-pont ul { list-style: none; padding: 0; margin: 0; }
.a-pont li { margin-bottom: .4rem; }
.a-pont a { font-weight: 500; }
.a-pont a::before { content: "→ "; color: var(--a-green-light); }

/* ── Sources / outbound ──────────────────────────────── */
.a-sources { background: var(--a-bg-soft); border-top: 1px solid var(--a-border); padding: 2rem 0; margin-top: 2rem; }
.a-sources h2 { font-size: 1rem; font-weight: 700; color: var(--a-green); margin-bottom: .5rem; }
.a-sources p  { font-size: .9rem; color: var(--a-muted); line-height: 1.6; margin-bottom: .4rem; }
.a-sources a  { color: var(--a-green); font-weight: 500; }

/* ── Hub grid ────────────────────────────────────────── */
.a-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: 1.25rem 0 2rem; }
.a-hub-card { border: 1px solid var(--a-border); border-radius: var(--a-radius); padding: 1.1rem 1.25rem; transition: box-shadow .18s, border-color .18s; display: block; }
.a-hub-card:hover { box-shadow: var(--a-shadow); border-color: var(--a-green-light); text-decoration: none; }
.a-hub-card__icon { font-size: 1.6rem; margin-bottom: .4rem; }
.a-hub-card__title { font-weight: 700; color: var(--a-text); font-size: .97rem; }
.a-hub-card__desc { font-size: .84rem; color: var(--a-muted); margin-top: .2rem; }

/* ── Race grid ───────────────────────────────────────── */
.a-race-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: .75rem; margin: 1.25rem 0 2rem; }
.a-race-card { border: 1px solid var(--a-border); border-radius: var(--a-radius); padding: .85rem 1rem; transition: box-shadow .18s; display: block; }
.a-race-card:hover { box-shadow: var(--a-shadow); text-decoration: none; }
.a-race-card__name { font-weight: 700; color: var(--a-text); font-size: .92rem; }
.a-race-card__info { font-size: .8rem; color: var(--a-muted); margin-top: .15rem; }

/* ── Hero ────────────────────────────────────────────── */
.a-hero { background: linear-gradient(145deg, var(--a-green) 0%, #1B4332 100%); color: #fff; padding: 4rem 0 3.5rem; text-align: center; }
.a-hero h1 { font-size: 2.3rem; line-height: 1.2; margin-bottom: 1rem; }
.a-hero p  { font-size: 1.1rem; opacity: .88; max-width: 580px; margin: 0 auto 2.25rem; }
.a-silos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .85rem; margin: 1.5rem auto 0; max-width: 680px; }
.a-silo { text-align: center; padding: 1.25rem .75rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: var(--a-radius); transition: background .18s; display: block; color: #fff; }
.a-silo:hover { background: rgba(255,255,255,.18); text-decoration: none; }
.a-silo__icon { font-size: 2.2rem; display: block; margin-bottom: .3rem; }
.a-silo__name { font-weight: 700; font-size: .93rem; }
.a-silo__count { font-size: .78rem; opacity: .75; }

/* ── Homepage sections ───────────────────────────────── */
.a-section { padding: 3rem 0; }
.a-section--alt { background: var(--a-bg-soft); }
.a-section h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; }
.a-section__sub { color: var(--a-muted); margin-bottom: 1.75rem; }

/* ── Footer ──────────────────────────────────────────── */
.a-footer { background: #1C2B2B; color: rgba(255,255,255,.68); padding: 2.5rem 0 1.5rem; font-size: .88rem; margin-top: 2rem; }
.a-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.a-footer__logo { color: #fff; font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; }
.a-footer ul { list-style: none; padding: 0; }
.a-footer li { margin-bottom: .35rem; }
.a-footer a { color: rgba(255,255,255,.65); }
.a-footer a:hover { color: #fff; text-decoration: none; }
.a-footer__copy { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 680px) {
  .a-article h1 { font-size: 1.55rem; }
  .a-hero h1    { font-size: 1.65rem; }
  .a-hero p     { font-size: .97rem; }
  .a-nav__links { display: none; }
  .a-score      { grid-template-columns: 110px 1fr 80px; }
  .a-footer__grid { grid-template-columns: 1fr; }
}

/* ── Bloc Amazon (liens de recherche affiliés) ──────────────────────────── */
.a-amazon { background: var(--a-green-pale); border: 1px solid var(--a-green-light); border-radius: var(--a-radius); padding: 1.1rem 1.25rem; margin: 2rem 0; }
.a-amazon__intro { font-size: .98rem; color: var(--a-text); margin-bottom: .8rem; font-weight: 500; }
.a-amazon__btn { display: inline-block; background: #FF9900; color: #1C2B2B; font-weight: 700; padding: .65rem 1.4rem; border-radius: var(--a-radius-sm); font-size: .98rem; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.a-amazon__btn:hover { background: #F08804; color: #1C2B2B; text-decoration: none; }
.a-amazon__note { display: block; font-size: .78rem; color: var(--a-muted); margin-top: .6rem; }
/* Bloc à plusieurs boutons (fiches race/espèce, 28/07/2026) : les boutons
   passent à la ligne proprement au lieu de déborder sur mobile. */
.a-amazon--multi { display: flex; flex-wrap: wrap; gap: .5rem; }
.a-amazon--multi .a-amazon__intro,
.a-amazon--multi .a-amazon__note { flex: 0 0 100%; margin-bottom: 0; }
.a-amazon--multi .a-amazon__btn { flex: 0 1 auto; }
.a-footer__amazon { margin-top: 1.5rem; font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.5; }

/* ── Note d'honnêteté des prix (29/07/2026) ─────────────────────────────────
   Discrète : filet gris à gauche, fond très clair, texte plus petit que le
   corps de l'article. Elle informe sans voler la vedette au contenu. */
.a-prix-note { margin: 2rem 0 .5rem; padding: .9rem 1.1rem; border-left: 3px solid var(--a-border); background: var(--a-bg-soft); border-radius: 0 var(--a-radius-sm) var(--a-radius-sm) 0; font-size: .88rem; line-height: 1.6; color: var(--a-muted); }
.a-prix-note strong { color: var(--a-text); }
.a-prix-note time { white-space: nowrap; }


/* ── AFFICHAGE TELEPHONE (09/08/2026) ──────────────────────────────────────
   Verrou anti-glissement : aucune page ne peut plus etre trainee sur le cote
   sur un telephone, quelle qu'en soit la cause -- y compris une cause future
   qu'on n'a pas prevue. Et tout tableau large glisse desormais TOUT SEUL dans
   sa boite au lieu de pousser la page entiere.
   Verifie par audit_affichage_mobile_ratchet (moteur partage) : une seule page
   neuve qui deborde arrete la fabrication du site.                          */
html { overflow-x: hidden; }
body { max-width: 100%; }
table, table[class] { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
img, video, iframe { max-width: 100%; height: auto; }


/* ── LISIBILITE SUR ORDINATEUR + BANDEAU COOKIES (09/08/2026) ──────────────
   1. Largeur du texte. Mesure du 09/08 sur un ecran de 1280 px : 103
      caracteres par ligne, alors que le confort de lecture est entre 60 et 90.
      Au-dela, l'oeil perd le debut de la ligne suivante et le lecteur decroche.
      On borne le TEXTE seulement : tableaux, grilles de cartes et images
      gardent toute la largeur.
   2. Bandeau cookies. Mesure du 09/08 : avec la barre du haut, il occupait
      jusqu'a 24 % de l'ecran d'un telephone (mesure sur Cuizio : 71 + 126 px
      sur 812). Il disparait des qu'on repond, mais il s'affiche a CHAQUE
      nouveau visiteur venu de Google -- donc a presque tout le monde
      aujourd'hui. On le rend plus compact sur petit ecran, sans jamais
      rapetisser les boutons (ils doivent rester attrapables au doigt).   */
.a-article > p,
.a-article > ul,
.a-article > ol { max-width: 78ch; }
@media (max-width: 768px) {
  .cookie-banner { padding: .55rem .8rem !important; gap: .45rem .7rem !important; }
  .cookie-banner p { font-size: .76rem !important; line-height: 1.35 !important; min-width: 0 !important; }
  #bandeau-cookies { padding: 8px 12px !important; gap: 8px !important;
                     font-size: 12.5px !important; line-height: 1.35 !important; }
}

/* Boutons du bandeau cookies : 40 px de haut minimum sur telephone (09/08/2026).
   Ils faisaient 30 px -- trop petit pour un doigt. Compacter le bandeau ne doit
   jamais se payer sur la facilite a repondre. */
@media (max-width:768px){
 .btn-cookie,
 .cookie-banner button,
 .cookie-banner a.btn,
 #bandeau-cookies button{min-height:40px !important;padding-top:0 !important;padding-bottom:0 !important}
}

/* ── CONFORT AU DOIGT (10/08/2026) ─────────────────────────────────────────
   Mesure sur un ecran de telephone : les liens de navigation faisaient 17 a
   31 px de haut (menus, pieds de page, fils d'Ariane, sommaires, listes
   « a lire aussi »), alors qu'un doigt a besoin d'environ 40 px pour viser
   sans se tromper. On ajoute de la ZONE DE CLIC autour du lien -- pas de la
   taille de texte : la mise en page et la longueur des lignes ne bougent pas.
   Les liens ecrits DANS une phrase sont volontairement exclus : les grossir
   casserait le texte, et on ne vise pas un mot au milieu d'un paragraphe
   comme on vise un bouton.                                                 */
@media (max-width:768px){
 nav a,
 footer a,
 .fil a, .breadcrumb a, [class*="ariane"] a,
 [class*="sommaire"] a, [class*="toc"] a,
 [class*="related"] li > a,
 [class*="list"] li > a,
 [class*="liste"] li > a,
 li > a:only-child{
   display:inline-block;
   padding-top:10px;
   padding-bottom:10px;
 }
}

/* Note sous un tableau de reperes chiffres (source / precision de lecture) */
.a-note { font-size: .84rem; color: var(--a-muted); line-height: 1.55; margin: -1.1rem 0 1.75rem; }