/* ==========================================================================
   Principauté du Sabourg — variante « liechtenstein.li »
   Agencement calqué sur liechtenstein.li (hero plein écran, menu en surimpression,
   teasers image/texte alternés, section sombre « domaines », galerie), adapté au
   contenu et aux images du Sabourg.
   Noir / blanc, ROUGE unique accent. Jost (affichage/UI) · Helvetica (corps).
   ========================================================================== */

:root {
  --navy-900: #0a0a0a;
  --navy-800: #171717;
  --navy-700: #242424;
  --dark: #2b2f33;        /* fond de la section « domaines » (façon liechtenstein.li) */
  --blue-700: #a5121c;
  --blue-600: #c0161f;
  --blue-500: #d81f2b;    /* rouge accent (AA : blanc dessus ≈ 5:1) */
  --blue-400: #e3535c;    /* rouge clair (sur fond sombre) */
  --link:     #b3121f;
  --sky-50:  #f6f6f4;
  --sky-100: #ededea;
  --sky-200: #d8d8d2;
  --gold-500: #d81f2b;
  --gold-200: #f6cfd2;
  --gold-800: #b3121f;
  --ink-900: #0a0a0a;
  --ink-700: #2b2b2b;
  --ink-500: #6b6b68;
  --line: #e4e4e0;
  /* Couleurs des quatre domaines (menus de l'accueil et renvoi en bas de page) */
  --dom-1: #c0161f;
  --dom-2: #0f6fa6;
  --dom-3: #f7d84e;
  --dom-4: #a81a78;
  --serif: "Jost", "Helvetica Neue", Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --script: "Jost", "Helvetica Neue", sans-serif;
  --w-content: 82rem;
  --w-article: 40rem;   /* ~72 signes par ligne a 1.1rem : longueur de lecture confortable */
  --header-h: 5.4rem;
  --r: 0; --r-md: 0; --r-lg: 0;
  --shadow-sm: none;
  --shadow-md: 0 12px 30px rgba(10, 10, 10, 0.08);
  --shadow-lg: 0 20px 44px rgba(10, 10, 10, 0.12);
  --ease-out-4: cubic-bezier(0.19, 1, 0.22, 1);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
ul[class], ol[class],
.site-nav ul, .site-footer ul, .side-nav ul, .breadcrumb ol { list-style: none; padding: 0; }

/* L'en-tête est fixe : toute ancre (et tout élément qui reçoit le focus) s'arrête dessous. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }

body {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-700);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--ink-900); text-wrap: balance; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.8rem, 7vw, 6rem); font-weight: 300; }
h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 300; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-700); }

::selection { background: var(--blue-500); color: #fff; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; }

/* Utilitaires ------------------------------------------------------------- */
.container {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.8rem;
  border-radius: 0;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--gold::before, .btn--primary::before { content: "⟶"; font-weight: 400; }
.btn--gold { background: var(--blue-500); color: #fff; }
.btn--gold:hover { background: var(--blue-700); color: #fff; }
.btn--primary { background: var(--ink-900); color: #fff; }
.btn--primary:hover { background: var(--navy-700); color: #fff; }
.btn--ghost { border-color: var(--ink-900); color: var(--ink-900); background: transparent; }
.btn--ghost:hover { background: var(--ink-900); color: #fff; }
.btn--light { background: #fff; color: var(--ink-900); border-color: #fff; }
.btn--light:hover { background: transparent; color: #fff; border-color: #fff; }

.eyebrow {
  display: block;
  font-family: var(--serif);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-800);
  margin-bottom: 1.1rem;
}
.section--navy .eyebrow, .directory .eyebrow { color: var(--blue-400); }

.script-note { font-family: var(--script); font-weight: 300; font-size: 1.8rem; color: var(--blue-500); }

/* Animations -------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease-out-4), transform 1s var(--ease-out-4);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.no-js .reveal { opacity: 1; transform: none; }

.w-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.w-mask .w {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1.1s var(--ease-out-4);
  transition-delay: calc(var(--wi, 0) * 0.04s);
  will-change: transform;
}
.is-split-visible .w-mask .w { transform: none; }
.no-js .w-mask .w { transform: none; }

.scrub { opacity: 0.25; }
.no-js .scrub { opacity: 1; }

.hero video, .hero .hero-img { will-change: transform; }

/* Carrousel */
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(23rem, 84vw);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.4rem;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-nav { display: flex; gap: 0.5rem; }
.carousel-nav button {
  width: 3rem; height: 3rem;
  border-radius: 0;
  border: 1px solid var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-900);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.carousel-nav button:hover { background: var(--ink-900); color: #fff; }
.carousel-nav svg { width: 1.1rem; height: 1.1rem; stroke: currentColor; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .w-mask .w { opacity: 1; transform: none; transition: none; }
  .scrub { opacity: 1 !important; }
  .scroll-cue { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* En-tête minimal + MENU EN SURIMPRESSION (façon liechtenstein.li) -------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
/* En haut de l'accueil, l'en-tête flotte sur le hero (texte blanc) ; au scroll il devient blanc. */
body.home-top .site-header { color: #fff; }
body.home-top .site-header .brand-name,
body.home-top .site-header .brand-sub,
body.home-top .site-header .icon-btn,
body.home-top .site-header .nav-toggle,
body.home-top .site-header .lang-switch a,
body.home-top .site-header .lang-switch span { color: #fff; }
.site-header:not(.on-hero) {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom-color: var(--line);
}
/* Menu ouvert : pas de flou d'arrière-plan. Un backdrop-filter fait de l'en-tête le cadre de référence
   du panneau (position: fixed) : il se réduisait alors à la hauteur de l'en-tête sur les pages intérieures. */
body.nav-open .site-header { background: #fff; border-bottom-color: var(--line); color: var(--ink-900); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.nav-open .site-header .brand-name, body.nav-open .site-header .brand-sub,
body.nav-open .site-header .icon-btn, body.nav-open .site-header .nav-toggle,
body.nav-open .site-header .lang-switch a, body.nav-open .site-header .lang-switch span { color: var(--ink-900); }

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.brand img { width: 2.6rem; height: 2.6rem; object-fit: contain; }
.brand-name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-900);
  line-height: 1.1;
}
.brand-sub {
  display: block;
  font-family: var(--serif);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: 0.2rem;
}

.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-actions .icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 44px; min-width: 44px; flex-shrink: 0;
  font-family: var(--serif); font-size: 0.9rem; font-weight: 500;
  color: var(--ink-900);
}
.icon-btn svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; }
.icon-btn:hover { color: var(--blue-500); }

.lang-switch { display: flex; gap: 0.25rem; font-family: var(--serif); font-size: 0.85rem; font-weight: 500; }
.lang-switch a, .lang-switch span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 2.2rem;
  padding: 0.2rem 0.35rem; text-decoration: none; color: var(--ink-500); letter-spacing: 0.04em;
}
.lang-switch [aria-current] { color: var(--ink-900); font-weight: 600; }
.lang-switch a:hover { color: var(--blue-500); }

/* Bouton Menu (toujours visible) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.nav-toggle .bars { display: inline-block; width: 1.5rem; }
.nav-toggle .bars span {
  display: block; height: 2px; background: currentColor;
  margin-block: 5px; transition: transform 0.3s ease, opacity 0.3s ease;
}
body.nav-open .nav-toggle .bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle .bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle .bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Surimpression plein écran */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #fff;
  overflow-y: auto;
  padding: clamp(6rem, 12vh, 8rem) clamp(1.5rem, 7vw, 6rem) 4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity 0.4s var(--ease-out-4), transform 0.4s var(--ease-out-4), visibility 0s linear 0.4s;
}
body.nav-open .site-nav { opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.4s var(--ease-out-4), transform 0.4s var(--ease-out-4), visibility 0s linear 0s; }
body.nav-open { overflow: hidden; }
/* Menu ouvert : l'en-tête (nom, recherche, langues, bouton Menu devenu croix) reste visible au-dessus
   du panneau, dans l'espace que son padding-top lui réserve. */
body.nav-open .header-top { position: relative; z-index: 45; }
/* Mouvement réduit : la règle globale donne 0,01 ms à toutes les transitions, ce qui ferait du
   passage à « visible » une vraie transition — le menu serait encore invisible au moment où le
   script y place le focus clavier. Ici, le menu apparaît sans transition. */
@media (prefers-reduced-motion: reduce) {
  .site-nav, body.nav-open .site-nav { transition: none !important; }
}

.site-nav ul.nav-root {
  display: block;
  max-width: var(--w-content);
  margin-inline: auto;
  width: 100%;
}
.site-nav .nav-root > li { border-top: 1px solid var(--line); }
.site-nav .nav-root > li:last-child { border-bottom: 1px solid var(--line); }
.site-nav .nav-root > li > a {
  display: block;
  position: relative;
  padding: clamp(0.7rem, 2vw, 1.15rem) 0;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.5vw, 2.8rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.25s ease;
}
.site-nav .nav-root > li > a:hover,
.site-nav .nav-root > li > a[aria-current] { color: var(--blue-500); padding-left: 0.6rem; }
.site-nav .has-sub > a::after {
  content: "+";
  position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%);
  font-weight: 300; color: var(--ink-500);
}
.site-nav li.sub-open.has-sub > a::after { content: "–"; color: var(--blue-500); }

.site-nav .sub {
  display: none;
  padding: 0.3rem 0 1.2rem;
  columns: 2 16rem;
  column-gap: 2.5rem;
}
.site-nav li.sub-open > .sub { display: block; }
.site-nav .sub a {
  display: block;
  break-inside: avoid;
  padding: 0.5rem 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink-700);
  text-decoration: none;
}
.site-nav .sub a::before { content: "⟶"; color: var(--blue-500); margin-right: 0.6rem; opacity: 0; transition: opacity 0.2s ease; }
.site-nav .sub a:hover { color: var(--blue-500); }
.site-nav .sub a:hover::before { opacity: 1; }

/* Hero PLEIN ÉCRAN (accueil) ---------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--navy-900) center / cover no-repeat;
  overflow: hidden;
}
.hero video,
.hero .hero-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.66) grayscale(0.12);
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.28) 0%, rgba(10, 10, 10, 0.12) 40%, rgba(10, 10, 10, 0.72) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(4rem, 12vh, 8rem);
}
.hero h1 { color: #fff; max-width: 16ch; }
.hero p {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  letter-spacing: 0.01em;
  margin-top: 1.3rem;
  max-width: 46ch;
}
.hero .btn { margin-top: 2.2rem; }

/* Repère de défilement */
.scroll-cue {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  animation: cue 1.8s var(--ease-out-4) infinite;
}
.scroll-cue svg { width: 1.6rem; height: 1.6rem; stroke: currentColor; }
@keyframes cue { 0%,100% { transform: translate(-50%, 0); opacity: 0.6; } 50% { transform: translate(-50%, 8px); opacity: 1; } }

/* Bandeau titre des pages intérieures -------------------------------------- */
.page-hero {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) clamp(2rem, 5vw, 3.5rem);
}
.page-hero h1 { max-width: 18ch; }
.page-hero h1::after {
  content: ""; display: block;
  width: 3.5rem; height: 2px;
  background: var(--blue-500);
  margin-top: 1.7rem;
}
.page-hero .lede {
  font-family: var(--serif); font-weight: 300;
  font-size: 1.3rem; color: var(--ink-700);
  max-width: 58ch; margin-top: 1.4rem;
}

.breadcrumb { font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ink-500); margin-bottom: 1.6rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--sky-200); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-500); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue-500); }
.breadcrumb [aria-current] { color: var(--ink-900); }

/* Sections ------------------------------------------------------------------ */
.section { padding-block: clamp(4rem, 9vw, 8.5rem); }
.section--sky { background: var(--sky-50); }
.section--navy { background: var(--navy-900); }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: rgba(255, 255, 255, 0.72); }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: clamp(2.2rem, 4vw, 3.6rem); flex-wrap: wrap;
}
.section-link {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  font-family: var(--serif); font-size: 0.98rem; font-weight: 500; letter-spacing: 0.02em;
  white-space: nowrap; text-decoration: none; color: var(--ink-900);
}
.section-link::before { content: "⟶"; color: var(--blue-500); transition: transform 0.2s ease; }
.section-link:hover { color: var(--blue-500); }
.section-link:hover::before { transform: translateX(4px); }

