/* ─── Coquille visuelle des pages rendues côté serveur (articles, blog) ───────
   PORT de styles.css pour que ces pages soient visuellement indiscernables du
   site React : en-tête fixe (marque, pastille de navigation avec les bits 0/1,
   onglet Services déroulant, hamburger sous 1415px), menu mobile plein écran,
   boutons, grille de fond animée, pied de page complet, curseur custom.

   Les valeurs sont reprises telles quelles de styles.css. DETTE CONNUE : c'est
   une duplication. Toute retouche de l'en-tête, du pied ou des boutons dans
   styles.css doit être reportée ici (et inversement). L'alternative évoquée est
   de faire lire le manifeste de build aux pages serveur pour charger le
   styles.css compilé — non fait à ce jour.

   Chargé APRÈS article.css : les quelques surcharges de tokens ci-dessous sont
   donc bien celles qui s'appliquent. */

/* ── Tokens alignés sur styles.css ──
   --gutter et --maxw différaient (5vw / 1120px ici contre 4vw / 1320px sur le
   site) : les gouttières de l'en-tête et la largeur du pied ne tombaient pas au
   même endroit que sur le site. --readw garde la colonne de lecture des
   articles à sa largeur d'origine. */
:root {
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1320px;
  --readw: 1120px;

  /* Hauteur de l'en-tête : le logo la détermine (il est plus haut que le
     bouton et que le hamburger). Sert à réserver la place sous l'en-tête
     FIXE, à décaler le sommaire sticky et à caler les sauts d'ancre. */
  --hd-logo: clamp(73px, 7.2vw, 99px);
  --hd-pad: 20px;
  --hd-pad-scrolled: 10px;
  --hd-h: calc(var(--hd-logo) + var(--hd-pad) * 2);
  --hd-h-scrolled: calc(var(--hd-logo) + var(--hd-pad-scrolled) * 2);
}

/* ── Base Lenis ──
   Reprise de node_modules/lenis/dist/lenis.css : sans ces règles, la page peut
   se retrouver avec une hauteur figée et les conteneurs [data-lenis-prevent]
   laissent filer le défilement au parent. */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}
.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* Les sauts d'ancre ne doivent pas passer sous l'en-tête fixe. On vise l'état
   scrollé : c'est celui de l'en-tête au moment où le saut se termine. */
html {
  scroll-padding-top: calc(var(--hd-h-scrolled) + 24px);
}

/* L'en-tête est FIXE comme sur le site (le contenu glisse dessous au
   défilement) : il faut donc réserver sa hauteur en haut de page. */
.wrap {
  padding-top: calc(var(--hd-h) + clamp(28px, 4vw, 54px));
}

/* ── Grille de fond animée ──
   Couche fixe du site (prop `bgGrid` de PageShell, classe .svcp-page-grid). */
.svcp-page-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.35;
  animation: hero-gridpan 30s linear infinite;
}
@keyframes hero-gridpan {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 80px 80px;
  }
}

