/* lesgrandsvoisins.com — feuille de style unique. Polices auto-hébergées (aucune
   requête vers un tiers, aucun CDN) : Fengardo Neue et Lack sont celles du logotype
   officiel — licence MIT/OFL, voir Fengardo-Redux (github.com/loicsander/Fengardo-Redux)
   et Font Squirrel — et Fira Sans (Mozilla, OFL) pour le texte courant, plus lisible sur
   de longs paragraphes que Fengardo Neue, pensée pour l'affichage court.

   Recompilés depuis Fengardo-Redux (sources UFO du dessinateur d'origine, Loïc Sander)
   plutôt que le .woff du site en production : glyphes manquants corrigés, métadonnées
   OS/2·head·name réparées (la graisse grasse portait le bit « Regular » au lieu de
   « Bold », invisible ici — CSS fixe font-weight/font-style explicitement — mais bogue
   probable en dehors du navigateur, impression ou LaTeX/fontspec par exemple, qui lisent
   ces bits directement). L'italique de cette même source avait un « F » totalement
   absent (glyphe présent mais non répertorié dans la table cmap) — corrigé en dupliquant
   le « F » romain avec une légère inclinaison. Aucun gras italique n'existe nulle part
   (le projet ne l'a jamais dessiné, cf. son readme) : approximé en inclinant tous les
   glyphes du gras droit. Les mêmes fichiers, en .ttf autonome pour un usage hors site
   (LaTeX…), sont dans deploy/fonts/fengardo-neue/. */
@font-face {
  font-family: "Fengardo Neue";
  src: url("../fonts/FengardoNeue-Regular.84f4d3a44bf8.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Fengardo Neue";
  src: url("../fonts/FengardoNeue-Italic.9eb73f96b4c8.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap
}

@font-face {
  font-family: "Fengardo Neue";
  src: url("../fonts/FengardoNeue-Bold.3e0bc6e95a4b.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Fengardo Neue";
  src: url("../fonts/FengardoNeue-BoldItalic.91d36bb94a29.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap
}

@font-face {
  font-family: "Lack";
  src: url("../fonts/Lack-Regular.20d655b9b07b.woff2") format("woff2"), url("../fonts/Lack-Regular.e54c00d81abe.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Lack";
  src: url("../fonts/lack-italic-webfont.a26cf9b8d3fc.woff2") format("woff2"), url("../fonts/lack-italic-webfont.1a9d7bedbbfb.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap
}

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-Regular.979a13914c33.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-Italic.6d9f3ebf6789.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap
}

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-Medium.0eff19a04ae3.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-Bold.a1ea7f348ffc.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

:root {
  --sky: #EAF2F7;
  --paper: #FFFFFF;
  --ink: #1C2A35;
  --ink-soft: #4A5A66;
  --line: #C9D6DF;
  --zinc: #6F8190;
  --zinc-dark: #4E5F6C;
  --stone: #E2DCD0;
  --stone-2: #D3CBBB;
  --sign-bg: #1C2A35;
  --sun: #F2B705;
  --sun-soft: #FCE9A6;
  --led: #2E9E6A;
  --cloud: #C3CFD8;
  --win: #3E4E5A;
  --win-lit: #FFD85A;
  --hover: #DCE8F0;
  --wm-inter: #6F8190;
  --danger: #A8322A;
  --group-compte: #C9971F;
  --group-association: #3B6EA5;
  --group-reperes: #7A5C99;
  --group-poles: #2E8B8B;
  --accent-terracotta: #B4602E;
  --accent-plum: #9C3568;
  --accent-indigo: #47539E;
  --accent-teal: #2E8B8B;
  --accent-moss: #6B7A2E;
  --accent-gold: #C9971F;
  /* Bleu du logotype (échantillonné dans le fichier officiel) : réservé au nom
     lesgrandsvoisins.com et aux accents de marque, pas une couleur fonctionnelle
     comme les --accent-* ci-dessus. */
  --brand-blue: #345899;
  /* Voile posé sur une photo de fond (page-head d'un article de blog) : même teinte que
     --sky, translucide, pour que le texte (--ink) reste lisible par-dessus. */
  --page-head-overlay: rgba(234, 242, 247, .82);
  --serif: "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  /* Logotype et grands titres : le caractère du site — Fengardo Neue, tout en
     capitales à l'origine, dégrade proprement en minuscules aussi. */
  --display: "Fengardo Neue", var(--serif);
  /* Accroches et signatures (« L'Autre est une chance », citations…) : l'italique
     de Lack, qui accompagne Fengardo Neue sur le logotype officiel. */
  --script: "Lack", var(--serif);
  /* Palette du fond animé (voir .blob-bg, core/static/core/js/site.js) : reprise
     d'une ancienne page d'accueil de l'association, plus vive/pastel que le reste
     du site — n'est utilisée que là, jamais pour du texte ou des composants. */
  --blob-1: #74b9ff;
  --blob-2: #e84393;
  --blob-3: #6c5ce7;
  --blob-4: #00b894;
  --blob-5: #fdcb6e;
  --blob-6: #006266;
  --blob-7: #1B1464;
  color-scheme: light;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --sky: #0F1B24;
    --paper: #16242F;
    --ink: #E6EDF2;
    --ink-soft: #A9B8C3;
    --line: #2A3B48;
    --zinc: #3F5261;
    --zinc-dark: #2C3B47;
    --stone: #24323D;
    --stone-2: #2B3A46;
    --sign-bg: #0E1820;
    --sun: #F5C518;
    --sun-soft: #3D3410;
    --led: #3CC282;
    --cloud: #3A4856;
    --win: #1B2831;
    --win-lit: #FFD24A;
    --hover: #1E3140;
    --wm-inter: #A9B8C3;
    --danger: #F08A80;
    --group-compte: #E0B84A;
    --group-association: #6FA8DC;
    --group-reperes: #A67FD9;
    --group-poles: #4FB3B3;
    --accent-terracotta: #E0955E;
    --accent-plum: #D67AA8;
    --accent-indigo: #8B97D6;
    --accent-teal: #4FB3B3;
    --accent-moss: #A4B85E;
    --accent-gold: #E0B84A;
    --brand-blue: #8FB0E8;
    --page-head-overlay: rgba(15, 27, 36, .78);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --sky: #0F1B24;
  --paper: #16242F;
  --ink: #E6EDF2;
  --ink-soft: #A9B8C3;
  --line: #2A3B48;
  --zinc: #3F5261;
  --zinc-dark: #2C3B47;
  --stone: #24323D;
  --stone-2: #2B3A46;
  --sign-bg: #0E1820;
  --sun: #F5C518;
  --sun-soft: #3D3410;
  --led: #3CC282;
  --cloud: #3A4856;
  --win: #1B2831;
  --win-lit: #FFD24A;
  --hover: #1E3140;
  --wm-inter: #A9B8C3;
  --danger: #F08A80;
  --group-compte: #E0B84A;
  --group-association: #6FA8DC;
  --group-reperes: #A67FD9;
  --group-poles: #4FB3B3;
  --accent-terracotta: #E0955E;
  --accent-plum: #D67AA8;
  --accent-indigo: #8B97D6;
  --accent-teal: #4FB3B3;
  --accent-moss: #A4B85E;
  --accent-gold: #E0B84A;
  --brand-blue: #8FB0E8;
  --page-head-overlay: rgba(15, 27, 36, .78);
  color-scheme: dark;
}

* {
  box-sizing: border-box
}

/* Alpine.js : masque les éléments x-show avant l'initialisation, pour éviter un flash. */
[x-cloak] {
  display: none !important
}

/* Visible uniquement des lecteurs d'écran (label du sélecteur de langue, dates accessibles…). */
.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
}

html {
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block
}

a {
  color: inherit
}


:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 4px
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem
}

.skip {
  position: absolute;
  inset-inline-start: -999px;
  top: 0;
  background: var(--paper);
  padding: .5rem 1rem;
  z-index: 50
}

.skip:focus {
  inset-inline-start: 1rem;
  top: 1rem
}

.muted {
  color: var(--ink-soft)
}

/* Logotype : lesgrandsvoisins.com */
.word {
  font-family: var(--display);
  font-size: clamp(1.1rem, 4.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap
}

/* --brand-blue n'a un contraste suffisant (WCAG AA) que sur le fond clair de l'en-tête
   (--sky) : sur le fond sombre du pied de page (--ink), le mot-symbole garde la couleur
   de texte ambiante (--sky), déjà lisible (12,9:1 contre 2,1:1 avec le bleu de marque). */
.brand .word {
  color: var(--brand-blue)
}

.w-vois {
  font-style: italic
}

/* En-tête */
.top {
  border-bottom: 1px solid var(--line);
  background: var(--sky);
  position: sticky;
  top: 0;
  z-index: 20
}

.top>.wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  max-width: unset;
}

.mega>.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  margin-inline-end: auto;
  margin-right: 3rem;
}

.mark {
  width: 30px;
  height: 30px
}

.menu-btn,
.account,
.lang-switcher select {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  padding: .45rem .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none
}

.menu-btn:hover,
.account:hover,
.lang-switcher select:hover {
  background: var(--hover)
}

/* Recherche du site, dans la barre du menu du haut (core/templates/core/base.html). */
.site-search {
  display: flex;
  gap: .4rem;
  align-items: center
}

.site-search input {
  font: inherit;
  width: 11rem;
  padding: .45rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sky);
  color: var(--ink)
}

.site-search input:focus {
  border-color: var(--ink);
  outline: none
}

.lang-switcher {
  display: flex;
  align-items: center
}

.lang-switcher-go {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  padding: .45rem .8rem;
  margin-inline-start: .5rem
}

.lang-switcher-go:hover {
  background: var(--hover)
}

.menu-btn[aria-expanded="true"] {
  background: var(--hover)
}

.account {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.2;
  position: relative;
  list-style: none;
  cursor: pointer
}

.account b {
  font-family: var(--serif);
  font-size: 1rem
}

.account small {
  color: var(--ink-soft);
  font-size: .8rem
}

/* .account-panel {
  position: relative
} */

.account[aria-expanded="true"] {
  background: var(--hover)
}

.account-menu {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  min-width: 34rem;
  max-width: min(34rem, calc(100vw - 2.5rem));
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--group-compte);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .2);
  padding: 1rem;
  margin-top: .55rem;
  z-index: 30
}

