/* =========================================================================
   Surcouches design — CocoMairie / Parvillers-le-Quesnoy
   Tailwind gère l'essentiel ; ici : police, couleurs par section, carrousel.
   ========================================================================= */

:root {
  /* Une couleur d'accent par catégorie (sur fond blanc épuré) */
  --c-actu: #2563eb;     /* bleu  */
  --c-events: #dc2626;   /* rouge — agenda */
  --c-rdv: #059669;      /* vert  */
  --c-signal: #db2777;   /* rose/corail — signalement */
  --c-archive: #d97706;  /* ambre */
  --c-liens: #0d9488;    /* teal  */
  --c-budget: #4f46e5;   /* indigo — participation citoyenne */
  --ink: #0a0a0a;
}

/* Conteneur unique : toutes les pages s'alignent sur le header/footer */
.shell { max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
.shell-narrow { max-width: 48rem; margin-inline: auto; }
.shell-form { max-width: 36rem; margin-inline: auto; }

/* Accessibilité : lien d'évitement + focus clavier visible (RGAA) */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: #0a0a0a; color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 600; transition: top .2s ease;
}
.skip-link:focus { top: 8px; outline: 3px solid #fff; }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; border-radius: 4px; }
/* Focus toujours visible même sur fonds sombres (carrousel, topbar admin) */
.carousel-overlay ~ * :focus-visible,
[data-carousel] button:focus-visible,
.sh-topbar :focus-visible { outline: 3px solid #fff; outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(0,0,0,.55); }

/* Contenu réservé aux lecteurs d'écran (repli si Tailwind sr-only absent) */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.not-sr-only { position: static !important; width:auto; height:auto; margin:0; clip:auto; white-space:normal; }

/* Contraste : gris porteurs d'information conformes WCAG AA (texte sur blanc) */
.text-neutral-400 { color: #6a6a6a !important; }   /* ~4,7:1 */
.text-neutral-500 { color: #595959 !important; }   /* ~6,4:1 */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Titres en tracking serré, façon Apple / OpenAI */
h1, h2, h3, .display { letter-spacing: -0.022em; }

/* --- Couleurs par section : helpers réutilisables ------------------------ */
.cat-actu    { --cat: var(--c-actu); }
.cat-events  { --cat: var(--c-events); }
.cat-rdv     { --cat: var(--c-rdv); }
.cat-signal  { --cat: var(--c-signal); }
.cat-archive { --cat: var(--c-archive); }
.cat-liens   { --cat: var(--c-liens); }
.cat-budget  { --cat: var(--c-budget); }

.cat-text   { color: var(--cat); }
.cat-bg     { background-color: var(--cat); }
.cat-soft   { background-color: color-mix(in srgb, var(--cat) 12%, white); color: color-mix(in srgb, var(--cat) 85%, black); }
.cat-ring   { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cat) 28%, white); }
.cat-border { border-color: color-mix(in srgb, var(--cat) 30%, white); }

.tag-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .7rem; border-radius: 9999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
}

/* --- Carrousel ---------------------------------------------------------- */
.carousel-track {
  display: flex;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
[data-carousel] { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.carousel-slide { min-width: 100%; position: relative; }
.carousel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.12) 65%, rgba(0,0,0,0) 85%);
}
/* Ombre sur le TEXTE de la légende uniquement (titre + description),
   jamais sur les boutons/liens du carrousel. */
