/* Montastruc : hero d'accueil, carte ancienne */

/* ------------------------------------------------------------------- */
/* Polices hébergées avec le composant.                                 */
/* ------------------------------------------------------------------- */

/*
 * Les deux familles sont servies depuis le site et non depuis Google : une
 * feuille distante transmet l'adresse du visiteur à un tiers dès l'arrivée sur
 * l'accueil, ce que le RGPD ne permet pas sans consentement.
 *
 * Les fichiers sont des polices variables : un seul fichier par jeu de
 * caractères porte toute la plage de graisses, d'où une plage déclarée plutôt
 * qu'une règle par graisse. Seuls les jeux latin et latin étendu sont
 * embarqués, les seuls que le français et l'anglais du site emploient.
 */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url('fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url('fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/merriweather-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/merriweather-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Le nom du château, en petites capitales : coupe regular fournie par le
 * client, les petites capitales sont simulées en CSS (font-variant-caps).
 * Licence : un usage commercial de cette police nécessite une licence web,
 * à confirmer côté client avant mise en production.
 */
@font-face {
  font-family: "Intellecta Romana";
  src: url('fonts/Romana.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------- */
/* Feuille du composant, reprise de la maquette validée.                */
/* ------------------------------------------------------------------- */

.mtc {
  --ink: #13130F;
  --ink-strong: #000;
  --accent: #DDC80A;
  --paper: #FFFFFF;
  position: relative;
  width: 100%;
  min-height: var(--mtc-height, 100svh);
  overflow: hidden;
  background: #FFFFFF;
  font-family: Jost, "Helvetica Neue", Helvetica, sans-serif;
}

.mtc a { color: inherit; text-decoration: none; }

/* ---------- fond ---------- */

.mtc-map {
  position: absolute;
  inset: 0;
  background-image: var(--mtc-map, url('carte.jpg'));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 3800px auto;
  filter: grayscale(1) contrast(1.1) brightness(1.04);
  opacity: .28;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.mtc-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 24% at 50% 50%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse at center, rgba(255,255,255,0) 55%, rgba(255,255,255,.75) 100%);
  pointer-events: none;
}

/*
 * Fondu blanc du bas de la carte, posé par-dessus le cadre : le bas du cadre
 * s'efface avec la carte, pour que la hero se fonde dans la suite de la page
 * au lieu de s'arrêter sur une ligne.
 */
.mtc-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 45%, #FFFFFF 86%);
  pointer-events: none;
}

.mtc-frame {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(19,19,15,.32);
  outline: 1px solid rgba(19,19,15,.12);
  outline-offset: -8px;
  pointer-events: none;
}

.mtc-rose {
  position: absolute;
  right: 34px;
  top: 44px;
  width: clamp(64px, 5.5vw, 90px);
  height: clamp(64px, 5.5vw, 90px);
  overflow: visible;
  opacity: .35;
  pointer-events: none;
}

.mtc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.88);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

.mtc[data-open-sub] .mtc-overlay { opacity: 1; }

