/* ============================================
   SYPRES — personnalisation de Cassiopeia
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Glegoo:wght@400;700&family=Pontano+Sans:wght@400;600&display=swap');

:root {
    --sypres: #c14141;
    --sypres-fonce: #9a3434;
    --sypres-grad-haut: #c00000;
    --sypres-grad-bas: #c16c6c;
    --sypres-fond: #efecec;

    --cassiopeia-color-primary: #c14141;
    --cassiopeia-color-link: #c14141;
    --cassiopeia-color-hover: #9a3434;
    --link-color: #c14141;
}

/* ---------- base ---------- */

body {
    background: var(--sypres-fond);
    font-family: 'Pontano Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #4f5054;
}

main,
.site-grid > * {
    background: transparent;
}

a            { color: var(--sypres); }
a:hover,
a:focus      { color: var(--sypres-fonce); }

/* ---------- en-tete et logo ---------- */

.container-header {
    background: var(--sypres-fond);
}

.container-header .brand-logo img {
    max-width: 500px;
    height: auto;
}

/* ---------- barre de menu ---------- */

.container-header .container-nav {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 20px;
    background: #fafafa;
    background-image: linear-gradient(to bottom, #ffffff, #f7f7f7);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
    border: 0;
}

.container-header .mod-menu {
    align-items: stretch;
    height: 100%;
    margin: 0;
}

.container-header .mod-menu > li {
    display: flex;
    position: relative;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    display: flex;
    align-items: center;
    padding: .7rem 1.4rem;
    font-size: .95rem;
    color: #4f5054 !important;
    text-decoration: none;
}

.container-header .mod-menu > li > a:hover {
    color: var(--sypres) !important;
}

/* entree active : degrade de l'ancien site */
.container-header .mod-menu > li.active > a,
.container-header .container-nav .active > a {
    background-color: var(--sypres);
    background-image: linear-gradient(to bottom,
                      var(--sypres-grad-haut), var(--sypres-grad-bas));
    background-origin: border-box;
    color: #fff !important;
}

/* ---------- sous-menus au survol ---------- */

.container-header .mod-menu__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 17rem;
    margin: 0;
    padding: .4rem 0;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    display: none;
}

.container-header .mod-menu > li:hover > .mod-menu__sub,
.container-header .mod-menu > li:focus-within > .mod-menu__sub {
    display: block;
}

.container-header .mod-menu__sub[aria-hidden="true"] {
    visibility: visible;
}

.container-header .mod-menu__sub a {
    display: block;
    padding: .55rem 1.3rem;
    font-size: 1rem;
    white-space: nowrap;
    color: #333 !important;
    text-decoration: none;
}

.container-header .mod-menu__sub a:hover {
    background: #f5f5f5;
    color: var(--sypres) !important;
}

/* pas de degrade sur l'entree active d'un sous-menu */
.container-header .mod-menu__sub .active > a,
.container-header .mod-menu__sub li.active > a {
    background: none !important;
    background-image: none !important;
    color: var(--sypres) !important;
    font-weight: 600;
}

.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.current > span,
.container-header .mod-menu > li.active > span {
    background-color: var(--sypres);
    background-image: linear-gradient(to bottom,
                      var(--sypres-grad-haut), var(--sypres-grad-bas));
    background-origin: border-box;
    color: #fff !important;
}

/* ---------- fil d'ariane ---------- */


.container-component > .mod-breadcrumbs,
.mod-breadcrumbs__wrapper,
ol.breadcrumb,
.breadcrumb {
    background: transparent !important;
    border: 0 !important;
    padding: .4rem 0 !important;
    font-size: .8rem;
}


.container-breadcrumbs,
.container-breadcrumbs .breadcrumb,
nav[aria-label="Breadcrumb"] .breadcrumb {
    background: transparent !important;
    border: 0;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: .5rem;
    font-size: .875rem;
}

.container-breadcrumbs .breadcrumb a {
    color: var(--sypres);
}


/* ---------- fil d'ariane : finitions ---------- */

.mod-breadcrumbs a,
.breadcrumb a {
    text-decoration: none !important;
}

.mod-breadcrumbs a:hover,
.breadcrumb a:hover {
    text-decoration: none !important;
    color: var(--sypres-fonce) !important;
}

.mod-breadcrumbs__divider,
.mod-breadcrumbs .icon-location {
    display: none !important;
}

/* ---------- menu : pave actif sans marge ---------- */

.container-header .mod-menu.mod-list li,
.container-header .mod-menu > li {
    padding: 0 !important;
    margin: 0 !important;
}

/* barre plus epaisse et plus eloignee du logo */
.container-header .container-nav {
    margin-top: 32px;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    padding: 1.05rem 1.4rem;
}

/* pas d'alternance dans les tableaux */
.container-component .table > :not(caption) > * > * {
    --table-accent-bg: transparent;
    --table-bg-type: transparent;
    box-shadow: none;
    background-color: #fff;
}

/* survol conserve */
.container-component .table-hover > tbody > tr:hover > * {
    --table-bg-state: #f5f5f5;
    box-shadow: inset 0 0 0 9999px #f5f5f5;
}

/* ---------- contenu detache du fond ---------- */

/* le conteneur exterieur ne porte ni fond ni ombre */
.site-grid .container-component,
.grid-child.container-component {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* seul le bloc article porte le fond blanc, sans ombre propre */
.com-content-article.item-page {
    background: #fff;
    box-shadow: none;
    padding: 0;
}

/* l'ombre est portee par main, qui englobe l'article */
.container-component > main {
    display: block;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(68,89,98,.12),
                0 3px 12px rgba(68,89,98,.18);
    padding: 1.5rem 2rem;
}

/* ombre sur la barre de menu */
.container-header .container-nav {
    box-shadow: 0 0 0 1px rgba(68,89,98,.12),
                0 3px 12px rgba(68,89,98,.18),
                inset 0 -1px 0 rgba(0,0,0,.06);
}

/* ---------- titre d'article ---------- */

.com-content-article .page-header h1,
.com-content-article__body ~ .page-header h1,
.item-page .page-header h1 {
    font-size: 36px;
    line-height: 42px;
    font-weight: 400;
    text-transform: none;
    display: inline-block;
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.com-content-article .page-header h1,
.item-page .page-header h1 {
    font-family: 'Glegoo', Georgia, serif;
}