/* TEASERS image/texte alternés (façon liechtenstein.li) -------------------- */
.features { display: grid; gap: clamp(3.5rem, 8vw, 7rem); }
.feature { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 52rem) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--reverse .feature-media { order: 2; }
}
.feature-media { overflow: hidden; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 0.9s var(--ease-out-4); }
.feature:hover .feature-media img { transform: scale(1.03); }
.feature-body { max-width: 34rem; }
.feature-body h2 { margin-bottom: 1.1rem; }
.feature-body p { color: var(--ink-700); }
.feature-link {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px;
  margin-top: 1.3rem;
  font-family: var(--serif); font-size: 1.02rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--ink-900); text-decoration: none;
}
.feature-link::before { content: "⟶"; color: var(--blue-500); transition: transform 0.2s ease; }
.feature-link:hover { color: var(--blue-500); }
.feature-link:hover::before { transform: translateX(5px); }

/* Section « DOMAINES » : grandes cartes colorées qui débordent sur une bande sombre,
   icône en haut, gros titre, liens fléchés, coin plié + « + » (calqué sur la section
   « Bereiche » de liechtenstein.li), adapté au Sabourg. */
.directory { background: var(--dark); padding-block: 0 clamp(4.5rem, 9vw, 7.5rem); overflow: visible; }
.directory-grid {
  display: grid; gap: clamp(0.9rem, 1.8vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: clamp(-7rem, -8vw, -4.5rem);
}
@media (min-width: 60rem) { .directory-grid { grid-template-columns: repeat(4, 1fr); } }
.directory-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  background: var(--c, var(--blue-500));
  /* Encre de la carte : blanche par défaut, foncée sur les fonds clairs (.directory-card--light) */
  --ci: #fff;
  --cline: rgba(255, 255, 255, 0.35);
  color: var(--ci);
  padding: clamp(1.8rem, 2.5vw, 2.6rem) clamp(1.4rem, 2vw, 2rem) clamp(3rem, 4vw, 3.6rem);
  min-height: clamp(24rem, 38vw, 33rem);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out-4), box-shadow 0.5s var(--ease-out-4);
}
/* Survol : la carte se soulève, l'icône monte, le coin plié s'ouvre et le « + » pivote. */
.directory-card:hover, .directory-card:focus-within { transform: translateY(-10px); box-shadow: 0 26px 54px rgba(10, 10, 10, 0.38); }
.directory-card .dir-icon {
  width: clamp(3rem, 4vw, 3.9rem); height: clamp(3rem, 4vw, 3.9rem);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  transition: transform 0.55s var(--ease-out-4);
}
.directory-card:hover .dir-icon, .directory-card:focus-within .dir-icon { transform: translateY(-6px) scale(1.09); }
.directory-card .dir-icon svg { width: 100%; height: 100%; stroke: var(--ci); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.directory-card h3 {
  color: var(--ci); font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.15rem); line-height: 1.08; letter-spacing: -0.01em;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.directory-card ul { display: grid; gap: 0; margin-top: auto; list-style: none; padding: 0; }
.directory-card a {
  display: flex; align-items: center; gap: 0.5rem; min-height: 44px;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--cline);
  font-family: var(--serif); font-size: 0.98rem; font-weight: 500;
  color: var(--ci); text-decoration: none; line-height: 1.3;
  transition: padding-left 0.2s ease;
}
.directory-card li:first-child a { border-top: 1px solid var(--cline); }
.directory-card a::before { content: "⟶"; color: var(--ci); }
.directory-card a:hover { padding-left: 0.25rem; text-decoration: underline; text-underline-offset: 3px; }
.directory-card::after {
  content: ""; position: absolute; right: 0; bottom: 0; z-index: 1;
  border-style: solid;
  border-width: 0 0 clamp(2.4rem, 3.5vw, 3.2rem) clamp(2.4rem, 3.5vw, 3.2rem);
  border-color: transparent transparent var(--dark) transparent;
  transition: border-width 0.5s var(--ease-out-4);
}
.directory-card:hover::after, .directory-card:focus-within::after {
  border-width: 0 0 clamp(3.4rem, 5vw, 4.6rem) clamp(3.4rem, 5vw, 4.6rem);
}
.directory-card::before {
  content: "+"; position: absolute; right: 0.5rem; bottom: 0.05rem; z-index: 2;
  color: var(--c, var(--blue-500)); font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1;
  transition: transform 0.5s var(--ease-out-4);
}
.directory-card:hover::before, .directory-card:focus-within::before { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .directory-card, .directory-card .dir-icon,
  .directory-card:hover, .directory-card:focus-within,
  .directory-card:hover .dir-icon, .directory-card:focus-within .dir-icon,
  .directory-card:hover::before, .directory-card:focus-within::before { transform: none; }
  .directory-card:hover::after, .directory-card:focus-within::after {
    border-width: 0 0 clamp(2.4rem, 3.5vw, 3.2rem) clamp(2.4rem, 3.5vw, 3.2rem);
  }
}

