/* Thème « Vert sauge » — couche de surcharge chargée APRÈS site.css.
   Esthétique naturelle et sobre (santé, bien-être) : vert sauge, angles
   quasi droits, titres en serif à empattements carrés, boutons anthracite.
   Ne redéfinit que ce qui change — tout le reste vient de site.css. */

/* Polices auto-hébergées (public/fonts) : aucune requête vers un tiers.
   Chemins relatifs à CE fichier, donc indépendants du <base href> des pages.
   Roboto Slab est une police variable : un seul fichier couvre 400 et 700,
   d'où la plage font-weight: 100 900. Sous-ensembles latin et latin-ext,
   suffisants pour le français ; font-display: swap évite le texte invisible
   pendant le téléchargement. Les deux familles sont sous licence OFL 1.1. */

@font-face {
    font-family: 'Varela Round';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/varela-round-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Varela Round';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/varela-round-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/roboto-slab-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/roboto-slab-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --ink: #454242;           /* texte courant, gris chaud */
    --muted: #7a7474;
    --accent: #8ea06c;        /* vert sauge */
    --accent-dark: #454f31;   /* olive foncé */
    --bg: #dedede;            /* fond de page franchement gris */
    --card: #fcfcfc;          /* surfaces de contenu */
    --line: #d6d6d6;
    --radius: 3px;            /* angles quasi droits */
}

