/* ==========================================================================
   Carrousels de la page d'accueil — habillage commun, puis les deux types
   de cartes : documents PDF (synthèses) et articles (publications).
   Palette : charte du site, cf. le :root de index.html.
   ========================================================================== */

/* --- En-tête commun ------------------------------------------------------ */

.carousel-head {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .carousel-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.carousel-actions {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-shrink: 0;
}

.carousel-link,
.carousel-pause {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease-out;
}

.carousel-link {
    color: var(--accent, #2E7D32);
}

.carousel-link:hover {
    color: #1B5E20;
}

.carousel-link i {
    transition: transform 0.2s ease-out;
}

.carousel-link:hover i {
    transform: translateX(3px);
}

.carousel-pause {
    color: #6B7280;
    font-weight: 500;
}

.carousel-pause:hover {
    color: #111827;
}

.carousel-link:focus-visible,
.carousel-pause:focus-visible {
    outline: 2px solid var(--accent, #2E7D32);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Piste défilante ----------------------------------------------------- */

.carousel-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-behavior: auto;
    padding: 0.25rem 0 1.25rem;
    /* La barre de progression maison remplace la scrollbar native. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

/* --- Barre de progression ------------------------------------------------ */

.carousel-progress {
    height: 4px;
    border-radius: 999px;
    background-color: #E0E0E0;
    overflow: hidden;
}

.carousel-progress span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background-color: var(--accent, #2E7D32);
}

/* --- Socle commun aux deux types de cartes ------------------------------- */

.syntheses-card,
.pub-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
    transition: box-shadow 0.25s ease-out, transform 0.25s ease-out, border-color 0.25s ease-out;
}

.syntheses-card:hover,
.syntheses-card:focus-visible,
.pub-card:hover,
.pub-card:focus-visible {
    transform: translateY(-4px);
    border-color: #9CA3AF;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.12);
}

.syntheses-card:focus-visible,
.pub-card:focus-visible {
    outline: 2px solid var(--accent, #2E7D32);
    outline-offset: 2px;
}

/* --- Carte « document » : couverture de PDF au format A4 ----------------- */

.syntheses-card {
    width: 200px;
}

.syntheses-cover {
    position: relative;
    aspect-ratio: 1 / 1.414;
    background-color: #F3F4F6;
    overflow: hidden;
}

.syntheses-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Pastille « PDF » révélée au survol. */
.syntheses-cover::after {
    content: attr(data-badge);
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #FFFFFF;
    background: linear-gradient(to top, rgba(17, 24, 39, 0.85), rgba(17, 24, 39, 0));
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.syntheses-card:hover .syntheses-cover::after,
.syntheses-card:focus-visible .syntheses-cover::after {
    opacity: 1;
}

/* Le drapeau est pose a gauche et centre sur les deux lignes de texte. */
.syntheses-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem 1.125rem;
}

.syntheses-txt {
    min-width: 0;
}

/* Les intitules regionaux sont longs : on tronque sur une ligne plutot que
   de laisser la carte grandir. L'attribut title donne le nom complet. */
.syntheses-meta h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.25rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.syntheses-meta p {
    font-size: 0.8125rem;
    color: #6B7280;
    margin: 0;
}

/* --- Carte « article » : graphique en ouverture -------------------------- */

.pub-card {
    width: 310px;
}

@media (max-width: 480px) {
    .pub-card {
        width: 268px;
    }
}

.pub-thumb {
    aspect-ratio: 16 / 10;
    background-color: #F3F4F6;
    border-bottom: 1px solid #E0E0E0;
    overflow: hidden;
}

/* Les graphiques des articles ont des proportions très variables : on cadre
   depuis le haut, là où se trouvent titre et légende. */
.pub-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.45s ease-out;
}

.pub-card:hover .pub-thumb img,
.pub-card:focus-visible .pub-thumb img {
    transform: scale(1.04);
}

.pub-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem 1.125rem 1.25rem;
}

.pub-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.625rem;
}

.pub-tags span {
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    background: rgba(46, 125, 50, 0.08);
    border: 1px solid rgba(46, 125, 50, 0.2);
    color: var(--accent, #2E7D32);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
}

/* Titres sur deux lignes au plus. Les cartes d'une piste sont toutes aussi
   hautes que la plus haute : sans borne, un seul titre long allongeait
   l'ensemble du carrousel. Le nom complet reste dans l'attribut title. */
.pub-body h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trois lignes de resume suffisent a donner le sujet ; la suite est dans
   l'article. Les resumes allaient jusqu'a six lignes. */
.pub-body p {
    font-size: 0.8125rem;
    color: #6B7280;
    line-height: 1.55;
    margin: 0 0 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Poussé en bas : les liens s'alignent d'une carte à l'autre, quelle que
   soit la longueur du titre et du résumé. */
.pub-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--accent, #2E7D32);
    font-size: 0.8125rem;
    font-weight: 600;
}

.pub-more i {
    transition: transform 0.2s ease-out;
}

.pub-card:hover .pub-more i,
.pub-card:focus-visible .pub-more i {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {

    .syntheses-card,
    .pub-card,
    .carousel-link i,
    .syntheses-cover::after,
    .pub-thumb img,
    .pub-more i {
        transition: none;
    }

    .syntheses-card:hover,
    .syntheses-card:focus-visible,
    .pub-card:hover,
    .pub-card:focus-visible {
        transform: none;
    }

    .pub-card:hover .pub-thumb img {
        transform: none;
    }
}

/* ==========================================================================
   Carrousel de mise en avant (sous le hero) — un seul gabarit de carte pour
   les solutions, les analyses et les synthèses, afin qu'elles défilent
   toutes à la même taille.
   ========================================================================== */

.feat-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.feat-card {
    flex: 0 0 auto;
    /* Largeur et hauteur identiques pour les trois types de contenu. */
    width: 248px;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
    transition: box-shadow 0.25s ease-out, transform 0.25s ease-out, border-color 0.25s ease-out;
}

.feat-card:hover,
.feat-card:focus-visible {
    transform: translateY(-4px);
    border-color: #9CA3AF;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.12);
}

.feat-card:focus-visible {
    outline: 2px solid var(--accent, #2E7D32);
    outline-offset: 2px;
}

/* Même fenêtre d'image pour tous : couverture de PDF au format A4, capture
   de tableau de bord ou graphique d'article sont cadrés depuis le haut. */
.feat-thumb {
    aspect-ratio: 16 / 10;
    background-color: #F3F4F6;
    border-bottom: 1px solid #E0E0E0;
    overflow: hidden;
}

.feat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.45s ease-out;
}

.feat-card:hover .feat-thumb img,
.feat-card:focus-visible .feat-thumb img {
    transform: scale(1.04);
}

.feat-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    padding: 0.75rem 0.875rem 1rem;
    /* Hauteur plancher : les cartes restent égales même avec un titre court. */
    min-height: 104px;
}

.feat-kind {
    align-self: flex-start;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(46, 125, 50, 0.08);
    border: 1px solid rgba(46, 125, 50, 0.2);
    color: var(--accent, #2E7D32);
}

.feat-kind--art {
    background: rgba(17, 24, 39, 0.05);
    border-color: rgba(17, 24, 39, 0.14);
    color: #475467;
}

/* Le drapeau est posé à gauche du bloc de texte et centré sur ses deux
   lignes : un seul drapeau pour le nom du pays et la ligne de détail. */
.feat-id {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
}

/* Taille fixe. Un drapeau etire sur la hauteur des deux lignes creait un
   calcul circulaire (hauteur deduite de la rangee, largeur deduite de la
   hauteur) qui gonflait la hauteur de toutes les cartes. */
.feat-flag {
    flex: 0 0 auto;
    width: 28px;
    height: 19px;
    border-radius: 3px;
    border: 1px solid rgba(17, 24, 39, 0.18);
    object-fit: cover;
    display: block;
}

/* Les documents régionaux ne relèvent d'aucun pays : une pastille de même
   gabarit préserve l'alignement d'une carte à l'autre. */
.feat-flag--region {
    display: grid;
    place-items: center;
    background: #F3F4F6;
    color: #6B7280;
    font-size: 0.75rem;
}

.feat-txt {
    min-width: 0;
}

.feat-txt h3 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    margin: 0;
    /* Deux lignes au plus, puis des points de suspension. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feat-txt p {
    font-size: 0.6875rem;
    color: #6B7280;
    line-height: 1.4;
    margin: 0.125rem 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {

    .feat-card,
    .feat-thumb img {
        transition: none;
    }

    .feat-card:hover,
    .feat-card:focus-visible {
        transform: none;
    }

    .feat-card:hover .feat-thumb img {
        transform: none;
    }
}

/* Les cartes d'applications presentent un logo, non une capture : il est
   pose entier et centre, au lieu d'etre recadre comme une photo. */
.feat-thumb--logo {
    display: grid;
    place-items: center;
    background: #F9FAFB;
}

/* Les logos sont carres. On les borne en largeur ET en hauteur, avec des
   dimensions laissees en auto : le logo tient toujours entierement dans la
   fenetre, centre, sans deformation ni rognage. Un « height: 100% » le
   faisait deborder par le haut. */
.feat-thumb--logo img {
    width: auto;
    height: auto;
    max-width: 58%;
    max-height: 72%;
    object-fit: contain;
}

/* Le chevron « lien externe » suit le nom de l'application. */
.feat-txt h3 i {
    font-size: 0.75rem;
    color: var(--accent, #2E7D32);
    vertical-align: baseline;
}