/* GALERIE plein cadre ------------------------------------------------------- */
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: min(38rem, 88vw); gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery figure { position: relative; margin: 0; scroll-snap-align: start; overflow: hidden; }
.gallery img { width: 100%; height: min(70vh, 40rem); object-fit: cover; }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.6rem 1.4rem;
  color: #fff; font-family: var(--serif); font-weight: 400; font-size: 1.1rem;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 10, 0.72));
}

/* Grilles et cartes ---------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.card:hover { border-color: var(--ink-900); transform: translateY(-3px); color: inherit; }
.card-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--sky-100); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out-4); filter: grayscale(0.1); }
.card:hover .card-media img { transform: scale(1.04); filter: grayscale(0); }
.card-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.card-date { font-family: var(--serif); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-800); }
.card h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 500; }
.card:hover h3 { color: var(--blue-500); }
.card-excerpt { font-size: 0.92rem; color: var(--ink-700); }
.card-more {
  margin-top: auto; padding-top: 0.7rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--serif); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.03em; color: var(--ink-900);
}
.card-more::before { content: "⟶"; color: var(--blue-500); transition: transform 0.2s ease; }
.card:hover .card-more::before { transform: translateX(4px); }

.feature-card { text-align: left; }
.feature-card .card-media { aspect-ratio: 4 / 3; }

/* Carte produit (e-résidence) */
.product-card {
  background: #fff; color: var(--ink-700); padding: 2.1rem 1.9rem;
  display: flex; flex-direction: column; gap: 0.7rem; border-radius: 0;
  border-top: 3px solid var(--gold-500);
  transition: transform 0.3s ease;
}
.section--navy .product-card h3 { color: var(--ink-900); }
.section--navy .product-card p { color: var(--ink-700); }
.product-card:hover { transform: translateY(-4px); }
.product-card h3 { font-size: 1.35rem; font-weight: 500; }
.product-card .price { font-family: var(--serif); font-weight: 300; font-size: 2rem; color: var(--ink-900); margin-top: 0.4rem; }
.product-card .price small { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-500); }
.product-card ul { font-size: 0.9rem; color: var(--ink-700); display: grid; gap: 0.4rem; margin-block: 0.5rem; }
.product-card ul li { list-style: none; padding-left: 1.5rem; position: relative; }
.product-card ul li::before { content: "—"; position: absolute; left: 0; color: var(--gold-800); }
.product-card .btn { margin-top: auto; }

.secure-note { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); }
.secure-note svg { width: 1rem; height: 1rem; stroke: var(--blue-400); }

/* Bandeau d'appel (histoire, contact…) ------------------------------------- */
.band { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 48rem) { .band { grid-template-columns: 1.05fr 0.95fr; } }
.band-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }

/* Article (pages intérieures) ------------------------------------------------ */
.page-body { padding-block: clamp(2.8rem, 6vw, 5rem); }
.page-layout { display: grid; gap: 3.5rem; }
@media (min-width: 64rem) {
  .page-layout { grid-template-columns: minmax(0, 1fr) 16rem; }
  .side-nav { position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; }
}

.article { max-width: var(--w-article); font-size: 1.1rem; }
.article > * + * { margin-top: 1.35rem; }
.article h2 { margin-top: 3rem; font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 300; }
.article h3 { margin-top: 2.2rem; font-weight: 500; }
.article a { color: var(--link); }
.article img { border-radius: 0; }
.article figure { margin-block: 2.2rem; }
.article figcaption { font-size: 0.85rem; color: var(--ink-500); margin-top: 0.6rem; }
.article blockquote {
  border-left: 2px solid var(--blue-500);
  padding: 0.3rem 0 0.3rem 1.5rem;
  font-family: var(--serif); font-weight: 300; font-size: 1.4rem; line-height: 1.4; color: var(--ink-900);
}
.article ul, .article ol { padding-left: 1.3rem; }
.article li + li { margin-top: 0.4rem; }
.article hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.8rem; }
.article table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.article th, .article td { border: 1px solid var(--line); padding: 0.6rem 0.8rem; text-align: left; }
.article th { background: var(--sky-50); color: var(--ink-900); font-weight: 500; }