.account-menu-close {
  position: absolute;
  top: .5rem;
  inset-inline-end: .5rem;
  background: none;
  border: 0;
  color: var(--ink-soft);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: .25rem .45rem;
  border-radius: 6px
}

.account-menu-close:hover {
  background: var(--hover);
  color: var(--ink)
}

.account-actions {
  display: grid;
  gap: .55rem;
  margin-bottom: 1rem
}

.account-actions form {
  margin: 0
}

.account-action {
  display: block;
  width: 100%;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  padding: .6rem .8rem;
  border-radius: 8px;
  background: var(--sun);
  border: 1px solid var(--sun);
  color: var(--ink);
  font-weight: 600;
  text-align: center
}

.account-action:hover {
  filter: brightness(1.05)
}

.account-action-secondary {
  background: var(--paper);
  border-color: var(--line)
}

.account-shortcuts {
  border-top: 1px solid var(--line);
  padding-top: .8rem
}

.account-subhead {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .5rem
}

.account-shortcuts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
  max-height: 70vh;
  overflow-y: auto
}

.account-shortcuts a,
.account-shortcuts span {
  display: block;
  text-decoration: none;
  padding: .42rem .5rem;
  border-radius: 6px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.account-shortcuts a:hover {
  background: var(--hover)
}

.account-shortcuts li:first-child a {
  font-weight: 600
}

.account-shortcuts .gear {
  margin-inline-end: .35rem;
  display: inline;
}

.account-empty {
  margin: 0;
  color: var(--ink-soft)
}

.account-footer {
  border-top: 1px solid var(--line);
  margin-top: .8rem;
  padding-top: .8rem
}

.account-footer form {
  margin: 0
}

/* Menu : la conjugaison */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .1);
  max-height: calc(100vh - 4.5rem);
  overflow-y: auto;
  text-align: center;
}