.mtc-attrib {
  position: absolute;
  right: 8px;
  bottom: 4px;
  margin: 0;
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: .01em;
  color: #8C8C84;
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- fils ---------- */

.mtc-threads { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.mtc--no-threads .mtc-threads { display: none; }

.mtc-line {
  stroke: rgba(19,19,15,.2);
  stroke-width: .8;
  transition: stroke .5s ease, stroke-width .5s ease, opacity .5s ease;
}

.mtc[data-active] .mtc-line { opacity: .12; }
.mtc[data-active] .mtc-line.is-active { opacity: 1; stroke: var(--accent); stroke-width: 1.5; }
.mtc[data-open-sub] .mtc-line.is-active { opacity: 0; }

/* L'éveil : au survol du bloc central, tous les fils passent à l'accent. */
.mtc[data-awake] .mtc-line { stroke: var(--accent); stroke-width: 1.5; }

/*
 * Impulsion qui parcourt chaque fil pendant l'éveil. La longueur du trait et
 * ses deux positions extrêmes sont posées par le script, en pixels d'écran :
 * exprimées en pourcentage, elles rendraient l'impulsion invisible sur les
 * fils courts.
 */
.mtc-ink {
  stroke: #13130F;
  stroke-width: 2.4;
  opacity: 0;
}

.mtc[data-awake] .mtc-ink {
  animation: mtcInkRun 2.8s cubic-bezier(.45,0,.25,1) calc(.1s + var(--i) * .09s) infinite;
}

.mtc--no-threads .mtc-ink { display: none; }

/* ---------- centre ---------- */

.mtc-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: min(80vw, 440px);
  isolation: isolate;
  transition: opacity .6s ease;
}

.mtc[data-active] .mtc-center { opacity: .2; }

.mtc-logo { display: flex; flex-direction: column; align-items: center; gap: 16px; animation: mtcBreathe 11s ease-in-out infinite; }
.mtc-logo img { display: block; height: auto; mix-blend-mode: multiply; }
.mtc-logo-mark { width: clamp(170px, 15vw, 230px); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.mtc[data-awake] .mtc-logo-mark { transform: translateY(-4px) scale(1.025); }

/*
 * Le nom du château est du texte et non plus une image. La coupe fournie est
 * la regular : les petites capitales sont simulées. Si la coupe à petites
 * capitales dessinées est livrée, retirer font-variant-caps et font-synthesis.
 */
.mtc-logo-text {
  display: block;
  width: auto;
  font-family: "Intellecta Romana", "Cormorant SC", Garamond, serif;
  font-weight: normal;
  font-variant-caps: small-caps;
  font-synthesis: small-caps;
  font-size: clamp(30px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: .015em;
  color: #13130F;
  white-space: nowrap;
  mix-blend-mode: normal;
}

.mtc-phrase {
  margin: 0;
  font-family: Merriweather, Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.5;
  color: #13130F;
  text-align: center;
  text-wrap: balance;
}

/* ---------- dates ---------- */

.mtc-facts {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  z-index: 1;
  width: min(86vw, 640px);
  text-align: center;
  pointer-events: none;
  transition: opacity .6s ease;
}

.mtc[data-active] .mtc-facts { opacity: .15; }

.mtc-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(4px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.22,1,.36,1), filter .9s ease;
}

.mtc-fact.is-on { opacity: 1; transform: translateY(0); filter: blur(0); }

.mtc-fact-date { display: flex; align-items: center; gap: 12px; }
.mtc-fact-date span { display: block; width: 28px; border-top: 1px solid var(--accent); }
.mtc-fact-date strong {
  flex: none;
  font-family: Merriweather, Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  white-space: nowrap;
  color: #13130F;
  text-shadow: 0 0 8px var(--paper), 0 0 14px var(--paper);
}

.mtc-fact-text {
  margin: 0;
  font-family: Merriweather, Georgia, serif;
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: rgba(19,19,15,.78);
  text-wrap: balance;
  text-shadow: 0 0 6px var(--paper), 0 0 12px var(--paper), 0 0 20px var(--paper);
}

/* ---------- items ---------- */

.mtc-node {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 22px;
  z-index: 2;
  transition: opacity .5s ease;
}

.mtc-node.is-open { z-index: 3; }
.mtc[data-active] .mtc-node:not(.is-open) { opacity: .18; }

.mtc-orbit { position: relative; animation: var(--drift) var(--dur) ease-in-out var(--delay) infinite; will-change: transform; }
.mtc-node.is-open .mtc-orbit { animation: none; }

.mtc-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 18px; outline: none; }

.mtc-label {
  position: relative;
  display: block;
  font-family: Merriweather, Georgia, serif;
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.25;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #13130F;
  text-shadow: 0 0 3px var(--paper), 0 0 8px var(--paper), 0 0 14px var(--paper), 0 0 22px var(--paper);
  transition: letter-spacing .5s cubic-bezier(.22,1,.36,1), color .4s ease;
}

.mtc-node.is-open .mtc-label { letter-spacing: .2em; color: #000; }

/* Surlignage rectangulaire à l'accent, déployé de gauche à droite à l'ouverture. */
.mtc-hl {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .22em .2em .22em .4em;
  line-height: 1.7;
  transition: background-size .5s cubic-bezier(.22,1,.36,1);
}

.mtc-node.is-open .mtc-hl { background-size: 100% 100%; }

.mtc-trail { display: block; width: 70%; height: 6px; overflow: visible; opacity: .75; transition: opacity .4s ease; }
.mtc-trail path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 5; animation: mtcMarch var(--march) linear infinite; }
.mtc-node.is-open .mtc-trail { opacity: 0; }

/* ---------- sous-menus ---------- */

.mtc-anchor { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }

.mtc-sub {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 0;
  width: clamp(280px, 24vw, 360px);
  pointer-events: none;
}

.mtc-node.is-open .mtc-sub { pointer-events: auto; }

.mtc-sub-item {
  display: block;
  padding: 6px 0;
  font-family: Merriweather, Georgia, serif;
  font-size: clamp(18px, 1.45vw, 21px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #13130F;
  text-shadow: 0 0 8px #FFFFFF;
  opacity: 0;
  filter: blur(3px);
  transform: translate(var(--ix), var(--iy));
  transition: opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1), filter .6s ease, color .3s ease, letter-spacing .4s ease;
}

.mtc-node.is-open .mtc-sub-item {
  opacity: 1;
  filter: blur(0);
  transform: translate(0, 0);
  transition-delay: calc(180ms + var(--j) * 70ms), calc(180ms + var(--j) * 70ms), calc(180ms + var(--j) * 70ms), 0s, 0s;
}

/* Soulignement à l'accent de 2 px, déployé au survol d'une sous-entrée. */
.mtc-ul {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 0% 2px;
  padding-bottom: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .45s cubic-bezier(.22,1,.36,1), color .3s ease;
}

.mtc-sub-item:hover .mtc-ul,
.mtc-sub-item:focus-visible .mtc-ul { background-size: 100% 2px; color: #000; }

/* placement : droite = colonne vers la gauche ; haut = colonne vers le bas */
@media (min-width: 780px) {
  .mtc-node[data-side="right"] .mtc-ul { background-position: 100% 100%; }
  .mtc-node { left: calc(var(--dx) * 1%); top: calc(var(--dy) * 1%); }
  .mtc-node[data-side="right"] { --ix: 14px; }
  .mtc-node[data-side="left"] { --ix: -14px; }
  .mtc-node[data-dir="down"] { --iy: -6px; }
  .mtc-node[data-dir="up"] { --iy: 6px; }
  .mtc-node[data-side="right"] .mtc-sub { left: 16px; text-align: right; }
  .mtc-node[data-side="left"] .mtc-sub { left: -16px; }
  .mtc-node[data-side="right"][data-dir="down"] .mtc-sub { top: 50px; transform: translate(-100%, 0); }
  .mtc-node[data-side="left"][data-dir="down"] .mtc-sub { top: 50px; transform: translate(0, 0); }
  .mtc-node[data-side="right"][data-dir="up"] .mtc-sub { top: -50px; transform: translate(-100%, -100%); }
  .mtc-node[data-side="left"][data-dir="up"] .mtc-sub { top: -50px; transform: translate(0, -100%); }
}

@media (min-width: 780px) and (max-width: 1199px) { .mtc-map { background-size: 2700px auto; } }

/* ---------- mobile ---------- */

@media (max-width: 779px) {
  .mtc-map { background-size: 1900px auto; }
  .mtc-frame { inset: 10px; }
  .mtc-rose { width: 44px; height: 44px; right: 16px; top: 22px; bottom: auto; }
  .mtc-attrib { right: 6px; bottom: 1px; font-size: 7px; }
  .mtc-center { gap: 14px; }
  .mtc-logo { gap: 10px; }
  .mtc-logo-mark { width: min(130px, 34vw); }
  .mtc-logo-text { font-size: 24px; }
  .mtc-phrase { font-size: 15px; }
  .mtc-facts { bottom: 26px; }
  .mtc-fact-date strong { font-size: 13px; }
  .mtc-fact-text { font-size: 13.5px; }

  .mtc-node { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); }
  .mtc-label { font-size: 12.5px; white-space: normal; max-width: 36vw; }

  .mtc-sub { width: min(270px, 70vw); gap: 10px; }
  .mtc-sub-item { padding: 7px 0; font-size: 15px; }
  .mtc-node[data-side-m="right"] .mtc-ul { background-position: 100% 100%; }

  .mtc-node[data-side-m="right"] { --ix: 14px; }
  .mtc-node[data-side-m="left"] { --ix: -14px; }
  .mtc-node[data-dir-m="down"] { --iy: -6px; }
  .mtc-node[data-dir-m="up"] { --iy: 6px; }
  .mtc-node[data-side-m="right"] .mtc-sub { left: 16px; text-align: right; }
  .mtc-node[data-side-m="left"] .mtc-sub { left: -16px; }
  .mtc-node[data-side-m="right"][data-dir-m="down"] .mtc-sub { top: 52px; transform: translate(-100%, 0); }
  .mtc-node[data-side-m="left"][data-dir-m="down"] .mtc-sub { top: 52px; transform: translate(0, 0); }
  .mtc-node[data-side-m="right"][data-dir-m="up"] .mtc-sub { top: -52px; transform: translate(-100%, -100%); }
  .mtc-node[data-side-m="left"][data-dir-m="up"] .mtc-sub { top: -52px; transform: translate(0, -100%); }
}

/* ---------- animations ---------- */

@keyframes mtcDriftA { 0% { transform: translate3d(0,0,0); } 25% { transform: translate3d(11px,-9px,0); } 50% { transform: translate3d(3px,-16px,0); } 75% { transform: translate3d(-9px,-6px,0); } 100% { transform: translate3d(0,0,0); } }
@keyframes mtcDriftB { 0% { transform: translate3d(0,0,0); } 25% { transform: translate3d(-13px,7px,0); } 50% { transform: translate3d(-5px,16px,0); } 75% { transform: translate3d(8px,8px,0); } 100% { transform: translate3d(0,0,0); } }
@keyframes mtcDriftC { 0% { transform: translate3d(0,0,0); } 30% { transform: translate3d(14px,8px,0); } 60% { transform: translate3d(-4px,15px,0); } 80% { transform: translate3d(-11px,-5px,0); } 100% { transform: translate3d(0,0,0); } }
@keyframes mtcDriftD { 0% { transform: translate3d(0,0,0); } 30% { transform: translate3d(-10px,-12px,0); } 55% { transform: translate3d(7px,-14px,0); } 80% { transform: translate3d(13px,4px,0); } 100% { transform: translate3d(0,0,0); } }
@keyframes mtcMarch { to { stroke-dashoffset: -24; } }
@keyframes mtcBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes mtcInkRun {
  0% { stroke-dashoffset: var(--ink-from); opacity: 0; }
  8% { opacity: 1; }
  55% { stroke-dashoffset: var(--ink-to); opacity: 1; }
  62%, 100% { stroke-dashoffset: var(--ink-to); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mtc-orbit, .mtc-logo, .mtc-trail path { animation: none !important; }
  .mtc-ink { animation: none !important; }
}

/* ------------------------------------------------------------------- */
/* Intégration au thème.                                                */
/* ------------------------------------------------------------------- */

/*
 * Tout ce qui précède est la feuille de la maquette, sans valeur de géométrie,
 * de couleur ou de durée retouchée. Ce qui suit ne relève pas du design mais de
 * l'accueil du composant dans le thème.
 */

/*
 * Le thème colore et souligne tous les liens de la zone de contenu avec des
 * sélecteurs plus forts que ceux de la maquette, et sa feuille arrive après
 * celle-ci : sans cette reprise, les sous-entrées prendraient le jaune du thème
 * et se souligneraient au survol. Le préfixe par l'identifiant du corps de page
 * suffit à reprendre la main sans recourir à « !important ».
 */
#top .mtc a,
#top .mtc a:hover,
#top .mtc a:focus,
#top .mtc a:visited {
  color: inherit;
  text-decoration: none;
}

#top .mtc .mtc-sub-item { color: var(--ink); }

/*
 * Le thème colore les « strong » de la zone de contenu dans son jaune : la
 * date du bandeau doit rester noire, seuls ses deux filets portent l'accent.
 */
#top .mtc .mtc-fact-date strong { color: #13130F; }
#top .mtc .mtc-fact-date span { display: block; flex: none; width: 28px; height: 0; border-top: 1px solid var(--accent); }

/*
 * La phrase sous le logo est le titre principal de la page. Le thème impose à
 * tous les « h1 » sa taille, sa graisse, son espacement et ses marges, par des
 * sélecteurs à deux identifiants : ils sont ramenés ici au rendu de la
 * maquette, pour que le changement de balise ne se voie pas.
 */
#top #wrap_all .mtc h1.mtc-phrase {
  margin: 0;
  padding: 0;
  font-family: Merriweather, Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: #13130F;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 779px) {
  #top #wrap_all .mtc h1.mtc-phrase { font-size: 15px; }
}