.side-nav h2 {
  font-family: var(--serif); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 1rem;
}
.side-nav ul { border-left: 1px solid var(--line); }
.side-nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0.5rem 0 0.5rem 1.2rem;
  font-size: 0.92rem; color: var(--ink-700); text-decoration: none;
  border-left: 2px solid transparent; margin-left: -1px;
}
.side-nav a:hover { color: var(--blue-500); }
.side-nav a[aria-current] { color: var(--ink-900); font-weight: 500; border-left-color: var(--blue-500); }

/* CTA plein bandeau ----------------------------------------------------------- */
.cta-banner { text-align: center; max-width: 44rem; margin-inline: auto; }
.cta-banner .btn { margin-top: 2rem; }

/* Accueil : divers ------------------------------------------------------------- */
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

.timeline { display: grid; gap: 0; }
.timeline a {
  display: flex; gap: 1.4rem; align-items: baseline; padding: 0.9rem 0;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink-900);
  font-family: var(--serif); font-weight: 400; font-size: 1.2rem;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.timeline a:first-child { border-top: 1px solid var(--line); }
.timeline .era {
  font-family: var(--serif); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-800); min-width: 9rem; flex-shrink: 0;
}
.timeline a:hover { color: var(--blue-500); padding-left: 0.5rem; }

.objectives { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .objectives { grid-template-columns: repeat(3, 1fr); } }
.objectives article { padding-top: 1.4rem; border-top: 2px solid var(--ink-900); }
.objectives h3 { margin-bottom: 0.9rem; }
.objectives p { font-size: 0.94rem; }
.objectives p + p { margin-top: 0.7rem; }

.agenda { display: grid; gap: 1.8rem; }
@media (min-width: 48rem) { .agenda { grid-template-columns: 1fr 1fr; } }
.agenda-item { border-left: 2px solid var(--blue-500); padding-left: 1.4rem; }
.agenda-item h3 { font-size: 1.25rem; font-weight: 500; margin-bottom: 0.4rem; }
.agenda-item p { font-size: 0.92rem; margin: 0.15rem 0; }
.agenda-item .when { color: var(--gold-800); font-weight: 500; }

.partners { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .partners { grid-template-columns: repeat(3, 1fr); } }
.partners h3 {
  font-family: var(--serif); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 1rem;
}
.partners ul { display: grid; gap: 0.5rem; }
.partners a { font-size: 0.95rem; text-decoration: none; color: var(--ink-900); }
.partners a:hover { color: var(--blue-500); }

.devise { text-align: center; max-width: 42rem; margin-inline: auto; }
.devise .script-note { display: block; font-size: clamp(2.4rem, 5.5vw, 3.6rem); line-height: 1.12; margin-top: 0.5rem; }
.devise p { font-size: 1rem; margin-top: 1.1rem; }

.welcome-media figure { margin: 0; }
.welcome-media img { border-radius: 0; }
.welcome-media figcaption { font-size: 0.85rem; color: var(--ink-500); margin-top: 0.6rem; }

/* Pied de page ----------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, 0.66); margin-top: auto; }
.footer-main {
  display: grid; gap: 2.5rem;
  padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.footer-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; }
@media (min-width: 64rem) { .footer-brand { grid-column: auto; display: block; } }
.footer-brand img { width: 3rem; margin-bottom: 0.9rem; }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: rgba(255, 255, 255, 0.55); }
.site-footer h2 {
  font-family: var(--serif); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: #fff; margin-bottom: 1.1rem;
}
.site-footer ul { display: grid; gap: 0; }
.site-footer a { color: rgba(255, 255, 255, 0.66); text-decoration: none; font-size: 0.92rem; }
.footer-main li a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a:hover { color: var(--blue-400); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14); padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: 0.82rem; color: rgba(255, 255, 255, 0.55);
}
.footer-bottom a { display: inline-block; padding-block: 0.5rem; color: rgba(255, 255, 255, 0.55); }
.footer-bottom a:hover { color: var(--blue-400); }

/* Recherche ---------------------------------------------------------------------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 10, 10, 0.98);
  display: none; padding: clamp(4rem, 12vh, 8rem) 1.5rem 2rem;
}
.search-overlay.is-open { display: block; }
.search-box { max-width: 42rem; margin-inline: auto; position: relative; }
.search-box .search-close { position: absolute; top: -3rem; right: 0; width: 44px; height: 44px; color: rgba(255, 255, 255, 0.7); font-size: 2rem; line-height: 1; }
.search-box .search-close:hover { color: #fff; }
.search-box input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff; font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 4vw, 2.4rem); padding: 0.5rem 0.2rem;
}
.search-box input::placeholder { color: rgba(255, 255, 255, 0.5); }
.search-box input:focus { outline: none; border-bottom-color: var(--blue-500); }
.search-results { margin-top: 2rem; display: grid; gap: 0.15rem; max-height: 55vh; overflow-y: auto; }
.search-results a { display: block; padding: 0.85rem 1rem; color: #fff; text-decoration: none; }
.search-results a:hover, .search-results a.is-active { background: rgba(255, 255, 255, 0.08); }
.search-results .result-section { display: block; font-family: var(--serif); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-400); }
.search-results .no-result { color: rgba(255, 255, 255, 0.7); padding: 0.85rem 1rem; }

/* 404 ------------------------------------------------------------------------------ */
.error-page { text-align: center; padding-block: calc(var(--header-h) + clamp(4rem, 12vw, 8rem)) clamp(4rem, 12vw, 8rem); }
.error-page .code { font-family: var(--serif); font-weight: 300; font-size: clamp(5rem, 15vw, 10rem); color: var(--blue-500); line-height: 1; }

/* Divers ------------------------------------------------------------------------- */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--ink-900); color: #fff; padding: 0.7rem 1.2rem; }
.skip-link:focus { left: 0; }

@media (max-width: 47.99rem) {
  .visually-hidden-mobile { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* ==========================================================================
   Ajouts éditoriaux : hero, chiffres clés, numérotation romaine,
   mises en garde, déclarations d'État. (variante v2)
   ========================================================================== */

/* Hero : surtitre clair sur média sombre + baseline */
.hero .eyebrow { color: rgba(255, 255, 255, 0.82); margin-bottom: 1.2rem; }
.hero-baseline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem) !important;
  color: #fff !important;
  letter-spacing: -0.005em;
  margin-top: 1.1rem;
  max-width: 26ch;
}
.hero p + p { margin-top: 0.9rem; }

/* Bande de chiffres clés */
.keyfigures-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.keyfigures {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--line);
}
.keyfigures li {
  list-style: none;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.6rem) clamp(1.6rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 40rem) {
  .keyfigures li + li { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 1.8rem); }
}
.kf-num {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.kf-num sup { font-size: 0.45em; vertical-align: super; }
.kf-unit { font-size: 0.42em; margin-left: 0.25rem; letter-spacing: 0; }
.kf-lab {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  line-height: 1.5;
}
.kf-lab em { font-style: normal; text-transform: none; letter-spacing: 0.02em; }

/* Numérotation romaine + définition sur les blocs colorés */
.directory-card .dir-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  color: var(--ci);
  margin-bottom: 0.7rem;
  display: block;
}
.directory-card .dir-desc {
  color: var(--ci);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.45;
  margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
  padding-bottom: clamp(1.1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--cline);
}
.directory-card .dir-icon { margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.directory-card h3 { margin-bottom: 0.9rem; }

/* Mise en garde / note de neutralité */
.disclaimer {
  border-left: 2px solid var(--blue-500);
  padding-left: 1.1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 62ch;
  font-size: 0.93rem;
  color: var(--ink-500);
}
.disclaimer--dark {
  margin-top: 2rem;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.75) !important;
  border-left-color: var(--blue-400);
}