.mega-enter {
  transition: opacity .15s ease, transform .15s ease
}

.mega-enter-start {
  opacity: 0;
  transform: translateY(-.4rem)
}

.mega-enter-end {
  opacity: 1;
  transform: translateY(0)
}

.mega-leave {
  transition: opacity .1s ease
}

.mega-leave-start {
  opacity: 1
}

.mega-leave-end {
  opacity: 0
}

@media (prefers-reduced-motion:reduce) {
  .mega-enter,
  .mega-leave {
    transition: none
  }
}

.menu-flat {
  list-style: none;
  margin: 0;
  padding: .5rem 0;
  min-width: 16rem
}

.menu-flat li a {
  display: block;
  text-decoration: none;
  padding: .7rem 1.25rem;
  color: var(--ink)
}

.menu-flat li a:hover,
.menu-flat li a[aria-current="page"] {
  background: var(--hover)
}

.menu-sep {
  height: 1px;
  margin: .5rem 1.25rem;
  background: var(--line)
}

.form {
  font-family: var(--serif);
  font-weight: 700
}

.V {
  text-decoration: underline;
  text-decoration-color: var(--sun);
  text-decoration-thickness: .18em;
  text-underline-offset: .12em
}

/* Héros */
.hero {
  position: relative;
  overflow: hidden
}

.hero .wrap {
  padding-top: 3rem;
  padding-bottom: 0;
  position: relative;
  z-index: 1
}

/* Fond de la page d'accueil : quelques grands cercles à contour net qui se chevauchent —
   inspiré d'une ancienne page d'accueil de l'association (Proton.js, un moteur de
   particules animées), repris ici en CSS pur, statique (aucun script, aucune dépendance,
   pas d'animation à interrompre pour prefers-reduced-motion). */
.blob-canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Limité à la bande du haut (texte + CTA), pas toute la hauteur du héros (qui inclut
     l'illustration de scene.html, plus bas, opaque) — sinon la moitié des taches se
     retrouve cachée derrière elle, invisible. */
  height: 32rem;
  overflow: hidden;
  pointer-events: none;
  z-index: 0
}

.blob {
  position: absolute;
  border-radius: 50%;
  border: 3px solid var(--ink);
  opacity: .55;
  mix-blend-mode: multiply
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .blob {
    mix-blend-mode: screen;
    opacity: .4
  }
}

:root[data-theme="dark"] .blob {
  mix-blend-mode: screen;
  opacity: .4
}

.blob-a { width: 20rem; height: 20rem; top: -4rem; left: 4%; background: var(--blob-1) }
.blob-b { width: 17rem; height: 17rem; top: -6rem; left: 22%; background: var(--blob-2) }
.blob-c { width: 16rem; height: 16rem; top: 6rem; right: 22%; background: var(--blob-4) }
.blob-d { width: 14rem; height: 14rem; top: -2rem; right: 4%; background: var(--blob-5) }

/* Nos trois pôles (page d'accueil) */
.poles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem
}

.pole-card {
  display: block;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-top: 4px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  text-decoration: none;
  color: inherit
}

.pole-card:hover {
  background: var(--hover)
}

.pole-card h3 {
  margin: 0 0 .4rem;
  font-family: var(--display)
}

.pole-card p {
  margin: 0;
  color: var(--ink-soft)
}

.pole-card.accent-terracotta { border-top-color: var(--accent-terracotta) }
.pole-card.accent-plum { border-top-color: var(--accent-plum) }
.pole-card.accent-indigo { border-top-color: var(--accent-indigo) }
.pole-card.accent-teal { border-top-color: var(--accent-teal) }
.pole-card.accent-moss { border-top-color: var(--accent-moss) }
.pole-card.accent-gold { border-top-color: var(--accent-gold) }

.hero-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: end;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.hero-text .signature {
  margin-bottom: .5rem
}

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.8vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 10ch
}

.lead {
  font-size: 1.18rem;
  color: var(--ink-soft);
  max-width: 34em;
  margin: 0 0 1.4rem
}

.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.75rem
}

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  padding: .7rem 1.15rem;
  border-radius: 8px;
  border: 2px solid var(--ink);
  cursor: pointer;
  background: transparent;
  color: var(--ink)
}

.btn-sun {
  background: var(--sun);
  border-color: var(--sun);
  color: #1C2A35
}

.btn-sun:hover {
  filter: brightness(1.05)
}

.btn-line:hover {
  background: var(--hover)
}

.signature {
  font-family: var(--script);
  font-style: italic;
  font-size: 1.15rem;
  margin: 0
}

.signature small {
  display: block;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--ink-soft);
  margin-top: .2rem
}

.scene {
  width: 100%;
  margin-bottom: -1px
}

.cloud {
  animation: drift 3.6s cubic-bezier(.2, .7, .2, 1) .4s both
}

@keyframes drift {
  from {
    transform: translateX(-390px)
  }

  to {
    transform: translateX(0);
    opacity: .6
  }
}

.net {
  stroke-dasharray: 5 6
}

@media (prefers-reduced-motion:reduce) {
  .cloud {
    animation: none;
    opacity: .6
  }
}

/* Sections */
section.block {
  padding: 3.5rem 0;
  border-top: 1px solid var(--line)
}

.block h2,
.page h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  margin: 0 0 .5rem;
  letter-spacing: -.01em
}

.intro {
  color: var(--ink-soft);
  /* max-width:38em; */
  margin: 0 0 2rem
}

.kicker {
  font-family: var(--sans) !important;
  font-size: 1rem !important;
  font-weight: 400;
  color: var(--ink-soft);
  margin: 0 0 .8rem !important
}

/* Publics : « Vous êtes… » */
.publics {
  background: var(--paper)
}

.publics h2 {
  margin-bottom: 1.5rem
}

.aud {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 2rem
}

.aud a {
  display: block;
  text-decoration: none;
  border-top: 1px solid var(--line);
  padding: 1rem .25rem 1.1rem
}

