.hero-image {
    background-image:
        linear-gradient(0.05deg, rgba(0, 0, 0, 0.3) 26.46%, #006A4F 81.04%),
        linear-gradient(0deg, rgba(0, 106, 79, 0.5), rgba(0, 106, 79, 0.5)),
        url("../images/hero.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Decale le contenu sous le bandeau d'alerte pour garder le badge du hero visible. */
.home-hero__content {
    margin-top: 3rem;
}

@media (min-width: 1024px) {
    .hero-image {
        background-image:
            linear-gradient(269.99deg,
                rgba(0, 0, 0, 0.3) 31.66%,
                #006A4F 83.72%),
            url("../images/hero.png");
    }

    .home-hero__content {
        margin-top: 4rem;
    }
}

.hero-overlay-gradient {
    background:
        linear-gradient(0.05deg, rgba(0, 0, 0, 0.3) 26.46%, #006A4F 81.04%),
        linear-gradient(0deg, rgba(0, 106, 79, 0.5), rgba(0, 106, 79, 0.5));
}

@media (min-width: 1024px) {
    .hero-overlay-gradient {
        background: linear-gradient(269.99deg, rgba(0, 0, 0, 0.3) 31.66%, #006A4F 83.72%);
    }
}

.css-flex-center {
    display: flex;
    align-items: center;
    gap: 5px;

}

.css-label {
    height: 29px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 4px;
    padding-right: 12px;
    padding-bottom: 4px;
    padding-left: 12px;
    gap: 8px;
    font-size: 14px;
    border-radius: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #006A4F;
    background-color: rgb(0 106 79 / 0.1);
    color: #006A4F;
}

.css-green-pale {
    background-color: #006A4F;
}

/*
 * Boutons « outline » (Voir toutes les actualites / Voir tous les communiques /
 * Toutes les biographies). Dimensions figees par la maquette. Definis ici
 * (home.css chargee APRES dist/main.css) pour ne pas etre ecrases par les
 * utilitaires Tailwind. Chaque bouton ajoute son modificateur de largeur.
 */
.css-btn-outline {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 16px;
    border-radius: 8px;
    border-width: 1.5px;
    border-style: solid;
    border-color: #cbd5e1; /* slate-300 */
    color: #334155;        /* slate-700 */
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    max-width: 100%;
    transition: color .15s ease, border-color .15s ease;
}

.css-btn-outline:hover {
    border-color: #006A4F; /* togo-green */
    color: #006A4F;
}

.css-btn-outline--actus { width: 228px; }
.css-btn-outline--comm  { width: 333px; }
.css-btn-outline--bio   { width: 223px; }

/*
 * Les regles .communique-pagination / .communique-page-btn ont ete retirees en
 * meme temps que js/communique-filter.js : la pagination est desormais rendue
 * par le serveur et habillee plus bas, sous « .ambassade-pagination ».
 */

/* ═══════════════════════════════════════════════════════════════════════
   BANDEAU D'ALERTE (communique)

   Le defilement est fait en CSS et non en JavaScript : la bande n'a aucune
   logique a piloter, seulement a se deplacer. La piste contient DEUX copies
   du message et translate de -50 % — a l'instant ou la premiere copie sort
   de l'ecran, la seconde occupe exactement sa place de depart, ce qui donne
   une boucle sans saut visible.

   Le bandeau tenait sur trois lignes en mobile ; il tient desormais sur
   une, et le texte defile au lieu d'etre tronque. Tout est en CSS, donc
   l'alerte reste integralement lisible sans JavaScript.

   Les keyframes `ambassade-ticker` etaient partagees avec l'ancien bandeau
   d'information vert (retire de header.php) : elles vivent ici, avec le
   seul bandeau qui les utilise encore.
   ══════════════════════════════════════════════════════════════════════ */

@keyframes ambassade-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.warning-banner__viewport {
    flex: 1 1 auto;
    min-width: 0;          /* Sans quoi le flex item refuse de retrecir. */
    overflow: hidden;
    /* Le message s'efface aux deux bords plutot que d'etre coupe net. */
    mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.warning-banner__track {
    display: flex;
    width: max-content;
    animation: ambassade-ticker var(--alert-duration, 24s) linear infinite;
}

/* Le defilement s'arrete des que le visiteur veut lire — au survol comme au
   focus clavier, exactement comme le ticker. */
.warning-banner:hover .warning-banner__track,
.warning-banner__track:focus-within {
    animation-play-state: paused;
}

.warning-banner__message {
    margin: 0;
    /* L'ecart de la jointure de boucle. En `gap` sur la piste, il serait
       compte une fois de trop et la boucle deriverait a chaque tour. */
    padding-right: 4rem;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .warning-banner__viewport {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .warning-banner__track {
        animation: none;
    }

    .warning-banner__message[aria-hidden="true"] {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGINATION DES LISTES

   Habille le balisage de paginate_links() (template-parts/pagination.php).
   Les selecteurs portent sur les classes du noyau — `page-numbers`,
   `current`, `dots` — et non sur des classes maison : le rendu suit donc
   automatiquement toute evolution du balisage genere.
   ══════════════════════════════════════════════════════════════════════ */

.ambassade-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.5rem 0.5rem 0;
    border-top: 1px solid #f1f5f9; /* slate-100 */
}

@media (min-width: 640px) {
    .ambassade-pagination {
        flex-direction: row;
    }
}

.ambassade-pagination__count {
    margin: 0;
    font-size: 13px;
    color: #64748b; /* slate-500 */
}

.ambassade-pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ambassade-pagination__list li {
    margin: 0;
}

.ambassade-pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 8px;
    background: #fff;
    color: #334155; /* slate-700 */
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.ambassade-pagination a.page-numbers:hover,
.ambassade-pagination a.page-numbers:focus-visible {
    border-color: #006a4e;
    color: #006a4e;
}

.ambassade-pagination .page-numbers.current {
    background: #006a4e;
    border-color: #006a4e;
    color: #fff;
    font-weight: 600;
}

/* L'ellipse n'est pas un bouton : elle n'a ni cadre ni interaction. */
.ambassade-pagination .page-numbers.dots {
    border-color: transparent;
    background: none;
    color: #94a3b8; /* slate-400 */
}