/* Déclarations d'État (I / II / III) */
.declarations { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 60rem) { .declarations { grid-template-columns: repeat(3, 1fr); } }
.declarations article { padding-top: 1.3rem; border-top: 2px solid var(--ink-900); }
.decl-num {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  color: var(--blue-500);
  margin-bottom: 0.8rem;
}
.declarations h3 { margin-bottom: 0.8rem; font-size: 1.2rem; }
.declarations p { font-size: 0.95rem; }

/* Bloc de transparence « ce qu'elle est / n'est pas » ---------------------- */
.isnot { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 52rem) { .isnot { grid-template-columns: 1fr 1fr; } }
.isnot-col { padding-top: 1.3rem; border-top: 2px solid var(--ink-900); }
.isnot-col--no { border-top-color: var(--blue-500); }
.isnot-col h3 { font-size: 1.25rem; margin-bottom: 1.1rem; }
.isnot-col ul { display: grid; gap: 0.7rem; }
.isnot-col li { list-style: none; position: relative; padding-left: 1.8rem; font-size: 0.98rem; }
.isnot-col li::before {
  position: absolute; left: 0; top: 0;
  font-family: var(--serif); font-weight: 500;
}
.isnot-col--yes li::before { content: "✓"; color: var(--ink-900); }
.isnot-col--no li::before { content: "✕"; color: var(--blue-500); }

/* Procédure en étapes ------------------------------------------------------- */
.steps { display: grid; gap: clamp(1.8rem, 3.5vw, 2.6rem); padding: 0; }
@media (min-width: 60rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { list-style: none; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.step-num {
  display: block;
  font-family: var(--serif); font-weight: 500; font-size: 0.85rem;
  letter-spacing: 0.24em; color: var(--blue-500); margin-bottom: 0.8rem;
}
.steps h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.steps p { font-size: 0.93rem; }

/* FAQ (accordéon natif) ----------------------------------------------------- */
.faq { display: grid; gap: 0; margin-top: 0.4rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; padding: 0.85rem 0;
  cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1rem; font-weight: 500; color: var(--ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex-shrink: 0;
  font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1;
  color: var(--blue-500); transition: transform 0.3s var(--ease-out-4);
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--blue-500); }
.faq details > p { padding: 0 0 1.1rem; font-size: 0.95rem; color: var(--ink-700); max-width: 60ch; }

/* ==========================================================================
   Cartes e-résidence : 4 éditions métalliques (bronze, argent, or, platine)
   Les tailles internes suivent la largeur de la carte (container queries).
   ========================================================================== */
.editions { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
@media (min-width: 64rem) { .editions { grid-template-columns: repeat(4, 1fr); } }

.ecard-item { margin: 0; container-type: inline-size; }

.ecard {
  position: relative;
  aspect-ratio: 1.586;
  border-radius: 3.5cqw;
  padding: 6cqw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  font-size: 1rem;            /* repli si cqw non supporté */
  font-size: 4.4cqw;
  box-shadow: 0 12px 30px rgba(10, 10, 10, 0.22);
  transition: transform 0.45s var(--ease-out-4), box-shadow 0.45s var(--ease-out-4);
}
.ecard-item:hover .ecard { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(10, 10, 10, 0.3); }

/* Reflet diagonal + texture brossée */
.ecard::before, .ecard::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.ecard::before {
  background: linear-gradient(115deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 38%,
                                      rgba(255,255,255,0.12) 60%, rgba(255,255,255,0) 100%);
}
.ecard::after {
  background: repeating-linear-gradient(102deg, rgba(255,255,255,0.05) 0 1px, rgba(0,0,0,0.03) 1px 3px);
  opacity: 0.55;
}
.ecard > * { position: relative; z-index: 1; }

/* Éditions */
.ecard--bronze  { --ink: #f7e6d2; background: linear-gradient(150deg, #8a5427 0%, #4d2b13 38%, #7a4620 62%, #33190a 100%); }
.ecard--argent  { --ink: #2a2f36; background: linear-gradient(150deg, #ffffff 0%, #e4e9ef 28%, #c7d0da 52%, #f2f5f8 74%, #bcc6d2 100%); }
.ecard--or      { --ink: #3d2c07; background: linear-gradient(150deg, #f7e3a8 0%, #d6ac4d 30%, #b3822a 55%, #ecd489 78%, #c1932f 100%); }
.ecard--platine { --ink: #e9edf3; background: linear-gradient(150deg, #414954 0%, #171b20 40%, #262c33 64%, #0c0e11 100%); }

/* Éléments internes */
.ec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.ec-edition {
  font-family: var(--serif); font-weight: 500; font-size: 0.62em;
  letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.85;
}
.ec-brand { display: flex; align-items: flex-start; gap: 0.55em; }
.ec-state {
  font-family: var(--serif); font-weight: 500; font-size: 0.62em;
  line-height: 1.15; text-align: right;
}
.ec-arms { width: 1.55em; height: 1.55em; object-fit: contain; flex-shrink: 0; }

.ec-chiprow { display: flex; align-items: center; gap: 0.6em; margin-top: 1.1em; }
.ec-chip svg { width: 2.1em; height: auto; display: block; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: 0.75; }
.ec-chip svg rect { fill: rgba(255, 255, 255, 0.14); }
.ec-nfc svg { width: 0.85em; height: auto; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: 0.7; }

.ec-center { flex: 1; display: grid; place-items: center; }
.ec-title { font-family: var(--serif); font-weight: 400; font-size: 1.5em; letter-spacing: 0.01em; }

.ec-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.ec-motto { font-family: var(--serif); font-style: italic; font-size: 0.62em; opacity: 0.85; }
.ec-year { font-family: var(--serif); font-size: 0.58em; letter-spacing: 0.24em; opacity: 0.72; }

/* Légende sous la carte */
.ecard-item figcaption { margin-top: 1.2rem; text-align: center; }
.ecard-item figcaption h3 { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; margin-bottom: 0.4rem; }
.ecard-item figcaption p { font-size: 0.9rem; color: var(--ink-500); }

@media (prefers-reduced-motion: reduce) {
  .ecard, .ecard-item:hover .ecard { transform: none; }
}

/* Cartes d'édition dans une page article (colonne étroite) : 2 par ligne */
.article .editions { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem); margin-block: 1.8rem; }
.article .ecard-item figcaption h3 { font-size: 1.15rem; margin-top: 0; }
.article .ecard-item figcaption p { font-size: 0.85rem; }
@media (max-width: 34rem) { .article .editions { grid-template-columns: 1fr; } }



/* Carte de rubrique sur fond clair : l'encre passe en foncé (le blanc y serait illisible) */
.directory-card--light { --ci: #2a2205; --cline: rgba(0, 0, 0, 0.25); }
.directory-card--light:hover, .directory-card--light:focus-within { box-shadow: 0 26px 54px rgba(10, 10, 10, 0.28); }

/* Teaser à deux visuels : les deux églises des Prieurés côte à côte */
.feature-media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 1.5vw, 1rem); overflow: visible; }
.feature-media--pair figure { margin: 0; overflow: hidden; }
.feature-media--pair img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } /* height:auto : sinon l’image prend 100 % du cadre et la légende est rognée */
.feature-media--pair figcaption {
  margin-top: 0.6rem;
  font-family: var(--serif); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500);
}
.feature:hover .feature-media--pair img { transform: none; }
.feature-media--pair figure:hover img { transform: scale(1.04); }

/* ==========================================================================
   Ajouts de septembre 2026 : drapeau officiel, cartes des deux territoires,
   « La vision du Sabourg », listes du Gouvernement, cartes de liens,
   statut de projet. (variante v2)
   ========================================================================== */

/* Drapeau officiel, sous la devise */
.flag { max-width: 34rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0; text-align: center; }
.flag img { width: 100%; height: auto; border: 1px solid var(--sky-200); }
.flag .flag-note { margin-top: 0.9rem; font-size: 0.9rem; color: var(--ink-500); }

/* Section qui précède les blocs colorés : la bande sombre remonte sous les cartes (marge négative,
   qui fusionne avec celle de la section) ; on rend cette hauteur pour garder un vrai blanc au-dessus. */
.section--before-directory { padding-bottom: calc(clamp(4rem, 9vw, 8.5rem) + clamp(4.5rem, 8vw, 7rem)); }

/* Cartes des territoires : format presque carré, sans recadrage fort */
.feature-media--maps img { aspect-ratio: 20 / 21; object-position: center top; }

/* La vision du Sabourg : deux portes (Spiritualité / Innovation) */
.vision { display: grid; gap: clamp(2.8rem, 5vw, 4rem); }
@media (min-width: 52rem) { .vision { grid-template-columns: 1fr 1fr; } }
.vision-card { display: flex; flex-direction: column; }
.vision-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy-800); }
.vision-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out-4); }
.vision-card:hover .vision-media > img { transform: scale(1.03); }
.vision-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; padding-top: clamp(1.4rem, 3vw, 2rem); }
.vision-num { font-family: var(--serif); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.24em; color: var(--blue-400); }
.vision-body h3 { font-weight: 300; font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: -0.01em; }
.vision-body p { max-width: 42ch; }
.vision-body .btn { margin-top: auto; }

