/* ============================================================
   HABILLAGE COMMUN — en-tête, menu et pied de page
   Partagé par le site d'articles et le coin des prêches.

   Les variables portent le préfixe --ch- : ce fichier ne modifie
   donc aucune couleur propre à l'une ou l'autre partie, même si
   les deux feuilles de style se chargent ensemble.
   ============================================================ */

:root {
    --ch-vert-profond: #0b5440;
    --ch-vert:         #0f6b4f;
    --ch-vert-pale:    #eaf3ef;
    --ch-or:           #b2791a;
    --ch-or-pale:      #fdf6e8;
    --ch-encre:        #16211e;
    --ch-encre-doux:   #5d6b66;
    --ch-papier:       #fafbfa;
    --ch-pierre:       #e4e9e7;
    --ch-blanc:        #ffffff;
    --ch-rouge:        #a8352a;
    --ch-serif: Georgia, "Times New Roman", "Noto Serif", serif;
    --ch-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ch-large: 1100px;
}

.invisible {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.saut-contenu {
    position: absolute; left: -9999px;
    background: var(--ch-vert-profond); color: #fff;
    padding: 10px 16px; z-index: 100;
}
.saut-contenu:focus { left: 8px; top: 8px; }
/* ---------- En-tête ---------- */
.site-entete {
    background: var(--ch-vert-profond);
    color: #fff;
}
.rang {
    max-width: var(--ch-large);
    margin: 0 auto;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.marque {
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
/* Le logo est un JPEG, sans transparence : on l'encadre en pastille
   blanche pour que ce fond paraisse voulu sur le bandeau sombre.
   Hauteur fixe et largeur libre : le bandeau tient quelles que soient
   les proportions de l'image. On vise aussi l'image par sa place, et
   pas seulement par sa classe, pour qu'une règle générale
   « img { height: auto } » ne reprenne jamais la main. */
.marque img,
.marque-logo {
    height: 46px;
    width: auto;
    max-width: 150px;
    display: block;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 3px;
    flex: 0 0 auto;
}
.marque-textes { display: block; min-width: 0; }
.marque-nom {
    display: block;
    font-family: var(--ch-serif);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.marque-note {
    display: block;
    font-size: .78rem;
    color: #a9c9bd;
    margin-top: 2px;
}
.bouton-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    border-radius: 7px;
    padding: 8px 12px;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}
.bouton-menu-barres { display: inline-block; width: 16px; }
.bouton-menu-barres span {
    display: block; height: 2px; background: #fff;
    margin: 3px 0; border-radius: 2px;
}
/* ---------- Navigation ---------- */
.navigation { display: none; border-top: 1px solid rgba(255,255,255,.14); }
.navigation.ouverte { display: block; }
body.menu-ouvert { overflow: hidden; }
.menu { list-style: none; margin: 0; padding: 6px 0; }
.menu > li { position: relative; border-bottom: 1px solid rgba(255,255,255,.08); }
.menu > li:last-child { border-bottom: 0; }
.menu a {
    display: block;
    padding: 13px 18px;
    color: #eaf3ef;
    text-decoration: none;
    font-size: 1rem;
}
.menu a:hover, .menu a:focus { background: rgba(255,255,255,.08); color: #fff; }
.menu > li.actif > a { color: #fff; box-shadow: inset 3px 0 0 var(--ch-or); }
.ouvrir-sous-menu {
    position: absolute; top: 4px; right: 8px;
    background: transparent; border: 0; color: #a9c9bd;
    font-size: 1.1rem; padding: 8px 12px; cursor: pointer;
}
.sous-menu { display: none; list-style: none; margin: 0; padding: 0 0 6px; }
.menu > li.deploye .sous-menu { display: block; }
.sous-menu a { padding: 10px 18px 10px 34px; font-size: .94rem; color: #bcd6cb; }
.recherche {
    display: flex; gap: 8px;
    padding: 12px 18px 16px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.navigation .recherche input {
    flex: 1; min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 7px;
    background: rgba(255,255,255,.1);
    color: #fff;
    font: inherit; font-size: .95rem;
}
.navigation .navigation .recherche input::placeholder { color: #9dbdb1; }
.navigation .recherche button {
    padding: 10px 14px; border: 0; border-radius: 7px;
    background: var(--ch-or); color: #fff; font: inherit; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.note-admin { padding: 0 18px 14px; margin: 0; font-size: .88rem; }
.note-admin a { color: var(--ch-or-pale); }
.recherche-large {
    padding: 0; border: 0; margin: 16px 0;
    max-width: 520px;
}
.recherche-large input {
    background: var(--ch-blanc);
    border: 1px solid var(--ch-pierre);
    color: var(--ch-encre);
}
.recherche-large input::placeholder { color: #93a19c; }
/* ---------- Pied de page ---------- */
.site-pied {
    background: var(--ch-vert-profond);
    color: #cfe2da;
    margin-top: 50px;
    padding: 34px 18px 22px;
}
.pied-colonnes {
    max-width: var(--ch-large); margin: 0 auto;
    display: grid; gap: 26px;
    grid-template-columns: 1fr;
}
.pied-titre {
    font-family: var(--ch-serif); font-size: 1.05rem;
    color: #fff; margin: 0 0 8px; font-weight: 700;
}
.site-pied p { margin: 4px 0; font-size: .92rem; }
.site-pied a { color: #fff; }
.pied-liens { list-style: none; margin: 0; padding: 0; }
.pied-liens li { margin-bottom: 6px; font-size: .92rem; }
.pied-bas {
    max-width: var(--ch-large); margin: 26px auto 0;
    padding-top: 16px; border-top: 1px solid rgba(255,255,255,.15);
    font-size: .85rem; color: #9dbdb1;
}
@media (min-width: 760px) {
.bouton-menu { display: none; }
.navigation {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        max-width: var(--ch-large);
        margin: 0 auto;
        padding: 0 18px;
        border-top: 1px solid rgba(255,255,255,.14);
    }
.menu { display: flex; flex-wrap: wrap; padding: 0; }
.menu > li { border-bottom: 0; }
.menu a { padding: 14px 13px; font-size: .95rem; }
.menu > li.actif > a { box-shadow: inset 0 -3px 0 var(--ch-or); }
.ouvrir-sous-menu { display: none; }
.menu > li.a-sous-menu > a::after { content: " ▾"; color: #9dbdb1; font-size: .8em; }
.sous-menu {
        position: absolute; top: 100%; left: 0; z-index: 30;
        min-width: 230px;
        background: var(--ch-vert-profond);
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 0 0 9px 9px;
        padding: 6px 0;
        box-shadow: 0 10px 24px rgba(0,0,0,.22);
    }
.menu > li.a-sous-menu:hover .sous-menu,
    .menu > li.a-sous-menu:focus-within .sous-menu { display: block; }
.sous-menu a { padding: 10px 16px; }
.recherche { border-top: 0; padding: 0; max-width: 300px; }
.note-admin { padding: 0; }
.pied-colonnes { grid-template-columns: 2fr 1fr 1fr; }
}
@media print {
.site-entete, .site-pied, .barre-admin, .section-facebook { display: none; }
}
@media (max-width: 480px) {
.marque { gap: 9px; }
    .marque img,
    .marque-logo { height: 36px; max-width: 108px; }
    .marque-nom { font-size: 1.3rem; }
}

/* ---------- Zone compte, à droite du bandeau ----------
   Propre au coin des prêches : connexion, abonnement, badge de
   jours restants, lien de dépôt pour les collaborateurs. */
.entete-droite {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.zone-compte {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: .9rem;
}
.zone-compte a { color: #fff; text-decoration: none; opacity: .92; }
.zone-compte a:hover { opacity: 1; text-decoration: underline; }
.zone-compte .badge {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border: 0;
}
.zone-compte .bouton,
.zone-compte .bouton-petit {
    background: var(--ch-or);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.zone-compte .bouton:hover { background: #c9892a; text-decoration: none; }

.pied-supplement {
    max-width: var(--ch-large);
    margin: 0 auto;
    padding: 14px 18px 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .86rem;
    opacity: .85;
}

@media (max-width: 700px) {
    .zone-compte { font-size: .82rem; gap: 8px; }
    .zone-compte .bouton,
    .zone-compte .bouton-petit { padding: 5px 11px; }

    /* Sur un écran étroit, les trois éléments du bandeau ne tiennent
       pas sur une ligne : le nom du site se retrouvait écrasé en
       colonne d'un mot de large. On fait donc passer les commandes
       de compte à la ligne, sous le nom. */
    .rang { flex-wrap: wrap; row-gap: 10px; }
    .marque { flex: 1 1 auto; min-width: 0; }
    .entete-droite { flex: 1 1 100%; justify-content: space-between; }
    .marque-note { display: none; }   /* le slogan reste sur le pied de page */
}