/* ── En-tête ── */
.hd {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: var(--hd-pad) var(--gutter);
  transition:
    padding 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    backdrop-filter 0.3s ease;
  border-bottom: 1px solid transparent;
}
.hd--scrolled {
  padding: var(--hd-pad-scrolled) var(--gutter);
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
/* Menu ouvert : l'en-tête passe au-dessus du menu et de son voile, sans fond
   (même règle que styles.css, voir le commentaire là-bas). */
.hd--menu {
  z-index: 160;
  right: var(--sbw, 0px);
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hd__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 1.8vw, 22px);
  letter-spacing: -0.005em;
}
.logomark {
  display: inline-flex;
  width: var(--hd-logo);
  height: var(--hd-logo);
  flex-shrink: 0;
  color: var(--ink);
}
.logomark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hd__wordmark {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  white-space: nowrap;
}
.hd__wm-accent {
  color: var(--accent);
}
.hd__nav {
  display: flex;
  gap: 6px;
  justify-self: center;
  background: var(--ink-1);
  border: 1px solid var(--line);
  padding: 6px;
  border-radius: 999px;
}
.hd__nav a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-d);
  white-space: nowrap;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.hd__nav-top {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
/* Référence au code binaire : 1 sous l'onglet actif, 0 sinon. */
.hd__nav-bits {
  font-size: 8.5px;
  letter-spacing: 3px;
  line-height: 1;
  color: var(--ink-dd);
  transition: color 0.2s ease;
}
.hd__nav a.is-active .hd__nav-bits {
  color: var(--accent);
}
.hd__nav a:hover {
  color: var(--ink);
}
.hd__nav a.is-active {
  background: var(--ink-3);
  color: var(--ink);
}

/* ── Onglet Services : menu déroulant (desktop) ── */
.hd__nav-group {
  position: relative;
  display: inline-flex;
}
.hd__nav-caret {
  margin-left: -3px;
  opacity: 0.6;
  transition: transform 0.25s ease;
}
.hd__nav-group.is-open .hd__nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}
.hd__mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 12px; /* pont invisible : évite la coupure au survol trigger → carte */
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
.hd__nav-group.is-open .hd__mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hd__mega-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 344px;
  padding: 10px;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: 0 24px 55px -22px rgba(0, 0, 0, 0.75);
  transform: translateY(-8px);
  transition: transform 0.25s ease;
}
.hd__nav-group.is-open .hd__mega-card {
  transform: translateY(0);
}
.hd__mega .hd__mega-item {
  display: flex;
  flex-direction: row; /* protège du flex-direction:column de .hd__nav a */
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--ink);
  white-space: normal;
  transition: background 0.18s ease;
}
.hd__mega .hd__mega-item:hover {
  background: var(--ink-3);
}
.hd__mega-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--ink-3);
  color: var(--accent);
}
.hd__mega-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hd__mega-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.hd__mega-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-d);
}
.hd__right {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}
.hd__hamb {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--ink-1);
  color: var(--ink);
  cursor: pointer;
}
/* Les deux barres qui se croisent en X (même dessin et mêmes transitions que
   styles.css, .hd__hamb-bars). */
.hd__hamb-bars {
  position: relative;
  display: block;
  width: 15px;
  height: 10px;
}
.hd__hamb-bars > span {
  position: absolute;
  left: 0;
  top: calc(50% - 0.75px);
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition:
    rotate 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    translate 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0.16s;
}
.hd__hamb-bars > span:first-child {
  translate: 0 -4.25px;
}
.hd__hamb-bars > span:last-child {
  translate: 0 4.25px;
}
.hd__hamb.is-open .hd__hamb-bars > span {
  translate: 0 0;
  transition:
    translate 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    rotate 0.3s cubic-bezier(0.3, 0, 0.2, 1.35) 0.16s;
}
.hd__hamb.is-open .hd__hamb-bars > span:first-child {
  rotate: 45deg;
}
.hd__hamb.is-open .hd__hamb-bars > span:last-child {
  rotate: -45deg;
}

/* ── Boutons (mêmes dessins que le site) ── */
.hd .btn,
.mm .btn {
  --bh: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--bh);
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.hd .btn:hover,
.mm .btn:hover {
  transform: translateY(-1px);
}
.hd .btn--ghost {
  background: var(--ink-2);
  border-color: var(--line-2);
}
.hd .btn--ghost:hover {
  background: var(--ink-3);
}
.mm .btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.mm .btn--primary:hover {
  background: color-mix(in oklab, var(--accent) 88%, white);
}
.btn__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  align-self: center;
}

/* ── Menu mobile plein écran ── */
.mm {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--bg);
  transform: translateY(-100%);
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 20px var(--gutter);
  /* Conteneur de défilement : borne le contenu à la boîte, sinon sur un
     viewport court le débordement réapparaît par le haut (menu fermé qui
     « bave »). Rend aussi le menu scrollable si l'écran est trop court. */
  overflow-y: auto;
}
.mm--open {
  transform: none;
}
/* Ne fait que réserver la hauteur de l'en-tête, affiché par-dessus (c'est
   son bouton qui ferme le menu). */
