@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/cormorant-400-italic.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/cormorant-400.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/cormorant-600.woff2') format('woff2'); } @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/ebgaramond-400-italic.woff2') format('woff2'); } @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ebgaramond-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-400.woff2') format('woff2'); }   :root {   --nuit: #05070d; --nebuleuse: #1b2a5a; --ocean: #0e5e7e; --chlorophylle: #2f8f5b; --ambre: #d9902f; --quantique: #6b4fd8; --incarnat: #c8667a; --or: #e6c46a; --nacre: #f4f1ea;   --fond: var(--nuit); --fond-2: #0a0e18; --fond-3: #111726; --texte: #e8e5de; --texte-doux: #b8b4ab; --texte-faible: #8d8981; --trait: color-mix(in srgb, var(--nacre) 14%, transparent); --trait-fort: color-mix(in srgb, var(--nacre) 28%, transparent); --or-doux: color-mix(in srgb, var(--or) 62%, var(--nacre));   --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --serif-texte: "EB Garamond", "Iowan Old Style", Georgia, serif; --sans: "Inter", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --taille-xs: 0.78rem; --taille-s: 0.9rem; --taille-m: 1.0625rem; --taille-l: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); --taille-xl: clamp(1.7rem, 1.3rem + 1.8vw, 2.8rem); --taille-xxl: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);   --gouttiere: clamp(1.1rem, 4vw, 2.5rem); --largeur: 78rem; --largeur-texte: 68ch; --r-s: 6px; --r-m: 12px; --r-l: 22px; --ombre: 0 24px 80px -40px rgba(0, 0, 0, 0.9); --focus: 0 0 0 3px var(--fond), 0 0 0 5px var(--or); --dur-1: 160ms; --dur-2: 320ms; --courbe: cubic-bezier(0.22, 0.61, 0.36, 1); } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; --dur-2: 1ms; } }   *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: color-mix(in srgb, var(--or) 45%, transparent) var(--fond); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100vh; background: radial-gradient(1200px 680px at 78% -12%, color-mix(in srgb, var(--nebuleuse) 62%, transparent), transparent 68%), radial-gradient(900px 620px at 8% 4%, color-mix(in srgb, var(--quantique) 16%, transparent), transparent 70%), var(--fond); color: var(--texte); font-family: var(--sans); font-size: var(--taille-m); line-height: 1.65; letter-spacing: 0.008em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; margin: 0 0 0.6em; color: var(--nacre); } h1 { font-size: var(--taille-xxl); } h2 { font-size: var(--taille-xl); } h3 { font-size: var(--taille-l); } p { margin: 0 0 1.1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--or-doux); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color var(--dur-1) var(--courbe); } a:hover { color: var(--nacre); } a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-s); } strong { color: var(--nacre); font-weight: 600; } small { font-size: var(--taille-xs); color: var(--texte-faible); } cite { font-style: normal; color: var(--texte-faible); } code, kbd, samp { font-family: var(--mono); font-size: 0.92em; } img { max-width: 100%; height: auto; display: block; } ::selection { background: color-mix(in srgb, var(--or) 34%, transparent); color: var(--nacre); } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.9rem 1.4rem; background: var(--or); color: #14100a; font-weight: 600; border-radius: 0 0 var(--r-m) 0; } .skip:focus { left: 0; } .wrap { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); } .badge { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.22em 0.66em; border-radius: 999px; font-size: var(--taille-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; border: 1px solid currentColor; white-space: nowrap; } .badge--etabli { color: var(--or); } .badge--debattu { color: var(--ambre); } .badge--reflexion{ color: #9c8ef0; } .badge--avenir { color: var(--texte-faible); } .badge--a_verifier { color: var(--incarnat); }   .site-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--fond) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--trait); } .site-head__inner { display: flex; align-items: center; gap: 1rem; max-width: var(--largeur); margin-inline: auto; padding: 0.75rem var(--gouttiere); } .brand { display: flex; align-items: baseline; gap: 0.6rem; text-decoration: none; color: var(--nacre); min-width: 0; } .brand__mark { width: 0.85rem; height: 0.85rem; border-radius: 50%; align-self: center; background: radial-gradient(circle at 34% 32%, var(--or) 0 26%, color-mix(in srgb, var(--or) 55%, transparent) 42%, transparent 72%); box-shadow: 0 0 18px -2px color-mix(in srgb, var(--or) 70%, transparent); flex: none; } .brand__name { font-family: var(--serif); font-size: 1.32rem; letter-spacing: 0.16em; text-transform: uppercase; } .brand__sub { font-size: var(--taille-xs); color: var(--texte-faible); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-toggle { margin-left: auto; display: none; align-items: center; gap: 0.55rem; background: transparent; color: var(--texte); border: 1px solid var(--trait-fort); border-radius: 999px; padding: 0.5rem 0.95rem; font: inherit; font-size: var(--taille-s); cursor: pointer; } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 1.05rem; height: 1px; background: currentColor; } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; } .nav-toggle__bars::before { top: -5px; } .nav-toggle__bars::after { top: 5px; } .nav { margin-left: auto; } .nav__list { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.35rem); margin: 0; padding: 0; list-style: none; } .nav__list a { display: inline-block; padding: 0.45rem 0.15rem; font-size: var(--taille-s); color: var(--texte-doux); text-decoration: none; border-bottom: 1px solid transparent; } .nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--nacre); border-bottom-color: var(--or); } .nav__extra { display: none; } .site-head__progress { height: 2px; background: transparent; } .site-head__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--or), var(--incarnat)); } @media (max-width: 60rem) { .nav-toggle { display: inline-flex; } .brand__sub { display: none; } .nav { position: fixed; inset: 3.6rem 0 auto 0; max-height: calc(100dvh - 3.6rem); overflow-y: auto; background: #0a0e18; border-bottom: 1px solid var(--trait-fort); box-shadow: 0 30px 60px -30px #000; padding: 1rem var(--gouttiere) 2rem; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--courbe), transform var(--dur-2) var(--courbe), visibility var(--dur-2); } .nav[data-ouvert="true"] { opacity: 1; visibility: visible; transform: none; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__list a { padding: 0.75rem 0; border-bottom: 1px solid var(--trait); } .nav__extra { display: block; margin-top: 1.6rem; } .nav__extra-titre { font-size: var(--taille-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--texte-faible); margin-bottom: 0.5rem; } .nav__extra-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; } .nav__extra-liste a { display: block; padding: 0.45rem 0; color: var(--texte-doux); text-decoration: none; font-size: var(--taille-s); } .nav__extra-liste span { color: var(--texte-faible); font-family: var(--mono); font-size: var(--taille-xs); } }   .main { display: block; min-height: 60vh; } .hero { position: relative; padding: clamp(3rem, 9vw, 8rem) 0 clamp(2rem, 5vw, 4rem); } .hero__eyebrow { font-size: var(--taille-xs); letter-spacing: 0.28em; text-transform: uppercase; color: var(--or); margin-bottom: 1.1rem; } .hero__title { margin-bottom: 0.3em; } .hero__title em { font-style: italic; color: var(--or-doux); } .hero__lede { max-width: var(--largeur-texte); font-family: var(--serif-texte); font-size: var(--taille-l); color: var(--texte-doux); } .hero__verse { max-width: var(--largeur-texte); margin: 2rem 0 0; padding-left: 1.2rem; border-left: 1px solid color-mix(in srgb, var(--or) 55%, transparent); font-family: var(--serif-texte); font-size: 1.12rem; color: var(--texte-doux); } .hero__verse cite { display: block; margin-top: 0.5rem; font-size: var(--taille-s); letter-spacing: 0.06em; } .section { padding: clamp(2rem, 5vw, 3.6rem) 0; border-top: 1px solid var(--trait); } .section__head { max-width: var(--largeur-texte); margin-bottom: 2rem; } .section__head p { color: var(--texte-doux); } .section__kicker { font-size: var(--taille-xs); letter-spacing: 0.24em; text-transform: uppercase; color: var(--texte-faible); margin-bottom: 0.7rem; } .grille { display: grid; gap: clamp(0.9rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); align-items: start; } .carte { position: relative; padding: 1.35rem 1.35rem 1.5rem; border: 1px solid var(--trait); border-radius: var(--r-m); background: linear-gradient(180deg, color-mix(in srgb, var(--nacre) 4%, transparent), transparent 70%); transition: border-color var(--dur-2) var(--courbe), transform var(--dur-2) var(--courbe); } .carte:hover { border-color: var(--trait-fort); transform: translateY(-2px); } .carte__num { font-family: var(--mono); font-size: var(--taille-xs); letter-spacing: 0.14em; color: var(--texte-faible); } .carte__titre { font-size: 1.22rem; margin: 0.5rem 0 0.45rem; } .carte__titre a { color: inherit; text-decoration: none; } .carte__titre a:hover { color: var(--or-doux); } .carte__texte { font-size: var(--taille-s); color: var(--texte-doux); } .carte__verse { margin-top: 0.9rem; font-family: var(--serif-texte); font-size: var(--taille-s); color: var(--texte-faible); } .aile { --teinte: var(--nebuleuse); position: relative; padding-top: 2.4rem; } .aile::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gouttiere)) auto; height: 1px; background: linear-gradient(90deg, transparent, var(--teinte), transparent); } .aile__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.9rem; margin-bottom: 1.6rem; } .aile__num { font-family: var(--serif); font-size: 2.1rem;   color: color-mix(in srgb, var(--teinte) 42%, var(--nacre)); line-height: 1; } .aile__titre { margin: 0; font-size: var(--taille-xl); } .aile__couleur { width: 2.1rem; height: 3px; border-radius: 2px; background: var(--teinte); align-self: center; } .etat-vide { padding: 1.1rem 1.3rem; border: 1px dashed var(--trait-fort); border-radius: var(--r-m); color: var(--texte-faible); font-size: var(--taille-s); } .note { margin-top: 1.6rem; padding: 1.1rem 1.25rem; border-left: 2px solid var(--quantique); background: color-mix(in srgb, var(--quantique) 10%, transparent); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: var(--taille-s); color: var(--texte-doux); } .note strong { color: #b9aef7; } .mesure { display: flex; flex-wrap: wrap; gap: 2.2rem; margin: 1.4rem 0 0; padding: 0; list-style: none; } .mesure li { min-width: 8rem; } .mesure__valeur { display: block; font-family: var(--serif); font-size: 1.9rem; color: var(--or-doux); line-height: 1.1; } .mesure__label { font-size: var(--taille-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-faible); }   .site-foot { margin-top: clamp(3rem, 7vw, 6rem); padding: clamp(2rem, 5vw, 3.4rem) 0 2.4rem; border-top: 1px solid var(--trait); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--nebuleuse) 14%, transparent)); font-size: var(--taille-s); color: var(--texte-doux); } .site-foot__verse { max-width: 46rem; font-family: var(--serif-texte); font-size: 1.05rem; color: var(--nacre); } .site-foot__verse cite { display: block; margin-top: 0.4rem; font-size: var(--taille-s); } .site-foot__slogan { margin-top: 1.4rem; font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.02em; color: var(--or-doux); } .site-foot__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 1.4rem 0; padding: 0; list-style: none; } .site-foot__note { max-width: 52rem; color: var(--texte-faible); font-size: var(--taille-xs); } .site-foot__copy { margin-top: 1.2rem; color: var(--texte-faible); font-size: var(--taille-xs); }     .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .grille--duo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr)); } .kicker { font-family: var(--mono); font-size: var(--taille-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-faible); } .mesure--serre { gap: 1.4rem; } hr.trait { height: 1px; border: 0; background: var(--trait); margin: 2.4rem 0; }   .fil { padding-top: 1.2rem; font-size: var(--taille-xs); color: var(--texte-faible); } .fil ol { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; } .fil li + li::before { content: "›"; margin-right: 0.45rem; color: var(--trait-fort); } .fil a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .fil a:hover { color: var(--or-doux); border-color: currentColor; }   .salle-head { --teinte: var(--nebuleuse); position: relative; padding: clamp(1.6rem, 4vw, 3.2rem) 0 clamp(1.2rem, 3vw, 2rem); border-bottom: 1px solid var(--trait); overflow: hidden; } .salle-head::after { content: ""; position: absolute; inset: auto 0 -40% 55%; height: 140%; background: radial-gradient(closest-side, color-mix(in srgb, var(--teinte) 34%, transparent), transparent 72%); pointer-events: none; } .salle-head__aile { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: var(--taille-xs); letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--teinte) 42%, var(--nacre)); } .salle-head__aile::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; border-radius: 2px; } .salle-head__titre { max-width: 30ch; margin: 0.6rem 0 0.5rem; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.06; } .salle-head__angle { max-width: var(--largeur-texte); color: var(--texte-doux); font-size: var(--taille-l); font-family: var(--serif-texte); } .salle-head__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; margin-top: 1.2rem; }   .sommaire { margin: 1.6rem 0 0; padding: 1rem 1.15rem; border: 1px solid var(--trait); border-radius: var(--r-m); background: color-mix(in srgb, var(--nacre) 3%, transparent); } .sommaire h2 { margin: 0 0 0.6rem; font-size: var(--taille-s); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-faible); font-family: var(--sans); } .sommaire ol { margin: 0; padding-left: 1.2rem; font-size: var(--taille-s); } .sommaire a { color: var(--texte-doux); text-decoration: none; } .sommaire a:hover { color: var(--or-doux); }   .merveille { position: relative; margin: 0 0 clamp(1.6rem, 3vw, 2.6rem); padding-left: clamp(0, 3vw, 3.4rem); } .merveille__num { display: block; font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0.18em; color: var(--or-doux); } @media (min-width: 60rem) { .merveille { padding-left: 3.4rem; } .merveille__num { position: absolute; left: 0; top: 0.15rem; writing-mode: vertical-rl; transform: rotate(180deg); } } .merveille__titre { margin: 0.25rem 0 0.6rem; font-size: var(--taille-l); } .merveille p { max-width: var(--largeur-texte); }   .fiche { position: relative; margin: 1.4rem 0; padding: 1.15rem 1.25rem 1rem; border: 1px solid var(--trait); border-top: 2px solid color-mix(in srgb, var(--or) 55%, transparent); border-radius: 0 0 var(--r-m) var(--r-m); background: linear-gradient(180deg, color-mix(in srgb, var(--nacre) 4%, transparent), transparent 70%); } .fiche__valeur { font-family: var(--serif); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem); line-height: 1; color: var(--nacre); } .fiche__unite { font-size: var(--taille-s); color: var(--texte-doux); margin-left: 0.4rem; font-family: var(--sans); } .fiche__enonce { margin: 0.7rem 0 0; max-width: var(--largeur-texte); } .fiche__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed var(--trait); font-size: var(--taille-xs); color: var(--texte-faible); }   .src { font-family: var(--mono); font-size: var(--taille-xs); color: var(--texte-faible); } .src a { color: inherit; text-decoration-color: var(--trait-fort); } .src a:hover { color: var(--or-doux); } .src + .src::before { content: " · "; }   .citation { margin: 1.8rem 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--or); font-family: var(--serif-texte); font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem); color: var(--nacre); } .citation p { margin: 0 0 0.6rem; } .citation cite { display: block; font-style: normal; font-family: var(--sans); font-size: var(--taille-s); color: var(--texte-doux); } .citation__contexte { margin-top: 0.7rem; padding: 0.6rem 0.8rem; border-radius: var(--r-s); background: color-mix(in srgb, var(--ambre) 10%, transparent); font-family: var(--sans); font-size: var(--taille-xs); color: var(--texte-doux); }   .encadre { margin: 1.8rem 0; padding: 1.05rem 1.2rem; border: 1px solid var(--trait); border-left: 3px solid var(--trait-fort); border-radius: 0 var(--r-m) var(--r-m) 0; background: color-mix(in srgb, var(--nacre) 3%, transparent); font-size: var(--taille-s); } .encadre > :first-child { margin-top: 0; } .encadre > :last-child { margin-bottom: 0; } .encadre__titre { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-family: var(--sans); font-size: var(--taille-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-doux); } .encadre--reflexion { border-left-color: var(--quantique); background: color-mix(in srgb, var(--quantique) 12%, transparent); } .encadre--reflexion .encadre__titre { color: #b9aef7; } .encadre--nuance { border-left-color: var(--ambre); background: color-mix(in srgb, var(--ambre) 10%, transparent); } .encadre--nuance .encadre__titre { color: #f0c184; } .encadre--methode { border-left-color: var(--chlorophylle); background: color-mix(in srgb, var(--chlorophylle) 10%, transparent); } .encadre--methode .encadre__titre { color: #8fd9ab; } .encadre--alerte { border-left-color: var(--incarnat); background: color-mix(in srgb, var(--incarnat) 10%, transparent); } .encadre--alerte .encadre__titre { color: #f0a8b6; }   .chiffre { font-family: var(--serif); font-size: 1.25em; color: var(--nacre); white-space: nowrap; }   .tableau-defilant { margin: 1.6rem 0; overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--r-m); } table.tableau { width: 100%; border-collapse: collapse; font-size: var(--taille-s); min-width: 34rem; } .tableau caption { caption-side: top; text-align: left; padding: 0.8rem 1rem 0.2rem; color: var(--texte-doux); font-size: var(--taille-xs); } .tableau th, .tableau td { padding: 0.6rem 0.9rem; text-align: left; border-bottom: 1px solid var(--trait); vertical-align: top; } .tableau thead th { position: sticky; top: 0; background: color-mix(in srgb, var(--fond-3) 92%, transparent); font-family: var(--sans); font-size: var(--taille-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); } .tableau tbody tr:hover { background: color-mix(in srgb, var(--nacre) 4%, transparent); } .tableau td.num, .tableau th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); } .tableau tbody tr:last-child td { border-bottom: 0; }   .frise { margin: 2rem 0; padding: 0; list-style: none; position: relative; } .frise::before { content: ""; position: absolute; left: 0.42rem; top: 0.4rem; bottom: 0.4rem; width: 1px; background: var(--trait-fort); } .frise li { position: relative; padding: 0 0 1.4rem 1.8rem; } .frise li::before { content: ""; position: absolute; left: 0; top: 0.42rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 3px color-mix(in srgb, var(--or) 18%, transparent); } .frise__date { display: block; font-family: var(--mono); font-size: var(--taille-xs); letter-spacing: 0.1em; color: var(--or-doux); } .frise__titre { display: block; margin-top: 0.15rem; letter-spacing: 0; font-family: var(--sans); color: var(--nacre); font-size: var(--taille-m); text-transform: none; } .frise__texte { margin: 0.25rem 0 0; font-size: var(--taille-s); color: var(--texte-doux); }   .figure { margin: 2rem 0; } .figure img { width: 100%; height: auto; border-radius: var(--r-m); display: block; } .figure figcaption { margin-top: 0.6rem; font-size: var(--taille-xs); color: var(--texte-faible); } .figure__credit { display: block; margin-top: 0.25rem; } .figure__authentique { display: inline-block; margin-top: 0.35rem; padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--chlorophylle) 60%, transparent); color: #8fd9ab; font-size: var(--taille-xs); } .figure--valeur { display: block; border: 1px solid var(--trait); border-radius: var(--r-m); padding: 1rem; font-family: var(--serif); color: var(--texte-doux); text-align: center; } .figure--valeur strong { display: block; font-size: 2rem; color: var(--nacre); }   .bouton { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.62rem 1.1rem; border: 1px solid var(--trait-fort); border-radius: 999px; background: transparent; color: var(--nacre); font-family: var(--sans); font-size: var(--taille-s); text-decoration: none; transition: background var(--dur-1) var(--courbe), border-color var(--dur-1) var(--courbe), color var(--dur-1) var(--courbe); } .bouton:hover { border-color: var(--or); color: var(--or-doux); } .bouton--primaire { background: var(--or); border-color: var(--or); color: #201703; font-weight: 600; } .bouton--primaire:hover { background: var(--or-doux); border-color: var(--or-doux); color: #201703; } .bouton--discret { border-color: transparent; color: var(--texte-doux); padding-inline: 0.4rem; } .boutons { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }   .pagination { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 3rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--trait); } @media (min-width: 46rem) { .pagination { grid-template-columns: 1fr 1fr; } } .pagination a { display: block; padding: 0.9rem 1.1rem; border: 1px solid var(--trait); border-radius: var(--r-m); text-decoration: none; color: var(--texte-doux); font-size: var(--taille-s); } .pagination a:hover { border-color: var(--or); color: var(--or-doux); } .pagination__sens { display: block; font-family: var(--mono); font-size: var(--taille-xs); color: var(--texte-faible); text-transform: uppercase; letter-spacing: 0.12em; } .pagination__titre { display: block; margin-top: 0.2rem; color: var(--nacre); font-size: var(--taille-m); }   .liste-check { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: 0.6rem; } .liste-check li { position: relative; padding-left: 1.5rem; color: var(--texte-doux); font-size: var(--taille-s); } .liste-check li::before { content: "—"; position: absolute; left: 0; color: var(--or); } .liste-check strong { color: var(--nacre); }   [data-confort="grand"] { --taille-m: 1.2rem; --taille-s: 1rem; --largeur-texte: 60ch; } [data-confort="grand"] .merveille p, [data-confort="grand"] .fiche__enonce { font-size: 1.08rem; }   @media print { :root { --fond: #fff; --texte: #111; --texte-doux: #333; --texte-faible: #555; --nacre: #111; --or: #7a5b00; --or-doux: #7a5b00; } body { background: #fff; color: #111; } .site-head, .site-foot, .boutons, .pagination, .sommaire { display: none !important; } .encadre, .fiche, .tableau-defilant { break-inside: avoid; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; } }   .confort { margin-left: auto; font-size: var(--taille-xs); gap: 0.4rem; white-space: nowrap; } .confort[aria-pressed="true"] { border-color: var(--or); color: var(--or-doux); } @media (max-width: 52rem) { .confort span[data-confort-label] { display: none; } }   .figure img { aspect-ratio: 16 / 9; object-fit: cover; background: var(--fond-2); } .salle-head + .wrap > .figure { margin-top: clamp(1rem, 3vw, 2rem); }   .biblio { list-style: none; padding-left: 0; } .biblio > li { margin: 0 0 0.9rem; padding-left: 1.1rem; border-left: 2px solid color-mix(in srgb, currentColor 18%, transparent); overflow-wrap: anywhere; line-height: 1.55; } .biblio a { overflow-wrap: anywhere; } .glossaire dt { font-weight: 600; margin-top: 1.2rem; } .glossaire dd { margin: 0.25rem 0 0 0; } .compte { font-weight: 400; opacity: 0.6; font-size: 0.8em; }   .grille--fiches { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; } .fiche-carte { display: flex; flex-direction: column; border: 1px solid var(--trait, rgba(255,255,255,0.12)); border-radius: 14px; overflow: hidden; background: var(--fond-2, rgba(255,255,255,0.03)); transition: border-color 160ms ease, transform 160ms ease; } .fiche-carte:hover { border-color: var(--trait-fort, rgba(255,255,255,0.28)); transform: translateY(-2px); } .fiche-carte[hidden] { display: none; } .fiche-carte__img { display: block; line-height: 0; } .fiche-carte__img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fond-2); } .fiche-carte__reserve { margin: 0.1rem 0 0; padding-left: 0.6rem; border-left: 1px solid color-mix(in srgb, var(--or) 45%, transparent); font-size: var(--taille-xs); line-height: 1.5; color: var(--texte-doux); } .fiche-carte__etiquette { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--or-doux); } .fiche-carte__refs { margin: 0; padding-top: 0.45rem; border-top: 1px solid var(--trait); font-size: var(--taille-xs); line-height: 1.45; color: var(--texte-doux); } .fiche-carte__ref { display: block; } .fiche-carte__ref a { color: var(--or-doux); } .fiche-carte__refs--attente { color: var(--texte-faible); font-style: italic; } .fiche-carte__corps { padding: 0.85rem 0.95rem 1.05rem; display: flex; flex-direction: column; gap: 0.45rem; } .fiche-carte__meta { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.82rem; } .fiche-carte__id { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; opacity: 0.65; } .fiche-carte__titre { font-size: 1.05rem; margin: 0; line-height: 1.3; } .fiche-carte__texte { margin: 0; font-size: 0.92rem; opacity: 0.86; } .fiche-carte__chiffre { margin: 0.15rem 0 0; font-size: 0.88rem; } .fiche-carte__chiffre strong { color: var(--or, #E6C46A); font-size: 1.02em; } .fiche-carte__chiffre--vide { opacity: 0.55; font-style: italic; } .fiche-carte__annee { opacity: 0.65; } .fiche-carte__lien, .fiche-carte__source { margin: 0; font-size: 0.82rem; opacity: 0.7; } .fiche-carte__lien a { text-decoration: underline; text-underline-offset: 2px; } .atlas-filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.9rem 1.1rem; align-items: end; padding: 1rem 1.1rem; border: 1px solid var(--trait, rgba(255,255,255,0.12)); border-radius: 14px; background: var(--fond-2, rgba(255,255,255,0.03)); margin-bottom: 1rem; } .atlas-filtres__champ { display: flex; flex-direction: column; gap: 0.3rem; } .atlas-filtres__champ label { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; } .atlas-filtres input, .atlas-filtres select { font: inherit; font-size: 0.92rem; padding: 0.5rem 0.6rem; color: inherit; background: var(--fond, #05070D); border: 1px solid var(--trait, rgba(255,255,255,0.18)); border-radius: 9px; } .atlas-filtres input:focus-visible, .atlas-filtres select:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; } .atlas-filtres__actions { margin: 0; } .bouton--discret { background: transparent; border: 1px solid var(--trait, rgba(255,255,255,0.22)); } .atlas-compte { font-size: 0.9rem; opacity: 0.75; margin: 0 0 1.1rem; } .atlas-vide { padding: 2rem 0; text-align: center; opacity: 0.7; } .note { font-size: 0.9rem; opacity: 0.7; border-left: 2px solid currentColor; padding-left: 0.9rem; } @media (max-width: 40rem) { .fiche-carte__corps { padding: 0.75rem 0.8rem 0.95rem; } }   .quiz { display: grid; gap: 1.1rem; max-width: 54rem; } .quiz__q { border: 1px solid var(--trait, rgba(255,255,255,0.12)); border-radius: 14px; padding: 1rem 1.1rem 1.15rem; margin: 0; background: var(--fond-2, rgba(255,255,255,0.03)); } .quiz__affirmation { font-weight: 600; padding: 0 0.2rem; margin-bottom: 0.6rem; } .quiz__options { display: flex; flex-wrap: wrap; gap: 0.5rem; } .quiz__opt { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.8rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--trait, rgba(255,255,255,0.18)); font-size: 0.92rem; } .quiz__opt:hover { border-color: var(--trait-fort, rgba(255,255,255,0.35)); } .quiz__opt input { accent-color: var(--or, #E6C46A); } .quiz__opt.est-juste { border-color: #6ac48f; box-shadow: inset 0 0 0 1px #6ac48f; } .quiz__opt.est-faux { border-color: #d9736a; box-shadow: inset 0 0 0 1px #d9736a; } .quiz__retour { margin: 0.75rem 0 0; font-size: 0.92rem; line-height: 1.5; } .quiz__retour strong { color: var(--or, #E6C46A); } .quiz__src { opacity: 0.7; font-size: 0.86em; } .quiz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin: 0; } .quiz__score { font-size: 0.92rem; opacity: 0.85; }