.carousel-cap h2, .carousel-cap > p {
  text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.5);
}
.carousel-cap a, .carousel-cap button { text-shadow: none; }
.carousel-dot {
  width: 8px; height: 8px; border-radius: 9999px; position: relative;
  background: rgba(255,255,255,.6); transition: all .3s ease;
}
.carousel-dot::before { content: ""; position: absolute; inset: -12px; } /* zone tactile ≥ 24px */
.carousel-dot.is-active { width: 26px; background: #fff; }

/* --- Apparition au scroll ---------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s ease;
  filter: blur(6px);
}
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.reveal[data-reveal="scale"]  { transform: translateY(26px) scale(.94); }
.reveal[data-reveal="left"]   { transform: translateX(-34px); }
.reveal[data-reveal="right"]  { transform: translateX(34px); }
.reveal[data-reveal="zoom"]   { transform: scale(1.04); filter: blur(10px); }

/* Entrée douce du carrousel / héros */
@keyframes hero-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.hero-in { animation: hero-in 1.1s cubic-bezier(.16,1,.3,1) both; }

/* --- Panneau « Aujourd'hui » : dégradé synchronisé heure + météo ----- */
.hero-info {
  --sky-top: #12334d;
  --sky-middle: #28566f;
  --sky-bottom: #335f78;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  isolation: isolate;
  background: linear-gradient(155deg, var(--sky-top) 0%, var(--sky-middle) 54%, var(--sky-bottom) 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
  scrollbar-color: rgba(255,255,255,.35) transparent;
  transition: background .8s ease, box-shadow .8s ease;
}
.hero-info[data-period="day"][data-weather="clear"]    { --sky-top:#0873b5; --sky-middle:#238bc1; --sky-bottom:#55a8cc; }
.hero-info[data-period="day"][data-weather="partly"]   { --sky-top:#17658f; --sky-middle:#477f9d; --sky-bottom:#7798aa; }
.hero-info[data-period="day"][data-weather="overcast"] { --sky-top:#3c5364; --sky-middle:#5b6f7c; --sky-bottom:#7f8d96; }
.hero-info[data-period="day"][data-weather="rain"]     { --sky-top:#263b50; --sky-middle:#3b5366; --sky-bottom:#607786; }
.hero-info[data-period="day"][data-weather="snow"]     { --sky-top:#486273; --sky-middle:#718795; --sky-bottom:#9aabb4; }
.hero-info[data-period="day"][data-weather="storm"]    { --sky-top:#171d32; --sky-middle:#2c3448; --sky-bottom:#4b5365; }

.hero-info[data-period="dawn"]                           { --sky-top:#524562; --sky-middle:#8f6271; --sky-bottom:#c17b78; }
.hero-info[data-period="dawn"][data-weather="overcast"],
.hero-info[data-period="dawn"][data-weather="partly"]  { --sky-top:#535563; --sky-middle:#7b7077; --sky-bottom:#a58b88; }
.hero-info[data-period="dawn"][data-weather="rain"],
.hero-info[data-period="dawn"][data-weather="storm"]   { --sky-top:#292b3e; --sky-middle:#4e4655; --sky-bottom:#725e65; }

.hero-info[data-period="dusk"]                           { --sky-top:#2e3154; --sky-middle:#64445e; --sky-bottom:#9b5962; }
.hero-info[data-period="dusk"][data-weather="overcast"],
.hero-info[data-period="dusk"][data-weather="partly"]  { --sky-top:#343848; --sky-middle:#55515d; --sky-bottom:#786a70; }
.hero-info[data-period="dusk"][data-weather="rain"],
.hero-info[data-period="dusk"][data-weather="storm"]   { --sky-top:#202334; --sky-middle:#383644; --sky-bottom:#54464e; }

.hero-info[data-period="night"]                          { --sky-top:#03050a; --sky-middle:#09101d; --sky-bottom:#101b2e; }
.hero-info[data-period="night"][data-weather="partly"]  { --sky-top:#070a10; --sky-middle:#111923; --sky-bottom:#1c2936; }
.hero-info[data-period="night"][data-weather="overcast"]{ --sky-top:#0b0d11; --sky-middle:#171c22; --sky-bottom:#252c33; }
.hero-info[data-period="night"][data-weather="rain"]    { --sky-top:#05080d; --sky-middle:#111a24; --sky-bottom:#1e2c38; }
.hero-info[data-period="night"][data-weather="snow"]    { --sky-top:#101722; --sky-middle:#273543; --sky-bottom:#435665; }
.hero-info[data-period="night"][data-weather="storm"]   { --sky-top:#020306; --sky-middle:#090c14; --sky-bottom:#141a25; }
.hero-info-event {
  min-width: 0;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  text-shadow: none;
  transition: background-color .2s ease, transform .2s ease;
}
.hero-info-event > span:last-child { min-width: 0; }
.hero-info-event:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.hero-info-event-icon {
  width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 10px; background: rgba(255,255,255,.15);
}
.hero-info a:focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px rgba(0,0,0,.4); }

/* Barres de résultats (participation) */
@keyframes bar-grow { from { width: 0; } }
.bar-fill { animation: bar-grow 1s cubic-bezier(.16,1,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  html { scroll-behavior: auto !important; }
}
/* Option widget « Stop animations » : même neutralisation, à la demande */
html.a11y-noanim *, html.a11y-noanim *::before, html.a11y-noanim *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
html.a11y-noanim .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }

/* --- Carte « date façon Apple » ---------------------------------------- */
.date-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 16px;
  background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.25);
}
.date-badge .d { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.date-badge .m { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }

/* --- Dock WhatsApp / newsletter ---------------------------------------- */
#info-dock {
  position: fixed; right: 16px; bottom: 16px; z-index: 72;
  color: #171717;
}
.info-dock-launcher {
  min-height: 56px; display: flex; align-items: center; gap: 11px;
  padding: 8px 17px 8px 9px; border: 1px solid rgba(255,255,255,.2);
  border-radius: 9999px; background: #111; color: #fff;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.55); cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.info-dock-launcher:hover { background: #242424; transform: translateY(-2px); }
.info-dock-launcher-icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 9999px; background: #25d366; font-size: 20px;
}
.info-dock-launcher-copy { display: grid; text-align: left; line-height: 1.15; }
.info-dock-launcher-copy strong { font-size: 13px; font-weight: 700; }
.info-dock-launcher-copy small { margin-top: 3px; color: rgba(255,255,255,.67); font-size: 10px; }
.info-dock-panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: 410px; max-width: calc(100vw - 32px); max-height: min(680px, calc(100vh - 96px));
  overflow-y: auto; background: #fff; border: 1px solid #dedede;
  border-radius: 20px; box-shadow: 0 24px 64px -18px rgba(0,0,0,.5);
  animation: dock-in .24s cubic-bezier(.16,1,.3,1) both;
}
.info-dock-panel[hidden] { display: none; }
@keyframes dock-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.info-dock-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center;
  justify-content: space-between; padding: 18px 18px 13px; background: #fff;
}
.info-dock-head h2 { font-size: 18px; font-weight: 700; }
.info-dock-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #737373; }
.info-dock-close {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9999px;
  color: #525252; background: #f5f5f5; border: 0; cursor: pointer;
}
.info-dock-close:hover { background: #e5e5e5; }
.info-dock-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin: 0 18px; padding: 4px; background: #f2f2f2; border-radius: 12px;
}
.info-dock-tabs button {
  min-height: 38px; padding: 8px 12px; border: 0; border-radius: 9px;
  background: transparent; font-size: 13px; font-weight: 650; color: #626262; cursor: pointer;
}
.info-dock-tabs button[aria-selected="true"] { color: #111; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.info-dock-content { padding: 18px; }
.info-dock-content[hidden] { display: none; }
.info-dock-wa-layout { display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 17px; }
.info-dock-qr-wrap { padding: 8px; border: 1px solid #dedede; border-radius: 14px; background: #fff; }
.info-dock-qr { line-height: 0; width: 100%; aspect-ratio: 1; }
.info-dock-qr svg { width: 100%; height: 100%; display: block; }
.info-dock-content h3 { font-size: 15px; line-height: 1.25; font-weight: 700; }
.info-dock-content h3 + p, .info-dock-intro { margin-top: 6px; color: #5d5d5d; font-size: 12px; line-height: 1.45; }
.info-dock-wa-button, .info-dock-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; margin-top: 12px; padding: 10px 14px; border: 0;
  border-radius: 10px; background: #075e54; color: #fff; font-size: 12px; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.info-dock-wa-button:hover, .info-dock-submit:hover { background: #064b44; }
.info-dock-privacy { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ececec; color: #737373; font-size: 10px; line-height: 1.4; }
.info-dock-bars { display: flex; gap: 6px; margin-bottom: 14px; }
.info-dock-bars span { height: 4px; flex: 1; border-radius: 9999px; background: #e5e5e5; }
.info-dock-bars span.is-on { background: #0d9488; }
.info-dock-input {
  width: 100%; min-height: 42px; margin-top: 10px; padding: 10px 12px;
  border: 1px solid transparent; border-radius: 10px; background: #f3f3f3;
  color: #171717; font-size: 13px; outline: none;
}
.info-dock-input:focus { border-color: #8b8b8b; background: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.info-dock-submit { width: 100%; background: #111; }
.info-dock-submit:hover { background: #2b2b2b; }
.info-dock-submit:disabled { opacity: .55; cursor: wait; }
.info-dock-consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 11px; color: #5e5e5e; font-size: 10px; line-height: 1.42; }
.info-dock-consent input { margin-top: 2px; flex: 0 0 auto; }
.info-dock-back { width: 100%; padding: 8px; border: 0; background: none; color: #666; font-size: 11px; font-weight: 600; cursor: pointer; }
.info-dock-success { width: 48px; height: 48px; display: grid; place-items: center; margin-inline: auto; border-radius: 14px; background: #ccfbf1; color: #0f766e; font-size: 22px; }

/* --- Divers ------------------------------------------------------------- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.card-hover { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.card-hover:hover { transform: translateY(-4px); }
.link-underline { background-image: linear-gradient(currentColor,currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s ease; }
.link-underline:hover { background-size: 100% 1px; }

/* --- Header public : compaction au scroll ------------------------------ */
#site-nav { transition: height .28s ease, box-shadow .28s ease, background-color .28s ease; }
#site-nav .nav-row { transition: height .28s ease; height: 4rem; }
#site-nav.is-compact .nav-row { height: 3.25rem; }
#site-nav.is-compact { box-shadow: 0 1px 0 rgba(0,0,0,.06); }
#site-nav .brand-name { transition: opacity .2s ease, max-width .28s ease; }
#site-nav.is-compact .brand-name { opacity: 0; max-width: 0; overflow: hidden; }
/* Mode lecture : on masque la navigation centrale quand on lit un article */
#site-nav .nav-links { transition: opacity .25s ease; }
body[data-reading] #site-nav.is-compact .nav-links { opacity: 0; pointer-events: none; }

/* Barre de progression de lecture */
#read-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0%;
  background: var(--c-actu); transition: width .1s linear;
}

/* Menu déroulant du header */
.nav-dd-panel {
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel,
.nav-dd.is-open .nav-dd-panel { opacity: 1; visibility: visible; transform: none; }

/* =========================================================================
   ADMIN — réplique de l'interface Shopify (Polaris)
   ========================================================================= */
.sh-body   { background: #f1f1f1; color: #303030; }
.sh-topbar { background: #1a1a1a; height: 56px; }
.sh-search { background: #303030; color: #e3e3e3; }
.sh-search::placeholder { color: #8a8a8a; }
.sh-search:focus { background: #3d3d3d; outline: 3px solid #fff; outline-offset: 1px; }
.sh-kbd { background: rgba(255,255,255,.10); color: #b5b5b5; border: 1px solid rgba(255,255,255,.12); }
.sh-ticon { color: #d9d9d9; }
.sh-ticon:hover { background: rgba(255,255,255,.12); color:#fff; }
.sh-aside  { background: #ebebeb; }
.sh-nav    { color: #303030; }
.sh-nav-item { border-radius: 8px; color:#303030; }
.sh-nav-item:hover { background: rgba(0,0,0,.06); }
.sh-nav-item.is-active { background: #fff; font-weight: 600; box-shadow: 0 0 0 1px #dcdcdc, 0 1px 1px rgba(0,0,0,.04); }
.sh-group  { font-size: 11px; font-weight: 600; letter-spacing: .04em; color:#6b6b6b; text-transform: none; }
.sh-card   { background:#fff; border:1px solid #e3e3e3; border-radius:12px; box-shadow:0 1px 0 rgba(0,0,0,.04); }
.sh-btn    { background:#fff; border:1px solid #d1d1d1; border-radius:8px; box-shadow:0 1px 0 rgba(0,0,0,.04); }
.sh-btn:hover { background:#fafafa; }
.sh-btn-primary { background:#303030; color:#fff; border:1px solid #303030; border-radius:8px; }
.sh-btn-primary:hover { background:#1a1a1a; }
.sh-pill { background:#e3e3e3; color:#303030; }
.sh-row:hover { background:#fafafa; }

/* Onglets des pages d'administration à plusieurs espaces de travail */
.sh-tabs {
  display:flex; align-items:center; gap:4px; overflow-x:auto;
  padding:4px; border:1px solid #dcdcdc; border-radius:10px;
  background:#e7e7e7; scrollbar-width:thin;
}
.sh-tab {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  flex:0 0 auto; min-height:36px; padding:7px 13px; border-radius:7px;
  color:#616161; font-size:12.5px; font-weight:600; white-space:nowrap;
  text-decoration:none; transition:background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.sh-tab:hover { background:rgba(255,255,255,.55); color:#303030; }
.sh-tab[aria-selected="true"] {
  background:#fff; color:#1a1a1a;
  box-shadow:0 0 0 1px #d1d1d1, 0 1px 2px rgba(0,0,0,.08);
}
.sh-tab:focus-visible { outline:2px solid #303030; outline-offset:2px; }
.sh-tab-count {
  min-width:20px; padding:1px 6px; border-radius:9999px;
  background:#d8d8d8; color:#5c5c5c; font-size:10px; line-height:18px; text-align:center;
}
.sh-tab[aria-selected="true"] .sh-tab-count { background:#303030; color:#fff; }
.sh-tab-panel[hidden] { display:none !important; }

html.a11y-contrast body.site-background {
  background:#fff !important;
  background-image:none !important;
}

/* Groupes de menu repliables */
.sh-grp-h { cursor:pointer; border:0; background:transparent; text-align:left; }
.sh-grp-h:hover { color:#303030; }
.sh-grp-chev { display:inline-flex; transition:transform .2s ease; }
.sh-grp-items { overflow:hidden; max-height:30rem; opacity:1;
  transition:max-height .24s ease, opacity .18s ease, margin .24s ease; }
.sh-grp.is-collapsed > .sh-grp-items { max-height:0; opacity:0; margin-top:0; margin-bottom:0; pointer-events:none; }
.sh-grp.is-collapsed .sh-grp-chev { transform:rotate(-90deg); }

/* --- Recherche admin : panneau de résultats --------------------------- */
#sh-results {
  position:absolute; left:0; right:0; top:calc(100% + 8px);
  background:#fff; border:1px solid #e3e3e3; border-radius:12px;
  box-shadow:0 12px 32px -12px rgba(0,0,0,.35); overflow:hidden; z-index:60;
}
#sh-results a { display:block; padding:10px 14px; font-size:13px; color:#303030; }
#sh-results a:hover, #sh-results a.is-cur { background:#f4f4f4; }
#sh-results .sh-r-sub { color:#8a8a8a; font-size:11px; }
#sh-results .sh-r-empty { padding:14px; font-size:13px; color:#8a8a8a; }

/* =========================================================================
   ADMIN — densification « façon Shopify » (plus fin, plus simple)
   Portée limitée à .sh-body : le site public n'est pas affecté.
   ========================================================================= */
.sh-body { font-size:13px; }
.sh-body h1 { font-size:1.0625rem !important; line-height:1.4; font-weight:600; letter-spacing:-.01em; }
.sh-body h2 { font-size:.9rem; }
.sh-body h3 { font-size:.875rem; }
.sh-body .text-2xl { font-size:1.0625rem; }
.sh-body .text-4xl { font-size:1.6rem; line-height:1.1; }
.sh-body .text-sm  { font-size:12.5px; }
.sh-body .sh-card  { border-radius:10px; }
.sh-body .p-6 { padding:1.1rem; }
.sh-body .p-7, .sh-body .sm\:p-9 { padding:1.25rem; }
.sh-body table th { font-size:10px !important; padding-top:.6rem; padding-bottom:.6rem; }
.sh-body table td { padding-top:.5rem !important; padding-bottom:.5rem !important; }
.sh-body .tag-pill { font-size:10px; padding:.13rem .45rem; font-weight:500; letter-spacing:.01em; }
.sh-body input, .sh-body select, .sh-body textarea { font-size:13px; }
.sh-body .sh-btn, .sh-body .sh-btn-primary { font-size:12px; padding:.45rem .85rem; font-weight:600; }
.sh-body .font-bold { font-weight:600; }
.sh-body .gap-6 { gap:1.1rem; }
.sh-body .mt-8 { margin-top:1.4rem; }
.sh-body .mb-6 { margin-bottom:1.1rem; }

/* =========================================================================
   Navigation fluide (AJAX) — transitions de page + barre de chargement
   ========================================================================= */
@keyframes spa-enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
main { animation: spa-enter .30s cubic-bezier(.16,1,.3,1) both; }
.spa-leaving main { opacity:0; transform:translateY(-6px); transition:opacity .14s ease, transform .14s ease; }
/* Admin : transition très discrète (pas d'effet « rechargement ») */
.sh-body main { animation: sh-fade .14s ease both; }
@keyframes sh-fade { from { opacity:.45; } to { opacity:1; } }
.sh-body.spa-leaving main { opacity:.45; transform:none; transition:opacity .08s ease; }

@media (prefers-reduced-motion: reduce) {
  main, .sh-body main { animation:none; }
  .spa-leaving main, .sh-body.spa-leaving main { opacity:1; transform:none; transition:none; }
}
#spa-bar {
  position:fixed; top:0; left:0; height:2px; width:0; z-index:9999;
  background:linear-gradient(90deg,#2563eb,#7c3aed);
  opacity:0; transition:width .2s ease, opacity .3s ease; pointer-events:none;
}
#spa-bar.on  { opacity:1; }
.sh-body #spa-bar { background:linear-gradient(90deg,#5c5c5c,#1a1a1a); }

/* =========================================================================
   WIDGET D'ACCESSIBILITÉ — modes appliqués via classes sur <html>
   ========================================================================= */
/* Taille du texte (les rem Tailwind suivent la taille racine) */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }

/* Police lisible (dyslexie) — pile système, aucune ressource externe */
html.a11y-dys body, html.a11y-dys input, html.a11y-dys select,
html.a11y-dys textarea, html.a11y-dys button {
  font-family: Verdana, Tahoma, "Trebuchet MS", "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: .02em;
}

/* Espacement du texte (WCAG 1.4.12) */
html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing dd,
html.a11y-spacing blockquote, html.a11y-spacing .prose-mock {
  line-height: 1.75 !important; letter-spacing: .085em !important;
  word-spacing: .16em !important;
}
html.a11y-spacing p { margin-bottom: 1.6em !important; }

/* Soulignement de tous les liens du contenu */
html.a11y-underline main a, html.a11y-underline footer a {
  text-decoration: underline !important; text-underline-offset: 3px;
}

/* Contraste renforcé */
html.a11y-contrast body { background: #fff; color: #111; }
html.a11y-contrast .text-neutral-400,
html.a11y-contrast .text-neutral-500,
html.a11y-contrast .text-neutral-600 { color: #1a1a1a !important; }
html.a11y-contrast .text-white\/85, html.a11y-contrast .text-white\/90 { color: #fff !important; }
html.a11y-contrast a:not(.sh-btn-primary):not([class*="bg-"]) { color: #0b3ea8 !important; text-decoration: underline; }
html.a11y-contrast .ring-1, html.a11y-contrast .ring-black\/5,
html.a11y-contrast [class*="border-neutral-1"] { border-color: #6b6b6b !important; }
html.a11y-contrast .ring-black\/5 { box-shadow: 0 0 0 1px #6b6b6b !important; }
html.a11y-contrast .cat-soft { background: #f3f4f6 !important; color: #111 !important; }
html.a11y-contrast .tag-pill { outline: 1px solid #444; }
html.a11y-contrast :focus-visible { outline: 3px solid #b91c1c; }
html.a11y-contrast .carousel-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 45%, rgba(0,0,0,.4) 80%) !important;
}
html.a11y-contrast .hero-info { background: #000 !important; color: #fff !important; border: 2px solid #fff; }
html.a11y-contrast .hero-info a { color: #fff !important; }
html.a11y-contrast .hero-info-event { background: #111; border-color: #fff; }

/* Panneau du widget */
#a11y-fab {
  position: fixed; left: 16px; bottom: 16px; z-index: 70;
  width: 48px; height: 48px; border-radius: 9999px;
  background: #0a0a0a; color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.5); border: 2px solid #fff;
}
#a11y-fab:hover { background: #1f2937; }
#a11y-panel {
  position: fixed; left: 16px; bottom: 76px; z-index: 71;
  width: 320px; max-width: calc(100vw - 32px);
  background: #fff; color: #111; border: 1px solid #d4d4d4;
  border-radius: 16px; box-shadow: 0 20px 50px -16px rgba(0,0,0,.45);
  padding: 18px; max-height: 75vh; overflow-y: auto;
}
#a11y-panel[hidden] { display: none; }
#a11y-panel h2 { font-size: 1rem; font-weight: 700; }
#a11y-panel .a11y-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#a11y-panel button.a11y-opt {
  border: 1px solid #c8c8c8; background: #fff; color: #111;
  border-radius: 10px; padding: 9px 12px; font-size: 14px; font-weight: 600;
  cursor: pointer; flex: 1 1 auto; min-height: 44px;
}
#a11y-panel button.a11y-opt:hover { background: #f3f4f6; }
#a11y-panel button.a11y-opt[aria-pressed="true"] { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
#a11y-panel .a11y-reset { width: 100%; margin-top: 14px; background: #fff; }
#a11y-panel .a11y-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #595959; margin-top: 14px; }

/* Sur mobile, les deux lanceurs restent accessibles de part et d'autre de
   l'écran. Le QR est masqué : le bouton WhatsApp est l'action principale. */
@media (max-width: 639px) {
  #info-dock { right: 12px; bottom: 12px; }
  .info-dock-launcher { width: 52px; min-height: 52px; padding: 6px; }
  .info-dock-launcher-icon { width: 40px; height: 40px; }
  .info-dock-launcher-copy { display: none; }
  .info-dock-panel {
    position: fixed; left: 12px; right: 12px; bottom: 76px;
    width: auto; max-width: none; max-height: calc(100vh - 92px);
  }
  .info-dock-wa-layout { display: block; }
  .info-dock-qr-wrap { display: none; }
  .info-dock-wa-button { display: flex; width: 100%; min-height: 48px; font-size: 13px; }
  #a11y-fab { left: 12px; bottom: 12px; width: 52px; height: 52px; }
  #a11y-panel { left: 12px; bottom: 76px; max-width: calc(100vw - 24px); }
}