/* --- START OF FILE animal-en-A.css --- */

/* --- Global Resets & Base Styles --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
    /* Add padding-top if you ever implement a fixed header */
    /* scroll-padding-top: 80px; */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9; /* Slightly off-white background */
    font-size: 16px; /* Base font size */
}

.container {
    max-width: 1100px; /* Max width for content */
    margin: 0 auto; /* Center the container */
    padding: 0 20px; /* Padding on the sides, especially for mobile */
    overflow: hidden; /* Clear floats if any were used (good practice) */
}

a {
    color: #27ae60; /* A calm green for links */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover,
a:focus {
    color: #2ecc71; /* Lighter green on hover/focus */
    text-decoration: underline;
}

img {
    max-width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below images */
    border-radius: 8px; /* Slightly rounded corners for images */
}

h1, h2, h3 {
    color: #2c3e50; /* Dark slate blue/gray for headings */
    margin-bottom: 0.8em;
    line-height: 1.3;
}

h1 {
    font-size: 2.5rem; /* Larger main heading */
    margin-top: 1.5em;
    margin-bottom: 1em;
    text-align: center;
}

h2 {
    font-size: 1.8rem;
    margin-top: 2em; /* Space above section titles */
    border-bottom: 2px solid #e0e0e0; /* Subtle separator */
    padding-bottom: 0.4em;
}

h3 {
    font-size: 1.4rem;
    color: #34495e; /* Slightly lighter than h2 */
}

p {
    margin-bottom: 1em;
}

ul {
    list-style: none; /* Remove default bullets */
    padding-left: 0; /* Remove default padding */
}

/* --- Navigation --- */
.navigation {
    background-color: #34495e; /* Darker background for contrast */
    padding: 10px 0;
    margin-bottom: 20px;
    text-align: center;
}

.navigation a {
    color: #ecf0f1; /* Light text color */
    margin: 0 15px;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 500;
}

.navigation a:hover,
.navigation a:focus {
    background-color: #4e6a85;
    color: #fff;
    text-decoration: none;
}

/* --- Header --- */
.header {
    background-color: #ffffff; /* White background for header area */
    padding: 20px 0 10px 0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

/* --- Main Content Sections --- */
.animal-content section {
    background-color: #ffffff;
    padding: 25px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- Conteneur pour Table des Matières et Publicité --- */
.toc-ad-wrapper {
    display: flex;
    flex-wrap: wrap;        /* Permet de passer en colonne sur petit écran */
    gap: 25px;              /* Espace entre la TOC et la pub */
    margin-bottom: 30px;    /* Espace sous l'ensemble TOC/Pub */
    align-items: flex-start;/* Aligne les éléments en haut */
}

/* Ajustement pour la table des matières dans ce conteneur */
.toc-ad-wrapper .table-of-contents {
    flex: 1 1 auto;        /* Prend l'espace restant, base flexible */
    min-width: 280px;      /* Largeur minimale avant de passer en dessous */
    margin-bottom: 0;      /* La marge basse est sur le wrapper */

    /* Styles visuels de la TOC (fond, bordure, etc.) */
    background-color: #e8f6f3;
    border-left: 5px solid #27ae60;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Style pour l'emplacement publicitaire (336x280) à côté de la TOC */
.toc-ad-slot {
    flex: 0 0 336px;      /* === MODIFIÉ === Ne grandit pas, ne rétrécit pas, largeur fixe de 336px */
    height: 280px;        /* === MODIFIÉ === Hauteur fixe de 280px */
    /* Optionnel: ajuster margin-top si besoin d'alignement vertical fin */
     margin-top: 45px;  /* Conserver si ça aligne bien avec le H2 de la TOC */
     /* Si l'alignement n'est pas bon, essayer sans margin-top ou avec align-items: center sur le wrapper */
}

/* Style pour le placeholder de la pub (à remplacer par le vrai code pub) */
.ad-placeholder-toc {
    width: 100%;
    height: 100%;
    background-color: #e9e9e9;
    border: 1px dashed #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
    box-sizing: border-box;
}
/* Mettre à jour le texte du placeholder */
.ad-placeholder-toc span::before {
     content: "Publicité 336x280"; /* === MODIFIÉ === */
     display: block; /* Assure qu'il remplace l'ancien texte si 'span' est vide */
}
.ad-placeholder-toc span {
     font-size: 0; /* Masque le texte original dans le span HTML s'il y en avait */
}

/* --- Intro Section --- */
.intro-section .seo-text {
    font-size: 1.1rem;
    color: #555;
}

.image-container-top {
    display: flex;
    gap: 20px; /* Space between images */
    margin: 20px 0;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center;
}

.image-container-top img {
    flex: 1 1 300px; /* Allow images to grow and shrink, base width 300px */
    max-width: 48%; /* Limit width when side-by-side */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- Animal List Grid --- */
.animal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Responsive grid */
    gap: 15px;
    margin-top: 15px;
}

.animal-item {
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.animal-item:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px); /* Slight lift on hover */
}

/* --- Ad Section (336x280 Placeholder Style) --- */
.ad-section {
    width: 336px;          /* Fixed width for the 336x280 ad slot */
    height: 280px;         /* Fixed height for the 336x280 ad slot */
    margin: 30px auto;     /* 30px top/bottom margin, auto left/right for horizontal centering */
    padding: 0;            /* Remove padding so the container itself IS 336x280 */
    background-color: #f0f0f0; /* Placeholder background */
    border: 1px dashed #ccc; /* Placeholder border */
    color: #999;           /* Placeholder text color */
    font-style: italic;    /* Placeholder text style */
    display: flex;         /* Use flexbox to center the placeholder text/content */
    align-items: center;   /* Vertically center content (like placeholder text) */
    justify-content: center;/* Horizontally center content (like placeholder text) */
    overflow: hidden;      /* Good practice: prevent ad content from spilling out */
    box-sizing: border-box;/* Ensure border/padding are included in width/height (already global, but safe) */
    /* text-align: center; removed as justify-content handles horizontal centering for flex items */
    /* min-height: 100px; removed as height is fixed */
}



/* --- Animal Category Sections (Mammals, Reptiles etc.) --- */
.characteristics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: 30px; /* Increased gap for better separation */
    margin-top: 20px;
}

.characteristic {
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 8px;
    background-color: #fdfdfd;
    transition: box-shadow 0.3s ease;
}

.characteristic:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.characteristic img {
    margin-bottom: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.animal-category h3 {
    margin-top: 1.8em; /* Ajuste cette valeur (e.g., 1.5em, 2em) selon l'espace désiré */
}

/* --- Endangered Species Section --- */
.endangered-list {
    margin-top: 20px;
}

.endangered-item {
    background-color: #fff8f8; /* Light red background for warning */
    border: 1px solid #f5c6cb;
    border-left: 5px solid #dc3545; /* Red accent */
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.endangered-item h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
    color: #721c24; /* Darker red for heading */
}

.endangered-item p {
    margin-bottom: 0.3em;
}

.endangered-item strong {
    color: #555;
}

/* --- FAQ Section --- */
.faq-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.faq-item h3 {
    margin-bottom: 0.4em;
    cursor: pointer; /* Optional: Add if you implement JS toggle */
}

/* --- Alphabet Navigation --- */
.alphabet-nav {
    background-color: #ecf0f1; /* Light gray background */
    padding: 15px;
    text-align: center;
    border-radius: 8px;
    margin-top: 30px; /* Space above */
    margin-bottom: 30px; /* Space below */
    display: flex; /* Use flexbox for wrapping */
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px; /* Spacing between letters */
}

.alphabet-nav a {
    display: inline-block;
    padding: 8px 12px;
    margin: 2px;
    background-color: #fff;
    border: 1px solid #bdc3c7;
    border-radius: 5px;
    color: #34495e;
    font-weight: bold;
    min-width: 40px; /* Ensure consistent width */
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.alphabet-nav a:hover,
.alphabet-nav a:focus {
    background-color: #3498db; /* Blue hover */
    color: #fff;
    border-color: #2980b9;
    text-decoration: none;
    transform: scale(1.05);
}

.alphabet-nav a.active {
    background-color: #27ae60; /* Green for active letter */
    color: #fff;
    border-color: #27ae60;
    font-weight: bold;
    cursor: default;
}

.alphabet-nav span.disabled-letter {
    display: inline-block; /* Pour appliquer padding/margin comme les <a> */
    padding: 8px 12px;
    margin: 2px;
    background-color: #f0f0f0; /* Fond gris clair */
    border: 1px solid #dcdcdc; /* Bordure grise */
    border-radius: 5px;
    color: #aaa; /* Texte gris clair */
    font-weight: bold;
    min-width: 40px;
    text-align: center;
    cursor: default; /* Curseur normal, pas la main */
    user-select: none; /* Empêche la sélection du texte (optionnel) */
}

/* S'assurer qu'il n'y a pas d'effet au survol */
.alphabet-nav span.disabled-letter:hover {
    background-color: #f0f0f0; /* Reste le même */
    color: #aaa; /* Reste le même */
    border-color: #dcdcdc; /* Reste le même */
    transform: none; /* Pas de scale */
}

/* --- Related Content --- */
.related-content ul {
    list-style: none;
    padding-left: 0;
}

.related-content li {
    margin-bottom: 10px;
}

.related-content a {
    font-weight: 500;
    display: block; /* Make the whole line clickable */
    padding: 8px 0;
}

.related-content a::before {
    content: '➔ '; /* Add an arrow */
    color: #777;
    margin-right: 5px;
}

/* --- Footer --- */
.footer {
    background-color: #2c3e50; /* Dark footer background */
    color: #ecf0f1; /* Light text */
    padding: 40px 0 20px 0;
    margin-top: 40px; /* Space above footer */
}

.footer-content {
    display: flex;
    flex-wrap: wrap; /* Allow sections to wrap */
    justify-content: space-between;
    gap: 30px; /* Space between footer sections */
    margin-bottom: 30px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.footer-section {
    flex: 1 1 200px; /* Flexible sections, base width 200px */
    min-width: 180px; /* Minimum width before wrapping */
}

.footer-section h3 {
    color: #fff; /* White heading in footer */
    margin-bottom: 15px;
    font-size: 1.2rem;
    border-bottom: 1px solid #4e6a85;
    padding-bottom: 8px;
}

.footer-section ul {
    list-style: none;
    padding-left: 0;
}

.footer-section li {
    margin-bottom: 8px;
}

.footer-section a {
    color: #bdc3c7; /* Lighter gray for links */
    transition: color 0.3s ease;
}

.footer-section a:hover,
.footer-section a:focus {
    color: #fff; /* White on hover */
    text-decoration: underline;
}

.social-links a {
    display: inline-block;
    margin-right: 10px;
    /* Add icons later if needed */
}

.copyright {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #4e6a85; /* Separator line */
    font-size: 0.9rem;
    color: #bdc3c7;
}

.copyright a {
    color: #bdc3c7;
}

.copyright a:hover,
.copyright a:focus {
    color: #fff;
}


/* --- Responsive Adjustments --- */

/* Tablets and smaller desktops */
@media (max-width: 992px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.3rem; }

    .image-container-top img {
        max-width: 47%; /* Adjust slightly */
    }
}

/* Tablets */
@media (max-width: 768px) {
    body { font-size: 15px; }
    h1 { font-size: 2rem; }

    .container { padding: 0 15px; }

    .navigation { padding: 8px 0; }
    .navigation a { margin: 0 10px; }

    .image-container-top {
        flex-direction: column; /* Stack images vertically */
        align-items: center;
    }

    .image-container-top img {
        max-width: 80%; /* Allow images to be larger when stacked */
        margin-bottom: 15px;
    }

    .characteristics {
       /* Keep the grid, it adapts */
    }

    .footer-content {
        flex-direction: column; /* Stack footer sections */
        text-align: center; /* Center text in stacked sections */
    }

    .footer-section {
        margin-bottom: 20px; /* Space between stacked sections */
    }

    .social-links {
        text-align: center;
    }
}

/* --- Responsive: Empiler sur petits écrans --- */
@media (max-width: 768px) { /* Le breakpoint peut nécessiter ajustement selon le rendu final */
    .toc-ad-wrapper {
        flex-direction: column;
        gap: 20px;
        align-items: center; /* Centrer les éléments quand empilés */
    }

    .toc-ad-wrapper .table-of-contents {
        flex-basis: auto;
        width: 100%;      /* Prend toute la largeur */
        max-width: 500px; /* Optionnel: Limiter la largeur max de la TOC sur mobile */
        min-width: unset;
         /* Styles visuels hérités ou à redéfinir si nécessaire */
        background-color: #e8f6f3;
        border-left: 5px solid #27ae60;
        padding: 25px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .toc-ad-slot {
        flex-basis: auto;
        width: 336px;     /* Conserve la taille correcte */
        height: 280px;    /* Conserve la taille correcte */
        margin: 0 auto;   /* Centre le bloc pub */
        margin-top: 0;    /* Réinitialise le margin-top spécifique au desktop */
    }

    /* Le placeholder s'adapte déjà car il prend 100% de .toc-ad-slot */
    /* Le texte du placeholder est déjà mis à jour ci-dessus */
}

/* Mobile phones */
@media (max-width: 576px) {
    body { font-size: 14px; }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }

    .container { padding: 0 10px; }

    .navigation a {
        display: block; /* Stack nav links */
        margin: 5px 0;
        padding: 10px;
    }

    .animal-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Smaller min size */
        gap: 10px;
    }

     .characteristics {
        grid-template-columns: 1fr; /* Single column */
        gap: 20px;
    }

    .image-container-top img {
        max-width: 95%; /* Nearly full width */
    }

    .alphabet-nav {
        padding: 10px;
        gap: 5px;
    }
    .alphabet-nav a {
        padding: 6px 8px;
        min-width: 35px;
    }

    .footer { padding: 30px 0 15px 0; }
    .footer-content { gap: 20px; padding: 0 15px; }
    .copyright { padding-top: 15px; margin-top: 15px; }
}


/* --- END OF FILE animal-en-A.css --- */