.aud a:hover strong {
  text-decoration: underline;
  text-decoration-color: var(--sun);
  text-decoration-thickness: 2px
}

.aud strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  margin-bottom: .15rem
}

.aud span {
  color: var(--ink-soft);
  font-size: .95rem
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem
}

.chips a {
  text-decoration: none;
  font-size: .92rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .35rem .85rem;
  background: var(--paper)
}

.chips a:hover {
  background: var(--hover)
}

.chips a[aria-current="page"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--sky)
}

.chips-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .2rem .7rem;
  color: var(--ink-soft)
}

/* Étiquettes (core.Tag, core:tag_detail) : mêmes chips, mais cliquables et distinguées
   par la couleur d'accent plutôt que le style « secteur/public » ci-dessus. */
a.chip-tag {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
  text-decoration: none
}

a.chip-tag:hover {
  background: var(--hover)
}

.markdown :first-child {
  margin-top: 0
}

.markdown :last-child {
  margin-bottom: 0
}

.markdown a {
  color: inherit
}

.markdown ul,
.markdown ol {
  padding-inline-start: 1.4rem
}

.markdown pre {
  overflow-x: auto;
  background: var(--sky);
  padding: .75rem 1rem;
  border-radius: 8px
}

.markdown code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .9em
}

.markdown blockquote {
  margin-inline-start: 0;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--line);
  color: var(--ink-soft)
}

.aud-intro h2 {
  margin-bottom: .2rem
}

/* Tableau de conjugaison */
.conj {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.75rem 1.75rem 1.25rem
}

.conj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5rem
}

.col-cap {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: .95rem;
  padding: 0 .75rem .5rem;
  border-bottom: 2px solid var(--ink);
  margin: 0
}

.col-cap.cap-compte {
  border-bottom-color: var(--group-compte)
}

.col-cap.cap-association {
  border-bottom-color: var(--group-association)
}

.col-cap.cap-reperes {
  border-bottom-color: var(--group-reperes)
}

.col-cap.cap-poles {
  border-bottom-color: var(--group-poles)
}

.conj ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  align-items: baseline;
  gap: 1rem;
  text-decoration: none;
  padding: .95rem .75rem;
  border-bottom: 1px solid var(--line)
}

.row:hover {
  background: var(--hover)
}

.pers {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--ink)
}

.dest {
  color: var(--ink-soft)
}

/* Étapes */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  counter-reset: s
}

.steps li {
  counter-increment: s;
  border-top: 3px solid var(--ink);
  padding-top: 1rem
}

.steps li::before {
  content: counter(s);
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--zinc);
  line-height: 1;
  display: block;
  margin-bottom: .5rem
}

.steps h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin: 0 0 .4rem
}

.steps p {
  margin: 0 0 .8rem;
  color: var(--ink-soft)
}

.pair {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem
}

.pair a {
  font-size: .92rem;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .35rem .7rem;
  background: var(--paper)
}

.pair a:hover {
  background: var(--hover)
}

/* Un .btn (ex. .btn-sun) posé dans un .pair ne doit pas hériter du style "pastille" des
   liens simples ci-dessus : .pair a lui imposerait un fond clair (--paper) qui, en thème
   sombre, rend illisible le texte fixe #1C2A35 de .btn-sun. */
.pair a.btn {
  font-size: 1rem;
  padding: .7rem 1.15rem;
  border-width: 2px;
  background: transparent
}

.pair a.btn-sun {
  border-color: var(--sun);
  background: var(--sun);
  color: #1C2A35
}

.pair a.btn-sun:hover {
  background: var(--sun);
  filter: brightness(1.05)
}

/* Services */
.svc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden
}

/* Listes personnelles réordonnables (raccourcis, groupes) : la rangée porte trois
   contrôles (monter, descendre, retirer) qui ont besoin de toute la largeur. */
.svc-actions {
  grid-template-columns: 1fr
}

.svc-actions li[draggable="true"] {
  cursor: grab
}

.svc-actions li.dragging {
  opacity: .4
}

.svc li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.35rem;
  background: var(--paper)
}

.svc li.feat {
  background: var(--sun-soft)
}

.svc li.empty {
  grid-template-columns: 1fr
}

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--led) 20%, transparent)
}

.svc-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--paper)
}

.svc h3 {
  font-size: 1.05rem;
  margin: 0
}

.svc p {
  margin: .1rem 0 0;
  color: var(--ink-soft);
  font-size: .95rem
}

.directory {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
}

.directory-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.directory-card .hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--sky);
  display: block
}

/* Sans photo : le logo (ou, à défaut, l'initiale) occupe le même espace que la photo
   des autres fiches, pour que la grille garde un rythme régulier. */
.directory-card .hero-logo,
.directory-card .hero-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sky);
  text-decoration: none
}

.directory-card .hero-logo img {
  max-width: 55%;
  max-height: 55%;
  object-fit: contain
}

.directory-card .hero-placeholder {
  font-family: var(--serif);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--ink-soft)
}

.directory-card .gallery {
  display: flex;
  gap: .5rem;
  padding: .75rem 1.3rem 0
}

.directory-card .gallery img {
  width: 4.5rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 6px
}

.directory-card .body {
  padding: 1.1rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1
}

.directory-card .logo-row {
  display: flex;
  align-items: center;
  gap: .6rem
}

.directory-card h3 {
  margin: 0;
  font-size: 1.1rem
}

.directory-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem
}

.directory-card .tagline {
  color: var(--ink);
  font-weight: 600
}

.directory-empty {
  padding: 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px
}

.directory-entry {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: .9rem
}

.directory-entry .hero {
  width: 100%;
  max-height: 26rem;
  object-fit: cover;
  border-radius: 14px;
  background: var(--sky)
}

.directory-entry .gallery {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem
}

.directory-entry .gallery img {
  width: 8rem;
  height: 6rem;
  object-fit: cover;
  border-radius: 10px
}

.directory-entry .tagline {
  color: var(--ink);
  font-weight: 600;
  font-size: 1.1rem
}

