/* Charte Terre cuite. Chargée après default.css et après les styles internes des pages. */

:root {
--couleur-fond: #F7F1E6;
--couleur-texte: #3B2A22;
--couleur-titre: #8E3B2E;
--couleur-lien: #8A5A12;
--couleur-coeur: #C8102E;
--couleur-menu: #4A2E27;
--couleur-menu-texte: #F7F1E6;
--texte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--titres: Georgia, "Palatino Linotype", serif;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
background: var(--couleur-fond);
}

body {
margin: 0;
background: var(--couleur-fond);
color: var(--couleur-texte);
font-family: var(--texte);
font-size: 1.0625rem;
line-height: 1.55;
}

h1,
h2,
h3 {
font-family: var(--titres);
font-weight: normal;
color: var(--couleur-titre);
letter-spacing: 0;
}

a {
color: var(--couleur-lien);
}

a:hover {
text-decoration: underline;
}

p.MsoNormal,
.Style1,
.Style3,
.Style5,
.Style6 {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}

p.MsoNormal {
margin: 0 0 14px;
}

#upbg {
display: none;
}

#outer {
width: 100%;
max-width: 1160px;
margin: 0 auto;
background: var(--couleur-fond);
background-image: none;
}

#inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: 28px;
padding: 20px 24px 32px;
position: relative;
}

#header {
position: relative;
left: auto;
top: auto;
flex: 1 1 220px;
width: auto;
height: auto;
margin: 0;
padding: 18px 20px 14px;
background: var(--couleur-menu);
background-image: none;
color: var(--couleur-menu-texte);
}

#header h1,
#header span {
position: relative;
top: auto;
left: auto;
height: auto;
margin: 0;
color: var(--couleur-menu-texte);
font-family: var(--titres);
font-size: 1.75rem;
line-height: 1.15;
letter-spacing: 0;
}

#header span {
font-size: 1.15rem;
}

#splash {
position: relative;
right: auto;
flex: 0 1 458px;
width: 100%;
max-width: 458px;
height: 92px;
background-size: cover;
background-position: center;
}

#menu {
position: relative;
flex: 1 0 100%;
height: auto;
margin: 16px 0 22px;
padding: 0;
background: var(--couleur-menu);
background-image: none;
}

.menu-outils {
display: none;
}

#voile {
display: none;
}

a[aria-current="page"] {
font-weight: 700;
}

#menu a[aria-current="page"] {
background: var(--couleur-fond);
color: var(--couleur-menu);
text-decoration: none;
}

#secondarycontent a[aria-current="page"] {
color: var(--couleur-titre);
background: #efe6d6;
text-decoration: none;
}

html.nav-figee,
html.nav-figee body {
overflow: hidden;
}

html.nav-figee body {
position: fixed;
width: 100%;
}

#menu ul {
list-style: none;
margin: 0;
padding: 4px 8px;
}

#menu ul li {
display: inline-block;
line-height: normal;
padding: 0;
}

#menu ul li a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 8px 12px;
background: transparent;
background-image: none;
color: var(--couleur-menu-texte);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
}

#menu ul li a:hover,
#menu ul li a:focus {
background: transparent;
background-image: none;
color: var(--couleur-menu-texte);
text-decoration: underline;
}

#primarycontent {
position: relative;
order: 1;
flex: 1 1 0;
width: auto;
min-width: 0;
max-width: 100%;
float: none;
}

#primarycontent h3,
#secondarycontent h3 {
position: relative;
top: 0;
background: none;
background-image: none;
color: var(--couleur-titre);
font-family: var(--titres);
letter-spacing: 0;
border-bottom: 1px solid #e0d3c3;
line-height: 1.3;
}

#primarycontent h3 {
font-size: 1.5rem;
padding: 0 0 8px;
margin: 0 0 16px;
}

#secondarycontent {
position: relative;
order: 2;
flex: 0 0 250px;
width: 250px;
max-width: 100%;
float: none;
}

#secondarycontent h3 {
font-size: 1.2rem;
padding: 0 0 8px 0;
margin: 0 0 12px;
}

#secondarycontent .content {
padding: 0;
}

#secondarycontent p {
text-align: left;
}

#secondarycontent .legende-coeurs {
margin: 0 0 12px;
color: var(--couleur-texte);
font-size: 0.95rem;
line-height: 1.4;
text-align: left;
}

#primarycontent table {
width: 100%;
max-width: 100%;
table-layout: fixed;
}

#primarycontent img,
.carte img {
max-width: 100%;
height: auto;
}

.bloc-mixte,
.bloc-duo,
.bloc-grille,
.bloc-icones {
display: flex;
align-items: flex-start;
gap: 18px;
margin: 1em 0;
max-width: 100%;
}

.bloc-mixte > .bloc-texte,
.bloc-grille > .bloc-colonne:has(.bloc-texte) {
flex: 1 1 300px !important;
min-width: min(300px, 100%);
max-width: none !important;
}

.bloc-mixte > .bloc-image {
flex: 0 1 auto !important;
min-width: 0;
max-width: min(var(--part, 55%), calc(100% - 318px)) !important;
}