/*
 * Le thème repeint la bordure de tous les blocs de la zone de contenu dans un
 * gris presque blanc : sans cette reprise, le filet extérieur du cadre
 * disparaît et seul le filet intérieur reste visible.
 */
#top #wrap_all .mtc .mtc-frame {
  border-color: rgba(19,19,15,.32);
  outline-color: rgba(19,19,15,.12);
}
#top .mtc .mtc-sub-item:hover,
#top .mtc .mtc-sub-item:focus-visible { color: #000; }

/*
 * Le constructeur de pages enferme le contenu dans une colonne bornée en
 * largeur. Les positions des items étant exprimées en pourcentage de la hero,
 * une colonne étroite resserrerait toute la carte. Plutôt que de déshabiller la
 * colonne, ce qui toucherait aussi le reste de la page, le composant s'élargit
 * lui-même à la largeur de la fenêtre et se recentre par des marges négatives :
 * la règle est locale, et une page qui porterait d'autres sections garde sa
 * mise en page.
 */
#top .montastruc-constellation {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/*
 * La largeur de fenêtre inclut la barre de défilement verticale : sans cette
 * réserve, le composant dépasserait de quelques pixels et la page gagnerait un
 * défilement horizontal. Le thème pose l'identifiant « top » sur le corps de
 * page lui-même, d'où le sélecteur composé et non descendant. La coupe ne vaut
 * que là où le composant est présent, et « clip » plutôt que « hidden » pour ne
 * pas créer de contexte de défilement qui casserait les éléments collants.
 */