/* Sept habillages au choix de l'auteur·rice d'une fiche (core.DirectoryEntry.layout,
   core.forms.DirectoryEntryForm) : même structure HTML (directory_entry.html), CSS
   seule — pas de gabarit séparé par habillage. « classique » est le rendu par défaut
   ci-dessus, sans règle supplémentaire. */
.skin-carte {
  max-width: 26rem;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  align-items: center;
  text-align: center
}

.skin-carte .hero {
  width: 9rem;
  height: 9rem;
  max-height: none;
  border-radius: 50%;
  object-fit: cover
}

.skin-carte .chips-inline {
  justify-content: center
}

.skin-carte .markdown,
.skin-carte .pair {
  text-align: left
}

.skin-magazine {
  max-width: 54rem
}

.skin-magazine .hero {
  max-height: 34rem;
  border-radius: 4px
}

.skin-magazine .tagline {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2rem
}

.skin-minimal {
  max-width: 38rem;
  gap: 1.5rem
}

.skin-minimal .hero,
.skin-minimal .gallery {
  display: none
}

.skin-minimal .chip {
  border: none;
  padding: 0;
  margin-inline-end: .8rem
}

.skin-vitrine .hero {
  order: 2
}

.skin-vitrine .gallery {
  order: 1;
  gap: .4rem
}

.skin-vitrine .gallery img {
  width: 11rem;
  height: 8.5rem
}

.skin-profil {
  max-width: 34rem;
  margin: 0 auto;
  align-items: center;
  text-align: center
}

.skin-profil .hero {
  width: 10rem;
  height: 10rem;
  max-height: none;
  border-radius: 50%;
  object-fit: cover
}

.skin-profil .markdown,
.skin-profil .pair,
.skin-profil .actions {
  align-self: stretch;
  text-align: left
}

.skin-affiche {
  background: var(--ink);
  color: var(--sky);
  padding: 2.5rem 2rem;
  border-radius: 16px;
  align-items: center;
  text-align: center
}

.skin-affiche .tagline {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.2rem;
  color: var(--sky)
}

.skin-affiche .markdown,
.skin-affiche .pair,
.skin-affiche .actions {
  align-self: stretch;
  text-align: left;
  color: var(--sky)
}

.skin-affiche a {
  color: var(--sky)
}

.skin-affiche .chip {
  border-color: var(--sky);
  color: var(--sky)
}

.retention {
  margin-top: .4rem;
  font-size: .9rem
}

.retention summary {
  cursor: pointer;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--line)
}

.shortcut {
  margin: 0
}

.shortcut-tools {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-self: end
}

.move-btn {
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0
}

.move-btn:hover:not(:disabled) {
  background: var(--hover)
}

.move-btn:disabled {
  opacity: .35;
  cursor: not-allowed
}

.add {
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: 8px;
  padding: .4rem .9rem;
  cursor: pointer;
  min-width: 6.5rem
}

.add:hover {
  background: var(--hover)
}

.add[aria-pressed="true"] {
  background: var(--led);
  border-color: var(--led);
  color: #fff
}

.htmx-request .add {
  opacity: .6
}

.note {
  font-size: .95rem;
  color: var(--ink-soft);
  margin: .9rem 0 0
}

/* Citation */
.quote .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: end
}

.quote figure {
  margin: 0
}

blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -.015em
}

blockquote p {
  margin: 0
}

/* Témoignage (cms.ProjectPage, TestimonialBlock) : une citation dans le corps d'un
   article, pas la grande citation d'accroche de la page d'accueil ci-dessus. */
.testimonial {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: normal;
  border-left: 3px solid var(--line);
  padding-left: 1.2rem;
  margin: 1.5rem 0
}

.testimonial footer {
  margin-top: .5rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: .95rem;
  color: var(--ink-soft)
}

.quote figcaption {
  margin-top: .8rem;
  font-size: .92rem;
  color: var(--ink-soft)
}

.gloss {
  color: var(--ink-soft);
  max-width: 30em;
  margin: 0
}

.gloss strong {
  color: var(--ink)
}

/* Blog, guide */
.two {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem
}

.two-even {
  grid-template-columns: 1fr 1fr
}

.two h2 .form {
  font-size: inherit
}

.posts,
.books,
.docs,
.donors {
  list-style: none;
  margin: 0;
  padding: 0
}

.posts li {
  border-bottom: 1px solid var(--line)
}

.posts a {
  display: block;
  text-decoration: none;
  padding: 1rem 0
}

.posts a:hover h3 {
  text-decoration: underline;
  text-decoration-color: var(--sun);
  text-decoration-thickness: 2px
}

.posts h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin: 0 0 .2rem;
  line-height: 1.3
}

.posts time {
  font-size: .88rem;
  color: var(--ink-soft)
}

.blog-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 1.1rem
}

.related-posts {
  margin: 2.5rem 0
}

.related-posts .blog-list {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr))
}

.blog-list-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden
}

.blog-list-item a {
  display: flex;
  gap: 1.25rem;
  text-decoration: none;
  color: inherit
}

.blog-list-thumb {
  width: 11rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  flex: none;
  background: var(--sky)
}

/* Petites icônes (favicons de service, logos d'annuaire) plutôt que des photos : les
   agrandir en les rognant (object-fit: cover, ci-dessus) les rendrait floues et
   tronquées — on les fait plutôt tenir en entier, plus petites, sur fond neutre. */
.blog-list-thumb.icon {
  width: 4rem;
  aspect-ratio: 1;
  object-fit: contain;
  padding: .6rem
}

.blog-list-body {
  padding: 1.1rem 1.3rem 1.1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .4rem;
  min-width: 0
}

/* Pas de vignette (article sans image de une) : le texte occupe toute la largeur. */
.blog-list-body:first-child {
  padding-inline-start: 1.3rem
}

.blog-list-body h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3
}

.blog-list-item:hover h3 {
  text-decoration: underline;
  text-decoration-color: var(--sun);
  text-decoration-thickness: 2px
}