.mm__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  visibility: hidden;
}
/* Voile du tiroir : n'existe que sur portable (bloc ≥ 901 px plus bas). */
.mm-backdrop {
  display: none;
}
.mm__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 40px;
  flex: 1;
}
.mm__nav a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 500;
}
.mm__n {
  color: var(--ink-dd);
  align-self: center;
}
.mm__lbl {
  color: var(--ink);
}
.mm__arrow {
  color: var(--ink-d);
  align-self: center;
}
.mm__nav a:hover .mm__lbl {
  color: var(--accent);
}
/* Le menu mobile est le seul endroit sans CTA dans l'en-tête : bouton pleine
   largeur juste au-dessus du pied. */
.mm__cta {
  width: 100%;
  justify-content: center;
  margin-top: 24px;
}
.mm__foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

/* ── Onglet Services : accordéon (menu mobile) ── */
.mm__row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.mm__nav .mm__row .mm__link {
  flex: 1;
  grid-template-columns: auto 1fr;
  border-bottom: 0;
}
.mm__expand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  width: 56px;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--ink-d);
  cursor: pointer;
}
.mm__expand svg {
  transition: transform 0.3s ease;
}
.mm__expand.is-open {
  color: var(--accent);
}
.mm__expand.is-open svg {
  transform: rotate(180deg);
}
.mm__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.mm__sub.is-open {
  grid-template-rows: 1fr;
}
.mm__sub-inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mm__nav .mm__sub-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 4px 15px 8px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-d);
}
.mm__nav .mm__sub-inner .mm__sub-link:last-child {
  border-bottom: 0;
}
.mm__sub-link:hover {
  color: var(--accent);
}
.mm__sub-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ink-2);
  color: var(--accent);
}
.mm__sub-link .mm__arrow {
  margin-left: auto;
}

/* ── Responsive : mêmes points de rupture que le site ──
   1415px — la pastille et le bouton disparaissent au profit du hamburger. */
@media (max-width: 1415px) {
  :root {
    --hd-logo: clamp(58px, 7vw, 74px);
    --hd-pad: 14px;
    --hd-pad-scrolled: 8px;
  }
  .hd {
    gap: 16px;
  }
  .hd__brand {
    font-size: clamp(16px, 2vw, 19px);
  }
  .hd__wordmark {
    gap: 6px;
  }
  .hd__nav {
    display: none;
  }
  .hd__hamb {
    display: inline-flex;
    width: 38px;
    height: 38px;
  }
  .hd__right .btn {
    display: none;
  }
  .mm {
    padding: 14px var(--gutter);
  }
  .mm__nav {
    margin-top: 32px;
  }
  .mm__nav a {
    font-size: 27px;
    padding: 16px 0;
  }
}

/* ── Pied de page ── */
.ft {
  border-top: 1px solid var(--line);
  padding: 80px var(--gutter) 28px;
  margin-top: 60px;
  background: linear-gradient(180deg, var(--bg), var(--ink-1));
}
/* Retour en haut : petit rond fléché fixé en bas à droite, visible après un
   écran de scroll (même règle que styles.css ; script dans htmlChrome.js). */