#top.montastruc-page-constellation,
#top.montastruc-page-constellation #wrap_all {
  overflow-x: clip;
}

/*
 * Sur les deux accueils, la carte tient lieu de navigation et doit occuper
 * l'écran entier dès le chargement : l'en-tête du thème (logo, menu, icônes
 * sociales et sélecteur de langue) y est retiré, sur grand écran comme sur
 * mobile. Les deux pages sont nommées plutôt que déduites de la présence du
 * composant, pour qu'une pose du shortcode sur une autre page par erreur ne
 * fasse jamais disparaître son en-tête.
 *
 * Deux sélecteurs, parce que la ligne de menu, « header_main_alternate », est un
 * bloc que le thème peut sortir de l'en-tête selon ses réglages de mise en
 * page. Sur la structure actuelle elle y est contenue, et la règle reste juste
 * le jour où un réglage du thème l'en détache. « !important » garantit qu'aucune
 * règle du thème, dont les sélecteurs enchaînent plusieurs identifiants, ne la
 * réaffiche.
 *
 * L'en-tête du thème étant fixe, le thème réserve sa hauteur en haut du
 * contenu par une marge intérieure : retirée avec lui, elle laisserait une
 * bande vide au-dessus de la carte.
 */
body.page-id-9 #header,
body.page-id-9 #header_main_alternate,
body.page-id-9949 #header,
body.page-id-9949 #header_main_alternate {
  display: none !important;
}