/* Visuel « Innovation » : deux cartes d'e-résidence posées sur fond sombre */
.vision-media--cards { background: radial-gradient(120% 95% at 72% 28%, var(--navy-700) 0%, var(--navy-900) 72%); }
.vision-media--cards .ecard-item { position: absolute; width: 56%; transition: transform 0.7s var(--ease-out-4); }
.vision-media--cards .ecard-item:first-child { left: 9%; top: 13%; transform: rotate(-9deg); }
.vision-media--cards .ecard-item:last-child { right: 8%; bottom: 12%; transform: rotate(5deg); }
.vision-card:hover .vision-media--cards .ecard-item:first-child { transform: rotate(-11deg) translate(-2%, -3%); }
.vision-card:hover .vision-media--cards .ecard-item:last-child { transform: rotate(3deg) translate(2%, -2%); }
.vision-media--cards .ecard-item:hover .ecard { transform: none; }

/* Emblème en tête de page */
.article .emblem { margin-block: 0 2rem; }
.article .emblem img { width: 6.9rem; height: auto; }

/* Listes du Gouvernement : membres du Conseil, adresses, Dicastères */
.members, .dicasteres, .linkcards {
  display: grid; column-gap: clamp(1.5rem, 3vw, 2.5rem); row-gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  padding: 0; margin-top: 1.6rem; border-top: 1px solid var(--line);
}
.members li, .dicasteres li, .linkcards li {
  list-style: none; margin: 0; border-bottom: 1px solid var(--line);
}
.members li { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.15rem 0 1.25rem; }
.members .m-role, .dicasteres .d-label {
  font-family: var(--serif); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-800);
}
.members .m-name { font-family: var(--serif); font-size: 1.12rem; font-weight: 500; color: var(--ink-900); line-height: 1.3; }
.members .m-title { font-size: 0.92rem; color: var(--ink-700); line-height: 1.45; }
.members a, .dicasteres a { font-size: 0.9rem; overflow-wrap: anywhere; }
.members .m-mails { display: flex; flex-direction: column; }

.dicasteres li { padding: 1.2rem 0 1.3rem; }
.dicasteres h3 { margin: 0 0 0.6rem; font-size: 1.3rem; font-weight: 500; }
.dicasteres p { margin: 0.35rem 0 0; font-size: 0.95rem; line-height: 1.45; }
.dicasteres .d-label { display: block; margin-bottom: 0.1rem; }

/* Cartes de liens (pages Innovation, clubs) */
.linkcards a, .linkcards .lc-static {
  display: flex; flex-direction: column; gap: 0.35rem; height: 100%;
  padding: 1.2rem 0 1.3rem; text-decoration: none; color: var(--ink-900);
}
.linkcards .lc-title { display: inline-flex; align-items: baseline; gap: 0.55rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; line-height: 1.3; }
.linkcards a .lc-title::before { content: "⟶"; color: var(--blue-500); transition: transform 0.2s ease; }
.linkcards .lc-desc { font-size: 0.92rem; color: var(--ink-500); line-height: 1.5; }
.linkcards a:hover .lc-title { color: var(--blue-500); }
.linkcards a:hover .lc-title::before { transform: translateX(4px); }