.bloc-duo > .bloc-image,
.bloc-grille > .bloc-colonne {
min-width: 0;
}

.bloc-grille > .bloc-colonne:not(:has(.bloc-texte)) {
flex: 0 1 auto !important;
max-width: min(var(--part, 50%), calc(100% - 318px)) !important;
}

.bloc-image,
.bloc-seul,
.bloc-figure {
text-align: center;
max-width: 100%;
}

.bloc-seul,
.bloc-figure {
margin: 1em 0;
}

.bloc-figure {
display: block;
}

.bloc-figure figcaption {
margin-top: 0.4em;
}

.bloc-grille > .bloc-colonne {
flex: 1 1 300px;
}

.bloc-colonne > .bloc-image + .bloc-image,
.bloc-colonne > .bloc-texte + .bloc-image {
margin-top: 12px;
}

.bloc-duo > .bloc-image {
flex: 1 1 0;
}

.bloc-icones {
flex-wrap: wrap;
justify-content: center;
}

.bloc-icones > .bloc-image {
flex: 1 1 180px;
max-width: 220px;
}

#primarycontent {
overflow-wrap: break-word;
}

.carte {
position: relative;
display: inline-block;
max-width: 100%;
line-height: 0;
}

.carte svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}

.carte rect {
fill: rgba(142, 59, 46, 0);
stroke: none;
}

.carte a:hover rect,
.carte a:focus rect {
fill: rgba(142, 59, 46, 0.28);
stroke: #8E3B2E;
stroke-width: 3;
}

#footer {
order: 3;
flex: 1 0 100%;
height: auto;
margin-top: 24px;
padding: 16px 12px;
line-height: 1.4;
background: var(--couleur-menu);
background-image: none;
color: var(--couleur-menu-texte);
}

#footer a {
color: var(--couleur-menu-texte);
}

:focus-visible {
outline: 2px solid var(--couleur-titre);
outline-offset: 2px;
}

#menu :focus-visible {
outline-color: var(--couleur-menu-texte);
}

@media (max-width: 919px) {
#inner {
display: flex;
flex-direction: column;
padding: 12px 14px 24px;
}

#header,
#splash,
#menu,
#primarycontent,
#footer {
flex: none;
width: 100%;
max-width: 100%;
}

#splash {
display: none;
}

.menu-outils {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 10px;
padding: 8px;
}

.menu-toggle,
.monuments-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 14px;
border: 0;
cursor: pointer;
font-family: var(--texte);
font-size: 1rem;
font-weight: 600;
}

.monuments-toggle {
flex: 0 1 auto;
background: var(--couleur-titre);
color: var(--couleur-menu-texte);
}

.menu-toggle {
flex: 0 0 auto;
min-width: 50px;
background: var(--couleur-menu-texte);
color: var(--couleur-menu);
}

.monuments-toggle:focus-visible {
outline-color: var(--couleur-menu-texte);
}

.menu-toggle:focus-visible {
outline-color: var(--couleur-titre);
}

#menu ul {
display: none;
padding: 0 8px 8px;
}

#menu.is-open ul {
display: block;
}

#menu ul li {
display: block;
}

#menu ul li a {
display: flex;
width: 100%;
}

#secondarycontent {
display: none;
position: absolute;
z-index: 30;
left: 12px;
right: auto;
width: min(420px, calc(100% - 64px));
max-height: 70vh;
overflow: auto;
padding: 14px 16px 18px;
background: var(--couleur-fond);
box-shadow: 0 10px 28px rgba(59, 42, 34, 0.28);
}

#secondarycontent.is-open {
display: block;
}

#voile.is-open {
display: block;
position: fixed;
inset: 0;
z-index: 25;
background: rgba(59, 42, 34, 0.45);
}

#menu {
z-index: 40;
}

#secondarycontent a {
display: inline-flex;
align-items: center;
min-height: 44px;
}

#footer {
order: 3;
}

.bloc-mixte,
.bloc-duo,
.bloc-grille {
flex-direction: column;
align-items: stretch;
}

.bloc-icones {
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: center;
gap: 8px;
}

.bloc-mixte > .bloc-texte,
.bloc-grille > .bloc-colonne:has(.bloc-texte) {
order: 1;
min-width: 0;
}

.bloc-mixte > .bloc-image {
order: 2;
flex: 0 1 auto !important;
max-width: 100% !important;
width: 100%;
}

.bloc-grille > .bloc-colonne {
flex: 1 1 auto !important;
max-width: 100% !important;
width: 100%;
}

.bloc-grille > .bloc-colonne:has(.bloc-texte) {
order: 1;
}

.bloc-grille > .bloc-colonne:not(:has(.bloc-texte)) {
order: 2;
}

.bloc-duo > .bloc-image,
.bloc-seul,
.bloc-figure {
width: 100%;
}

.bloc-icones {
align-items: center;
}

.bloc-icones > .bloc-image {
flex: 1 1 30%;
width: 30%;
max-width: 32%;
}

.bloc-seul img,
.bloc-figure img,
.bloc-image img,
.bloc-duo img,
.bloc-icones img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}

.bloc-image div[align] {
text-align: center;
}
}