.totop {
  position: fixed;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink-d);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s linear 0.3s,
    color 0.2s ease,
    border-color 0.2s ease;
}
.totop.is-shown {
  opacity: 0.7;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s,
    color 0.2s ease,
    border-color 0.2s ease;
}
.totop.is-shown:hover,
.totop.is-shown:focus-visible {
  opacity: 1;
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
}
.totop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.totop__ico {
  rotate: -90deg;
  transition: translate 0.25s ease;
}
.totop:hover .totop__ico {
  translate: 0 -2px;
}
@media (prefers-reduced-motion: reduce) {
  .totop,
  .totop.is-shown {
    transform: none;
    transition: none;
  }
}
.ft__top {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns:
    minmax(320px, 1.65fr) 0.9fr 0.95fr
    minmax(280px, 1.25fr);
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.ft__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ft__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.005em;
}
.ft__brand .logomark {
  width: 40px;
  height: 40px;
}
.ft__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
}
.ft__col a {
  color: var(--ink-d);
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Cible tactile ≥ 24 px de haut (WCAG 2.2, audit 2026-09-26) : les liens
     faisaient 22 px sur mobile. */
  min-height: 24px;
}
.ft__col a:hover {
  color: var(--accent);
}
/* « Contact » du plan de site ouvre la modale : c'est un bouton, pas un lien,
   mais il doit rester indiscernable de ses voisins. */