.blog-list-excerpt {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.blog-list-meta {
  margin: 0;
  font-size: .85rem;
  color: var(--ink-soft)
}

@media (max-width: 34rem) {
  .blog-list-item a {
    flex-direction: column
  }

  .blog-list-thumb {
    width: 100%;
    aspect-ratio: 16 / 9
  }

  .blog-list-body,
  .blog-list-body:first-child {
    padding: 1rem 1.1rem
  }
}

.blog-search {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem
}

.blog-search input {
  flex: 1;
  font: inherit;
  padding: .6rem .8rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--sky);
  color: var(--ink)
}

.blog-search input:focus {
  border-color: var(--ink);
  outline: none
}

.search-section {
  margin-bottom: 2rem
}

.search-section h2 {
  font-size: 1.1rem;
  margin-bottom: .5rem
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem
}

.pagination {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem
}

.blog-post {
  max-width: 46rem;
  margin: 0 auto
}

.blog-post .hero {
  border-radius: 12px;
  margin-bottom: 1.5rem
}

/* Les photos venues du Markdown (import Ghost compris) s'affichent à leur résolution
   d'origine : sans plafond, une galerie de photos de smartphone peut à elle seule
   étirer la page sur des dizaines d'écrans de haut. */
.blog-post .markdown img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 30rem;
  margin: 1.25rem auto;
  border-radius: 10px
}

/* Tailles supplémentaires (cms/image_formats.py), en plus des formats natifs de
   Wagtail (Pleine largeur, Aligné à gauche, Aligné à droite) : un plafond de largeur
   plus étroit que la largeur de colonne par défaut ci-dessus. */
.blog-post .markdown img.small {
  max-width: 160px;
  max-height: 160px
}

.blog-post .markdown img.medium {
  max-width: 360px;
  max-height: 360px
}

.blog-post .markdown img.large {
  max-width: 720px;
  max-height: 720px
}

.blog-post .markdown img.left {
    float: left;
    margin: 0 2rem 2rem 0;
}

.blog-post .markdown img.right {
    float: right;
    margin: 0 0 2rem 2rem;
}

.blog-post .markdown hr {
  clear: both;
}

/* Une image seule insérée par l'éditeur natif (bouton « Image ») est toujours encadrée
   d'un <p> vide de part et d'autre — artefact de Draft.js (chaque bloc atomique est
   entouré de paragraphes vides, pour pouvoir y placer le curseur) : sans ceci, ça
   laisserait un blanc visible au-dessus et en dessous de l'image. */
.blog-post .markdown p:empty {
  display: none
}

/* Plusieurs images qui se suivent (import Ghost ou éditeur natif) sont regroupées à
   l'affichage dans un <div class="gallery"> (cms/templatetags/gallery_filters.py,
   appliqué après la conversion du texte enrichi en HTML) plutôt que repérées ici en CSS
   pur : plus simple à faire tenir en grille responsive, et le "clear" ci-dessous évite
   qu'une image alignée à gauche/droite juste avant (img.left/img.right) ne vienne
   chevaucher la galerie. Une image isolée n'est jamais concernée. */
.blog-post .markdown .gallery {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.25rem 0
}

.blog-post .markdown .gallery figure {
  width: calc(33.333% - .4rem);
  margin: 0
}

.blog-post .markdown .gallery img {
  width: 100%;
  height: 11rem;
  max-height: none;
  margin: 0;
  background: var(--stone);
  object-fit: contain
}

.blog-post .markdown .gallery figcaption {
  text-align: center;
  color: var(--ink-soft);
  font-size: .8rem;
  margin-top: .3rem
}

@media (max-width: 40rem) {
  .blog-post .markdown .gallery figure {
    width: calc(50% - .3rem)
  }
}

@media (max-width: 26rem) {
  .blog-post .markdown .gallery figure {
    width: 100%
  }

  .blog-post .markdown .gallery img {
    height: auto;
    max-height: 20rem
  }
}

/* Légende d'une image isolée (centrée, en galerie exclue) : le texte alternatif de
   l'image, affiché dessous (cms/templatetags/gallery_filters.py, image_captions). Non
   appliqué aux images alignées à gauche/droite (img.left/img.right ci-dessus), qui
   flottent dans le texte — une légende y casserait la mise en page. */
.blog-post .markdown figure.img-figure {
  margin: 0
}

.blog-post .markdown figure.img-figure figcaption {
  text-align: center;
  color: var(--ink-soft);
  font-size: .85rem;
  margin: -.75rem 0 1.25rem
}

/* À l'impression, l'article se lit en entier plutôt qu'une seule page à la fois : toutes
   les pages (cms/templates/cms/blog_post_page.html, body_pages) sont déjà dans le HTML,
   seule la page courante est visible à l'écran (attribut "hidden"). */
@media print {
  .no-print {
    display: none
  }

  .blog-post .markdown[hidden] {
    display: block !important
  }
}

/* Lightbox (site.js) : ouvre les photos d'un article en plein écran, avec navigation
   entre toutes les images de l'article. Sans JS, ce sont de simples images. Désactivé
   dans la prévisualisation de l'admin (site.js, armLightbox) pour ne pas gêner la
   modification des images. */
.lightbox-trigger {
  cursor: zoom-in
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100
}

.lightbox[hidden] {
  display: none
}

.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, .1);
  border: 0;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: .6rem 1rem;
  border-radius: 8px
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, .25)
}

.lightbox-close {
  top: 1rem;
  inset-inline-end: 1rem
}

.lightbox-prev {
  inset-inline-start: 1rem;
  top: 50%;
  transform: translateY(-50%)
}

.lightbox-next {
  inset-inline-end: 1rem;
  top: 50%;
  transform: translateY(-50%)
}

.books {
  display: grid;
  gap: .6rem
}

.books a {
  display: flex;
  align-items: center;
  gap: .9rem;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-inline-start: 6px solid var(--zinc);
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
  border-start-end-radius: 10px;
  border-end-end-radius: 10px;
  padding: .8rem 1rem
}

.books a:hover {
  background: var(--hover)
}

.books span {
  color: var(--ink-soft);
  font-size: .9rem;
  margin-inline-start: auto
}

.more {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600
}

/* Pages intérieures */
.page-head {
  border-bottom: 1px solid var(--line);
  padding: 2.75rem 0 2rem
}