/* Typographies (les replis système ne servent que si un woff2 manque) */
body {
    font-family: 'Varela Round', 'Trebuchet MS', 'Segoe UI', Avenir, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.brand,
.section-title {
    font-family: 'Roboto Slab', Rockwell, Georgia, 'Times New Roman', serif;
    letter-spacing: 0;
}

/* Titres en vert, comme sur le site de référence */
h1, h2, h3 { color: var(--accent); }
.hero h2 a, .card h3 a { color: var(--accent); }
.article-page h1 { color: var(--accent); }

/* Liens en olive foncé, plus lisibles que le vert clair sur fond blanc */
a { color: var(--accent-dark); }
a:hover { color: #707c56; }

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

.site-header {
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 1px 6px rgb(0 0 0 / .06);
}

.brand { font-weight: 700; letter-spacing: 0; }

.nav-item > a {
    border-radius: var(--radius);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .82rem;
}

.dropdown {
    border-radius: 0;
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 6px 18px rgb(0 0 0 / .1);
}

/* Survol du sous-menu : bandeau vert sur toute la largeur, comme l'original
   pharmaciedujura.ch (`background: rgba(142,160,108,1)` + texte blanc sur un
   lien qui touche les deux bords du panneau). site.css fait l'inverse : il
   inset le survol de .4rem via le padding de .dropdown et l'arrondit — on
   annule les deux, le padding passant entièrement du panneau au lien pour que
   le texte reste en place. Le panneau ne garde aucun padding, pas même
   vertical : il laisserait une bande blanche au-dessus du premier lien et
   sous le dernier, bien visible dès qu'ils sont survolés.

   Scopé au-dessus de 800px à dessein : en dessous, site.css transforme
   .dropdown en simple liste indentée dans le panneau hamburger (fond et
   bordure retirés), où un bandeau pleine largeur n'aurait pas de sens.
   Sans ce media query, `padding` écraserait aussi l'indentation mobile —
   sauge.css est chargé après site.css, donc il gagne à égalité de
   spécificité. */
@media (min-width: 801px) {
    .dropdown { padding: 0; }

    .dropdown a {
        border-radius: 0;
        padding: .5rem 1rem;
    }

    .dropdown a:hover,
    .dropdown a:focus-visible {
        background: var(--accent);
        color: #fff;
    }
}

/* ---------- Titres de section : filet plein plutôt que dégradé ---------- */

.section-title {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.35rem;
    font-weight: 700;
}
.section-title::after { height: 1px; background: var(--line); }

/* ---------- Cartes : sobres, sans effet de lévitation ---------- */

.card {
    border-radius: var(--radius);
    transition: box-shadow .15s;
}
.card:hover {
    transform: none;
    box-shadow: 0 4px 14px rgb(0 0 0 / .1);
}

.hero, .slideshow, .hero-banner, .article-page .lead-image, .article-body img {
    border-radius: var(--radius);
}

.kicker { letter-spacing: .05em; }

/* ---------- Boutons : anthracite, angles droits ---------- */

.btn-primary {
    background: #2c2f3c;
    border-radius: var(--radius);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .85rem;
}
.btn-primary:hover { background: var(--accent); }

.btn-secondary,
.pager a,
.subcats a,
.tags a, .tags span,
.share-btn {
    border-radius: var(--radius);
}

/* Boutons posés sur un visuel (diaporama, bandeau) : blancs sur fond vert */
.slideshow .slide-content .btn-primary,
.hero-banner .btn-primary {
    background: #fff;
    color: var(--accent-dark);
}
.slideshow .slide-content .btn-primary:hover,
.hero-banner .btn-primary:hover { background: #f2f2f2; }

/* ---------- Formulaires ---------- */

.form-field input,
.form-field textarea { border-radius: var(--radius); }

.alert { border-radius: var(--radius); }

/* ---------- Pied de page : clair, à l'inverse du thème par défaut ---------- */

.site-footer {
    background: #f7f7f7;
    color: #3b3b3b;
    border-top: 2px solid var(--accent);
}
.site-footer a { color: var(--accent-dark); }
.site-footer .brand { color: var(--accent); }

/* ======================================================================
   Éléments de site vitrine (référence : pharmaciedujura.ch)
   Tous facultatifs : ils n'existent que si le réglage correspondant est
   renseigné dans l'admin (voir Paramètres du site → En-tête, Contact,
   Pied de page) ou si la page a un bandeau / des cartes.
   ====================================================================== */

/* ---------- En-tête : barre téléphone, slogan, réseaux, onglets ---------- */

.top-bar {
    background: #f3f3f3;
    border-bottom: 1px solid var(--line);
}
.top-bar a { color: var(--accent-dark); font-size: .82rem; }
.top-bar strong { color: var(--accent-dark); }

.brand-block .tagline {
    font-family: 'Roboto Slab', Rockwell, Georgia, serif;
    color: var(--muted);
    font-size: .95rem;
}

.social-link {
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--line);
    color: var(--muted);
    background: #fff;
}
.social-link:hover { background: var(--accent); border-color: var(--accent); }

/* Le menu passe sous le logo, en rangée d'onglets pleine largeur */
@media (min-width: 801px) {
    .site-header .inner { padding-bottom: 0; row-gap: .25rem; }
    .main-nav {
        width: 100%;
        gap: 0;
        border-top: 1px solid var(--line);
    }
    .nav-item > a {
        padding: .65rem 1.1rem;
        border-radius: 0;
    }
    .nav-item > a:hover,
    .nav-item:focus-within > a,
    .nav-item > a[aria-current="page"] {
        background: var(--accent);
        color: #fff;
    }
    .dropdown { top: 100%; }
}

/* ---------- Diaporama : panneau de texte clair, à gauche ---------- */

.slideshow { height: 440px; }
.slideshow .slide { --slide-overlay: transparent; }

.slideshow .slide-content {
    max-width: 380px;
    background: rgb(255 255 255 / .82);
    color: var(--ink);
    padding: 1.5rem 1.75rem;
    text-align: left;
}
.slideshow .slide.align-center .slide-content { margin: 0 auto; }
.slideshow .slide-content h2 {
    color: var(--accent);
    font-size: 1.6rem;
    text-shadow: none;
    margin-bottom: .6rem;
}
.slideshow .slide-content p {
    text-shadow: none;
    opacity: 1;
    font-size: .92rem;
    margin: 0 0 .75rem;
}
@media (max-width: 800px) {
    .slideshow { height: 380px; }
    .slideshow .slide-content { max-width: none; padding: 1rem 1.25rem; }
}

/* ---------- Accueil : texte centré, cartes à icône sur bande verte ---------- */

.home-page .article-body h2 { font-size: 1.6rem; margin-bottom: .25rem; }
.home-page .article-body h2 + p { color: var(--muted); font-family: 'Roboto Slab', Rockwell, Georgia, serif; }

.home-page .cards-icon {
    background: linear-gradient(rgb(142 160 108 / .88), rgb(142 160 108 / .88)), var(--card);
    padding: 2rem 1.5rem;
    border-radius: var(--radius);
    color: #fff;
    gap: 1rem;
}
.home-page .cards-icon .card {
    background: transparent;
    border: none;
    box-shadow: none;
}
.home-page .cards-icon .icon-circle { border-color: #fff; color: #fff; margin-top: .5rem; }
.home-page .cards-icon h3,
.home-page .cards-icon h3 a { color: #fff; }
.home-page .cards-icon .excerpt,
.home-page .cards-icon .card-subtitle { color: rgb(255 255 255 / .9); }
.home-page .cards-icon .card-link a { color: #fff; }

/* ---------- Pages : bandeau vert sur la photo, cartes ---------- */

.page-banner { background: var(--accent); }
.page-banner.has-image { --banner-overlay: rgb(142 160 108 / .82); }
.page-banner .lead {
    font-family: 'Roboto Slab', Rockwell, Georgia, serif;
    font-size: 1.2rem;
}

.card-icon .icon-circle { border-color: var(--accent); color: var(--accent); }
.card .card-subtitle { font-family: 'Roboto Slab', Rockwell, Georgia, serif; }

.card-person h3 {
    background: var(--accent);
    color: #fff;
    margin: 0 -1.25rem .25rem;
    padding: .5rem 1.25rem;
    font-size: 1rem;
}
.card-person .card-subtitle {
    background: #8a8a8a;
    color: #fff;
    margin: 0 -1.25rem .75rem;
    padding: .35rem 1.25rem;
}
.cards-person .card .body { padding-top: 0; }

/* ---------- Contact : bande verte, carte ---------- */

.contact-header {
    background: var(--accent);
    border: none;
    color: #fff;
}
.contact-header a { color: #fff; text-decoration: underline; }
.contact-header h3 { color: #fff; }
.contact-header .lead { font-family: 'Roboto Slab', Rockwell, Georgia, serif; }

/* ---------- Pied de page : bloc d'informations ---------- */

.footer-info { border-bottom-color: var(--line); }
.footer-info h3 {
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 400;
}
.footer-info .icon { color: var(--accent); }

.to-top { border-radius: var(--radius); background: var(--accent-dark); }
.to-top:hover { background: var(--accent); }

/* ======================================================================
   Feuille centrale (référence : la « sheet » de pharmaciedujura.ch)
   En-tête, contenu et pied de page forment un seul panneau clair, centré
   sur le fond gris, bordé d'une ombre fine. Le menu, le diaporama et le
   contenu partagent les mêmes bords : la gouttière du panneau est la seule
   marge, l'en-tête n'en a pas d'autre.
   ====================================================================== */

:root {
    --sheet: 1160px;     /* largeur du panneau */
    --gutter: 30px;      /* marge intérieure, identique à l'original */
}

body { padding-bottom: 40px; }

.site-header,
main,
.site-footer {
    max-width: var(--sheet);
    margin-left: auto;
    margin-right: auto;
    box-shadow: 2px 0 1px rgb(0 0 0 / .045), -2px 0 1px rgb(0 0 0 / .045);
}

.container {
    max-width: var(--sheet);
    padding: 0 var(--gutter);
}

/* L'en-tête perd sa marge propre : le logo, les onglets et le diaporama
   s'alignent sur le même bord. */
.site-header { background: #fafafa; }
.site-header .inner { padding: .9rem var(--gutter) 0; }
.site-header .brand { margin-left: 0; }

/* Zone de contenu légèrement grisée : les cartes et le diaporama s'en détachent */
main {
    background: #ececec;
    padding: var(--gutter) 0;
}
.slideshow { margin-bottom: var(--gutter); }

.site-footer {
    margin-top: 0;
    box-shadow: 2px 0 1px rgb(0 0 0 / .045), -2px 0 1px rgb(0 0 0 / .045), 0 -2px 5px rgb(0 0 0 / .05);
}

@media (max-width: 800px) {
    :root { --gutter: 1.25rem; }
    body { padding-bottom: 0; }
    .site-header .inner { padding: .9rem var(--gutter) .5rem; }
}

/* ---------- Surfaces en pleine largeur du panneau ----------
   Diaporama, bandeaux, bande verte des services, en-tête et carte de la
   page Contact : d'un bord à l'autre du panneau, comme sur l'original. Ils
   annulent la gouttière du conteneur et reprennent celle-ci en marge
   intérieure ; le texte reste donc aligné sur le reste du contenu. */

.slideshow,
.hero-banner,
.page-banner,
.contact-header,
.contact-map,
.home-page .cards-icon {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    border-radius: 0;
}

.page-banner { padding: 2.5rem var(--gutter); }
.contact-header { padding: 1.5rem var(--gutter); }
.home-page .cards-icon { padding: 2rem var(--gutter); }

/* Collés sous le menu quand ils ouvrent la page */
main > .container > .slideshow:first-child,
main > .container > .hero-banner:first-child,
.article-page.has-banner > .page-banner:first-child {
    margin-top: calc(-1 * var(--gutter));
}
.slideshow { box-shadow: 0 1px 0 rgb(0 0 0 / .1); }