/* Boutons dans une page article (la couleur des liens d'article ne doit pas s'appliquer) */
.article .btn { text-decoration: none; margin-top: 0.4rem; }
.article .btn--gold, .article .btn--gold:hover { color: #fff; }

/* Texte courant dans une page « raw » : le reset supprime toutes les marges,
   ce conteneur redonne le rythme de lecture de l'article. */
.prose { max-width: var(--w-article); }
.prose > * + * { margin-top: 1.35rem; }
.prose h3 { margin-top: 2.2rem; font-weight: 500; }
.prose a { color: var(--link); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.4rem; }
.section-head + .prose { margin-top: 0; }

/* Tableau de données : defile seul si l'ecran est trop etroit */
.table-wrap { overflow-x: auto; }
.table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: 0.95rem; }
.table th, .table td { border: 1px solid var(--line); padding: 0.75rem 0.9rem; text-align: left; vertical-align: top; }
.table thead th {
  background: var(--sky-50); color: var(--ink-900); font-weight: 600;
  font-family: var(--serif); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.table tbody th { font-weight: 500; color: var(--ink-900); }

/* Composants de liste sur la bande sombre */
.section--navy .linkcards { border-top-color: rgba(255, 255, 255, 0.2); }
.section--navy .linkcards li { border-bottom-color: rgba(255, 255, 255, 0.2); }
.section--navy .linkcards a { color: #fff; }
.section--navy .linkcards .lc-desc { color: rgba(255, 255, 255, 0.66); }
.section--navy .linkcards a:hover .lc-title { color: var(--blue-400); }
.section--navy .linkcards a .lc-title::before { color: var(--blue-400); }

/* Intertitre d'une colonne « infrastructure publique / investissement prive » */
.isnot-col > p { margin-bottom: 1.1rem; font-size: 0.95rem; color: var(--ink-500); }

/* En-tête mobile : les langues passent dans le menu et « Site officiel » s'efface,
   le nom de la Principauté tient sur une ligne et l'en-tête ne mange plus l'écran. */
.nav-langs { display: none; }
@media (max-width: 47.99rem) {
  .header-actions > .lang-switch { display: none; }
  .site-header .brand-sub { display: none; }
  .site-header .brand-name { font-size: 1.02rem; letter-spacing: 0.01em; }
  .site-nav .nav-langs {
    display: flex; gap: 0.25rem;
    max-width: var(--w-content); margin: 0 auto 0.9rem; width: 100%;
  }
}

/* Une adresse longue ne doit jamais élargir la page */
.article a, .prose a { overflow-wrap: anywhere; }
.link-more a { max-width: 100%; }

/* Vignettes YouTube (480 × 360, vidéo 16:9 en boîte noire) : recadrées en 16:9, jamais agrandies */
.article a[href*="youtube.com"] img { width: 100%; max-width: 480px; aspect-ratio: 16 / 9; object-fit: cover; }

/* Portrait d'une personnalité (Conseil de la Couronne) : photo et titres côte à côte, empilés sur mobile */
.profil { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: end; }
.profil img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.profil-titres, .article .profil-titres { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.profil-titres li, .article .profil-titres li + li {
  margin: 0; padding: 0.75rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.35; color: var(--ink-900);
}
@media (max-width: 40rem) {
  .profil { grid-template-columns: minmax(0, 1fr); }
  .profil img { max-width: 22rem; }
}

/* Renvoi vers les menus de couleurs, en bas de chaque page */
.renvoi-domaines { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--sky-50); border-top: 1px solid var(--line); }
.renvoi-domaines .eyebrow { display: block; margin-bottom: 1.2rem; }
.renvoi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.6rem, 1.2vw, 1rem); list-style: none; margin: 0; padding: 0; }
@media (max-width: 47.99rem) { .renvoi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.renvoi-grid li { margin: 0; }
.renvoi-tuile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem;
  height: 100%; min-height: 8rem; box-sizing: border-box; padding: 1.1rem 1.2rem 1.2rem;
  background: var(--c); color: var(--ci); text-decoration: none;
  transition: transform 0.35s var(--ease-out-4);
}
.renvoi-tuile--1 { --c: var(--dom-1); --ci: #fff; }
.renvoi-tuile--2 { --c: var(--dom-2); --ci: #fff; }
.renvoi-tuile--3 { --c: var(--dom-3); --ci: var(--ink-900); }
.renvoi-tuile--4 { --c: var(--dom-4); --ci: #fff; }
.renvoi-tuile:hover { transform: translateY(-4px); color: var(--ci); }
.renvoi-num { font-family: var(--serif); font-weight: 300; font-size: 0.9rem; letter-spacing: 0.24em; }
.renvoi-titre {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6rem;
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.15;
}
.renvoi-titre::after { content: "⟶"; flex-shrink: 0; font-size: 0.9em; transition: transform 0.3s var(--ease-out-4); }
.renvoi-tuile:hover .renvoi-titre::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .renvoi-tuile:hover, .renvoi-tuile:hover .renvoi-titre::after { transform: none; }
}

/* Sections qui reçoivent le focus après un renvoi : pas de cadre autour de tout le bloc */
[tabindex="-1"]:focus { outline: none; }

/* Statut d'un projet (chambres, Quantum City) */
.status-note {
  display: inline-flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.95rem; border: 1px solid var(--blue-500);
  font-family: var(--serif); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-800);
}
.status-note::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--blue-500); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .vision-card:hover .vision-media > img { transform: none; }
  .vision-media--cards .ecard-item { transition: none; }
  .vision-card:hover .vision-media--cards .ecard-item:first-child { transform: rotate(-9deg); }
  .vision-card:hover .vision-media--cards .ecard-item:last-child { transform: rotate(5deg); }
}

/* Note sous les deux cartes des territoires (délimitation de 1860) */
.feature-media--pair .feature-note { grid-column: 1 / -1; margin: 0.2rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-500); }

/* Figures des projets (page Roya) : lien « voir en grand » dans la légende */
.article .figure-wide img { width: 100%; height: auto; }
.article .figure-wide figcaption a { white-space: nowrap; }

/* Masqué à l'écran, lu par les lecteurs d'écran */
.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; }

/* ==========================================================================
   Page « Les Dicastères » : grands blocs, une photo par Dicastère.
   Voile dégradé sous le texte : contraste AA garanti même sur une zone blanche.
   ========================================================================== */
