:root{
color-scheme: light dark;
--argent: #f6f2ea;
--argent-2: #efe9dd;
--argent-3: #e4dccd;
--sable: #16130f;
--sable-2: #2b251e;
--gueules: #9c3a24;
--gueules-clair: #c15b3e;
--azur: #1d3661;
--azur-clair: #3b5c96;
--or: #b08a41;
--or-clair: #d8b969;
--fond: var(--argent);
--fond-2: #fffdf9;
--fond-3: var(--argent-2);
--fond-inverse: #100e0b;
--texte: #1a1611;
--texte-2: #574c3f;
--texte-3: #756758;
--texte-inverse: #f0eadf;
--filet: #d9cfbc;
--filet-fort: #bcae96;
--accent: var(--gueules);
--accent-2: var(--azur);
--lien: var(--azur);
--lien-visite: #5a4a7a;
--selection: #f2dfd3;
--f-display: 'Cormorant Garamond', 'Iowan Old Style', Garamond, 'Times New Roman', serif;
--f-serif: 'Spectral', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
--f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--f-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--pas: clamp(1.0625rem, 0.99rem + 0.26vw, 1.1875rem);
--t-xs: 0.72rem;
--t-sm: 0.82rem;
--t-md: 0.94rem;
--t-base: var(--pas);
--t-lg: clamp(1.2rem, 1.1rem + 0.42vw, 1.45rem);
--t-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
--t-2xl: clamp(2rem, 1.6rem + 1.8vw, 3.1rem);
--t-3xl: clamp(2.6rem, 1.9rem + 3.2vw, 4.6rem);
--t-4xl: clamp(3.1rem, 2rem + 5.2vw, 7rem);
--e-1: 0.25rem;
--e-2: 0.5rem;
--e-3: 0.75rem;
--e-4: 1rem;
--e-5: 1.5rem;
--e-6: 2rem;
--e-7: 3rem;
--e-8: 4.5rem;
--e-9: 7rem;
--e-10: 10rem;
--gouttiere: clamp(1.25rem, 4vw, 4rem);
--largeur: 78rem;
--largeur-large: 92rem;
--mesure: 36rem;
--r-sm: 2px;
--r-md: 4px;
--r-lg: 10px;
--ombre-1: 0 1px 2px rgb(22 19 15 / 0.05), 0 4px 14px -6px rgb(22 19 15 / 0.1);
--ombre-2: 0 2px 6px rgb(22 19 15 / 0.07), 0 18px 50px -18px rgb(22 19 15 / 0.24);
--transition: 220ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme='light']){
--fond: #100e0c;
--fond-2: #191612;
--fond-3: #221d18;
--fond-inverse: #f2ece1;
--texte: #ece4d6;
--texte-2: #b3a692;
--texte-3: #8a7c68;
--texte-inverse: #17130f;
--filet: #322b23;
--filet-fort: #4a4136;
--accent: #d2765a;
--accent-2: #8fabdd;
--lien: #9fb9e8;
--lien-visite: #b9a3d6;
--selection: #3b2a22;
--or: var(--or-clair);
--ombre-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 14px -6px rgb(0 0 0 / 0.55);
--ombre-2: 0 2px 6px rgb(0 0 0 / 0.45), 0 18px 50px -18px rgb(0 0 0 / 0.7);
}
}
:root[data-theme='dark']{
--fond: #100e0c;
--fond-2: #191612;
--fond-3: #221d18;
--fond-inverse: #f2ece1;
--texte: #ece4d6;
--texte-2: #b3a692;
--texte-3: #8a7c68;
--texte-inverse: #17130f;
--filet: #322b23;
--filet-fort: #4a4136;
--accent: #d2765a;
--accent-2: #8fabdd;
--lien: #9fb9e8;
--lien-visite: #b9a3d6;
--selection: #3b2a22;
--or: #d8b969;
--ombre-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 14px -6px rgb(0 0 0 / 0.55);
--ombre-2: 0 2px 6px rgb(0 0 0 / 0.45), 0 18px 50px -18px rgb(0 0 0 / 0.7);
}
*,
*::before,
*::after{
box-sizing: border-box;
}
html{
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce){
html{
scroll-behavior: auto;
}
*,
*::before,
*::after{
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body{
margin: 0;
background: var(--fond);
color: var(--texte);
font-family: var(--f-serif);
font-size: var(--t-base);
font-weight: 400;
line-height: 1.68;
font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
body::before{
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.035;
background-image: radial-gradient(circle at 1px 1px, var(--texte) 0.6px, transparent 0);
background-size: 4px 4px;
}
::selection{
background: var(--selection);
color: var(--texte);
}
img,
svg,
video{
max-width: 100%;
height: auto;
display: block;
}
h1,
h2,
h3,
h4,
h5{
font-family: var(--f-display);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.012em;
margin: 0;
text-wrap: balance;
color: var(--texte);
}
h1{
font-size: var(--t-3xl);
font-weight: 500;
}
h2{
font-size: var(--t-2xl);
}
h3{
font-size: var(--t-xl);
}
h4{
font-size: var(--t-lg);
font-weight: 600;
}
p{
margin: 0 0 var(--e-4);
text-wrap: pretty;
}
a{
color: var(--lien);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
transition: color var(--transition), text-decoration-color var(--transition);
}
a:hover{
color: var(--accent);
text-decoration-color: currentColor;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: var(--r-sm);
}
hr.rule{
border: 0;
height: 1px;
background: var(--filet);
margin: var(--e-7) 0;
}
strong{
font-weight: 600;
}
em{
font-style: italic;
}
sup{
font-size: 0.66em;
line-height: 0;
vertical-align: 0.5em;
}
abbr[title]{
text-decoration: none;
border-bottom: 1px dotted var(--filet-fort);
cursor: help;
}
blockquote{
margin: var(--e-6) 0;
padding-left: var(--e-5);
border-left: 2px solid var(--accent);
font-size: var(--t-lg);
font-style: italic;
color: var(--texte-2);
}
blockquote p{
margin-bottom: var(--e-2);
}
blockquote cite{
display: block;
font: 500 var(--t-sm) / 1.5 var(--f-sans);
font-style: normal;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--texte-3);
}
blockquote cite::before{
content: '— ';
}
ul,
ol{
margin: 0 0 var(--e-4);
padding-left: 1.3em;
}
li{
margin-bottom: var(--e-2);
}
li::marker{
color: var(--texte-3);
}
code,
kbd{
font-family: var(--f-mono);
font-size: 0.86em;
}
table{
width: 100%;
border-collapse: collapse;
font-family: var(--f-sans);
font-size: var(--t-md);
}
th{
text-align: left;
font-weight: 600;
font-size: var(--t-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--texte-3);
padding: 0 var(--e-4) var(--e-2) 0;
border-bottom: 1px solid var(--filet-fort);
}
td{
padding: var(--e-3) var(--e-4) var(--e-3) 0;
border-bottom: 1px solid var(--filet);
vertical-align: top;
}
.sc{
font-variant-caps: all-small-caps;
letter-spacing: 0.055em;
font-feature-settings: 'c2sc' 1, 'smcp' 1;
}
.lnum{
font-feature-settings: 'lnum' 1, 'tnum' 1;
}
.surtitre{
font: 500 var(--t-xs) / 1.4 var(--f-sans);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--texte-3);
margin: 0 0 var(--e-3);
display: flex;
align-items: center;
gap: var(--e-3);
}
.surtitre::after{
content: '';
flex: 1;
height: 1px;
background: var(--filet);
}
.surtitre--nu::after{
display: none;
}
.visually-hidden{
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.saut{
display: block;
position: absolute;
left: -9999px;
top: 0;
background: var(--fond-2);
color: var(--texte);
padding: var(--e-3) var(--e-4);
z-index: 200;
}
.saut:focus{
left: var(--e-4);
top: var(--e-4);
}
.enveloppe{
width: 100%;
max-width: var(--largeur);
margin-inline: auto;
padding-inline: var(--gouttiere);
position: relative;
z-index: 1;
}
.enveloppe--large{
max-width: var(--largeur-large);
}
.enveloppe--etroite{
max-width: 54rem;
}
.section{
padding-block: var(--e-8);
}
.section--ample{
padding-block: var(--e-9);
}
.section--fond{
background: var(--fond-2);
border-block: 1px solid var(--filet);
}
.entete{
position: sticky;
top: 0;
z-index: 60;
background: color-mix(in oklab, var(--fond) 88%, transparent);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color var(--transition), background var(--transition);
}
.entete[data-defile='oui']{
border-bottom-color: var(--filet);
}
.entete__in{
display: flex;
align-items: center;
gap: var(--e-5);
min-height: 4.25rem;
}
.marque{
display: flex;
align-items: center;
gap: 0.7rem;
text-decoration: none;
color: var(--texte);
flex: 0 0 auto;
}
.marque:hover{
color: var(--texte);
}
.marque__ecu{
width: 1.55rem;
height: auto;
flex: 0 0 auto;
transition: transform var(--transition);
}
.marque:hover .marque__ecu{
transform: translateY(-1px) rotate(-2deg);
}
.marque__nom{
font-family: var(--f-display);
font-size: 1.35rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
}
.marque__nom em{
font-style: normal;
color: var(--accent);
}
.nav{
display: flex;
align-items: center;
gap: clamp(0.5rem, 1.4vw, 1.35rem);
margin-left: auto;
font-family: var(--f-sans);
font-size: var(--t-md);
}
.nav a{
color: var(--texte-2);
text-decoration: none;
padding: 0.45rem 0;
position: relative;
white-space: nowrap;
}
.nav a::after{
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0.1rem;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition);
}
.nav a:hover,
.nav a[aria-current]{
color: var(--texte);
}
.nav a:hover::after,
.nav a[aria-current]::after{
transform: scaleX(1);
}
.nav__outils{
display: flex;
align-items: center;
gap: var(--e-2);
margin-left: var(--e-2);
padding-left: var(--e-4);
border-left: 1px solid var(--filet);
}
.bouton-ico{
appearance: none;
border: 1px solid transparent;
background: none;
color: var(--texte-2);
width: 2.15rem;
height: 2.15rem;
display: grid;
place-items: center;
border-radius: 50%;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.bouton-ico:hover{
background: var(--fond-3);
color: var(--texte);
}
.bouton-ico svg{
width: 1.05rem;
height: 1.05rem;
}
.menu-bascule{
display: none;
}
@media (max-width: 62rem){
.menu-bascule{
display: grid;
margin-left: auto;
}
.nav{
position: fixed;
inset: 4.25rem 0 auto;
margin: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--fond);
border-bottom: 1px solid var(--filet);
padding: var(--e-3) var(--gouttiere) var(--e-5);
max-height: calc(100dvh - 4.25rem);
overflow-y: auto;
transform: translateY(-120%);
transition: transform var(--transition);
box-shadow: var(--ombre-2);
}
.nav[data-ouvert='oui']{
transform: translateY(0);
}
.nav a{
font-size: var(--t-lg);
font-family: var(--f-display);
padding: 0.7rem 0;
border-bottom: 1px solid var(--filet);
}
.nav a::after{
display: none;
}
.nav__outils{
border-left: 0;
padding-left: 0;
margin: var(--e-4) 0 0;
}
}
.fil{
font-family: var(--f-sans);
font-size: var(--t-sm);
color: var(--texte-3);
padding-block: var(--e-5) 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
}
.fil a{
color: var(--texte-3);
text-decoration: none;
}
.fil a:hover{
color: var(--accent);
}
.fil span[aria-hidden]{
opacity: 0.5;
}
.lecture{
display: grid;
grid-template-columns:
minmax(0, 1fr)
min(var(--mesure), 100%)
minmax(0, 1fr);
column-gap: var(--e-6);
}
.lecture > *{
grid-column: 2;
}
.lecture > .pleine-largeur{
grid-column: 1 / -1;
}
.lecture > .marge{
grid-column: 3;
justify-self: start;
max-width: 17rem;
margin-block: 0.4rem var(--e-4);
}
@media (max-width: 66rem){
.lecture{
grid-template-columns: minmax(0, 1fr);
}
.lecture > *,
.lecture > .marge,
.lecture > .pleine-largeur{
grid-column: 1;
}
.lecture > .marge{
max-width: none;
}
}
.pied{
margin-top: var(--e-9);
background: var(--fond-inverse);
color: color-mix(in oklab, var(--texte-inverse) 78%, transparent);
padding-block: var(--e-8) var(--e-6);
font-family: var(--f-sans);
font-size: var(--t-md);
}
.pied a{
color: color-mix(in oklab, var(--texte-inverse) 88%, transparent);
text-decoration: none;
}
.pied a:hover{
color: var(--or-clair);
}
.pied__grille{
display: grid;
grid-template-columns: 1.4fr repeat(3, 1fr);
gap: var(--e-6) var(--e-5);
}
@media (max-width: 58rem){
.pied__grille{
grid-template-columns: repeat(2, 1fr);
}
.pied__col--marque{
grid-column: 1 / -1;
}
}
.pied h2{
font-family: var(--f-sans);
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in oklab, var(--texte-inverse) 55%, transparent);
margin-bottom: var(--e-3);
}
.pied ul{
list-style: none;
padding: 0;
margin: 0;
}
.pied li{
margin-bottom: 0.4rem;
}
.pied__devise{
font-family: var(--f-display);
font-size: var(--t-lg);
font-style: italic;
color: var(--or-clair);
margin: var(--e-3) 0 var(--e-4);
}
.pied__bas{
margin-top: var(--e-7);
padding-top: var(--e-4);
border-top: 1px solid color-mix(in oklab, var(--texte-inverse) 14%, transparent);
display: flex;
flex-wrap: wrap;
gap: var(--e-3) var(--e-5);
justify-content: space-between;
font-size: var(--t-sm);
color: color-mix(in oklab, var(--texte-inverse) 55%, transparent);
}
.ouverture{
padding-block: var(--e-7) var(--e-6);
border-bottom: 1px solid var(--filet);
margin-bottom: var(--e-7);
}
.ouverture__titre{
margin-bottom: var(--e-4);
}
.ouverture__soustitre{
font-family: var(--f-display);
font-size: var(--t-xl);
font-style: italic;
font-weight: 400;
color: var(--accent);
margin: 0 0 var(--e-4);
max-width: 40rem;
}
.ouverture__chapeau{
font-size: var(--t-lg);
line-height: 1.5;
color: var(--texte-2);
max-width: 44rem;
font-weight: 300;
}
.ouverture__meta{
display: flex;
flex-wrap: wrap;
gap: var(--e-2) var(--e-5);
margin-top: var(--e-5);
font: 400 var(--t-sm) / 1.4 var(--f-sans);
color: var(--texte-3);
}
.ouverture__meta b{
color: var(--texte-2);
font-weight: 500;
}
.prose > h2{
margin: var(--e-8) 0 var(--e-4);
position: relative;
}
.prose > h2::before{
content: '';
position: absolute;
top: -1.4rem;
left: 0;
width: 2.2rem;
height: 2px;
background: var(--accent);
}
.prose > h3{
margin: var(--e-6) 0 var(--e-3);
}
.prose > h4{
margin: var(--e-5) 0 var(--e-2);
font-family: var(--f-sans);
font-size: var(--t-md);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--texte-3);
}
.prose .lede p:first-child::first-letter{
float: left;
font-family: var(--f-display);
font-size: 4.1em;
line-height: 0.82;
font-weight: 500;
padding: 0.07em 0.09em 0 0;
color: var(--accent);
}
.prose .lede p{
font-size: var(--t-lg);
line-height: 1.55;
font-weight: 300;
}
.anchor{
position: absolute;
left: -1.1em;
width: 1em;
opacity: 0;
text-decoration: none;
color: var(--texte-3);
transition: opacity var(--transition);
}
.anchor::before{
content: '§';
font-size: 0.6em;
}
h2:hover > .anchor,
h3:hover > .anchor{
opacity: 1;
}
h2,
h3{
position: relative;
}
.marge{
font-family: var(--f-sans);
font-size: var(--t-sm);
line-height: 1.55;
color: var(--texte-2);
}
.marge__in{
border-top: 2px solid var(--filet-fort);
padding-top: var(--e-3);
}
.marge p{
margin-bottom: var(--e-2);
}
.marge :is(h2, h3, h4){
font-family: var(--f-sans);
font-size: var(--t-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--texte-3);
margin: 0 0 var(--e-2);
}
.exergue{
margin: var(--e-7) 0;
padding: var(--e-5) 0;
border-block: 1px solid var(--filet);
font-family: var(--f-display);
font-size: var(--t-xl);
line-height: 1.28;
font-weight: 400;
color: var(--texte);
text-align: center;
}
.exergue p:last-child{
margin-bottom: 0;
}
.encadre{
margin: var(--e-6) 0;
padding: var(--e-5);
background: var(--fond-2);
border: 1px solid var(--filet);
border-left: 3px solid var(--accent-2);
border-radius: 0 var(--r-md) var(--r-md) 0;
font-size: var(--t-md);
}
.encadre__t{
font-family: var(--f-sans);
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-2);
margin: 0 0 var(--e-3);
}
.encadre > :last-child{
margin-bottom: 0;
}
.kpi{
list-style: none;
margin: var(--e-6) 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: var(--e-5) var(--e-4);
}
.kpi li{
margin: 0;
border-top: 2px solid var(--filet-fort);
padding-top: var(--e-3);
}
.kpi__v{
display: block;
font-family: var(--f-display);
font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
font-weight: 500;
line-height: 1;
color: var(--accent);
font-feature-settings: 'lnum' 1;
}
.kpi__l{
display: block;
margin-top: var(--e-2);
font: 400 var(--t-sm) / 1.4 var(--f-sans);
color: var(--texte-2);
}
.fig{
margin: var(--e-6) 0;
}
.fig img{
width: 100%;
border-radius: var(--r-sm);
background: var(--fond-3);
}
.fig figcaption,
.legende{
margin-top: var(--e-3);
font: 400 var(--t-sm) / 1.5 var(--f-sans);
color: var(--texte-3);
border-left: 2px solid var(--filet-fort);
padding-left: var(--e-3);
}
.ref{
text-decoration: none;
border-bottom: 1px solid color-mix(in oklab, var(--accent-2) 40%, transparent);
color: var(--texte);
white-space: nowrap;
}
.ref:hover{
border-bottom-color: var(--accent);
color: var(--accent);
}
.ref__ico{
color: var(--accent-2);
font-size: 0.8em;
margin-right: 0.22em;
}
.ref--acte{
font-family: var(--f-sans);
font-size: 0.88em;
}
.grille{
display: grid;
gap: var(--e-5);
grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}
.grille--2{
grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
}
.grille--4{
grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
}
.carte{
position: relative;
display: flex;
flex-direction: column;
gap: var(--e-2);
padding: var(--e-5);
background: var(--fond-2);
border: 1px solid var(--filet);
border-radius: var(--r-md);
text-decoration: none;
color: inherit;
transition: transform var(--transition), box-shadow var(--transition),
border-color var(--transition), background var(--transition);
overflow: hidden;
}
a.carte:hover{
transform: translateY(-2px);
border-color: var(--filet-fort);
box-shadow: var(--ombre-1);
color: inherit;
}
.carte__sur{
font: 500 var(--t-xs) / 1.3 var(--f-sans);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--texte-3);
}
.carte__t{
font-family: var(--f-display);
font-size: var(--t-lg);
font-weight: 600;
line-height: 1.15;
margin: 0;
}
a.carte:hover .carte__t{
color: var(--accent);
}
.carte__d{
font-size: var(--t-md);
color: var(--texte-2);
margin: 0;
line-height: 1.55;
}
.carte__pied{
margin-top: auto;
padding-top: var(--e-3);
font: 400 var(--t-sm) / 1.4 var(--f-sans);
color: var(--texte-3);
display: flex;
gap: var(--e-3);
flex-wrap: wrap;
}
.carte--illustree{
padding: 0;
}
.carte--illustree .carte__img{
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--fond-3);
}
.carte--illustree .carte__img img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
a.carte--illustree:hover .carte__img img{
transform: scale(1.04);
}
.carte--illustree .carte__corps{
padding: var(--e-4) var(--e-5) var(--e-5);
display: flex;
flex-direction: column;
gap: var(--e-2);
flex: 1;
}
.puces{
display: flex;
flex-wrap: wrap;
gap: var(--e-2);
list-style: none;
padding: 0;
margin: 0;
}
.puce{
display: inline-flex;
align-items: center;
gap: 0.35em;
font: 500 var(--t-xs) / 1 var(--f-sans);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.42em 0.7em;
border: 1px solid var(--filet-fort);
border-radius: 100px;
color: var(--texte-2);
text-decoration: none;
background: var(--fond);
transition: all var(--transition);
margin: 0;
}
a.puce:hover,
.puce[aria-pressed='true']{
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.puce--or{
border-color: color-mix(in oklab, var(--or) 55%, transparent);
color: var(--or);
}
.bouton{
display: inline-flex;
align-items: center;
gap: 0.55em;
font: 500 var(--t-md) / 1 var(--f-sans);
padding: 0.85em 1.4em;
border-radius: 100px;
border: 1px solid var(--texte);
background: var(--texte);
color: var(--fond);
text-decoration: none;
cursor: pointer;
transition: all var(--transition);
}
.bouton:hover{
background: var(--accent);
border-color: var(--accent);
color: #fff;
transform: translateY(-1px);
}
.bouton--fantome{
background: transparent;
color: var(--texte);
border-color: var(--filet-fort);
}
.bouton--fantome:hover{
background: transparent;
color: var(--accent);
border-color: var(--accent);
}
.bouton svg{
width: 1em;
height: 1em;
}
.index-liste{
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--filet);
}
.index-liste li{
margin: 0;
border-bottom: 1px solid var(--filet);
}
.index-liste a{
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr) auto;
gap: var(--e-4);
align-items: baseline;
padding: var(--e-4) 0;
text-decoration: none;
color: inherit;
transition: background var(--transition), padding var(--transition);
}
.index-liste a:hover{
background: var(--fond-2);
padding-inline: var(--e-3);
color: inherit;
}
.index-liste__nom{
font-family: var(--f-display);
font-size: var(--t-lg);
font-weight: 600;
line-height: 1.2;
}
.index-liste a:hover .index-liste__nom{
color: var(--accent);
}
.index-liste__d{
font-size: var(--t-md);
color: var(--texte-2);
line-height: 1.45;
}
.index-liste__x{
font: 400 var(--t-sm) / 1.4 var(--f-sans);
color: var(--texte-3);
white-space: nowrap;
font-feature-settings: 'lnum' 1, 'tnum' 1;
}
@media (max-width: 52rem){
.index-liste a{
grid-template-columns: 1fr;
gap: var(--e-1);
}
}
.sommaire{
font-family: var(--f-sans);
font-size: var(--t-sm);
line-height: 1.5;
}
.sommaire ol{
list-style: none;
padding: 0;
margin: 0;
counter-reset: s;
}
.sommaire li{
margin-bottom: 0.55rem;
counter-increment: s;
}
.sommaire li a{
color: var(--texte-2);
text-decoration: none;
display: flex;
gap: 0.6em;
}
.sommaire li a::before{
content: counter(s, decimal-leading-zero);
color: var(--texte-3);
font-feature-settings: 'lnum' 1, 'tnum' 1;
font-size: 0.85em;
padding-top: 0.15em;
}
.sommaire li a:hover,
.sommaire li a.actif{
color: var(--accent);
}
.suite{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
gap: var(--e-4);
margin-top: var(--e-8);
padding-top: var(--e-5);
border-top: 1px solid var(--filet);
}
.suite a{
display: block;
text-decoration: none;
color: inherit;
padding: var(--e-4);
border: 1px solid var(--filet);
border-radius: var(--r-md);
transition: border-color var(--transition), background var(--transition);
}
.suite a:hover{
border-color: var(--filet-fort);
background: var(--fond-2);
color: inherit;
}
.suite small{
display: block;
font: 500 var(--t-xs) / 1.3 var(--f-sans);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--texte-3);
margin-bottom: var(--e-2);
}
.suite b{
font-family: var(--f-display);
font-size: var(--t-lg);
font-weight: 600;
}
.suite a:hover b{
color: var(--accent);
}
.suite--fin{
text-align: right;
}
.ecu{
display: block;
filter: drop-shadow(0 2px 8px rgb(22 19 15 / 0.18));
}
@media (prefers-reduced-motion: no-preference){
.js [data-apparait]{
opacity: 0;
transform: translateY(14px);
transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.3, 1),
transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.js [data-apparait='vu']{
opacity: 1;
transform: none;
}
}
.frontispice{
--f-clair: #f2ece1;
--f-or: #d8b969;
position: relative;
min-height: min(92svh, 56rem);
display: flex;
align-items: flex-end;
overflow: hidden;
background: #100e0c;
color: var(--f-clair);
isolation: isolate;
}
.frontispice__fond{
position: absolute;
inset: 0;
z-index: -2;
}
.frontispice__fond img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: 100% 22%;
filter: sepia(0.24) contrast(1.05);
opacity: 0.95;
}
.frontispice__voile{
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(to right, rgb(12 10 8 / 0.7) 0%, rgb(12 10 8 / 0.42) 38%, rgb(12 10 8 / 0) 74%),
linear-gradient(to top, rgb(12 10 8 / 0.82) 0%, rgb(12 10 8 / 0) 46%);
}
.frontispice__in{
padding-block: var(--e-9) var(--e-7);
width: 100%;
}
.frontispice__ecu{
width: clamp(3rem, 5vw, 4.4rem);
margin-bottom: var(--e-5);
}
.frontispice__sur{
font: 500 var(--t-sm) / 1.4 var(--f-sans);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--f-or);
margin-bottom: var(--e-4);
}
.frontispice h1{
font-size: var(--t-4xl);
font-weight: 400;
line-height: 0.92;
letter-spacing: -0.02em;
color: var(--f-clair);
max-width: 18ch;
}
.frontispice h1 em{
font-style: italic;
color: var(--f-or);
}
.frontispice__chapeau{
margin-top: var(--e-5);
max-width: 40rem;
font-size: var(--t-lg);
font-weight: 300;
line-height: 1.55;
color: color-mix(in oklab, var(--f-clair) 84%, transparent);
text-shadow: 0 1px 12px rgb(12 10 8 / 0.7);
}
.frontispice__actions{
display: flex;
flex-wrap: wrap;
gap: var(--e-3);
margin-top: var(--e-6);
}
.frontispice .bouton{
background: var(--f-or);
border-color: var(--f-or);
color: #16130f;
}
.frontispice .bouton:hover{
background: #fff;
border-color: #fff;
color: #16130f;
}
.frontispice .bouton--fantome{
background: transparent;
color: var(--f-clair);
border-color: color-mix(in oklab, var(--f-clair) 45%, transparent);
}
.frontispice .bouton--fantome:hover{
background: color-mix(in oklab, var(--f-clair) 14%, transparent);
color: var(--f-clair);
border-color: var(--f-clair);
}
.frontispice__credit{
position: absolute;
right: var(--gouttiere);
bottom: var(--e-3);
font: 400 var(--t-xs) / 1.4 var(--f-sans);
color: color-mix(in oklab, var(--f-clair) 45%, transparent);
max-width: 20rem;
text-align: right;
margin: 0;
}
@media (max-width: 62rem){
.frontispice__fond img{
object-position: 78% 16%;
opacity: 0.55;
}
.frontispice__voile{
background:
linear-gradient(to right, rgb(12 10 8 / 0.88) 0%, rgb(12 10 8 / 0.62) 60%, rgb(12 10 8 / 0.45) 100%),
linear-gradient(to top, rgb(12 10 8 / 0.9) 0%, rgb(12 10 8 / 0) 52%);
}
.frontispice{
flex-wrap: wrap;
}
.frontispice__in{
flex: 1 1 100%;
}
.frontispice__credit{
position: static;
text-align: left;
max-width: none;
flex: 1 1 100%;
padding: 0 var(--gouttiere) var(--e-5);
}
.frontispice h1{
max-width: 14ch;
}
}
.bandeau-chiffres{
background: var(--fond-2);
border-bottom: 1px solid var(--filet);
}
.bandeau-chiffres ul{
list-style: none;
margin: 0;
padding: var(--e-6) 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: var(--e-5);
}
.bandeau-chiffres li{
margin: 0;
text-align: center;
}
.chrono{
position: relative;
margin: var(--e-6) 0;
}
.chrono::before{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 7.5rem;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--filet-fort) 6%, var(--filet-fort) 94%, transparent);
}
.chrono__item{
position: relative;
display: grid;
grid-template-columns: 7.5rem 1fr;
gap: var(--e-5);
padding-block: var(--e-4);
}
.chrono__an{
font-family: var(--f-display);
font-size: var(--t-lg);
font-weight: 600;
color: var(--accent);
text-align: right;
padding-right: var(--e-4);
font-feature-settings: 'lnum' 1;
line-height: 1.3;
}
.chrono__pt{
position: absolute;
left: 7.5rem;
top: 1.55rem;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--fond);
border: 2px solid var(--accent);
transform: translateX(-4px);
}
.chrono__item--majeur .chrono__pt{
background: var(--accent);
width: 13px;
height: 13px;
transform: translateX(-6px);
top: 1.45rem;
}
.chrono__corps{
padding-left: var(--e-3);
}
.chrono__t{
font-family: var(--f-display);
font-size: var(--t-lg);
font-weight: 600;
line-height: 1.2;
margin: 0 0 var(--e-2);
}
.chrono__d{
margin: 0;
color: var(--texte-2);
font-size: var(--t-md);
}
.chrono__src{
margin-top: var(--e-2);
font: 400 var(--t-sm) / 1.4 var(--f-sans);
}
@media (max-width: 46rem){
.chrono::before,
.chrono__pt{
left: 0.4rem;
}
.chrono__item{
grid-template-columns: 1fr;
gap: var(--e-1);
padding-left: var(--e-6);
}
.chrono__an{
text-align: left;
padding: 0;
}
}
.arbre-cadre{
position: relative;
border: 1px solid var(--filet);
border-radius: var(--r-md);
background:
linear-gradient(var(--fond-2), var(--fond-2)) padding-box,
repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in oklab, var(--filet) 45%, transparent) 23px 24px);
overflow: hidden;
touch-action: none;
cursor: grab;
min-height: 34rem;
}
.arbre-cadre:active{
cursor: grabbing;
}
.arbre-cadre svg{
display: block;
width: auto;
height: auto;
max-width: none;
}
.arbre-cadre{
height: min(64svh, 34rem);
}
.arbre-cadre::after{
content: 'Glissez pour explorer';
position: absolute;
left: var(--e-4);
bottom: var(--e-3);
font: 500 var(--t-xs) / 1 var(--f-sans);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--texte-3);
background: color-mix(in oklab, var(--fond) 80%, transparent);
padding: 0.45rem 0.7rem;
border-radius: 100px;
pointer-events: none;
}
.arbre__lien{
fill: none;
stroke: var(--filet-fort);
stroke-width: 1.2;
}
.arbre__lien--direct{
stroke: var(--accent);
stroke-width: 2;
}
.arbre__noeud rect{
fill: var(--fond);
stroke: var(--filet-fort);
stroke-width: 1;
transition: fill var(--transition), stroke var(--transition);
}
.arbre__noeud--direct rect{
stroke: var(--accent);
stroke-width: 1.6;
}
.arbre__noeud:hover rect{
fill: var(--fond-3);
stroke: var(--accent);
}
.arbre__nom{
font: 600 13px var(--f-display);
fill: var(--texte);
}
.arbre__dates{
font: 400 9.5px var(--f-sans);
fill: var(--texte-3);
font-feature-settings: 'lnum' 1;
}
.arbre__role{
font: 400 9px var(--f-sans);
fill: var(--accent-2);
}
.arbre__union{
stroke: var(--filet-fort);
stroke-width: 1;
stroke-dasharray: 3 2;
fill: none;
}
.arbre-outils{
display: flex;
gap: var(--e-2);
padding: var(--e-2);
background: color-mix(in oklab, var(--fond) 82%, transparent);
border-radius: var(--r-md);
backdrop-filter: blur(6px);
position: absolute;
right: var(--e-3);
top: var(--e-3);
z-index: 3;
}
.arbre-outils button{
background: var(--fond);
border: 1px solid var(--filet-fort);
color: var(--texte-2);
width: 2rem;
height: 2rem;
border-radius: var(--r-sm);
cursor: pointer;
font: 500 1rem/1 var(--f-sans);
}
.arbre-outils button:hover{
color: var(--accent);
border-color: var(--accent);
}
.chartrier{
display: grid;
grid-template-columns: 17rem minmax(0, 1fr);
gap: var(--e-7);
align-items: start;
}
@media (max-width: 64rem){
.chartrier{
grid-template-columns: 1fr;
gap: var(--e-5);
}
}
.filtres{
position: sticky;
top: 5.5rem;
font-family: var(--f-sans);
font-size: var(--t-md);
max-height: calc(100dvh - 8rem);
overflow-y: auto;
padding-right: var(--e-2);
}
@media (max-width: 64rem){
.filtres{
position: static;
max-height: none;
}
}
.filtres__groupe{
border-bottom: 1px solid var(--filet);
padding-block: var(--e-4);
}
.filtres__groupe > summary{
cursor: pointer;
font: 600 var(--t-xs) / 1 var(--f-sans);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--texte-3);
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.filtres__groupe > summary::-webkit-details-marker{
display: none;
}
.filtres__groupe > summary::after{
content: '+';
font-size: 1rem;
color: var(--texte-3);
}
.filtres__groupe[open] > summary::after{
content: '–';
}
.filtres__liste{
margin-top: var(--e-3);
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.recherche{
position: relative;
margin-bottom: var(--e-5);
}
.recherche input{
width: 100%;
font: 400 var(--t-base) / 1.4 var(--f-serif);
padding: 0.8rem 2.6rem 0.8rem 1rem;
border: 1px solid var(--filet-fort);
border-radius: var(--r-md);
background: var(--fond-2);
color: var(--texte);
}
.recherche input::placeholder{
color: var(--texte-3);
}
.recherche svg{
position: absolute;
right: 0.9rem;
top: 50%;
transform: translateY(-50%);
width: 1.05rem;
height: 1.05rem;
color: var(--texte-3);
pointer-events: none;
}
.resultats__entete{
display: flex;
flex-wrap: wrap;
gap: var(--e-3);
align-items: baseline;
justify-content: space-between;
padding-bottom: var(--e-3);
border-bottom: 1px solid var(--filet-fort);
font-family: var(--f-sans);
font-size: var(--t-sm);
color: var(--texte-3);
}
.resultats__entete b{
font-family: var(--f-display);
font-size: var(--t-xl);
font-weight: 600;
color: var(--texte);
font-feature-settings: 'lnum' 1;
}
.actes{
list-style: none;
margin: 0;
padding: 0;
}
.acte-ligne{
border-bottom: 1px solid var(--filet);
margin: 0;
}
.acte-ligne > a{
display: grid;
grid-template-columns: 5.5rem minmax(0, 1fr);
gap: var(--e-5);
padding: var(--e-4) 0;
text-decoration: none;
color: inherit;
transition: background var(--transition), padding var(--transition);
}
.acte-ligne > a:hover{
background: var(--fond-2);
padding-inline: var(--e-3);
color: inherit;
}
.acte-ligne__an{
font-family: var(--f-display);
font-size: var(--t-lg);
font-weight: 600;
color: var(--accent);
font-feature-settings: 'lnum' 1;
line-height: 1.3;
}
.acte-ligne__v{
font-family: var(--f-sans);
font-size: var(--t-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--texte-3);
margin-bottom: var(--e-1);
}
.acte-ligne__r{
margin: 0;
color: var(--texte-2);
font-size: var(--t-md);
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.acte-ligne mark{
background: color-mix(in oklab, var(--or) 30%, transparent);
color: inherit;
border-radius: 2px;
padding: 0 0.12em;
}
.acte-ligne__tags{
margin-top: var(--e-2);
}
@media (max-width: 40rem){
.acte-ligne > a{
grid-template-columns: 1fr;
gap: var(--e-1);
}
}
.vide{
padding: var(--e-8) 0;
text-align: center;
color: var(--texte-3);
font-family: var(--f-sans);
}
.acte-vue{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: var(--e-7);
align-items: start;
}
@media (max-width: 62rem){
.acte-vue{
grid-template-columns: 1fr;
}
}
.facsimile{
position: sticky;
top: 5.5rem;
}
.facsimile__cadre{
background: var(--fond-3);
border: 1px solid var(--filet-fort);
border-radius: var(--r-sm);
overflow: hidden;
box-shadow: var(--ombre-2);
}
.facsimile img{
width: 100%;
display: block;
}
:root[data-theme='dark'] .facsimile img{
filter: brightness(0.82) contrast(1.08) sepia(0.12);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme='light']) .facsimile img{
filter: brightness(0.82) contrast(1.08) sepia(0.12);
}
}
.facsimile__leg{
margin-top: var(--e-3);
font: 400 var(--t-sm) / 1.5 var(--f-sans);
color: var(--texte-3);
display: flex;
justify-content: space-between;
gap: var(--e-3);
flex-wrap: wrap;
}
.transcription{
font-size: var(--t-base);
}
.transcription p:first-of-type::first-letter{
font-family: var(--f-display);
font-size: 2.6em;
float: left;
line-height: 0.85;
padding: 0.06em 0.08em 0 0;
color: var(--accent);
font-weight: 500;
}
.fiche-meta{
list-style: none;
padding: 0;
margin: 0 0 var(--e-6);
border-top: 1px solid var(--filet-fort);
font-family: var(--f-sans);
font-size: var(--t-md);
}
.fiche-meta li{
display: grid;
grid-template-columns: 8.5rem minmax(0, 1fr);
gap: var(--e-3);
padding: var(--e-3) 0;
border-bottom: 1px solid var(--filet);
margin: 0;
}
.fiche-meta dt,
.fiche-meta__c{
font-size: var(--t-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--texte-3);
padding-top: 0.15em;
}
@media (max-width: 34rem){
.fiche-meta li{
grid-template-columns: 1fr;
gap: var(--e-1);
}
}
.galerie{
columns: 3 17rem;
column-gap: var(--e-4);
margin: var(--e-6) 0;
}
.galerie figure{
break-inside: avoid;
margin: 0 0 var(--e-4);
position: relative;
}
.galerie img{
width: 100%;
border-radius: var(--r-sm);
background: var(--fond-3);
transition: filter var(--transition);
}
.galerie figcaption{
font: 400 var(--t-sm) / 1.45 var(--f-sans);
color: var(--texte-3);
margin-top: var(--e-2);
padding-left: var(--e-3);
border-left: 2px solid var(--filet-fort);
}
.galerie a{
display: block;
text-decoration: none;
}
.galerie a:hover img{
filter: brightness(1.05) saturate(1.05);
}
.portrait-tete{
display: grid;
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
gap: var(--e-7);
align-items: start;
margin-bottom: var(--e-7);
}
@media (max-width: 52rem){
.portrait-tete{
grid-template-columns: 1fr;
gap: var(--e-5);
}
}
.portrait-tete img{
width: 100%;
border-radius: var(--r-sm);
filter: sepia(0.18) contrast(1.03);
box-shadow: var(--ombre-1);
}
.parents{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: var(--e-4);
margin: var(--e-5) 0;
}
.parents a{
display: block;
padding: var(--e-3) var(--e-4);
border: 1px solid var(--filet);
border-radius: var(--r-md);
text-decoration: none;
color: inherit;
background: var(--fond-2);
}
.parents a:hover{
border-color: var(--accent);
color: inherit;
}
.parents small{
display: block;
font: 500 var(--t-xs) / 1.3 var(--f-sans);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--texte-3);
margin-bottom: 0.2rem;
}
.parents b{
font-family: var(--f-display);
font-size: var(--t-md);
font-weight: 600;
}
.blasons{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
gap: var(--e-6) var(--e-5);
list-style: none;
padding: 0;
margin: var(--e-6) 0;
}
.blasons li{
margin: 0;
text-align: center;
}
.blasons svg{
width: 6.5rem;
margin: 0 auto var(--e-3);
}
.blasons b{
display: block;
font-family: var(--f-display);
font-size: var(--t-md);
font-weight: 600;
}
.blasons span{
display: block;
font: 400 var(--t-sm) / 1.45 var(--f-sans);
color: var(--texte-3);
margin-top: 0.2rem;
}
.carte-lieux{
position: relative;
border: 1px solid var(--filet);
border-radius: var(--r-md);
background: var(--fond-2);
overflow: hidden;
}
.carte-lieux svg{
width: 100%;
height: auto;
display: block;
}
.carte-lieux__pt{
fill: var(--accent);
stroke: var(--fond);
stroke-width: 1.5;
cursor: pointer;
transition: r var(--transition);
}
.carte-lieux__pt:hover{
fill: var(--azur);
}
.carte-lieux__lab{
font: 500 15px var(--f-sans);
fill: var(--texte-2);
pointer-events: none;
paint-order: stroke fill;
stroke: var(--fond-2);
stroke-width: 4px;
stroke-linejoin: round;
}
.carte-lieux a:hover .carte-lieux__lab{
fill: var(--accent);
}
.carte-lieux__trait{
fill: none;
stroke: var(--filet-fort);
stroke-width: 0.8;
}
.carte-lieux__eau{
fill: none;
stroke: color-mix(in oklab, var(--azur-clair) 45%, transparent);
stroke-linecap: round;
}
.carte-lieux__grille{
stroke: var(--filet);
stroke-width: 0.5;
fill: none;
}
.ligne-directe{
list-style: none;
padding: 0;
margin: 0;
counter-reset: none;
border-top: 1px solid var(--filet);
}
.ligne-directe li{
margin: 0;
border-bottom: 1px solid var(--filet);
}
.ligne-directe a{
display: grid;
grid-template-columns: 2.6rem minmax(0, 1.4fr) 6.5rem;
gap: var(--e-4);
align-items: baseline;
padding: var(--e-3) 0;
text-decoration: none;
color: inherit;
transition: background var(--transition), padding var(--transition);
}
.ligne-directe--large a{
grid-template-columns: 2.6rem minmax(0, 1.1fr) 6.5rem minmax(0, 1.4fr);
}
.ligne-directe a:hover{
background: var(--fond-2);
padding-inline: var(--e-3);
}
.ligne-directe__g{
font: 500 var(--t-sm) / 1 var(--f-sans);
color: var(--fond);
background: var(--accent);
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
display: grid;
place-items: center;
font-feature-settings: 'lnum' 1;
}
.ligne-directe__n{
font-family: var(--f-display);
font-size: var(--t-lg);
font-weight: 600;
line-height: 1.2;
}
.ligne-directe a:hover .ligne-directe__n{
color: var(--accent);
}
.ligne-directe__d{
font: 400 var(--t-sm) / 1.3 var(--f-sans);
color: var(--texte-3);
font-feature-settings: 'lnum' 1, 'tnum' 1;
white-space: nowrap;
}
.ligne-directe__r{
font-size: var(--t-md);
color: var(--texte-2);
line-height: 1.45;
}
@media (max-width: 54rem){
.ligne-directe a,
.ligne-directe--large a{
grid-template-columns: 2.2rem 1fr;
gap: var(--e-2) var(--e-3);
}
.ligne-directe__d,
.ligne-directe__r{
grid-column: 2;
}
}
.liste-etats{
list-style: none;
padding: 0;
margin: 0 0 var(--e-5);
font-family: var(--f-sans);
font-size: var(--t-md);
border-top: 1px solid var(--filet);
}
.liste-etats li{
margin: 0;
padding: var(--e-2) 0 var(--e-2) 1.35rem;
border-bottom: 1px solid var(--filet);
position: relative;
color: var(--texte-2);
}
.liste-etats li::before{
content: '';
position: absolute;
left: 0;
top: 1.05em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--filet-fort);
}
.liste-etats--or li::before{
background: var(--or);
}
.liste-unions{
list-style: none;
padding: 0;
margin: 0 0 var(--e-5);
}
.liste-unions li{
padding: var(--e-3) 0;
border-bottom: 1px solid var(--filet);
margin: 0;
}
.liste-unions b{
font-family: var(--f-display);
font-size: var(--t-lg);
font-weight: 600;
}
.chapitres{
list-style: none;
padding: 0;
margin: 0;
counter-reset: none;
border-top: 1px solid var(--filet-fort);
}
.chapitres li{
margin: 0;
border-bottom: 1px solid var(--filet);
}
.chapitres a{
display: grid;
grid-template-columns: 4.5rem 1fr;
gap: var(--e-5);
padding: var(--e-6) 0;
text-decoration: none;
color: inherit;
transition: padding var(--transition), background var(--transition);
}
.chapitres a:hover{
background: var(--fond-2);
padding-inline: var(--e-4);
}
.chapitres__n{
font-family: var(--f-display);
font-size: var(--t-2xl);
font-weight: 400;
color: var(--filet-fort);
line-height: 0.9;
font-feature-settings: 'lnum' 1;
transition: color var(--transition);
}
.chapitres a:hover .chapitres__n{
color: var(--accent);
}
.chapitres__corps{
display: block;
max-width: 46rem;
}
.chapitres__p{
display: block;
font: 500 var(--t-xs) / 1.3 var(--f-sans);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--texte-3);
margin-bottom: var(--e-2);
}
.chapitres__t{
display: block;
font-family: var(--f-display);
font-size: var(--t-xl);
font-weight: 600;
line-height: 1.12;
}
.chapitres a:hover .chapitres__t{
color: var(--accent);
}
.chapitres__s{
display: block;
font-family: var(--f-display);
font-size: var(--t-lg);
font-style: italic;
color: var(--texte-2);
margin-top: 0.15rem;
}
.chapitres__c{
display: block;
margin-top: var(--e-3);
color: var(--texte-2);
font-size: var(--t-md);
line-height: 1.6;
}
@media (max-width: 46rem){
.chapitres a{
grid-template-columns: 1fr;
gap: var(--e-2);
padding-block: var(--e-5);
}
}
.histogramme{
list-style: none;
display: flex;
align-items: flex-end;
gap: 2px;
height: 9rem;
padding: 0;
margin: 0 0 var(--e-6);
border-bottom: 1px solid var(--filet-fort);
}
.histogramme li{
flex: 1;
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
}
.histogramme li span{
display: block;
height: var(--h);
background: linear-gradient(to top, var(--accent), color-mix(in oklab, var(--accent) 45%, transparent));
border-radius: 1px 1px 0 0;
min-height: 0;
transition: background var(--transition);
}
.histogramme li:hover span{
background: var(--accent-2);
}
.histogramme li b{
position: absolute;
bottom: -1.35rem;
left: 0;
font: 400 var(--t-xs) / 1 var(--f-sans);
color: var(--texte-3);
font-feature-settings: 'lnum' 1;
white-space: nowrap;
}
.chrono__siecle{
list-style: none;
margin: var(--e-7) 0 var(--e-2);
padding-left: 8.7rem;
font: 500 var(--t-xs) / 1 var(--f-sans);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--texte-3);
position: relative;
}
.chrono__siecle span{
background: var(--fond);
padding-right: var(--e-3);
}
.chrono__item--cadre{
opacity: 0.62;
}
.chrono__item--cadre .chrono__an,
.chrono__item--cadre .chrono__pt{
color: var(--texte-3);
border-color: var(--texte-3);
}
@media (max-width: 46rem){
.chrono__siecle{
padding-left: var(--e-6);
}
}
.maison-tete{
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr);
gap: var(--e-6);
align-items: start;
}
.maison-tete__ecu svg{
width: 100%;
}
@media (max-width: 40rem){
.maison-tete{
grid-template-columns: 1fr;
gap: var(--e-4);
}
.maison-tete__ecu{
width: 5rem;
}
}
.carte__ecu{
display: block;
width: 2.6rem;
margin-bottom: var(--e-2);
}
.armes-grande{
display: grid;
grid-template-columns: 11rem minmax(0, 1fr);
gap: var(--e-7);
align-items: center;
margin: var(--e-4) 0 var(--e-8);
padding: var(--e-6);
background: var(--fond-2);
border: 1px solid var(--filet);
border-radius: var(--r-md);
}
.armes-grande__b{
font-family: var(--f-display);
font-size: var(--t-xl);
line-height: 1.25;
margin: var(--e-2) 0 var(--e-4);
}
@media (max-width: 46rem){
.armes-grande{
grid-template-columns: 1fr;
gap: var(--e-4);
}
.armes-grande__ecu{
width: 8rem;
}
}
.table-defilante{
overflow-x: auto;
margin: var(--e-4) 0 var(--e-6);
-webkit-overflow-scrolling: touch;
}
.table-defilante > table{
min-width: 34rem;
}
.tableau-sources{
margin: 0;
}
.tableau-sources td{
font-size: var(--t-md);
}
.jauge{
display: block;
height: 6px;
width: 100%;
min-width: 4rem;
background: var(--filet);
border-radius: 3px;
overflow: hidden;
position: relative;
margin-top: 0.45em;
}
.jauge::after{
content: '';
position: absolute;
inset: 0 auto 0 0;
width: var(--p);
background: var(--accent);
}
.plan-liste{
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--filet);
font-family: var(--f-sans);
}
.plan-liste li{
margin: 0;
display: flex;
justify-content: space-between;
gap: var(--e-4);
align-items: baseline;
padding: var(--e-3) 0;
border-bottom: 1px solid var(--filet);
}
.plan-liste span{
font-size: var(--t-sm);
color: var(--texte-3);
white-space: nowrap;
}
.plan-liste a{
text-decoration: none;
color: var(--texte);
}
.plan-liste a:hover{
color: var(--accent);
}
.pagination{
display: flex;
flex-wrap: wrap;
gap: var(--e-4);
align-items: center;
margin-top: var(--e-6);
padding-top: var(--e-5);
border-top: 1px solid var(--filet);
}
.arbre__degre{
font: 500 10px var(--f-sans);
fill: var(--texte-3);
letter-spacing: 0.1em;
text-transform: uppercase;
}
kbd{
font-family: var(--f-sans);
font-size: 0.85em;
border: 1px solid var(--filet-fort);
border-bottom-width: 2px;
border-radius: 3px;
padding: 0.1em 0.35em;
background: var(--fond-2);
}
@font-face{
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/cormorant-garamond-400i-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: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/cormorant-garamond-400i-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: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/cormorant-garamond-400-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: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/cormorant-garamond-400-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: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/cormorant-garamond-500-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: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/cormorant-garamond-500-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: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/cormorant-garamond-600-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: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/cormorant-garamond-600-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: 'Cormorant Garamond';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/cormorant-garamond-700-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: 'Cormorant Garamond';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/cormorant-garamond-700-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: 'Spectral';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/spectral-400i-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: 'Spectral';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/spectral-400i-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: 'Spectral';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/spectral-300-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: 'Spectral';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/spectral-300-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: 'Spectral';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/spectral-400-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: 'Spectral';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/spectral-400-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: 'Spectral';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/spectral-500-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: 'Spectral';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/spectral-500-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: 'Spectral';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/spectral-600-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: 'Spectral';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/spectral-600-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: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/inter-400-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: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/inter-400-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: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/inter-500-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: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/inter-500-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: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/inter-600-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: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/inter-600-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;
}