body.page-id-9 #main,
body.page-id-9949 #main {
  padding-top: 0 !important;
}

/*
 * Le thème encadre la page d'une bordure de 15 px sur grand écran (« framed
 * box »), fixe en haut et en bas : sur une carte en 100svh, elle masque les
 * 30 derniers pixels au chargement, mention de la carte comprise. Retirée sur
 * ces deux pages seulement, pour que la carte tienne tout l'écran comme
 * demandé, sans toucher à la mise en page encadrée du reste du site.
 */
html.html_av-framed-box:has(body.page-id-9),
html.html_av-framed-box:has(body.page-id-9949) {
  padding: 0 !important;
}

body.page-id-9 .av-frame,
body.page-id-9949 .av-frame {
  display: none !important;
}

/*
 * La section Enfold qui porte le composant a sa propre flèche de défilement,
 * posée dans le contenu de la page : sur une hero en plein écran, elle
 * recouvre le bandeau des dates. La retirer en CSS évite de toucher au
 * contenu de la page pour un élément que le thème rend lui-même.
 */
body.page-id-9 .scroll-down-link,
body.page-id-9949 .scroll-down-link {
  display: none !important;
}

/*
 * Le thème trace un filet en haut de la section qui suit la hero. Posé juste
 * sous le fondu blanc, il couperait la descente vers la suite de la page : il
 * est retiré sur les deux accueils, les autres séparations restent en place.
 */
body.page-id-9 #after_section_1,
body.page-id-9949 #after_section_1 {
  border-top-color: transparent !important;
}