/* ============================================================
   ANIMALIA — kit front public (.ax-*)
   Transcription du Design System V2 (docs/design/animalia/
   « Animalia Design System.dc.html ») — source de vérité.
   Tokens : vert #0E9F55 / #0B7A42, menthe #E9F7EF, nuit #0F1F17,
   ambre #E8A33D, encre #111827, gris #6B7280, bordure #E6E8EB,
   fond #F4F5F6 ; Poppins ; rayons 6/8/12/16 ; base d'espacement 4.
   ============================================================ */

:root {
    --ax-green: #0E9F55;
    --ax-green-deep: #0B7A42;
    --ax-mint: #E9F7EF;
    --ax-night: #0F1F17;
    --ax-amber: #E8A33D;
    --ax-ink: #111827;
    --ax-grey: #6B7280;
    --ax-border: #E6E8EB;
    --ax-bg: #F4F5F6;
    --ax-surface: #FFFFFF;
    /* Teintes de catégorie (pastilles / cartes de facts uniquement) */
    --ax-tint-nature: #E9F7EF;
    --ax-tint-marine: #EAF2FB;
    --ax-tint-savane: #FDF1E5;
    --ax-tint-alerte: #FBEBEB;
    --ax-tint-quiz: #F1EDFA;
}

.ax {
    font-family: 'Poppins', system-ui, sans-serif;
    color: var(--ax-ink);
    background: var(--ax-bg);
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    line-height: 26px;
}
.ax ::selection { background: #D6F0E2; }
.ax a { color: var(--ax-green); text-decoration: none; }
.ax a:hover { color: var(--ax-green-deep); }

/* Conteneur responsive canonique (règle 12) : contenu max 1400 px centré,
   marges 40 px desktop, 24 px ≤900, 16 px ≤640 — jamais de débordement. */
.ax-container { width: 100%; max-width: 1400px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.ax-section { margin-top: 56px; }

/* ------------------------------------------------------------
   Typographie (échelle du design system)
   ------------------------------------------------------------ */
.ax-hero-title { font-size: 42px; line-height: 48px; font-weight: 700; letter-spacing: -0.025em; margin: 0; }
.ax-page-title { font-size: 34px; line-height: 41px; font-weight: 700; margin: 0; }
.ax-sci { font-size: 19px; font-style: italic; font-weight: 400; color: var(--ax-grey); }
.ax-h2 { font-size: 20px; line-height: 26px; font-weight: 600; margin: 0; }
.ax-card-title { font-size: 15.5px; line-height: 22px; font-weight: 600; margin: 0; color: var(--ax-ink); }
.ax-body { font-size: 15px; line-height: 26px; font-weight: 400; }
.ax-data { font-weight: 600; font-variant-numeric: tabular-nums; }
.ax-meta { font-size: 13px; color: var(--ax-grey); }

/* ------------------------------------------------------------
   Sous-navigation Animalia (sticky sous le header du site)
   ------------------------------------------------------------ */
.ax-subnav { background: var(--ax-surface); border-bottom: 1px solid var(--ax-border); }
.ax-subnav__inner { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ax-subnav__inner::-webkit-scrollbar { display: none; }
.ax-subnav__brand { display: flex; align-items: center; gap: 10px; padding: 14px 0; margin-inline-end: 14px; white-space: nowrap; }
.ax-subnav__brand strong { font-size: 17px; font-weight: 700; color: var(--ax-ink); }
.ax-subnav__badge { background: var(--ax-mint); color: var(--ax-green-deep); font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 4px 12px; }
.ax-subnav a.ax-subnav__link {
    display: inline-block; padding: 16px 14px; font-size: 14px; font-weight: 500;
    color: var(--ax-grey); border-bottom: 2px solid transparent; white-space: nowrap;
}
.ax-subnav a.ax-subnav__link:hover { color: var(--ax-ink); }
.ax-subnav a.ax-subnav__link.active { color: var(--ax-green-deep); border-bottom-color: var(--ax-green); font-weight: 600; }

/* ------------------------------------------------------------
   Fil d'ariane
   ------------------------------------------------------------ */
.ax-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ax-grey); padding: 18px 0 0; }
.ax-breadcrumb a { color: var(--ax-grey); }
.ax-breadcrumb a:hover { color: var(--ax-green-deep); }
.ax-breadcrumb .sep { color: #C6CBD2; }
.ax-breadcrumb .current { color: var(--ax-ink); font-weight: 500; }

/* ------------------------------------------------------------
   Boutons
   ------------------------------------------------------------ */
.ax-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 8px; padding: 11px 20px; font-size: 14px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
    font-family: inherit;
}
.ax-btn--primary { background: var(--ax-green); color: #fff !important; }
.ax-btn--primary:hover { background: var(--ax-green-deep); color: #fff !important; }
.ax-btn--secondary { background: var(--ax-surface); color: var(--ax-ink) !important; border-color: var(--ax-border); }
.ax-btn--secondary:hover { border-color: var(--ax-grey); color: var(--ax-ink) !important; }
/* Sur hero sombre : plein vert + contour verre dépoli */
.ax-btn--glass { background: rgba(255,255,255,0.08); color: #fff !important; border-color: rgba(255,255,255,0.28); backdrop-filter: blur(6px); }
.ax-btn--glass:hover { background: rgba(255,255,255,0.16); color: #fff !important; }
.ax-btn--link { background: none; border: none; color: var(--ax-green); padding: 0; font-weight: 600; }

/* ------------------------------------------------------------
   Badges & statuts
   ------------------------------------------------------------ */
.ax-tag {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 6px;
    padding: 4px 10px; font-size: 12.5px; font-weight: 600; background: var(--ax-bg); color: var(--ax-grey);
}
/* Badge de card (maquettes) : petit, discret, secondaire au titre.
   Forme centralisée — les couleurs viennent de Support\Badges. */
.ax-badge { display: inline-block; border-radius: 6px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; }

.ax-tag--mint { background: var(--ax-mint); color: var(--ax-green-deep); }
.ax-tag--marine { background: var(--ax-tint-marine); color: #2A5FA8; }
.ax-tag--savane { background: var(--ax-tint-savane); color: #B06A1B; }
.ax-tag--alerte { background: var(--ax-tint-alerte); color: #B03A3A; }
.ax-tag--quiz { background: var(--ax-tint-quiz); color: #6C4FC0; }
.ax-tag--new { background: var(--ax-green); color: #fff; }
.ax-tag--dark { background: rgba(15,31,23,0.65); color: #fff; }

/* Statut de conservation UICN */
.ax-iucn { display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.ax-iucn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ax-iucn--lc, .ax-iucn--nt { background: var(--ax-mint); color: var(--ax-green-deep); }
.ax-iucn--vu { background: var(--ax-tint-savane); color: #B06A1B; }
.ax-iucn--en, .ax-iucn--cr, .ax-iucn--ew, .ax-iucn--ex { background: var(--ax-tint-alerte); color: #B03A3A; }
.ax-iucn--dd { background: var(--ax-bg); color: var(--ax-grey); }

/* ------------------------------------------------------------
   En-tête de section
   ------------------------------------------------------------ */
.ax-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.ax-section-head .ax-h2 { flex: 1; }
.ax-section-head .more { font-size: 14px; font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------
   Grilles de cartes (gouttière 16)
   ------------------------------------------------------------ */
.ax-grid { display: grid; gap: 16px; }
.ax-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ax-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ax-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ax-grid--5 { grid-template-columns: repeat(5, 1fr); }
.ax-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* ------------------------------------------------------------
   Cartes — les 5 formats du design system
   ------------------------------------------------------------ */
.ax-card { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 12px; overflow: hidden; display: block; transition: box-shadow .15s, transform .15s; }
a.ax-card:hover { box-shadow: 0 6px 20px rgba(17,24,39,0.08); transform: translateY(-2px); color: inherit; }
.ax-card__media { position: relative; aspect-ratio: 16/10; background: var(--ax-bg); overflow: hidden; }
.ax-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-card__media .ax-media-fallback { display: flex; align-items: center; justify-content: center; height: 100%; color: #C6CBD2; font-size: 32px; }
.ax-card__body { padding: 14px 16px 16px; }
.ax-card__meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--ax-grey); flex-wrap: wrap; }

/* B — carte vidéo : durée en overlay */
.ax-card__duration { position: absolute; bottom: 10px; right: 10px; background: rgba(15,31,23,0.75); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.ax-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ax-card__play span { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.9); color: var(--ax-green-deep); display: flex; align-items: center; justify-content: center; font-size: 17px; padding-left: 3px; }

/* C — carte animal : photo portrait + nom + nom scientifique + statut */
.ax-card--animal .ax-card__media { aspect-ratio: 4/5; }
.ax-card--animal .ax-sci { font-size: 13px; display: block; margin-top: 2px; }

/* D — carte fact : fond teinté, texte visible */
.ax-card--fact { border: none; border-radius: 12px; padding: 20px; background: var(--ax-mint); }
.ax-card--fact .ax-card-title { font-size: 15.5px; line-height: 23px; }
.ax-card--fact.tint-marine { background: var(--ax-tint-marine); }
.ax-card--fact.tint-savane { background: var(--ax-tint-savane); }
.ax-card--fact.tint-quiz { background: var(--ax-tint-quiz); }
.ax-card--fact.tint-alerte { background: var(--ax-tint-alerte); }

/* E — tuile immersive (fond photo sombre) */
.ax-tile { position: relative; border-radius: 16px; overflow: hidden; min-height: 220px; display: flex; align-items: flex-end; background: var(--ax-night); }
.ax-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.68; }
.ax-tile__body { position: relative; padding: 22px; color: #fff; }
.ax-tile__body h3 { margin: 0 0 6px; font-size: 21px; font-weight: 700; color: #fff; }
.ax-tile__body p { margin: 0; font-size: 14px; color: rgba(255,255,255,0.85); }
a.ax-tile:hover img { opacity: 0.8; }

/* A — carte catégorie (pastille d'icône + libellé) */
.ax-card--category { display: flex; align-items: center; gap: 14px; padding: 16px; }
.ax-card--category .pastille { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--ax-mint); flex: none; }

/* F — lignes de données & fait rapide */
.ax-datarows { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 12px; overflow: hidden; }
.ax-datarow { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--ax-border); font-size: 14px; }
.ax-datarow:last-child { border-bottom: none; }
.ax-datarow .label { color: var(--ax-grey); }
.ax-quickfact { background: var(--ax-mint); border-radius: 12px; padding: 16px 18px; font-size: 14.5px; line-height: 24px; }

/* ------------------------------------------------------------
   Hero sombre « Nuit Animalia »
   ------------------------------------------------------------ */
.ax-hero { position: relative; background: var(--ax-night); color: #fff; overflow: hidden; }
.ax-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.ax-hero__body { position: relative; padding: 64px 0; }
.ax-hero .ax-hero-title { color: #fff; }
.ax-hero p { color: rgba(255,255,255,0.85); }
.ax-hero .accent { color: var(--ax-amber); }
.ax-hero__stats { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 28px; }
.ax-hero__stat b { display: block; font-size: 26px; font-weight: 700; color: var(--ax-amber); }
.ax-hero__stat span { font-size: 13.5px; color: rgba(255,255,255,0.75); }

/* ------------------------------------------------------------
   Onglets (fiches)
   ------------------------------------------------------------ */
.ax-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ax-border); overflow-x: auto; scrollbar-width: none; }
.ax-tabs::-webkit-scrollbar { display: none; }
.ax-tabs a { display: inline-block; padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--ax-grey); border-bottom: 2px solid transparent; white-space: nowrap; }
.ax-tabs a:hover { color: var(--ax-ink); }
.ax-tabs a.active { color: var(--ax-green-deep); border-bottom-color: var(--ax-green); font-weight: 600; }

/* ------------------------------------------------------------
   Recherche & filtres
   ------------------------------------------------------------ */
.ax-search { display: flex; align-items: center; gap: 10px; background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 12px; padding: 12px 18px; }
.ax-search input { border: none; outline: none; flex: 1; font-family: inherit; font-size: 15px; background: transparent; color: var(--ax-ink); }
.ax-search input::placeholder { color: var(--ax-grey); }
.ax-search .icon { color: var(--ax-grey); }
.ax-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ax-chip { display: inline-block; border-radius: 999px; border: 1px solid var(--ax-border); background: var(--ax-surface); color: var(--ax-grey); font-size: 13.5px; font-weight: 500; padding: 8px 16px; cursor: pointer; }
.ax-chip:hover { border-color: var(--ax-grey); color: var(--ax-ink); }
.ax-chip.active { background: var(--ax-green); border-color: var(--ax-green); color: #fff; }
.ax-filters .clear { font-size: 13.5px; font-weight: 600; color: var(--ax-grey); }

/* ------------------------------------------------------------
   Blocs santé & passerelles
   ------------------------------------------------------------ */
.ax-didyouknow { background: var(--ax-mint); border-radius: 16px; padding: 24px 28px; }
.ax-didyouknow h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ax-green-deep); }
.ax-vet-cta { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 16px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ax-vet-cta h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.ax-vet-cta p { margin: 0; font-size: 14px; color: var(--ax-grey); }
/* Mention santé : fin de contenu, fond neutre, jamais en rouge */
.ax-disclaimer { background: var(--ax-bg); border-radius: 12px; padding: 14px 18px; font-size: 13.5px; color: var(--ax-grey); }

/* ------------------------------------------------------------
   États d'interface
   ------------------------------------------------------------ */
.ax-empty { text-align: center; padding: 56px 20px; background: var(--ax-surface); border: 1px dashed var(--ax-border); border-radius: 16px; }
.ax-empty h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.ax-empty p { margin: 0; font-size: 14px; color: var(--ax-grey); }
.ax-skeleton { background: linear-gradient(90deg, #EDEEF0 25%, #F6F7F8 50%, #EDEEF0 75%); background-size: 200% 100%; animation: ax-shimmer 1.4s infinite; border-radius: 8px; }
@keyframes ax-shimmer { to { background-position: -200% 0; } }

/* ------------------------------------------------------------
   Pagination (style du kit, liens Laravel)
   ------------------------------------------------------------ */
.ax-pagination { display: flex; justify-content: center; margin-top: 40px; }
.ax-pagination .pagination { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.ax-pagination .page-link { display: inline-block; min-width: 38px; text-align: center; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--ax-border); background: var(--ax-surface); color: var(--ax-ink); font-size: 14px; }
.ax-pagination .page-item.active .page-link { background: var(--ax-green); border-color: var(--ax-green); color: #fff; }
.ax-pagination .page-item.disabled .page-link { color: #C6CBD2; }

/* ------------------------------------------------------------
   RTL (arabe) : héritée du layout ; ajustements directionnels
   ------------------------------------------------------------ */
[dir="rtl"] .ax-card__duration { right: auto; left: 10px; }
[dir="rtl"] .ax-card__play span { padding-left: 0; padding-right: 3px; }

/* ------------------------------------------------------------
   Responsive — maquettes : 56px desktop, 40px mobile entre sections
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .ax-container { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 992px) {
    .ax-grid--4, .ax-grid--5, .ax-grid--6 { grid-template-columns: repeat(3, 1fr); }
    .ax-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .ax-hero-title { font-size: 34px; line-height: 40px; }
    .ax-section { margin-top: 40px; }
}
@media (max-width: 640px) {
    .ax-container { padding-left: 16px; padding-right: 16px; }
    .ax-grid--2, .ax-grid--3, .ax-grid--4, .ax-grid--5, .ax-grid--6 { grid-template-columns: repeat(2, 1fr); }
    .ax-grid--list-1 { grid-template-columns: 1fr; }
    .ax-hero-title { font-size: 28px; line-height: 34px; }
    .ax-page-title { font-size: 26px; line-height: 32px; }
    .ax-hero__stats { gap: 22px; }
    .ax-hero__body { padding: 44px 0; }
}

/* Équivalence du responsive officiel des maquettes (responsive.css) pour nos
   sections : les maquettes portent le padding de section en inline
   (« padding: 60px 40px 0 » → 36px en mobile) ; chez nous il est scindé en
   .ax-container + padding-top inline. Même comportement, mêmes seuils. */
@media (max-width: 640px) {
    .ax-container[style*="padding-top: 44px"],
    .ax-container[style*="padding-top: 48px"],
    .ax-container[style*="padding-top: 52px"],
    .ax-container[style*="padding-top: 60px"],
    .ax-container[style*="padding-top: 64px"],
    .ax-container[style*="padding-top: 68px"],
    .ax-container[style*="padding-top: 72px"] {
        padding-top: 36px !important;
    }
}
.ax-iucn--ne { background: var(--ax-bg); color: var(--ax-grey); }