.dicasteres-section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.dicasteres-intro { max-width: 62ch; font-size: 1.05rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.dicastere-grid { display: grid; gap: clamp(0.9rem, 1.6vw, 1.4rem); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .dicastere-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .dicastere-grid { grid-template-columns: repeat(3, 1fr); }
  .dicastere--cta { grid-column: span 2; }
}

.dicastere {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(30rem, 38vw, 33rem);
  background: var(--navy-800); color: #fff;
}
.dicastere-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out-4);
}
.dicastere:hover .dicastere-photo, .dicastere:focus-within .dicastere-photo { transform: scale(1.05); }
.dicastere-body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  padding: clamp(5.5rem, 9vw, 7rem) clamp(1.4rem, 2.4vw, 2rem) clamp(1.4rem, 2.4vw, 2rem);
  /* Le voile suit le bloc de texte (et non la hauteur de la carte) : la photo reste nette au-dessus,
     et le texte garde un fond d'au moins 66 % d'opacité, soit ≥ 4,5:1 même sur une photo blanche. */
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0, rgba(10, 10, 10, 0.66) clamp(4.5rem, 7.5vw, 5.8rem), rgba(10, 10, 10, 0.9) 100%);
}
.dicastere-kicker {
  font-family: var(--serif); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8);
}
.dicastere h3 {
  color: #fff; font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.05; letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}
.dicastere-people { display: grid; gap: 0.55rem; width: 100%; margin: 0; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.dicastere-people div { display: grid; gap: 0.1rem; }
.dicastere-people dt {
  font-family: var(--serif); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
}
.dicastere-people dd { margin: 0; font-size: 0.95rem; line-height: 1.35; color: #fff; }
.dicastere-mail {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.2rem;
  font-size: 0.9rem; color: #fff; text-underline-offset: 3px; overflow-wrap: anywhere;
}
.dicastere-mail:hover { color: #fff; text-decoration-thickness: 2px; }

/* Tuile de fin : le site du Gouvernement */
.dicastere--cta {
  justify-content: space-between; gap: 2rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: var(--blue-600); text-decoration: none;
  transition: background-color 0.3s ease;
}
.dicastere--cta:hover { background: var(--blue-700); color: #fff; }
.dicastere--cta .cta-title {
  display: inline-flex; align-items: baseline; gap: 0.8rem;
  font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1; color: #fff;
}
.dicastere--cta .cta-title::after { content: "⟶"; font-size: 0.6em; transition: transform 0.3s var(--ease-out-4); }
.dicastere--cta:hover .cta-title::after { transform: translateX(8px); }
.dicastere--cta .cta-text { max-width: 36ch; color: rgba(255, 255, 255, 0.88); }
.dicastere--cta .dicastere-kicker { color: #fff; } /* 4,38:1 en 80 % d'opacité sur le rouge : insuffisant */

.photo-credits { margin-top: 1.4rem; font-size: 0.8rem; color: var(--ink-500); }
.photo-credits a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .dicastere:hover .dicastere-photo, .dicastere:focus-within .dicastere-photo { transform: none; }
  .dicastere--cta:hover .cta-title::after { transform: none; }
}

/* ==========================================================================
   Audit du 12/09/2026 : sommaire de la Constitution, fiches du Cabinet,
   dépêches (3 colonnes + archives), menu déplié en colonnes sur grand écran.
   ========================================================================== */

/* Sommaire d'un texte long (Constitution) */
.article .toc { margin-block: 2rem 2.6rem; padding: 1.4rem 1.6rem 1.6rem; background: var(--sky-50); border-left: 2px solid var(--blue-500); }
.article .toc h2 { margin: 0 0 0.9rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); }
.article .toc ol { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.article .toc li { margin: 0; }
.article .toc a { display: flex; gap: 0.7rem; align-items: baseline; min-height: 44px; padding: 0.3rem 0; font-family: var(--serif); font-size: 0.98rem; color: var(--ink-900); text-decoration: none; }
.article .toc a::before { content: "⟶"; color: var(--blue-500); }
.article .toc a:hover { color: var(--blue-500); }
.toc-back {
  float: right; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: 0.5rem;
  font-size: 0.8em; color: var(--ink-500); text-decoration: none;
}
.toc-back:hover { color: var(--blue-500); }

/* Adresse d'une section de l'annuaire (Cabinet) */
.article .members-mail { margin-top: 1rem; font-size: 0.92rem; }

/* Paragraphe qui se reduit a un lien : c'est un lien d'action, donc cible d'au moins 44 px */
.link-more a { display: inline-flex; align-items: center; min-height: 44px; }
.link-more--sm a { font-size: 0.88rem; }

/* Dépêches : 3 colonnes, et archives sans lien clairement distinctes */
.cards-news { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
@media (min-width: 64rem) { .cards-news { grid-template-columns: repeat(3, 1fr); } }
.card--archive { background: var(--sky-50); border-style: dashed; }
.card--archive:hover { transform: none; border-color: var(--line); }
.card--archive h3 { color: var(--ink-700); }
.card-note { margin-top: auto; padding-top: 0.7rem; font-family: var(--serif); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }

/* Menu : accordéon sur mobile, rubriques dépliées en colonnes sur grand écran */
@media (min-width: 64rem) {
  .site-nav ul.nav-root { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 3vw, 2.8rem) clamp(2rem, 4vw, 4rem); }
  .site-nav .nav-root > li { border-bottom: 0; border-top: 1px solid var(--line); }
  .site-nav .nav-root > li:last-child { border-bottom: 0; }
  .site-nav .nav-root > li > a { font-size: clamp(1.35rem, 1.8vw, 1.75rem); padding: 0.9rem 0 0.5rem; }
  .site-nav .nav-root > li > a:hover, .site-nav .nav-root > li > a[aria-current] { padding-left: 0; }
  .site-nav .has-sub > a::after { content: none; }
  .site-nav .sub { display: block; columns: auto; padding: 0 0 0.6rem; }
  .site-nav .sub a { display: flex; align-items: center; min-height: 44px; padding: 0.4rem 0; }
}

/* ---------------------------------------------------------------------------
   Portraits, prieurés, éléments sans destination (2026-09-13)
   --------------------------------------------------------------------------- */

/* Les listes-composants gardent leurs propres marges dans un article :
   sans ce préfixe, « .article ul » et « .article li + li » l'emportent. */
.article .members, .article .dicasteres, .article .linkcards, .article .portraits { padding: 0; }
.article .members li + li, .article .dicasteres li + li,
.article .linkcards li + li, .article .portraits li + li { margin-top: 0; }

/* Portraits côte à côte (Conseil d'État) : même hauteur, photo entière, nom et fonction dessous */
.portraits { display: grid; gap: clamp(0.75rem, 2.5vw, 1.8rem); grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
@media (max-width: 40rem) { .portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.portraits li { list-style: none; margin: 0; }
.portrait, .article .portrait { display: flex; flex-direction: column; gap: 0.8rem; margin: 0; }
/* hauteur plafonnée à la hauteur réelle des photos (395 px) : elles ne sont jamais agrandies */
.portrait img { width: 100%; height: clamp(14rem, 62vw, 24.6875rem); object-fit: contain; object-position: bottom center; }
.portrait figcaption, .article .portrait figcaption { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; font-size: 1rem; color: var(--ink-700); }
.portrait .m-name { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; line-height: 1.3; color: var(--ink-900); }
.portrait .m-title { font-size: 0.9rem; line-height: 1.45; color: var(--ink-700); }
@media (max-width: 47.99rem) {
  .portrait .m-name { font-size: 0.9rem; }
  .portrait .m-title { font-size: 0.8rem; }
}

/* Les Prieurés : deux grandes cartes photo, chacune ouvre la page de son prieuré */
.prieure-grid { display: grid; gap: clamp(0.9rem, 1.6vw, 1.4rem); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .prieure-grid { grid-template-columns: repeat(2, 1fr); } }
.dicastere--link { min-height: clamp(30rem, 46vw, 40rem); }
.dicastere--link h3 { font-size: clamp(2.1rem, 3.4vw, 3rem); }
.dicastere--link .dicastere-link { color: inherit; text-decoration: none; }
.dicastere--link .dicastere-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dicastere-desc { max-width: 40ch; margin: 0; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.dicastere-more {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; margin-top: 0.3rem;
  font-family: var(--serif); font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; color: #fff;
}
.dicastere-more::after { content: "⟶"; transition: transform 0.3s var(--ease-out-4); }
.dicastere--link:hover .dicastere-more::after { transform: translateX(6px); }
@supports selector(:has(a)) {
  .dicastere--link .dicastere-link:focus-visible { outline: none; }
  .dicastere--link:has(.dicastere-link:focus-visible) { outline: 2px solid var(--blue-500); outline-offset: 3px; }
}

/* Élément d'une carte de l'accueil sans page dédiée : même rangée qu'un lien, sans flèche ni clic.
   Opacité 0,8 : 4,8:1 sur le magenta de la carte IV (0,72 tombait à 4,2:1). */
.directory-card .dir-static {
  display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding-block: 0.5rem;
  border-bottom: 1px solid var(--cline);
  font-family: var(--serif); font-size: 0.98rem; font-weight: 500; line-height: 1.3;
  color: var(--ci); opacity: 0.8;
}
.directory-card li:first-child .dir-static { border-top: 1px solid var(--cline); }
.directory-card .dir-static::before { content: "⟶"; visibility: hidden; }

/* Adresse d'un site disparu : affichée, mais plus cliquable */
.link-dead { color: var(--ink-500); }

@media (prefers-reduced-motion: reduce) {
  .dicastere--link:hover .dicastere-more::after { transform: none; }
}