/* Article de blog avec image de une : celle-ci en fond du bandeau, avec un voile
   (--page-head-overlay) qui s'assombrit ou s'éclaircit selon le thème pour que le
   titre (--ink) reste lisible — l'image elle-même est posée en style inline (voir
   blog_post_page.html), cette règle ne fixe que son cadrage. */
.page-head.blog {
  background-size: cover;
  background-position: center
}

/* Pôles : un accent (couleur choisie par la fiche Wagtail) distingue le pôle courant. */
.page-head.accent-terracotta { border-bottom: 3px solid var(--accent-terracotta) }
.page-head.accent-plum { border-bottom: 3px solid var(--accent-plum) }
.page-head.accent-indigo { border-bottom: 3px solid var(--accent-indigo) }
.page-head.accent-teal { border-bottom: 3px solid var(--accent-teal) }
.page-head.accent-moss { border-bottom: 3px solid var(--accent-moss) }
.page-head.accent-gold { border-bottom: 3px solid var(--accent-gold) }

.page-head-top {
  display: flex;
  align-items: center;
  gap: 1rem
}

.page-head-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  object-fit: cover;
  flex: none
}

.breadcrumb {
  margin-bottom: 1rem
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .85rem;
  color: var(--ink-soft)
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin: 0 .5rem;
  color: var(--line)
}

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

.breadcrumb a:hover {
  text-decoration: underline
}

.breadcrumb li[aria-current="page"] {
  color: var(--ink);
  font-weight: 600
}

.page-head h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  margin: 0 0 .8rem;
  letter-spacing: -.01em
}

.page-head .lead {
  margin-bottom: 0
}

.page {
  padding-top: 2.5rem;
  padding-bottom: 3.5rem
}

.page>*+* {
  margin-top: 1.5rem
}

.page.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem
}

.page.cols>*+* {
  margin-top: 0
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem 1.5rem
}

.card h2 {
  font-size: 1.4rem !important
}

.card p {
  color: var(--ink-soft)
}

.card-sun {
  background: var(--sun-soft);
  border-color: var(--sun)
}

.number code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: clamp(1.3rem, 4vw, 2rem);
  letter-spacing: .08em;
  color: var(--ink);
  background: var(--paper);
  padding: .3rem .7rem;
  border-radius: 8px;
  display: inline-block
}

.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem
}

.recover {
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem
}

.recover label {
  display: block;
  font-weight: 600;
  margin-bottom: .4rem
}

.field {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap
}

.field input {
  flex: 1 1 12rem;
  font: inherit;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .06em;
  padding: .6rem .8rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--sky);
  color: var(--ink)
}

.field input:focus {
  border-color: var(--ink);
  outline: none
}

.split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem
}

.split h2 {
  margin: 0
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem
}

.actions form {
  margin: 0
}

.docs li,
.donors li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line)
}

.docs span,
.donors span {
  color: var(--ink-soft)
}

/* Prochains évènements : une carte par évènement, avec une éphéméride à déchirer pour
   repérer la date d'un coup d'œil — mise en page identique, qu'il y ait une photo,
   une description, les deux ou ni l'une ni l'autre. */
.agenda-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem
}

.agenda-card {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.1rem 1.3rem
}

.agenda-body {
  flex: 1;
  min-width: 0
}

.agenda-body h3 {
  margin: 0 0 .3rem;
  font-size: 1.15rem
}

.agenda-where {
  margin: 0 0 .5rem;
  color: var(--ink-soft);
  font-size: .92rem
}

.agenda-excerpt {
  margin: 0 0 .6rem
}

.agenda-actions {
  margin: 0;
  font-size: .9rem
}

.agenda-thumb {
  width: 6rem;
  height: 6rem;
  border-radius: 10px;
  object-fit: cover;
  flex: none
}

.agenda-date {
  flex: none;
  width: 4.75rem;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block
}

.agenda-date-month {
  position: relative;
  display: block;
  background: var(--sun);
  color: #1C2A35;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .3rem 0
}

/* Les encoches « perforées » reprennent le fond de la page pour l'effet déchiré. */
.agenda-date-month::before,
.agenda-date-month::after {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sky)
}

.agenda-date-month::before {
  left: -5px
}

.agenda-date-month::after {
  right: -5px
}

.agenda-date-day {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  padding: .5rem 0 .1rem;
  color: var(--ink)
}

.agenda-date-weekday {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-soft);
  padding-bottom: .4rem
}

.agenda-date-hours {
  display: block;
  border-top: 1px dashed var(--line);
  font-size: .7rem;
  color: var(--ink-soft);
  padding: .3rem 0
}

@media (max-width: 34rem) {
  .agenda-card {
    flex-wrap: wrap
  }

  .agenda-thumb {
    order: 3;
    width: 100%;
    height: 10rem
  }
}

.docs form {
  display: inline;
  margin: 0
}

/* Menu déroulant natif (<details>/<summary>), sans JavaScript : la personne peut
   toujours consulter, modifier ou supprimer sa fiche sans que ça dépende du JS. */
.entry-menu {
  position: relative;
  width: 100%
}

.entry-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  list-style: none
}

.entry-menu-btn::-webkit-details-marker {
  display: none
}

.entry-menu-btn::after {
  content: "▾";
  font-size: .75em;
  color: var(--ink-soft)
}

.entry-menu[open] .entry-menu-btn::after {
  content: "▴"
}

.entry-menu-panel {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 10;
  display: grid;
  gap: .2rem;
  min-width: 12rem;
  margin-top: .4rem;
  padding: .5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .15)
}

.entry-menu-panel form {
  margin: 0
}

.entry-menu-panel a,
.entry-menu-panel .link-btn {
  display: block;
  width: 100%;
  padding: .35rem .5rem;
  border-radius: 6px;
  text-decoration: none;
  text-align: start;
  color: var(--ink)
}

.entry-menu-panel a:hover,
.entry-menu-panel .link-btn:hover {
  background: var(--hover);
  color: var(--ink)
}

.link-btn {
  font: inherit;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline
}

.link-btn:hover {
  color: var(--ink)
}

