/******************************************************************************
 *ss-categorie
 * RSS ENGINE
 * Édition professionnelle
 * Toute l'actualité en un seul endroit.
 *
 * Version : 1.2.0 - Journal
 *
 ******************************************************************************/

/******************************
 * COULEURS
 ******************************/

:root{

    --background:#f3f1eb;
    --card:#ffffff;

    --header:#183153;

    --title:#1c355e;

    --text:#444444;

    --light:#777777;

    --border:#d8d8d8;

    --link:#005fa3;

    --shadow:rgba(0,0,0,0.08);

}

/******************************
 * PAGE
 ******************************/

body{

    margin:0;

    padding:0;

    background:var(--background);

    font-family:Arial,Helvetica,sans-serif;

    color:var(--text);

}

/******************************
 * BANDEAU
 ******************************/

#rss-header{

    background:var(--header);

    color:white;

    text-align:center;

    padding:30px;

    box-shadow:0px 2px 8px rgba(0,0,0,.20);

}

#rss-header h1{

    margin:0;

    font-size:40px;

    letter-spacing:2px;

}

#rss-header h2{

    margin:8px 0;

    font-size:20px;

    font-weight:normal;

}

#rss-header p{

    margin-top:15px;

    font-size:16px;

    opacity:.9;

}

/******************************
 * CONTENEUR
 ******************************/

#rss-container{

    max-width:1100px;

    margin:40px auto;

    padding:20px;

}

/******************************
 * Statistiques
 ******************************/

#rss-stats{

    max-width:1200px;

    margin:18px auto;

    padding:0;

    background:none;

    border:none;

    box-shadow:none;

    color:#666;

    font-size:15px;

}

/* ==================================================
   RECHERCHE
================================================== */

#rss-recherche {

    max-width: 1100px;

    margin: 22px auto 10px auto;

    text-align: center;

}

#rss-search {

    width: 70%;

    max-width: 650px;

    padding: 12px 18px;

    font-size: 16px;

    font-family: Arial, sans-serif;

    border: 1px solid #1b3a5f;

    border-radius: 25px;

    background: #ffffff;

    color: #333;

    box-sizing: border-box;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}

#rss-search::placeholder {

    color: #777;

}

#rss-search:focus {

    border-color: #1b3a5f;

    box-shadow:
        0 0 0 3px rgba(27,58,95,0.15);

}

/******************************
 * CARTE
 ******************************/

.rss-item{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:12px;

    padding:25px;

    margin-bottom:25px;

    box-shadow:0px 3px 12px var(--shadow);

    transition:
        transform .20s ease,
        box-shadow .20s ease;

}

.rss-item:hover{

    transform:translateY(-4px);

    box-shadow:0px 8px 20px rgba(0,0,0,.18);

}

/******************************
 * TITRE
 ******************************/

.rss-item h3{

    margin:0 0 15px 0;

    font-size:28px;

    line-height:1.35;

}

.rss-item h3 a{

    color:var(--title);

    text-decoration:none;

}

.rss-item h3 a:hover{

    color:var(--link);

}

/******************************
 * DESCRIPTION
 ******************************/

.rss-item p{

    font-size:17px;

    line-height:1.7;

}

/******************************
 * PIED DE L'ARTICLE
 ******************************/

.rss-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

    border-top:1px solid #eeeeee;

    padding-top:15px;

}

.rss-source{

    color:#005fa3;

    font-weight:bold;

}

.pubDate{

    color:#777777;

    font-size:14px;

}

.rss-image{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

    border-radius:8px;

    margin-bottom:15px;

}

/******************************
 * VERSION
 ******************************/

#rss-version{

    text-align:right;

    color:#999999;

    font-size:13px;

    margin-top:10px;

}

/******************************
 * ESPACE DE CHARGEMENT
 ******************************/

#rss-container{

    min-height:800px;

}

/******************************
 * RESPONSIVE
 ******************************/

@media(max-width:900px){

#rss-header h1{

    font-size:32px;

}

.rss-item h3{

    font-size:22px;

}

.rss-footer{

    display:block;

}

.pubDate{

    margin-top:8px;

}
}

/* ==========================
   À LA UNE
========================== */

.rss-une-badge{

    display:inline-block;

    background:#183153;

    color:white;

    padding:8px 15px;

    border-radius:20px;

    font-weight:bold;

    margin-bottom:18px;

}

.rss-image-une{

    width:100%;

    height:420px;

    object-fit:cover;

    display:block;

    border-radius:10px;

    margin-bottom:20px;

}

.rss-une h2{

    margin:0;

    font-size:34px;

    line-height:1.25;

}

.rss-une h2 a{

    color:#1c355e;

    text-decoration:none;

}

.rss-une h2 a:hover{

    color:var(--link);

    text-decoration:underline;

}

.rss-une-description{

    font-size:18px;

    color:#555;

    line-height:1.7;

    margin-top:18px;

}

.rss-une{

    background:white;

    border:1px solid #d8d8d8;

    border-left:8px solid #183153;

    border-radius:12px;

    padding:25px;

    margin-bottom:35px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/* ============================================================
   CATÉGORIES
   ============================================================ */

#rss-categories {

    width: 90%;
    max-width: 1100px;

    margin: 18px auto 10px auto;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

}

.rss-categorie {

    border: 1px solid #1b365d;

    background: white;

    color: #1b365d;

    padding: 9px 17px;

    border-radius: 22px;

    font-size: 14px;

    font-family: Arial, Helvetica, sans-serif;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.rss-categorie:hover {

    background: #1b365d;

    color: white;

    transform: translateY(-2px);

    box-shadow:
        0 4px 10px rgba(0,0,0,0.12);

}

.rss-categorie.actif {

    background: #1b365d;

    color: white;

    font-weight: bold;

    box-shadow:
        0 3px 8px rgba(0,0,0,0.15);

}

/* ============================================================
   FILTRES PAR SOURCE
   ============================================================ */

#rss-filtres {

    width: 90%;
    max-width: 1100px;

    margin: 18px auto 25px auto;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}

.rss-filtre {

    border: 1px solid #1b365d;

    background: white;

    color: #1b365d;

    padding: 8px 16px;

    border-radius: 20px;

    font-size: 14px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

}

.rss-filtre:hover {

    background: #1b365d;

    color: white;

    transform: translateY(-1px);

}

.rss-filtre.actif {

    background: #1b365d;

    color: white;

    font-weight: bold;

}

/* ==================================================
   AUCUN RÉSULTAT
================================================== */

.rss-aucun-resultat {

    max-width: 700px;

    margin: 50px auto;

    padding: 35px 25px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #d9e2ec;

    border-radius: 12px;

    box-shadow:
        0 4px 15px rgba(0,0,0,0.06);

    color: #1b3a5f;

    font-size: 20px;

    font-weight: bold;

}

.rss-aucun-resultat span {

    display: block;

    margin-top: 10px;

    color: #666;

    font-size: 15px;

    font-weight: normal;

}

/* ==================================================
   TERME RECHERCHÉ
================================================== */

.rss-highlight {

    background: #fff3a6;

    font-weight: bold;

    padding: 1px 3px;

    border-radius: 3px;

}