/* ==========================================================================
   FICHIER : /module/m-style-base.css
   ROLE : style commun des pages Almanach Jour
   ==========================================================================

   IMPORTANT POUR CHATGPT / MAINTENANCE

   Ce fichier contient les styles de base du site.
   Pour les prochaines pages, utiliser d'abord les classes existantes.
   Ne pas recréer de nouvelles classes si une classe existe déjà.

   CLASSES PRINCIPALES DISPONIBLES :

   .page-base
   = conteneur central de la page
   À utiliser une seule fois autour du contenu principal :
   <main class="page-base">

   .hero-base
   = bloc haut de page / introduction principale
   À utiliser pour présenter le sujet de la page :
   <header class="hero-base">

   .sur-titre
   = petit texte au-dessus du H1
   Exemple : Programme TV, Fruits et légumes, Calendrier

   .intro-page
   = paragraphe d'introduction visible sous le H1

   .bloc-base
   = encadré simple pour rubriques utiles, listes, infos pratiques
   Ne pas l'utiliser autour de toute la page.

   .fil-ariane
   = fil d'Ariane en haut de page

   .topnav
   = menu principal responsive

   REGLES IMPORTANTES :

   - Ne pas mettre de CSS inline inutile.
   - Ne pas recréer page-tv, hero-tv, etc. sauf besoin réel.
   - Préférer page-base, hero-base, bloc-base, intro-page.
   - Le responsive du menu est déjà géré ici.
   - Les couleurs principales du site sont :
     Bleu nuit : #16324f
     Bleu éditorial : #24527a
     Vert accent : #04AA6D

   STRUCTURE HTML CONSEILLEE :

   <main class="page-base">

       <nav class="fil-ariane">...</nav>

       <header class="hero-base">
           <p class="sur-titre">...</p>
           <h1>...</h1>
           <p class="intro-page">...</p>
       </header>

       <section class="bloc-base">
           <h2>...</h2>
           <ul>...</ul>
       </section>

   </main>

   ========================================================================== */
   
   



/* ==========================================================================
   RESET + BASE
   ========================================================================== */

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: #111;
}


/* ==========================================================================
   CONTENEUR CENTRAL
   ========================================================================== */

.page-base {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;

    padding: 16px;
    padding-top: 24px;
    padding-bottom: 40px;

    box-sizing: border-box;
}


/* ==========================================================================
   TITRES PRINCIPAUX
   ========================================================================== */

/* H1 = titre principal page */
h1 {
    color: #16324f;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}


/* H2 = grandes sections */
h2 {
    color: #24527a;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.25;
    margin-top: 40px;
    margin-bottom: 16px;
    font-weight: 700;

    border-left: 5px solid #04AA6D;
    padding-left: 12px;
}


/* H3 = sous-sections */
h3 {
    color: #2f4858;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.35;
    margin-top: 28px;
    margin-bottom: 12px;
    font-weight: 600;
}


/* LARGEUR LECTURE */
.hero-base,
.intro-page,
.page-base p,
.page-base li {
    max-width: 850px;
}


.bloc-base {
    background: #fcfdff;
    border: 1px solid #e7edf3;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 28px;
}


.page-base li {
    margin-bottom: 8px;
}


.page-base a {
    color: #24527a;
}

.page-base a:hover {
    color: #04AA6D;
}




.liste-rubriques li::marker {
    color: #04AA6D;
}

.lien-social-footer {
    margin-top: 26px;
    font-size: 0.95rem;
}





.liste-rubriques {
    margin-top: 0;
    padding-left: 28px;
}

.separateur-rubrique {
    margin-top: 18px;
    list-style: none;
}

.lien-social-footer {
    margin-top: 18px;
}




/* ==========================================================================
   HERO / INTRODUCTION DE PAGE
   ========================================================================== */

.hero-base {
    background: #f5f8fb;
    border: 1px solid #dde5ec;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 28px;
}

.sur-titre {
    margin: 0 0 8px 0;
    color: #6b7280;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.intro-page {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333;
}







.topnav {
    overflow: hidden;
    background-color: #333;
}

.topnav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.topnav li {
    margin: 0;
    padding: 0;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 12px 10px;
    text-decoration: none;
    font-size: 15px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #04AA6D;
    color: white;
}

.topnav .icon {
    display: none;
}


/* =========================
   RESPONSIVE
========================= */
@media screen and (max-width: 950px) {

    .topnav a {
        display: none;
        float: none;
        text-align: left;
    }

    .topnav a:first-child {
        display: block;
    }

    .topnav a.icon {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
    }

    .topnav.responsive a {
        display: block;
    }

    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
}


/* =========================================
   FIL D'ARIANE
========================================= */

.fil-ariane {
    margin: 12px 0 18px;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    background: rgba(255,255,255,0.75);
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.fil-ariane a {
    color: #2b5d9a;
    text-decoration: none;
}

.fil-ariane a:hover {
    text-decoration: underline;
}



/* =========================================
   SEPARATEUR
========================================= */

.separateur-navigation{
    height:1px;
    background:#d8dee8;
    margin:28px 0 18px;
}