.entry-form {
  display: grid;
  gap: 1.1rem;
  /* max-width: 40rem */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem
}

/* Onglets en CSS pur (input radio + label), sans JavaScript : sans CSS, tous les champs
   restent visibles et accessibles (dégradation propre). */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  border-bottom: 2px solid var(--line);
  margin-bottom: 1.1rem
}

.tabs-input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.tabs-label {
  order: 1;
  flex: none;
  cursor: pointer;
  font-weight: 600;
  padding: .6rem 1rem;
  margin-bottom: -2px;
  border: 1px solid var(--line);
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  background: var(--sky);
  color: var(--ink-soft)
}

.tabs-label:hover {
  background: var(--hover);
  color: var(--ink)
}

.tabs-label.has-error {
  color: var(--danger)
}

.tabs-input:checked + .tabs-label {
  background: var(--sun-soft);
  border-color: var(--sun);
  color: var(--ink);
  border-bottom-color: var(--sun)
}

.tabs-input:focus-visible + .tabs-label {
  outline: 2px solid var(--ink);
  outline-offset: 2px
}

.tabs-panel {
  order: 2;
  flex: 0 0 100%;
  display: none;
  padding-top: 1.1rem
}

.tabs-input:checked + .tabs-label + .tabs-panel {
  display: grid;
  gap: 1.1rem
}

@media (max-width: 30rem) {
  .tabs-label {
    padding: .6rem .6rem;
    font-size: .9rem
  }
}

.form-row label {
  display: block;
  font-weight: 600;
  margin-bottom: .35rem
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  font: inherit;
  padding: .6rem .8rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--sky);
  color: var(--ink)
}

.form-row textarea {
  min-height: 6rem
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--ink);
  outline: none
}

.form-row .help {
  color: var(--ink-soft);
  font-size: .85rem;
  margin-top: .3rem
}

.form-row .preview-label {
  color: var(--ink-soft);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: .75rem 0 .3rem
}

.form-row .markdown-preview {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: .75rem 1rem;
  min-height: 2.5rem;
  background: var(--sky)
}

.wysiwyg-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .5rem
}

.wysiwyg-toolbar button {
  font: inherit;
  font-size: .85rem;
  padding: .35rem .65rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer
}

.wysiwyg-toolbar button:hover {
  background: var(--hover)
}

.wysiwyg-editor {
  min-height: 6rem;
  padding: .6rem .8rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--sky);
  color: var(--ink)
}

.wysiwyg-editor:focus {
  border-color: var(--ink);
  outline: none
}

.wysiwyg-editor :is(ul, ol) {
  padding-inline-start: 1.4rem
}

.form-photo-current {
  display: block;
  max-width: 12rem;
  max-height: 8rem;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: .3rem;
  margin-bottom: .5rem
}

.form-row .errorlist {
  list-style: none;
  padding: 0;
  margin: .3rem 0 0;
  color: var(--sun);
  font-size: .9rem
}

.sub-btn {
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: .4rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer
}

.sub-btn.subscribed {
  background: var(--sun-soft);
  border-color: var(--sun)
}

/* Messages */
.toasts {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: grid;
  gap: .5rem;
  z-index: 60;
  width: min(92vw, 30rem)
}

.toast {
  background: var(--ink);
  color: var(--sky);
  padding-block: .9rem;
  padding-inline: 1.2rem 2.6rem;
  border-radius: 10px;
  font-size: .95rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  position: relative
}

.toast a {
  color: inherit;
  font-weight: 600
}

.toast-error {
  border-inline-start: 5px solid var(--danger)
}

.toast-number {
  border-inline-start: 5px solid var(--sun)
}

.toast code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: color-mix(in srgb, var(--sky) 15%, transparent);
  padding: .1rem .35rem;
  border-radius: 4px;
  letter-spacing: .04em;
  white-space: nowrap
}

.toast-close {
  position: absolute;
  top: .35rem;
  inset-inline-end: .45rem;
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: .25rem .45rem;
  border-radius: 6px
}

/* Pied de page */
.foot-wrap {
  background: var(--ink);
  color: var(--sky);
  padding: 3rem 0 2rem;
  margin-top: 1rem
}

.foot-wrap a {
  color: var(--sky)
}

.foot {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 2.5rem
}

.foot p {
  color: color-mix(in srgb, var(--sky) 75%, transparent);
  margin: .5rem 0
}

.foot-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  font-style: italic;
}

.foot-nav ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.foot-nav li {
  margin: .3rem 0
}

.foot-nav a {
  text-decoration: none
}

.foot-nav a:hover {
  text-decoration: underline
}

.foot-bottom {
  border-top: 1px solid color-mix(in srgb, var(--sky) 20%, transparent);
  margin-top: 2rem;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .9rem
}

/* Adaptatif */
@media (max-width:900px) {

  .hero-text,
  .quote .wrap,
  .two,
  .foot,
  .choices {
    grid-template-columns: 1fr
  }

  .hero-text {
    gap: 1rem
  }

  .hero .wrap {
    padding-top: 2.25rem
  }

  .steps {
    grid-template-columns: 1fr
  }

  .aud {
    grid-template-columns: 1fr 1fr
  }

  .foot-nav {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:680px) {
  .conj {
    padding: 1.1rem .6rem .6rem
  }

  .conj-grid {
    grid-template-columns: 1fr
  }

  .conj-grid>div+div {
    margin-top: 1.5rem
  }

  .row {
    grid-template-columns: 1fr;
    gap: .15rem
  }

  .foot-nav {
    grid-template-columns: 1fr 1fr
  }

  .aud {
    grid-template-columns: 1fr
  }

  .svc li {
    grid-template-columns: auto 1fr
  }

  .svc .shortcut {
    grid-column: 2;
    justify-self: start
  }

  .account-menu {
    min-width: 0;
    max-width: 90vw
  }

  .account-shortcuts ul {
    grid-template-columns: 1fr
  }
}

@media print {
  wagtail-userbar,
  div.menu,
  form.lang-switcher,
  div.account-panel,
  nav.foot-nav {
    display: none;
  }
  img, div.gallery {
    break-inside: avoid;
  }
}