.ft__linkbtn {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink-d);
  cursor: pointer;
  transition: color 0.2s ease;
}
.ft__linkbtn:hover {
  color: var(--accent);
}
.ft__h {
  color: var(--ink-dd);
  margin-bottom: 4px;
}
.ft__about {
  color: var(--ink-d);
  font-size: 14.5px;
  max-width: 44ch;
  margin: 0;
  text-wrap: pretty;
}
.ft__loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-d);
  margin-top: 4px;
}
.ft__col--legal p {
  color: var(--ink-d);
  font-size: 13px;
  margin: 0 0 12px;
  line-height: 1.6;
}
.ft__legal-addr {
  color: var(--ink-dd) !important;
}
.ft__legal-links {
  margin-top: 8px !important;
  font-size: 12.5px !important;
}
.ft__legal-links a {
  color: var(--ink-dd);
}
.ft__bottom {
  max-width: var(--maxw);
  margin: 28px auto 0;
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Sous-navigation services dans le pied */
.ft__servnav {
  margin: 8px 0 4px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ft__servnav a {
  font-size: 13.5px;
  color: var(--ink-dd);
}
.ft__servnav a:hover {
  color: var(--accent);
}
/* Chevron indicateur : masqué par défaut (tactile = toujours déplié) */
.ft__servnav-caret {
  display: none;
}
/* Repli au survol (uniquement là où le hover existe ; tactile = déplié) */
@media (hover: hover) {
  .ft__nav-services {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows 0.3s ease;
  }
  .ft__nav-services:hover,
  .ft__nav-services:focus-within {
    grid-template-rows: auto 1fr;
  }
  .ft__servnav-caret {
    display: inline-block;
    opacity: 0.55;
    transition:
      transform 0.3s ease,
      opacity 0.2s ease;
  }
  .ft__nav-services:hover .ft__servnav-caret,
  .ft__nav-services:focus-within .ft__servnav-caret {
    transform: rotate(180deg);
    opacity: 1;
  }
  .ft__servnav-wrap {
    overflow: hidden;
    min-height: 0;
  }
  .ft__nav-services .ft__servnav {
    opacity: 0;
    transform: translateY(-4px);
    transition:
      opacity 0.25s ease,
      transform 0.25s ease;
  }
  .ft__nav-services:hover .ft__servnav,
  .ft__nav-services:focus-within .ft__servnav {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .ft__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
  .ft__col--brand,
  .ft__col--legal {
    grid-column: 1 / -1;
  }
  .ft__about {
    max-width: 58ch;
  }
}
@media (max-width: 600px) {
  .ft__top {
    grid-template-columns: 1fr;
  }
  .ft__about {
    max-width: 100%;
  }
}

/* ── Menu en tiroir sur portable (≥ 901 px) ── même bloc que styles.css :
   tiroir compact depuis la gauche, moitié de la largeur, page sous un voile.
   APRÈS le bloc 1415 px, dont il écrase les tailles. */
@media (min-width: 901px) {
  .mm-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .mm-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .mm {
    right: auto;
    width: clamp(380px, 50vw, 640px);
    transform: translateX(-100%);
    border-right: 1px solid var(--line);
  }
  .mm--open {
    transform: none;
    box-shadow: 24px 0 80px -24px rgba(0, 0, 0, 0.7);
  }
  .mm__nav {
    flex: 0 0 auto;
    gap: 0;
    margin-top: 18px;
  }
  .mm__nav a {
    gap: 14px;
    padding: 11px 0;
    font-size: 22px;
  }
  .mm__expand {
    width: 44px;
  }
  .mm__nav .mm__sub-link {
    gap: 12px;
    padding: 9px 4px 9px 8px;
    font-size: 16px;
  }
  .mm__sub-ico {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .mm__cta {
    width: auto;
    align-self: flex-start;
    margin-top: 22px;
  }
  .mm__foot {
    flex-direction: row;
    justify-content: space-between;
    margin-top: auto;
    padding: 16px 0 4px;
  }
}

/* ── Curseur custom ──
   Porté depuis styles.css pour que les pages serveur aient le même curseur que
   le site. L etat interactif suit l accent via [data-accent], posé par le
   bootstrap d accent (htmlChrome.js). Souris fine uniquement. */
:root {
  --cur-active: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'><g%20fill='%230b0c0a'%20stroke='%230b0c0a'%20stroke-width='3'%20stroke-linejoin='round'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g><g%20fill='%23A8D63A'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g></svg>") 7 2, pointer;
  --cur-press: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'><g%20fill='none'%20stroke='%230b0c0a'%20stroke-width='3.4'%20stroke-linecap='round'><path%20d='M23.9%204L25.8%202.1'/><path%20d='M25.1%206.2L27.4%206.2'/><path%20d='M23.9%208.4L25.8%2010.3'/></g><g%20fill='none'%20stroke='%23A8D63A'%20stroke-width='1.7'%20stroke-linecap='round'><path%20d='M23.9%204L25.8%202.1'/><path%20d='M25.1%206.2L27.4%206.2'/><path%20d='M23.9%208.4L25.8%2010.3'/></g><g%20fill='%230b0c0a'%20stroke='%230b0c0a'%20stroke-width='3'%20stroke-linejoin='round'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g><g%20fill='%23A8D63A'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g></svg>") 7 2, pointer;
}
:root[data-accent="electric"] {
  --cur-active: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'><g%20fill='%230b0c0a'%20stroke='%230b0c0a'%20stroke-width='3'%20stroke-linejoin='round'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g><g%20fill='%235B8CFF'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g></svg>") 7 2, pointer;
  --cur-press: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'><g%20fill='none'%20stroke='%230b0c0a'%20stroke-width='3.4'%20stroke-linecap='round'><path%20d='M23.9%204L25.8%202.1'/><path%20d='M25.1%206.2L27.4%206.2'/><path%20d='M23.9%208.4L25.8%2010.3'/></g><g%20fill='none'%20stroke='%235B8CFF'%20stroke-width='1.7'%20stroke-linecap='round'><path%20d='M23.9%204L25.8%202.1'/><path%20d='M25.1%206.2L27.4%206.2'/><path%20d='M23.9%208.4L25.8%2010.3'/></g><g%20fill='%230b0c0a'%20stroke='%230b0c0a'%20stroke-width='3'%20stroke-linejoin='round'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g><g%20fill='%235B8CFF'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g></svg>") 7 2, pointer;
}
:root[data-accent="signal"] {
  --cur-active: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'><g%20fill='%230b0c0a'%20stroke='%230b0c0a'%20stroke-width='3'%20stroke-linejoin='round'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g><g%20fill='%2327E0A1'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g></svg>") 7 2, pointer;
  --cur-press: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'><g%20fill='none'%20stroke='%230b0c0a'%20stroke-width='3.4'%20stroke-linecap='round'><path%20d='M23.9%204L25.8%202.1'/><path%20d='M25.1%206.2L27.4%206.2'/><path%20d='M23.9%208.4L25.8%2010.3'/></g><g%20fill='none'%20stroke='%2327E0A1'%20stroke-width='1.7'%20stroke-linecap='round'><path%20d='M23.9%204L25.8%202.1'/><path%20d='M25.1%206.2L27.4%206.2'/><path%20d='M23.9%208.4L25.8%2010.3'/></g><g%20fill='%230b0c0a'%20stroke='%230b0c0a'%20stroke-width='3'%20stroke-linejoin='round'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g><g%20fill='%2327E0A1'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g></svg>") 7 2, pointer;
}
:root[data-accent="terracotta"] {
  --cur-active: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'><g%20fill='%230b0c0a'%20stroke='%230b0c0a'%20stroke-width='3'%20stroke-linejoin='round'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g><g%20fill='%23FF7A47'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g></svg>") 7 2, pointer;
  --cur-press: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'><g%20fill='none'%20stroke='%230b0c0a'%20stroke-width='3.4'%20stroke-linecap='round'><path%20d='M23.9%204L25.8%202.1'/><path%20d='M25.1%206.2L27.4%206.2'/><path%20d='M23.9%208.4L25.8%2010.3'/></g><g%20fill='none'%20stroke='%23FF7A47'%20stroke-width='1.7'%20stroke-linecap='round'><path%20d='M23.9%204L25.8%202.1'/><path%20d='M25.1%206.2L27.4%206.2'/><path%20d='M23.9%208.4L25.8%2010.3'/></g><g%20fill='%230b0c0a'%20stroke='%230b0c0a'%20stroke-width='3'%20stroke-linejoin='round'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g><g%20fill='%23FF7A47'><rect%20x='4.6'%20y='2'%20width='4.2'%20height='13'%20rx='2.1'/><rect%20x='8.9'%20y='8.8'%20width='4.1'%20height='6.2'%20rx='2.05'/><rect%20x='13'%20y='9.6'%20width='3.9'%20height='5.4'%20rx='1.95'/><rect%20x='16.9'%20y='10.6'%20width='3.7'%20height='4.4'%20rx='1.85'/><rect%20x='1.5'%20y='13.8'%20width='4'%20height='6.8'%20rx='2'/><rect%20x='4.6'%20y='12.5'%20width='16'%20height='10.3'%20rx='3.4'/></g></svg>") 7 2, pointer;
}
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'><path%20d='M3%202L3%2020L7.5%2015.7L11%2023L13.7%2021.8L10.2%2014.9L16.5%2014.7Z'%20fill='%23f3f1ea'%20stroke='%230b0c0a'%20stroke-width='1.4'%20stroke-linejoin='round'/></svg>") 3 2, auto;
  }
  /* Elements cliquables : fleche a l'accent au lieu de la main systeme. */
  a,
  button,
  summary,
  label,
  select,
  [role="button"],
  input[type="checkbox"],
  input[type="radio"],
  input[type="submit"],
  input[type="button"] {
    cursor: var(--cur-active);
  }
  /* Pendant le clic : meme fleche, plus des traits qui rayonnent. Donne un
     retour visuel au moment ou le bouton est enfonce, la ou le survol seul
     ne dit rien. */
  a:active,
  button:active,
  summary:active,
  label:active,
  select:active,
  [role="button"]:active,
  input[type="checkbox"]:active,
  input[type="radio"]:active,
  input[type="submit"]:active,
  input[type="button"]:active {
    cursor: var(--cur-press);
  }
  /* Saisie : on garde le I-beam (plus specifique que la regle ci-dessus pour
     les input a cocher, donc l'ordre n'a pas d'importance). */
  input,
  textarea,
  [contenteditable="true"] {
    cursor: auto;
  }
}

/* ── Accessibilité ──
   Le site coupe ses animations sous prefers-reduced-motion ; Lenis ne démarre
   même pas (cf. htmlChrome.js). */
@media (prefers-reduced-motion: reduce) {
  .svcp-page-grid {
    animation: none;
  }
  .mm,
  .mm-backdrop,
  .hd__hamb-bars > span,
  .hd__hamb.is-open .hd__hamb-bars > span {
    transition: none;
  }
}