/* ==========================================================
   Handiboost — feuille de style
   Couleurs, espacements et typo à adapter librement.
   ========================================================== */

:root {
  --bleu: #1566b1;
  --bleu-fonce: #1d3a8f;
  --fond: #f7f9fc;
  --texte: #1c2333;
  --texte-clair: #5b6472;
  --blanc: #ffffff;
  --bordure: #e2e6ee;
  --radius: 14px;

  /* Palette des 4 accents (repris de la maquette) */
  --accent-bleu: #1566b1;
  --accent-orange: #f5aa2a;
  --accent-rose: #e5215f;
  --accent-violet: #654b9e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.6;
}

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

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Bandeau de maintenance */
.bandeau-maintenance {
  background: #fff4d6;
  color: #6b5200;
  text-align: center;
  font-size: 0.9rem;
  padding: 8px 16px;
}

/* En-tête */
header.site-header {
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 12px;
}

.logo {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--bleu-fonce);
  display: inline-flex;
  align-items: center;
}

.logo-img {
  height: 42px;
  width: auto;
  display: block;
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

nav.main-nav a {
  font-weight: 600;
  color: var(--texte);
}

nav.main-nav a:hover { color: var(--bleu); }

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid var(--bleu);
  cursor: pointer;
}

.btn-primary {
  background: var(--bleu);
  color: var(--blanc);
  border-color: var(--bleu);
}

.btn-secondary {
  background: transparent;
  color: var(--bleu);
}

/* Fil d'ariane */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--texte-clair);
  margin: 18px 0 0;
}

/* Hero */
.hero {
  text-align: center;
  padding: 60px 20px 40px;
}

.hero h1 {
  font-size: 2.2rem;
  margin-bottom: 12px;
  color: var(--bleu-fonce);
}

.hero p.subtitle {
  color: var(--texte-clair);
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.1rem;
}

/* Cartes / grille */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 32px 0;
}

.card {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 24px;
}

.card h3 {
  margin-top: 0;
  color: var(--bleu-fonce);
}

.card a.card-link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  color: var(--bleu);
}

/* Cartes d'accueil "Je suis pratiquant" / "Je suis professionnel" */
.card-pratiquant {
  background: #f5aa2a;
  border-color: #f5aa2a;
}

.card-pratiquant h3,
.card-pratiquant p,
.card-pratiquant a.card-link {
  color: var(--blanc);
}

.card-professionnel {
  background: #e5215f;
  border-color: #e5215f;
}

.card-professionnel h3,
.card-professionnel p,
.card-professionnel a.card-link {
  color: var(--blanc);
}

/* Sections texte */
section.bloc {
  padding: 36px 0;
}

section.bloc h2 {
  color: var(--bleu-fonce);
  font-size: 1.5rem;
}

/* Pathologies / tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.tag {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bleu-fonce);
}

/* Actualités */
.article-card {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
}

.article-meta {
  font-size: 0.82rem;
  color: var(--texte-clair);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.article-card h3 { margin: 4px 0 10px; color: var(--bleu-fonce); }

/* Formulaire de contact */
form.contact-form {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 640px;
  margin: 24px auto 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

form.contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

form.contact-form input,
form.contact-form select,
form.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
}

form.contact-form textarea { min-height: 120px; }

.full-width { grid-column: 1 / -1; }

.form-note {
  font-size: 0.8rem;
  color: var(--texte-clair);
  margin: 10px 0 18px;
}

/* Pied de page */
footer.site-footer {
  background: var(--blanc);
  border-top: 1px solid var(--bordure);
  margin-top: 60px;
  padding: 28px 0;
  text-align: center;
  color: var(--texte-clair);
  font-size: 0.9rem;
}

footer.site-footer .footer-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

footer.site-footer .footer-links a { font-weight: 600; }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  nav.main-nav ul { gap: 12px; justify-content: center; }
}

/* ==========================================================
   Section Hero (page d'accueil) — reprise de la maquette
   ========================================================== */

.hero-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fdf1f6 0%, #f4f0fd 35%, #f7f9fc 70%);
  border-radius: 0 0 32px 32px;
  padding-bottom: 8px;
}

.hero-wrap::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(224,180,255,0.35) 0%, rgba(224,180,255,0) 70%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 20px 8px;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e8effe;
  color: var(--bleu-fonce);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.hero-wrap h1 {
  font-size: 2.3rem;
  line-height: 1.2;
  margin: 0 0 6px;
  color: #14161f;
  font-weight: 800;
}

.grad-text {
  background: linear-gradient(90deg,
    #febf00 0%,
    #fba91c 20%,
    #ed1b5f 40%,
    #654b9e 60%,
    #1566b1 80%,
    #4ac8db 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-wrap .subtitle {
  margin: 28px auto 26px;
}

.mascotte {
  position: absolute;
  top: 40px;
  right: -3%;
  width: 120px;
  height: auto;
  transform: rotate(-4deg);
  filter: drop-shadow(0 10px 16px rgba(30,40,70,0.15));
}

@media (max-width: 900px) {
  .mascotte { display: none; }
}

/* Barre de recherche */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 8px 8px 8px 20px;
  max-width: 460px;
  margin: 0 auto 24px;
  box-shadow: 0 8px 20px rgba(30, 40, 70, 0.06);
}

.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.95rem;
  font-family: inherit;
  background: transparent;
}

.search-bar button {
  background: #1566b1;
  color: var(--blanc);
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Les deux gros boutons "Je suis pratiquant / professionnel" */
.cta-row {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 12px;
}

.cta-card {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  color: var(--blanc);
  border-radius: 18px;
  padding: 22px 26px;
  width: 320px;
  box-shadow: 0 10px 24px rgba(30, 40, 70, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(30, 40, 70, 0.18);
}

.cta-card .cta-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-6deg);
  transition: transform 0.3s cubic-bezier(.2,.8,.3,1.4), border-radius 0.3s ease;
}

.cta-card .cta-icon svg {
  width: 24px;
  height: 24px;
}

.cta-card:hover .cta-icon {
  transform: rotate(0deg) scale(1.08);
  border-radius: 50%;
}

.cta-card strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.cta-card span {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.45;
}

.cta-bleu { background: #1566b1; }
.cta-rose { background: #ed1b5f; }

/* Grille des 4 fonctionnalités avec accent coloré */
.section-titre {
  text-align: center;
  padding-top: 18px;
}

.section-titre h2 {
  font-size: 1.6rem;
}

.section-titre p {
  color: var(--texte-clair);
  max-width: 520px;
  margin: 8px auto 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin: 36px 0 52px;
}

.feature-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  background: var(--blanc);
  border: 1px solid rgba(20, 22, 31, 0.06);
  border-radius: 24px;
  padding: 28px 22px;
  text-align: left;
  box-shadow: 0 2px 10px rgba(20, 30, 60, 0.05);
  transition: transform 0.3s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Tache de couleur décorative en fond de carte */
.feature-card::before {
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.08;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}

.feature-card:nth-child(odd)  { transform: rotate(-0.6deg); }
.feature-card:nth-child(even) { transform: rotate(0.6deg); }

.feature-card:hover {
  transform: translateY(-8px) rotate(0deg) scale(1.015);
  box-shadow: 0 22px 40px rgba(20, 30, 60, 0.14);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.feature-card:hover::before {
  transform: scale(1.5);
  opacity: 0.14;
}

.feature-card .icon-box {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, black));
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transform: rotate(-6deg);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform 0.35s cubic-bezier(.2,.8,.3,1.4), border-radius 0.35s ease;
}

.feature-card .icon-box svg {
  width: 26px;
  height: 26px;
}

.feature-card:hover .icon-box {
  transform: rotate(0deg) scale(1.1);
  border-radius: 50%;
}

.feature-card h3 {
  position: relative;
  color: #14161f;
  margin: 0 0 8px;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

.feature-card p {
  position: relative;
  color: var(--texte-clair);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 20px;
}

.btn-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  background: var(--accent);
  color: var(--blanc);
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.btn-outline::after {
  content: "→";
  transition: transform 0.2s ease;
}

.feature-card:hover .btn-outline {
  filter: brightness(1.08);
  transform: translateX(2px);
}

.feature-card:hover .btn-outline::after {
  transform: translateX(3px);
}

.feature-card.accent-bleu   { --accent: var(--accent-bleu); }
.feature-card.accent-orange { --accent: var(--accent-orange); }
.feature-card.accent-rose   { --accent: var(--accent-rose); }
.feature-card.accent-violet { --accent: var(--accent-violet); }

@media (max-width: 640px) {
  .feature-card:nth-child(odd),
  .feature-card:nth-child(even) { transform: none; }
}

/* ==========================================================
   Section Actualités — grille dynamique avec couvertures
   ========================================================== */

.actus-section {
  padding-bottom: 20px;
}

.actus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
  margin: 28px 0 22px;
}

.actu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(20, 22, 31, 0.06);
  box-shadow: 0 2px 8px rgba(20, 30, 60, 0.05);
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.3s ease;
}

.actu-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 26px rgba(20, 30, 60, 0.12);
}

.actu-cover {
  position: relative;
  height: 84px;
  overflow: hidden;
}

.actu-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(circle at 15% 90%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 40%);
}

.cover-1 { background: linear-gradient(135deg, #febf00, #ed1b5f); }
.cover-2 { background: linear-gradient(135deg, #4ac8db, #1566b1); }
.cover-3 { background: linear-gradient(135deg, #654b9e, #ed1b5f); }

.actu-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.92);
  color: #14161f;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: 999px;
}

.actu-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 16px 16px;
}

.actu-date {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--texte-clair);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 5px;
}

.actu-body h3 {
  font-size: 0.92rem;
  color: #14161f;
  margin: 0 0 6px;
  line-height: 1.3;
}

.actu-body p {
  color: var(--texte-clair);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 12px;
}

.actu-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1566b1;
  font-weight: 700;
  font-size: 0.82rem;
}

.actu-link span {
  transition: transform 0.2s ease;
}

.actu-card:hover .actu-link span {
  transform: translateX(4px);
}

.actus-more {
  text-align: center;
}

.btn-actus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #1566b1;
  border: none;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 8px 4px;
  position: relative;
}

.btn-actus::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 2px;
  background: #1566b1;
  transform: scaleX(0.35);
  transform-origin: left;
  opacity: 0.5;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.btn-actus span {
  transition: transform 0.2s ease;
}

.btn-actus:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

.btn-actus:hover span {
  transform: translateX(4px);
}

@media (max-width: 820px) {
  .actus-grid { grid-template-columns: 1fr; }
  .actu-featured { grid-column: span 1; }
}

/* ==========================================================
   Pages secondaires — variante compacte du hero + éléments partagés
   ========================================================== */

.hero-wrap--compact {
  margin-top: 10px;
}

.hero-wrap--compact .hero-inner {
  padding: 34px 20px 66px;
  max-width: 620px;
}

.hero-wrap--compact h1 {
  font-size: 1.7rem;
  margin-bottom: 4px;
}

.hero-wrap--compact .badge-pill {
  margin-bottom: 12px;
}

.hero-wrap--compact .subtitle {
  margin: 28px auto 0;
  font-size: 0.95rem;
}

.breadcrumb--hero {
  color: var(--texte-clair);
  margin: 0 0 14px;
}

.feature-grid--4up {
  margin-top: -34px;
  position: relative;
  z-index: 2;
}

.feature-grid--4up .feature-card {
  text-align: center;
  align-items: center;
  border-radius: 30px;
  padding: 30px 20px 32px;
}

.feature-grid--4up .feature-card::before { display: none; }

.feature-grid--4up .feature-card:nth-child(odd),
.feature-grid--4up .feature-card:nth-child(even) {
  transform: none;
}

.feature-grid--4up .feature-card:hover {
  transform: translateY(-6px);
}

.feature-grid--4up .icon-box {
  margin: 0 auto 18px;
}

.icon-box--illu {
  background: none;
  box-shadow: none;
  width: auto;
  height: 76px;
  border-radius: 0;
  transform: none !important;
}

.icon-box--illu img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.feature-card:hover .icon-box--illu {
  transform: scale(1.06) !important;
}

.feature-grid--4up h3 {
  color: var(--accent);
  text-align: center;
}

.feature-grid--4up p {
  text-align: center;
  font-size: 0.85rem;
}

.bloc--texte {
  max-width: 760px;
  margin: 8px auto 0;
}

.bloc--texte p {
  color: var(--texte-clair);
}

/* Carte "guichet unique" avec illustration */
.intro-card {
  display: flex;
  align-items: center;
  gap: 36px;
  background: var(--blanc);
  border: 1px solid rgba(20, 22, 31, 0.06);
  border-radius: 26px;
  padding: 36px;
  box-shadow: 0 2px 12px rgba(20, 30, 60, 0.05);
  margin: 8px 0 48px;
}

.intro-text { flex: 1.3; }

.intro-text h2 {
  font-size: 1.4rem;
  line-height: 1.35;
  margin: 0 0 16px;
}

.intro-text p {
  color: var(--texte-clair);
  margin: 0 0 14px;
}

.hl-rose { color: #ed1b5f; font-weight: 800; }
.hl-bleu { color: #1566b1; font-weight: 800; }

.intro-card--noimg {
  text-align: center;
}

.intro-card--noimg .intro-text {
  flex: 1;
  max-width: 720px;
  margin: 0 auto;
}

.intro-card--noimg .intro-text h2 {
  text-align: center;
}

.pathologies-card .tags {
  justify-content: center;
}

.pathologies-card .tag {
  background: #f4f6fb;
  border-color: transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.pathologies-card .tag:nth-child(5n+1) { color: #1566b1; }
.pathologies-card .tag:nth-child(5n+2) { color: #ed1b5f; }
.pathologies-card .tag:nth-child(5n+3) { color: #f5aa2a; }
.pathologies-card .tag:nth-child(5n+4) { color: #654b9e; }
.pathologies-card .tag:nth-child(5n+5) { color: #1566b1; }

.pathologies-card .tag:hover {
  transform: translateY(-2px);
  background: #eef1f8;
}

/* Cartes "Espace Pratiquants" — couleurs mates, plus aérées */
.pratiquant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 26px;
  margin: 40px 0 60px;
}

.pratiquant-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  min-height: 250px;
  padding: 36px 22px 24px;
  border-radius: 22px;
  text-decoration: none;
  color: var(--blanc);
  overflow: visible;
  box-shadow: 0 10px 24px -14px rgba(20, 30, 60, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.pcard-inner-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.pcard-inner-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 45%);
}

.pcard-inner-bg::after {
  content: "";
  position: absolute;
  top: -35%;
  right: -25%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%);
}

.pratiquant-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 32px -14px rgba(20, 30, 60, 0.38);
}

.pcard-bleu   { background: #1566b1; }
.pcard-rose   { background: #ed1b5f; }
.pcard-orange { background: #fba91c; }
.pcard-violet { background: #654b9e; }
.pcard-cyan   { background: #4ac8db; }

.pcard-badge {
  position: absolute;
  top: -16px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--pcard-icon-color, #1a1c24);
  box-shadow: 0 8px 16px -6px rgba(20, 30, 60, 0.35);
  z-index: 2;
}

.pcard-badge svg {
  width: 24px;
  height: 24px;
}

.pcard-bleu   .pcard-badge { --pcard-icon-color: #1566b1; }
.pcard-rose   .pcard-badge { --pcard-icon-color: #ed1b5f; }
.pcard-orange .pcard-badge { --pcard-icon-color: #e8901a; }
.pcard-violet .pcard-badge { --pcard-icon-color: #654b9e; }
.pcard-cyan   .pcard-badge { --pcard-icon-color: #2196ac; }

.pcard-text {
  width: 100%;
  margin-top: auto;
}

.pcard-text h3 {
  position: relative;
  min-height: 2.5rem;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25rem;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.pcard-text p {
  min-height: 3.75rem;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.25rem;
  letter-spacing: 0.005em;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.pcard-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  width: 100%;
}

.pcard-illu-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.pcard-illu-wrap::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  translate: -50% 0;
  width: 46px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.14);
  filter: blur(5px);
}

.pcard-illu {
  position: relative;
  height: 50px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.15));
  transition: transform 0.25s ease;
}

.pratiquant-card:hover .pcard-illu {
  transform: translateY(-4px) scale(1.05);
}

.pcard-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pcard-icon svg {
  width: 20px;
  height: 20px;
}

.pcard-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.2);
  color: var(--blanc);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s ease, gap 0.2s ease;
}

.pratiquant-card:hover .pcard-cta {
  background: rgba(255, 255, 255, 0.3);
  gap: 10px;
}

.intro-illustration {
  position: relative;
  flex: 1;
  max-width: 260px;
  aspect-ratio: 6 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-illustration-label {
  position: absolute;
  top: -6px;
  right: 4px;
  background: #fde3ec;
  color: #ed1b5f;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}

@media (max-width: 720px) {
  .intro-card { flex-direction: column; text-align: left; }
  .intro-illustration { max-width: 200px; }
}

/* Bloc "Besoin de nous contacter ?" */
.contact-cta {
  text-align: center;
  padding: 12px 20px 56px;
}

.contact-cta h2 {
  font-size: 1.3rem;
  margin: 0 0 10px;
}

.contact-cta p {
  color: var(--texte-clair);
  max-width: 480px;
  margin: 0 auto 22px;
  line-height: 1.55;
}

.btn-actus--cta {
  display: inline-flex;
  background: #1566b1;
  color: var(--blanc);
  padding: 13px 28px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(21, 102, 177, 0.28);
}

.btn-actus--cta::after { display: none; }

.btn-actus--cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(21, 102, 177, 0.36);
}

.btn-actus--cta:hover span {
  transform: translateX(4px);
}

/* Cartes statistiques (association, etc.) */
.stat-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 8px 0 48px;
}

.stat-card {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--blanc);
  border: 1px solid rgba(20, 22, 31, 0.06);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 2px 10px rgba(20, 30, 60, 0.05);
}

.stat-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon svg { width: 24px; height: 24px; }

.stat-card strong {
  display: block;
  font-size: 1rem;
  color: #14161f;
  margin-bottom: 2px;
}

.stat-card span {
  font-size: 0.85rem;
  color: var(--texte-clair);
}

.stat-bleu .stat-icon { background: linear-gradient(135deg, #1566b1, #0d3f6c); }
.stat-rose .stat-icon { background: linear-gradient(135deg, #ed1b5f, #a5123f); }

@media (max-width: 640px) {
  .mascotte { display: none; }
  .cta-card { width: 100%; }
}

/* Barre de recherche "Trouver une activité" — champ + bouton distincts, look moderne */
.activite-search-card {
  text-align: center;
  margin: 44px 0 44px;
}

.activite-search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  max-width: 400px;
  margin: 0 auto;
}

.activite-search-field {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--blanc);
  border: 1.5px solid var(--bordure);
  border-radius: 16px;
  padding: 0 18px;
  box-shadow: 0 10px 22px -18px rgba(20, 30, 60, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.activite-search-field:focus-within {
  border-color: #1566b1;
  box-shadow: 0 0 0 4px rgba(21, 102, 177, 0.12);
}

.activite-search-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.activite-search-field-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(21, 102, 177, 0.1);
  color: #1566b1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activite-search-field-icon svg { width: 17px; height: 17px; }

.activite-region-picker { position: relative; }

.activite-region-trigger {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texte);
  padding: 14px 0;
  cursor: pointer;
  text-align: left;
}

.activite-region-chevron {
  flex: none;
  width: 15px;
  height: 15px;
  color: #5b6472;
  transition: transform 0.2s ease;
}

.activite-region-picker.is-open .activite-region-chevron { transform: rotate(180deg); }

.activite-region-trigger:focus { outline: none; }

.activite-region-list {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  max-width: 92vw;
  max-height: 360px;
  overflow-y: auto;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 18px;
  box-shadow: 0 24px 48px -18px rgba(20, 30, 60, 0.32);
  padding: 10px;
  margin: 0;
  list-style: none;
  z-index: 30;
}

.activite-region-list[hidden] { display: none; }

.activite-region-list li {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--texte);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.activite-region-list li:hover {
  background: rgba(21, 102, 177, 0.08);
  color: #1566b1;
}

.activite-region-list li.is-active {
  background: #1566b1;
  color: var(--blanc);
}

.activite-search-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1566b1;
  color: var(--blanc);
  border: none;
  border-radius: 16px;
  padding: 0 22px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(21, 102, 177, 0.5);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.activite-search-btn svg { width: 15px; height: 15px; flex: none; }

.activite-search-btn:hover {
  background: #12508a;
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -12px rgba(21, 102, 177, 0.55);
}

.activite-search-btn:active { transform: translateY(0); }

.activite-search-alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1566b1;
}

.activite-search-alt:hover span {
  transform: translateX(3px);
}

.activite-search-alt span {
  transition: transform 0.2s ease;
  display: inline-block;
}

@media (max-width: 560px) {
  .activite-search-field { width: 100%; }
  .activite-search-btn { width: 100%; justify-content: center; padding: 14px 22px; }
}

/* Page "Trouver un événement" */
.event-filters-card {
  position: relative;
  background: var(--blanc);
  border: 1.5px solid var(--bordure);
  border-radius: 20px;
  padding: 26px 22px 22px;
  margin: 40px 0 36px;
  overflow: hidden;
  box-shadow: 0 14px 30px -18px rgba(20, 30, 60, 0.28);
}

.event-filters-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #febf00 0%, #fba91c 20%, #ed1b5f 45%, #654b9e 70%, #1566b1 100%);
}

.event-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.event-filters-row .activite-search-field {
  flex: 1 1 220px;
  margin: 0;
  box-shadow: none;
}

.event-date-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texte);
  padding: 14px 0;
  min-width: 0;
}

.event-date-input:focus { outline: none; }

.event-period-calendar {
  padding: 6px 10px 14px !important;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--bordure);
  cursor: default !important;
}

.event-period-calendar:hover { background: transparent !important; }

.event-period-calendar label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texte-clair);
  margin-bottom: 6px;
}

.event-period-calendar input[type="date"] {
  width: 100%;
  border: 1.5px solid var(--bordure);
  border-radius: 10px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texte);
  background: var(--fond);
}

.event-period-calendar input[type="date"]:focus { outline: none; border-color: #1566b1; }

.event-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event-card {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: transparent;
  border: 1.5px solid var(--bordure);
  border-radius: 18px;
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.event-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #1566b1, #4ac8db);
  z-index: -2;
}

.event-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 6px;
  background: var(--blanc);
  border-radius: 0 16.5px 16.5px 0;
  z-index: -1;
}

.event-card--hopital::before {
  background: linear-gradient(180deg, #ed1b5f, #fba91c);
}

a.event-card:hover {
  border-color: #1566b1;
  box-shadow: 0 18px 34px -16px rgba(21, 102, 177, 0.4);
  transform: translateY(-4px) scale(1.01);
}

.event-card--hopital:hover {
  box-shadow: 0 18px 34px -16px rgba(237, 27, 95, 0.4);
}

.event-card--next {
  border-color: #1566b1;
  box-shadow: 0 18px 34px -16px rgba(21, 102, 177, 0.4);
}

.event-card--next.event-card--hopital {
  border-color: #ed1b5f;
  box-shadow: 0 18px 34px -16px rgba(237, 27, 95, 0.4);
}

.event-date-block {
  flex: none;
  width: 70px;
  height: 70px;
  border-radius: 16px;
  background: linear-gradient(145deg, #1566b1, #4ac8db);
  color: var(--blanc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  transform: rotate(-3deg);
  box-shadow: 0 10px 18px -8px rgba(21, 102, 177, 0.55);
  transition: transform 0.25s ease;
}

.event-card:hover .event-date-block { transform: rotate(0deg) scale(1.05); }

.event-card--hopital .event-date-block {
  background: linear-gradient(145deg, #ed1b5f, #fba91c);
  box-shadow: 0 10px 18px -8px rgba(237, 27, 95, 0.55);
}

.event-date-day {
  font-size: 1.6rem;
  font-weight: 800;
}

.event-date-month {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

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

.event-next-tag {
  position: absolute;
  top: -16px;
  right: -8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(90deg, #ffe08a, #f7a76b, #ef7fae, #b3a3d9);
  color: #2b1b38;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  border-radius: 999px;
  box-shadow: 0 12px 24px -10px rgba(20, 30, 60, 0.4);
  transform: rotate(3deg);
  animation: event-next-pulse 1.4s ease-in-out infinite;
}

.event-card--next .event-card-body { padding-right: 76px; padding-top: 6px; }

.event-next-tag svg { width: 13px; height: 13px; flex: none; }

@keyframes event-next-pulse {
  0%, 100% {
    filter: brightness(1) saturate(1);
    box-shadow: 0 12px 24px -10px rgba(20, 30, 60, 0.4);
  }
  50% {
    filter: brightness(1.14) saturate(1.6);
    box-shadow: 0 12px 24px -10px rgba(20, 30, 60, 0.4), 0 0 0 5px rgba(247, 167, 107, 0.45), 0 0 22px 4px rgba(239, 127, 174, 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-next-tag { animation: none; }
}

html.acc-no-anim .event-next-tag { animation: none !important; }

.event-card-body h3 {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--texte);
  margin: 0 0 6px;
}

.event-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texte-clair);
  margin: 0 0 8px;
}

.event-meta svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: #1566b1;
}

.event-card--hopital .event-meta svg { color: #ed1b5f; }

.event-desc {
  font-size: 0.9rem;
  color: var(--texte-clair);
  margin: 0 0 14px;
}

.event-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--blanc);
  background: linear-gradient(90deg, #1566b1, #4ac8db);
  padding: 5px 12px;
  border-radius: 999px;
}

.event-card--hopital .event-type-pill {
  background: linear-gradient(90deg, #ed1b5f, #fba91c);
}

.event-empty {
  text-align: center;
  color: var(--texte-clair);
  background: var(--blanc);
  border: 1.5px dashed var(--bordure);
  border-radius: 18px;
  padding: 40px 20px;
  font-weight: 600;
}

/* Page détail d'un événement */
.event-detail-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 40px 0 28px;
}

.event-date-block--lg {
  width: 86px;
  height: 86px;
  border-radius: 20px;
  transform: none;
  box-shadow: 0 12px 22px -8px rgba(21, 102, 177, 0.5);
}

.event-date-block--lg .event-date-day { font-size: 2rem; }
.event-date-block--lg .event-date-month { font-size: 0.8rem; }

.event-detail-header--hopital .event-date-block--lg {
  background: linear-gradient(145deg, #ed1b5f, #fba91c);
  box-shadow: 0 12px 22px -8px rgba(237, 27, 95, 0.5);
}

.event-detail-date {
  margin: 8px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texte-clair);
}

.event-detail-card {
  background: var(--blanc);
  border: 1.5px solid var(--bordure);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 18px;
}

.event-detail-card h2 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--texte);
  margin: 0 0 10px;
}

.event-detail-card p {
  color: var(--texte-clair);
  font-size: 0.95rem;
  margin: 0 0 6px;
  line-height: 1.5;
}

.event-detail-list {
  margin: 0;
  padding-left: 20px;
  color: var(--texte-clair);
  font-size: 0.95rem;
  line-height: 1.7;
}

.event-detail-map-link {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: #1566b1;
}

.event-detail-card .btn-primary {
  margin-top: 8px;
}

.event-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #1566b1;
  margin: 8px 0 40px;
}

@media (max-width: 560px) {
  .event-detail-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .event-filters-row .activite-search-field { flex: 1 1 100%; }
  .event-card { flex-direction: column; }
  .event-date-block { flex-direction: row; gap: 6px; width: auto; height: auto; padding: 8px 14px; transform: none; }
  .event-card:hover .event-date-block { transform: none; }
  .event-next-tag { position: static; display: inline-flex; transform: none; margin-bottom: 10px; }
  .event-card--next .event-card-body { padding-right: 0; padding-top: 0; }
}

/* Résultat : liste unique de tous les annuaires partenaires */
.directory-intro {
  text-align: center;
  margin: 0 0 28px;
}

.directory-intro h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--texte);
  margin: 0 0 8px;
}

.directory-intro p {
  color: var(--texte-clair);
  font-size: 0.95rem;
  max-width: 560px;
  margin: 0 auto;
}

.directory-count {
  color: #1566b1;
  font-weight: 800;
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 0 0 60px;
}

#local-grid:empty {
  margin: 0;
  gap: 0;
}

.directory-card {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 22px;
  padding: 16px 20px 16px 28px;
  box-shadow: 0 10px 22px -18px rgba(20, 30, 60, 0.2);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.directory-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 100% 0%, var(--accent) 0%, transparent 55%);
  opacity: 0.1;
  z-index: -1;
  transition: opacity 0.2s ease;
}

.dir-bleu   { --accent: #1566b1; }
.dir-rose   { --accent: #ed1b5f; }
.dir-orange { --accent: #fba91c; }
.dir-violet { --accent: #654b9e; }
.dir-cyan   { --accent: #4ac8db; }
.dir-marine { --accent: #1d3a8f; }

.directory-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 30px -18px rgba(20, 30, 60, 0.28);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--bordure));
}

.directory-card:hover::before { opacity: 0.18; }

.directory-dot {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 12px;
  border-radius: 60% 40% 40% 60% / 22% 22% 78% 78%;
  background: var(--accent);
  transition: border-radius 0.3s ease, transform 0.3s ease;
}

.directory-card:hover .directory-dot {
  border-radius: 40% 60% 60% 40% / 30% 30% 70% 70%;
  transform: scaleX(1.15);
}

.directory-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.directory-card-body h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--texte);
  margin: 0;
  line-height: 1.28rem;
  height: 2.56rem;
  overflow: hidden;
}

.directory-public-tag {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--blanc));
  padding: 4px 10px;
  border-radius: 10px;
  margin-top: 10px;
}

.directory-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 14px;
}

.directory-logo--lg {
  width: 72px;
  height: 72px;
  margin-bottom: 2px;
}

.directory-card--compact {
  padding-top: 6px;
  padding-bottom: 18px;
}

.directory-card--compact .directory-card-body {
  justify-content: flex-start;
}

.directory-card--compact .directory-logo--lg {
  margin-top: -6px;
  margin-bottom: 0;
}

.directory-card--compact .directory-card-body h3 {
  height: auto;
  max-height: 2.56rem;
  margin-top: -4px;
}

.directory-card--compact .directory-public-tag {
  margin-top: 10px;
}

.directory-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
  image-rendering: -webkit-optimize-contrast;
  transition: transform 0.25s cubic-bezier(.2,.8,.3,1.4);
}

.directory-card:hover .directory-logo img {
  transform: scale(1.06);
}

.directory-link-btn {
  flex: none;
  align-self: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fond);
  color: var(--accent);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.directory-link-btn svg { width: 15px; height: 15px; }

.directory-card:hover .directory-link-btn {
  background: var(--accent);
  color: var(--blanc);
  transform: translate(2px, -2px);
}

.directory-section-title {
  text-align: center;
  margin: 48px 0 24px;
}

.directory-section-title h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--bleu-fonce);
  margin: 0 0 4px;
}

.directory-section-title p {
  color: var(--texte-clair);
  font-size: 0.88rem;
  margin: 0;
}

.directory-empty {
  text-align: center;
  color: var(--texte-clair);
  font-size: 0.9rem;
  background: var(--fond);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 0 0 48px;
}

@media (max-width: 640px) {
  .activite-search-form { flex-direction: column; align-items: stretch; }
  .activite-search-field { max-width: none; }
}

/* ==========================================================
   Accessibilité — bouton flottant + panneau d'options
   ========================================================== */

.a11y-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999999;
}

.a11y-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--bleu, #1566b1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(20, 30, 60, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.a11y-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 28px -8px rgba(20, 30, 60, 0.5);
}

.a11y-widget.is-open .a11y-btn {
  background: #0e4a81;
}

.a11y-panel {
  position: absolute;
  right: 0;
  bottom: 66px;
  width: 300px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 50px -12px rgba(20, 30, 60, 0.35);
  border: 1px solid #e3e6ee;
  font-family: inherit;
}

.a11y-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #eef0f5;
}

.a11y-panel-head h2 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
  color: #1a2340;
}

.a11y-close {
  border: none;
  background: #f1f3f8;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  color: #3a4260;
  line-height: 1;
}

.a11y-panel-body {
  padding: 16px 18px 18px;
}

.a11y-group {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eef0f5;
}

.a11y-group:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.a11y-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 800;
  color: #1a2340;
  margin: 0 0 10px;
}

.a11y-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #f1f3f8;
  font-size: 0.9rem;
}

.a11y-group-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #5a6180;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.a11y-hint {
  font-size: 0.74rem;
  color: #767d99;
  margin: 8px 0 0;
  line-height: 1.4;
}

.a11y-size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #f5f6fa;
  border-radius: 12px;
  padding: 6px;
}

.a11y-size-btn {
  flex: none;
  width: 38px;
  height: 36px;
  border-radius: 9px;
  border: none;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.15);
  font-weight: 800;
  font-size: 0.85rem;
  color: #1a2340;
  cursor: pointer;
}

.a11y-size-value {
  flex: 1;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #3a4260;
}

.a11y-toggles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.a11y-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  font-size: 0.86rem;
  color: #2a3150;
  cursor: pointer;
  border-bottom: 1px solid #f1f3f8;
}

.a11y-toggle-row:last-child {
  border-bottom: none;
}

.a11y-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex: none;
}

.a11y-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.a11y-switch-track {
  position: absolute;
  inset: 0;
  background: #d7dae4;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.a11y-switch-track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.a11y-switch input:checked + .a11y-switch-track {
  background: var(--bleu, #1566b1);
}

.a11y-switch input:checked + .a11y-switch-track::before {
  transform: translateX(16px);
}

.a11y-switch input:focus-visible + .a11y-switch-track {
  outline: 2px solid var(--bleu, #1566b1);
  outline-offset: 2px;
}

.a11y-speech-row {
  display: flex;
  gap: 8px;
}

.a11y-speech-btn {
  flex: 1;
  padding: 9px 6px;
  border-radius: 10px;
  border: 1px solid #e3e6ee;
  background: #f5f6fa;
  color: #1a2340;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
}

.a11y-speech-btn:hover {
  background: #ecefF6;
}

.a11y-speech-stop {
  color: #b42318;
}

html.acc-read-aloud-on main p,
html.acc-read-aloud-on main h1,
html.acc-read-aloud-on main h2,
html.acc-read-aloud-on main h3,
html.acc-read-aloud-on main h4,
html.acc-read-aloud-on main li,
html.acc-read-aloud-on main .directory-public-tag {
  cursor: pointer;
}

.a11y-speaking {
  outline: 3px solid #fba91c !important;
  outline-offset: 3px;
  border-radius: 6px;
  background: rgba(251, 169, 28, 0.12) !important;
}

.a11y-reset {
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #e3e6ee;
  background: #fff;
  color: #3a4260;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}

.a11y-reset:hover {
  background: #f5f6fa;
}

.a11y-reading-guide {
  position: fixed;
  left: 0;
  right: 0;
  height: 36px;
  margin-top: -18px;
  background: rgba(251, 169, 28, 0.22);
  border-top: 2px solid rgba(251, 169, 28, 0.85);
  border-bottom: 2px solid rgba(251, 169, 28, 0.85);
  pointer-events: none;
  z-index: 999998;
  display: none;
}

/* ---- États globaux déclenchés par le panneau ---- */

html.acc-size-md { font-size: 112.5%; }
html.acc-size-lg { font-size: 125%; }
html.acc-size-xl { font-size: 137.5%; }

html.acc-dys-font body,
html.acc-dys-font .a11y-panel {
  font-family: Verdana, Tahoma, "Segoe UI", sans-serif !important;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

html.acc-underline a:not(.a11y-btn):not(.a11y-close) {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

html.acc-big-cursor,
html.acc-big-cursor a,
html.acc-big-cursor button {
  cursor: pointer;
}
html.acc-big-cursor {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"><path fill="%231566b1" stroke="white" stroke-width="1" d="M4 2l14 8-6 1.5L14 20l-3-6-5 4z"/></svg>') 4 4, auto;
}

/* "Arrêter les animations" coupe vraiment tout mouvement : transitions,
   animations, mais aussi les effets de survol (translation, rotation,
   zoom) qui sinon continuent de "sauter" même sans transition, et les
   dégradés décoratifs qui donnent une impression de mouvement. */
html.acc-no-anim *,
html.acc-no-anim *::before,
html.acc-no-anim *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  transform: none !important;
}

html.acc-no-anim .feature-card:hover .icon-box--illu {
  transform: none !important;
}

html.acc-no-anim .grad-text {
  -webkit-text-fill-color: unset;
  background: none !important;
  color: var(--bleu, #1566b1) !important;
}

html.acc-no-anim .hero-wrap,
html.acc-no-anim .badge-pill,
html.acc-no-anim .cta-card,
html.acc-no-anim .directory-card::before,
html.acc-no-anim .feature-card::before {
  background-image: none !important;
}

html.acc-grayscale {
  filter: grayscale(1);
}

/* Contraste élevé — on réécrit les variables de couleur du site : tous les
   composants qui s'appuient dessus (fonds, textes, bordures) s'adaptent
   automatiquement, sans jamais toucher au panneau d'accessibilité lui-même. */
html.acc-contrast {
  --fond: #000;
  --blanc: #000;
  --texte: #fff;
  --texte-clair: #f2f2f2;
  --bordure: #fff200;
  --bleu: #ffd400;
  --bleu-fonce: #ffd400;
  --accent-bleu: #4db8ff;
  --accent-orange: #ffd400;
  --accent-rose: #ff6ea8;
  --accent-violet: #c9a6ff;
}

html.acc-contrast body {
  background: #000 !important;
}

html.acc-contrast a {
  color: #fff200 !important;
  text-decoration: underline !important;
}

html.acc-contrast .bandeau-maintenance {
  background: #fff200 !important;
  color: #000 !important;
}

/* Quelques titres du site utilisent une couleur de texte fixe (presque noire)
   au lieu de la variable --texte : sans ce correctif ils deviendraient
   illisibles (texte noir sur fond noir) en contraste élevé. */
html.acc-contrast .hero-wrap h1,
html.acc-contrast .feature-card h3,
html.acc-contrast .actu-tag,
html.acc-contrast .actu-body h3,
html.acc-contrast .stat-card strong {
  color: #fff !important;
}

/* Le bandeau d'accueil (hero) a un fond en dégradé clair codé en dur,
   invisible une fois le texte repassé en blanc : on le force en noir. */
html.acc-contrast .hero-wrap {
  background: #000 !important;
}

html.acc-contrast .badge-pill {
  background: #000 !important;
  color: #fff200 !important;
  border: 1px solid #fff200;
}

html.acc-contrast .btn,
html.acc-contrast .btn-primary,
html.acc-contrast .btn-secondary,
html.acc-contrast .btn-outline,
html.acc-contrast .cta-card,
html.acc-contrast .directory-card,
html.acc-contrast .pratiquant-card,
html.acc-contrast .feature-card,
html.acc-contrast .card,
html.acc-contrast .article-card,
html.acc-contrast .directory-public-tag {
  border: 2px solid #fff200 !important;
}

html.acc-contrast img:not(.a11y-widget img) {
  filter: grayscale(0.2) contrast(1.15);
}

/* Le bouton flottant garde un contraste fixe, indépendant de --bleu
   (redéfini ci-dessus pour le reste du site). */
html.acc-contrast .a11y-btn {
  background: #000 !important;
  color: #fff200 !important;
  border: 2px solid #fff200 !important;
}

html.acc-contrast .a11y-widget.is-open .a11y-btn {
  background: #222 !important;
}

@media (max-width: 480px) {
  .a11y-widget { right: 12px; bottom: 12px; }
  .a11y-panel { right: -6px; width: calc(100vw - 24px); }
}

/* ===== Page "Conseils pour la pratique" ===== */
.conseil-count { margin: 0 0 14px; font-size: 0.95rem; }
.conseil-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 0 0 50px;
}
.conseil-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid #e6e9f0;
  border-top: 5px solid var(--accent);
  border-radius: 18px;
  padding: 20px 22px 18px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(30, 40, 80, 0.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.conseil-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(30, 40, 80, 0.13); }
.conseil-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conseil-patho-pill {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 5px 13px;
  border-radius: 999px;
}
.dir-orange .conseil-patho-pill, .dir-cyan .conseil-patho-pill { color: #1b1b2b; }
.conseil-example-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #6b7280;
  border: 1px dashed #b7bdc9;
  border-radius: 999px;
  padding: 3px 10px;
}
.conseil-card h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.conseil-summary { margin: 0; color: #4b5563; font-size: 0.95rem; line-height: 1.5; flex: 1; }
.conseil-card-foot { display: flex; align-items: center; gap: 11px; padding-top: 12px; border-top: 1px solid #eef0f5; }
.conseil-avatar {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 0.85rem;
}
.dir-orange .conseil-avatar, .dir-cyan .conseil-avatar { color: #1b1b2b; }
.conseil-avatar--lg { width: 62px; height: 62px; font-size: 1.2rem; }
.conseil-author { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.conseil-author strong { font-size: 0.92rem; }
.conseil-author span { font-size: 0.8rem; color: #6b7280; }

/* Détail d'un article */
.conseil-article {
  background: #fff;
  border: 1px solid #e6e9f0;
  border-top: 6px solid var(--accent);
  border-radius: 18px;
  padding: 28px 32px 24px;
  margin: 0 0 30px;
  box-shadow: 0 6px 18px rgba(30, 40, 80, 0.07);
}
.conseil-article-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.conseil-byline { margin: 8px 0 2px; }
.conseil-meta { margin: 0; color: #6b7280; font-size: 0.9rem; }
.conseil-example-notice {
  background: #fff7e0; border: 1px dashed #e0b341; color: #6b5300;
  border-radius: 10px; padding: 9px 14px; font-size: 0.9rem; margin: 0 0 20px;
}
.conseil-section h2 { font-size: 1.25rem; margin: 22px 0 8px; color: var(--accent); }
.dir-orange .conseil-section h2, .dir-cyan .conseil-section h2 { color: #1b1b2b; }
.conseil-section p { line-height: 1.7; margin: 0 0 12px; }
.conseil-keypoints {
  margin: 26px 0 0;
  padding: 18px 22px;
  border-left: 5px solid var(--accent);
  background: #f5f7fb;
  border-radius: 0 14px 14px 0;
}
.conseil-keypoints h2 { margin: 0 0 8px; font-size: 1.15rem; }
.conseil-keypoints ul { margin: 0; padding-left: 20px; line-height: 1.7; }
.conseil-disclaimer { margin: 22px 0 0; font-size: 0.85rem; color: #6b7280; font-style: italic; }
.conseil-related h2 { font-size: 1.3rem; margin: 0 0 16px; }

@media (max-width: 560px) {
  .conseil-grid { grid-template-columns: 1fr; }
  .conseil-article { padding: 22px 18px 18px; }
  .conseil-article-head { align-items: flex-start; }
}

/* Conseils : cases pathologies */
.conseil-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
  margin: 20px 0 70px;
}
.conseil-tile {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 190px;
  padding: 28px 22px;
  border-radius: 28px;
  background: var(--accent);
  color: #fff;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform .3s cubic-bezier(.3,1.5,.5,1), box-shadow .3s ease;
}
.conseil-tile::before {
  content: "";
  position: absolute; width: 160%; height: 160%; top: -80%; left: -30%;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0%, transparent 55%);
  transform: translateX(-60%);
  transition: transform .7s ease;
}
.conseil-tile:hover, .conseil-tile:focus-visible { transform: translateY(-8px) rotate(-1.5deg) scale(1.04); box-shadow: 0 22px 38px color-mix(in srgb, var(--accent) 55%, transparent); }
.conseil-tile:hover::before { transform: translateX(30%); }
.conseil-tile:focus-visible { outline: 3px solid #1b1b2b; outline-offset: 4px; }
.conseil-tile-name { position: relative; font-weight: 800; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.3; }
.conseil-tile.dir-orange, .conseil-tile.dir-cyan { color: #1b1b2b; }
html.acc-no-anim .conseil-tile, html.acc-no-anim .conseil-tile::before { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .conseil-tile, .conseil-tile::before { transition: none; } }

/* Conseils : cases plus vivantes */
.conseil-tile {
  --accent2: color-mix(in srgb, var(--accent) 55%, #fff);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  background-size: 200% 200%;
  min-height: 210px;
  animation: conseil-pop .6s cubic-bezier(.3,1.6,.5,1) both, conseil-float 4.5s ease-in-out .8s infinite, conseil-gradient 6s ease-in-out infinite;
}
.conseil-tile:nth-child(2) { animation-delay: .1s, 1.2s, 0s; }
.conseil-tile:nth-child(3) { animation-delay: .2s, 1.6s, 0s; }
.conseil-tile:nth-child(4) { animation-delay: .3s, 2s, 0s; }
.conseil-tile:nth-child(5) { animation-delay: .4s, 2.4s, 0s; }
.conseil-tile::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  animation: conseil-shine 4s ease-in-out infinite;
}
.conseil-tile:nth-child(2)::after { animation-delay: .6s; }
.conseil-tile:nth-child(3)::after { animation-delay: 1.2s; }
.conseil-tile:nth-child(4)::after { animation-delay: 1.8s; }
.conseil-tile:nth-child(5)::after { animation-delay: 2.4s; }
.conseil-tile-name { font-size: 1.5rem; text-shadow: 0 2px 8px rgba(0,0,0,.18); }
.conseil-tile:hover { animation-play-state: paused; }
@keyframes conseil-pop { from { opacity: 0; transform: scale(.6) translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes conseil-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes conseil-gradient { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes conseil-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
html.acc-no-anim .conseil-tile, html.acc-no-anim .conseil-tile::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .conseil-tile, .conseil-tile::after { animation: none !important; } }

/* Conseils : une case = une couleur unie */
.conseil-tile { background: var(--accent); background-size: auto; animation: conseil-pop .6s cubic-bezier(.3,1.6,.5,1) both, conseil-float 4.5s ease-in-out .8s infinite; }
.conseil-tile:nth-child(2) { animation-delay: .1s, 1.2s; }
.conseil-tile:nth-child(3) { animation-delay: .2s, 1.6s; }
.conseil-tile:nth-child(4) { animation-delay: .3s, 2s; }
.conseil-tile:nth-child(5) { animation-delay: .4s, 2.4s; }
.conseil-tile::before { display: none; }
html.acc-no-anim .conseil-tile { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .conseil-tile { animation: none !important; } }

/* Conseils : mise en page finale des cases */
.conseil-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin: 56px 0 80px; }
.conseil-tile { flex: 0 1 300px; min-height: 190px; }
.conseil-tile::after { display: none; }
.conseil-tile-name { font-size: 1.3rem; overflow-wrap: anywhere; padding: 0 6px; }
@media (max-width: 560px) { .conseil-tile { flex-basis: 100%; } }

/* Conseils : cases modernes */
.conseil-tiles { gap: 22px; margin: 48px 0 80px; }
.conseil-tile {
  flex: 0 1 250px;
  min-height: 140px;
  justify-content: flex-start; align-items: flex-start;
  padding: 22px 20px 22px 22px;
  border-radius: 24px;
  color: #fff !important;
  text-align: left;
}
.conseil-tile::before {
  display: block; content: "";
  width: 150px; height: 150px; top: auto; left: auto; right: -40px; bottom: -55px;
  border-radius: 50%; background: rgba(255,255,255,.18); transform: none;
  transition: transform .5s cubic-bezier(.3,1.5,.5,1);
}
.conseil-tile::after {
  display: block; content: "";
  position: absolute; width: 70px; height: 70px; top: -26px; right: 36px; left: auto; bottom: auto;
  border-radius: 50%; background: rgba(255,255,255,.14); transform: none; animation: none;
}
.conseil-tile:hover::before { transform: scale(1.5); }
.conseil-tile:hover, .conseil-tile:focus-visible { transform: var(--tilt, translateY(-6px) scale(1.04)); }
.conseil-tile-name { font-size: 1.12rem; text-align: left; padding: 0 44px 0 0; text-shadow: 0 1px 6px rgba(0,0,0,.25); z-index: 1; }
.conseil-tile-go {
  position: absolute; right: 16px; bottom: 16px; z-index: 1;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--accent);
  display: grid; place-items: center;
  transition: transform .3s ease;
}
.conseil-tile-go svg { width: 18px; height: 18px; }
.conseil-tile:hover .conseil-tile-go { transform: translateX(4px) scale(1.1); }
html.acc-no-anim .conseil-tile::before, html.acc-no-anim .conseil-tile-go { transition: none !important; }
.conseil-tile { flex-basis: 270px; min-height: 150px; }
.conseil-tile-name { overflow-wrap: normal; word-break: normal; font-size: 1.05rem; padding-right: 8px; max-width: 80%; }


/* Conseils : reflets en formes organiques (blobs) */
.conseil-tile::before {
  width: 190px; height: 170px; right: -50px; bottom: -60px;
  border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%;
  background: rgba(255,255,255,.2);
  transform: rotate(-12deg);
  animation: conseil-blob 8s ease-in-out infinite;
}
.conseil-tile::after {
  width: 90px; height: 80px; top: -26px; right: 40px;
  border-radius: 45% 55% 60% 40% / 55% 40% 60% 45%;
  background: rgba(255,255,255,.16);
  animation: conseil-blob 6s ease-in-out infinite reverse;
}
.conseil-tile:hover::before { transform: rotate(10deg) scale(1.3); }
@keyframes conseil-blob {
  0%,100% { border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%; }
  50% { border-radius: 40% 60% 58% 42% / 48% 58% 42% 52%; }
}
html.acc-no-anim .conseil-tile::before, html.acc-no-anim .conseil-tile::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .conseil-tile::before, .conseil-tile::after { animation: none !important; } }

/* Conseils : un seul reflet par case, forme et position différentes */
.conseil-tile::after { display: none !important; }
.conseil-tile::before {
  background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.04));
  width: 200px; height: 180px; top: auto; left: auto; right: -60px; bottom: -70px;
  border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%;
  transform: rotate(-12deg);
}
.conseil-tile:hover::before { transform: rotate(0deg) scale(1.25); }

/* Conseils : un bonhomme par case */
.conseil-tile { min-height: 205px; }
.conseil-tile-man {
  position: absolute; left: 20px; bottom: 14px; z-index: 1;
  height: 84px; width: auto; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
  transform-origin: 50% 100%;
  transition: transform .4s cubic-bezier(.3,1.6,.5,1);
}
.conseil-tile:hover .conseil-tile-man { transform: translateY(-6px) rotate(-5deg) scale(1.1); }
html.acc-no-anim .conseil-tile-man { transition: none !important; }
.conseil-tile { min-height: 235px; }
.conseil-tile-man { height: 112px; left: 22px; bottom: 16px; filter: drop-shadow(0 0 .7px #fff) drop-shadow(0 0 .7px #fff) drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.conseil-tile { min-height: 250px; } .conseil-tile-man { height: 108px; }
.conseil-tiles { gap: 18px; }
.conseil-tile { flex: 0 1 235px; min-height: 195px; padding: 18px; border-radius: 22px; }
.conseil-tile-name { font-size: 1rem; }
.conseil-tile-man { height: 80px; left: 18px; bottom: 12px; }
.conseil-tile-go { width: 34px; height: 34px; right: 12px; bottom: 12px; }
.conseil-tile::before { width: 150px !important; height: 130px !important; right: -45px !important; bottom: -50px !important; }
.conseil-tiles { max-width: 780px; margin-left: auto; margin-right: auto; }
.conseil-tiles { gap: 30px; max-width: 980px; } .conseil-tile { flex: 0 1 290px; }
.conseil-tile { min-height: 165px; }
.conseil-tile-man { height: 68px; }
.conseil-tile::before { width: 250px !important; height: 210px !important; right: -70px !important; bottom: -85px !important; }
.conseil-tile::before { width: 215px !important; height: 180px !important; right: -60px !important; bottom: -75px !important; }

/* Conseils : encadré d'information */
.conseil-info {
  max-width: 980px; margin: 36px auto 0;
  background: #fff; border-radius: 22px;
  padding: 28px 34px;
  box-shadow: 0 10px 28px rgba(30, 40, 80, .08);
  position: relative; overflow: hidden;
}
.conseil-info::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  background: linear-gradient(180deg, #fba91c, #ed1b5f, #654b9e, #1566b1, #4ac8db);
}
.conseil-info-title { margin: 0 0 14px; font-size: 1.3rem; color: #ed1b5f; }
.conseil-info ul { margin: 0 0 18px; padding-left: 22px; line-height: 1.7; }
.conseil-info li { margin-bottom: 8px; }
.conseil-info-help { margin: 0; padding: 14px 18px; background: #eef5ff; border-radius: 14px; line-height: 1.6; }
.conseil-info-help a { color: #1566b1; font-weight: 800; }
@media (max-width: 560px) { .conseil-info { padding: 22px 20px 22px 24px; } }
.conseil-info { padding: 22px 30px; }
.conseil-info-title { font-size: 1.1rem; margin-bottom: 10px; }
.conseil-info ul { font-size: .9rem; line-height: 1.6; margin-bottom: 14px; }
.conseil-info li { margin-bottom: 5px; }
.conseil-info-help { font-size: .88rem; padding: 11px 16px; }

/* Article : ressource à télécharger */
.conseil-resource {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin: 28px 0 0; padding: 20px 24px;
  background: #eef5ff; border-radius: 16px; border-left: 5px solid var(--accent);
}
.conseil-resource h2 { margin: 0 0 4px; font-size: 1.05rem; }
.conseil-resource p { margin: 0; color: #4b5563; font-size: .92rem; }
.conseil-article-head:not(:has(.conseil-avatar)) { margin-bottom: 8px; }

/* Article : mise en page aérée et vivante */
.conseil-article { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 10px 0 30px; }
.conseil-article-head { margin-bottom: 26px; }
.conseil-section {
  position: relative; background: #fff; border-radius: 26px;
  padding: 38px 44px 30px; margin: 0 0 34px;
  box-shadow: 0 12px 32px rgba(30, 40, 80, .08);
  overflow: hidden;
}
.conseil-section::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 7px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff));
}
.conseil-section::after {
  content: ""; position: absolute; right: -50px; top: -50px; width: 190px; height: 170px;
  border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  pointer-events: none;
}
.conseil-section h2 {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  font-size: 1.7rem; color: #1b1b2b; margin: 0 0 22px;
}
.dir-orange .conseil-section h2, .dir-cyan .conseil-section h2 { color: #1b1b2b; }
.conseil-num {
  flex: none; width: 46px; height: 46px; border-radius: 16px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 1.3rem; font-weight: 800;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 40%, transparent);
  transform: rotate(-6deg);
}
.dir-orange .conseil-num, .dir-cyan .conseil-num { color: #1b1b2b; }
.conseil-section p { position: relative; z-index: 1; font-size: 1.05rem; line-height: 1.9; margin: 0 0 20px; color: #2d3142; max-width: 74ch; }
.conseil-section p.conseil-lead { font-size: 1.2rem; line-height: 1.8; font-weight: 600; color: #1b1b2b; }
.conseil-callout {
  position: relative; z-index: 1; margin: 26px 0 26px;
  padding: 24px 28px 24px 34px;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border-left: 6px solid var(--accent); border-radius: 0 20px 20px 0;
  font-size: 1.2rem; line-height: 1.6; font-weight: 700; color: #1b1b2b;
}
.conseil-callout::before { content: "“"; position: absolute; left: 10px; top: -6px; font-size: 3.2rem; color: var(--accent); line-height: 1; }
.dir-orange .conseil-callout::before, .dir-cyan .conseil-callout::before { color: #1b1b2b; }
.conseil-resource { margin: 0 0 30px; padding: 26px 30px; border-radius: 22px; background: linear-gradient(120deg, #fff 0%, color-mix(in srgb, var(--accent) 14%, #fff) 100%); box-shadow: 0 12px 32px rgba(30,40,80,.08); border-left: 7px solid var(--accent); }
.conseil-disclaimer { padding: 0 6px; }
@media (max-width: 560px) {
  .conseil-section { padding: 30px 22px 18px; border-radius: 20px; }
  .conseil-section h2 { font-size: 1.35rem; }
  .conseil-callout { padding: 20px 20px 20px 26px; font-size: 1.05rem; }
}
.conseil-section p { max-width: none; }
.conseil-section p.conseil-lead { font-weight: 500; font-size: 1.15rem; }

/* Article : plus ludique, plus coloré, plus lisible */
.conseil-section { padding: 44px 52px 36px; margin-bottom: 44px; }
.conseil-section::after { width: 230px; height: 200px; right: -60px; top: -70px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.conseil-section-man {
  position: absolute; right: 38px; top: 22px; z-index: 1; height: 112px; width: auto; pointer-events: none;
  filter: drop-shadow(0 0 .6px var(--accent)) drop-shadow(0 0 .6px var(--accent));
  animation: conseil-man-bob 3.6s ease-in-out infinite;
}
@keyframes conseil-man-bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
html.acc-no-anim .conseil-section-man { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .conseil-section-man { animation: none; } }
.conseil-section h2 { font-size: 1.9rem; margin-bottom: 28px; padding-right: 150px; }
.conseil-section p { font-size: 1.12rem; line-height: 2; margin-bottom: 26px; padding-left: 26px; position: relative; }
.conseil-section p::before {
  content: ""; position: absolute; left: 0; top: .85em; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
}
.conseil-section p.conseil-lead { padding-left: 0; font-size: 1.25rem; line-height: 1.85; padding-right: 20px; }
.conseil-section p.conseil-lead::before { display: none; }
.conseil-callout { margin: 34px 0; font-size: 1.3rem; border-radius: 0 26px 26px 0; }
.conseil-section.dir-orange h2, .conseil-section.dir-cyan h2 { color: #1b1b2b; }
@media (max-width: 700px) {
  .conseil-section { padding: 34px 22px 22px; }
  .conseil-section-man { height: 78px; right: 18px; top: 16px; }
  .conseil-section h2 { font-size: 1.4rem; padding-right: 90px; }
  .conseil-section p { padding-left: 20px; font-size: 1.05rem; }
}
.conseil-section-man { top: 32px; height: 104px; }

/* Article : version plus compacte en taille */
.conseil-section { padding: 30px 38px 22px; margin-bottom: 30px; border-radius: 22px; }
.conseil-section::after { width: 170px; height: 150px; right: -50px; top: -55px; }
.conseil-section-man { height: 78px; top: 22px; right: 30px; }
.conseil-section h2 { font-size: 1.4rem; gap: 11px; margin-bottom: 18px; padding-right: 110px; }
.conseil-num { width: 36px; height: 36px; border-radius: 12px; font-size: 1.05rem; }
.conseil-section p { font-size: .98rem; line-height: 1.8; margin-bottom: 16px; padding-left: 22px; }
.conseil-section p::before { width: 8px; height: 8px; }
.conseil-section p.conseil-lead { font-size: 1.05rem; line-height: 1.75; }
.conseil-callout { font-size: 1.05rem; padding: 16px 22px 16px 28px; margin: 22px 0; border-radius: 0 18px 18px 0; }
.conseil-callout::before { font-size: 2.4rem; left: 8px; top: -4px; }
.conseil-resource { padding: 18px 24px; }
.conseil-resource h2 { font-size: .95rem; }
@media (max-width: 700px) {
  .conseil-section { padding: 26px 20px 16px; }
  .conseil-section-man { height: 58px; }
  .conseil-section h2 { font-size: 1.2rem; padding-right: 70px; }
}

/* Article : texte encore plus petit pour voir plus de contenu */
#conseil-detail-title { font-size: 1.7rem; }
.conseil-section { padding: 24px 32px 14px; margin-bottom: 22px; }
.conseil-section h2 { font-size: 1.15rem; margin-bottom: 12px; }
.conseil-num { width: 30px; height: 30px; font-size: .9rem; border-radius: 10px; }
.conseil-section p { font-size: .86rem; line-height: 1.7; margin-bottom: 11px; padding-left: 18px; }
.conseil-section p::before { width: 7px; height: 7px; top: .72em; }
.conseil-section p.conseil-lead { font-size: .92rem; line-height: 1.7; }
.conseil-callout { font-size: .92rem; padding: 12px 18px 12px 24px; margin: 16px 0; line-height: 1.55; }
.conseil-callout::before { font-size: 2rem; }
.conseil-section-man { height: 64px; top: 18px; }
.conseil-byline { font-size: .86rem; margin: 6px 0 2px; }
.conseil-patho-pill { font-size: .72rem; padding: 4px 11px; }
.conseil-article-head { margin-bottom: 16px; }
.conseil-resource { padding: 14px 20px; margin-bottom: 22px; }
.conseil-resource h2 { font-size: .86rem; }
.conseil-resource p { font-size: .8rem; }
.conseil-section p.conseil-lead { padding-right: 90px; }
.conseil-callout cite { display: block; margin-top: 8px; font-size: .78rem; font-weight: 600; font-style: normal; color: #4b5563; }

/* À lire aussi : deux cartes égales */
.conseil-related .conseil-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 30px; }
.conseil-related .conseil-card-top { align-self: flex-start; }
.conseil-related .conseil-patho-pill { white-space: nowrap; }
.conseil-related .conseil-card h3 { font-size: 1rem; }
.conseil-related .conseil-summary { font-size: .88rem; }
@media (max-width: 700px) { .conseil-related .conseil-grid { grid-template-columns: 1fr; } }

/* Encadrés : étincelle "flash" à la place des guillemets */
.conseil-callout { padding-left: 34px; }
.conseil-callout::before {
  content: ""; position: absolute; left: -17px; top: 50%; width: 34px; height: 34px; margin-top: -17px;
  border-radius: 50%; background: var(--accent); font-size: 0; line-height: 0;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: conseil-flash 1.8s ease-in-out infinite;
}
.conseil-callout::after {
  content: ""; position: absolute; left: -17px; top: 50%; width: 34px; height: 34px; margin-top: -17px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l1.9 5.6L19.5 11.5l-5.6 1.9L12 19l-1.9-5.6L4.5 11.5l5.6-1.9z'/%3E%3C/svg%3E") center / 62% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l1.9 5.6L19.5 11.5l-5.6 1.9L12 19l-1.9-5.6L4.5 11.5l5.6-1.9z'/%3E%3C/svg%3E") center / 62% no-repeat;
  animation: conseil-flash-spin 1.8s ease-in-out infinite;
}
.dir-orange .conseil-callout::after, .dir-cyan .conseil-callout::after { background: #1b1b2b; }
@keyframes conseil-flash { 0%,100% { transform: scale(1); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); } 50% { transform: scale(1.12); box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 10%, transparent); } }
@keyframes conseil-flash-spin { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(25deg); } }
html.acc-no-anim .conseil-callout::before, html.acc-no-anim .conseil-callout::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .conseil-callout::before, .conseil-callout::after { animation: none; } }
.conseil-section .conseil-callout::after { background: #fff; }
.conseil-section.dir-orange .conseil-callout::after, .conseil-section.dir-cyan .conseil-callout::after { background: #1b1b2b; }
.conseil-callout { border-left-width: 0; box-shadow: inset 6px 0 0 var(--accent); }
.conseil-callout { box-shadow: none; border-left-width: 0; border-radius: 0 26px 26px 0; padding-left: 36px; margin-left: 17px; } .conseil-callout::before, .conseil-callout::after { left: -17px; }

/* Article : listes et sous-titres */
.conseil-list { position: relative; z-index: 1; list-style: none; margin: 0 0 20px; padding: 0; }
.conseil-list li {
  position: relative; padding: 9px 14px 9px 38px; margin-bottom: 8px;
  background: color-mix(in srgb, var(--accent) 9%, #fff); border-radius: 12px;
  font-size: .86rem; line-height: 1.6; color: #2d3142;
}
.conseil-list li::before {
  content: ""; position: absolute; left: 15px; top: 1.05em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
.conseil-section p.conseil-label { padding-left: 0; font-weight: 800; color: #1b1b2b; margin-bottom: 10px; }
.conseil-section p.conseil-label::before { display: none; }

/* À lire aussi : petit carrousel défilant */
.conseil-related-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.conseil-related-head h2 { margin: 0; font-size: 1.15rem; }
.conseil-related-nav { display: flex; gap: 8px; }
.conseil-nav-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: #1566b1; color: #fff; font-size: 1.1rem; font-weight: 800;
  box-shadow: 0 6px 14px rgba(21,102,177,.3); transition: transform .2s ease;
}
.conseil-nav-btn:hover { transform: scale(1.1); }
.conseil-carousel {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 4px 16px; margin: 0 -4px 20px; scrollbar-width: thin;
}
.conseil-mini {
  flex: 0 0 220px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: #fff; border-radius: 16px; border-top: 4px solid var(--accent);
  padding: 14px 16px; color: inherit; text-decoration: none;
  box-shadow: 0 6px 16px rgba(30,40,80,.08); transition: transform .2s ease;
}
.conseil-mini:hover { transform: translateY(-3px); }
.conseil-mini h3 { margin: 0; font-size: .88rem; line-height: 1.35; flex: 1; }
.conseil-mini .conseil-patho-pill { font-size: .66rem; padding: 3px 9px; }
.conseil-mini-author { font-size: .75rem; color: #6b7280; }
html.acc-no-anim .conseil-mini, html.acc-no-anim .conseil-nav-btn { transition: none !important; }

/* À lire aussi : cartes plus basses, flèches discrètes */
.conseil-mini { flex-basis: 215px; gap: 5px; padding: 10px 14px; border-radius: 14px; border-top-width: 3px; }
.conseil-mini h3 { font-size: .8rem; line-height: 1.3; flex: 0 0 auto; }
.conseil-mini .conseil-patho-pill { font-size: .62rem; padding: 2px 8px; }
.conseil-mini-author { font-size: .7rem; }
.conseil-carousel { padding-bottom: 10px; margin-bottom: 14px; }
.conseil-related-head h2 { font-size: 1.05rem; }
.conseil-nav-btn {
  width: 30px; height: 30px; font-size: .85rem; font-weight: 600;
  background: transparent; color: #8a91a5; border: 1.5px solid #d5d9e6; box-shadow: none;
  display: grid; place-items: center; padding: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.conseil-nav-btn:hover { background: #1566b1; border-color: #1566b1; color: #fff; transform: none; }
.conseil-related-nav { gap: 6px; }
.conseil-mini { flex-basis: 172px; }
.conseil-related-nav { display: none; }
.conseil-carousel { cursor: grab; }
.conseil-mini { flex: 0 0 172px; width: 172px; min-width: 0; box-sizing: border-box; }
.conseil-related .conseil-mini .conseil-patho-pill { white-space: normal; line-height: 1.25; max-width: 100%; }
.conseil-mini { flex-basis: 165px; width: 165px; padding: 12px 14px; gap: 6px; }
.conseil-carousel { align-items: stretch; } .conseil-mini h3 { flex: 1 1 auto; } .conseil-mini-author { margin-top: auto; }

/* ===== Aides financières ===== */
.aide-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 22px; }
.aide-tab { padding: 8px 16px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: .88rem; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.aide-tab:hover { transform: translateY(-2px); box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.aide-section { margin: 0 0 30px; scroll-margin-top: 90px; }
.aide-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.2rem; }
.aide-section-title span { width: 10px; height: 26px; border-radius: 6px; background: var(--accent); }
.aide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.aide-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border-radius: 18px; background: #fff; border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: 0 6px 18px rgba(20,30,60,.06); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.aide-card::before { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.aide-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 22%, transparent); }
.aide-num { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: .9rem; display: grid; place-items: center; }
.aide-card h3 { position: relative; margin: 0; font-size: 1rem; line-height: 1.3; }
.aide-card p { position: relative; margin: 0; font-size: .88rem; color: #4b5563; line-height: 1.5; }
.aide-link { position: relative; margin-top: auto; align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem; text-decoration: none; }
.aide-soon { padding: 14px 18px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1.5px dashed var(--accent); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .aide-card, .aide-tab { transition: none; } }
html.acc-no-anim .aide-card, html.acc-no-anim .aide-tab { transition: none; }
.aide-section { --accent: inherit; }
.aide-section.dir-rose { --accent: #ed1b5f; } .aide-section.dir-bleu { --accent: #1566b1; } .aide-section.dir-orange { --accent: #fba91c; }
.aide-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.aide-section-head .aide-section-title { margin: 0; }
.aide-filter { font-size: .85rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.aide-filter select { padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--accent); background: #fff; font: inherit; font-weight: 600; }
.aide-place { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, #fff); color: color-mix(in srgb, var(--accent) 80%, black); font-size: .78rem; font-weight: 700; }
/* aides : éléments plus fins */
.aide-tabs { gap: 8px; margin: 6px 0 18px; }
.aide-tab { padding: 4px 12px; font-size: .78rem; font-weight: 600; line-height: 1.4; background: color-mix(in srgb, var(--accent) 12%, #fff); color: color-mix(in srgb, var(--accent) 85%, black); border: 1.5px solid var(--accent); }
.aide-tab:hover { background: var(--accent); color: #fff; box-shadow: none; transform: none; }
.aide-link { padding: 4px 11px; font-size: .78rem; font-weight: 600; line-height: 1.4; background: transparent; color: color-mix(in srgb, var(--accent) 85%, black); border: 1.5px solid var(--accent); transition: background .2s, color .2s; }
.aide-link:hover { background: var(--accent); color: #fff; }
/* aides : menu moderne (segmenté) */
.aide-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 6px 0 20px; border-radius: 999px; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(20,30,60,.10); position: sticky; top: 10px; z-index: 20; }
.aide-tab { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border: 0; border-radius: 999px; background: transparent; color: #374151; font-size: .8rem; font-weight: 700; transition: background .25s, color .25s, box-shadow .25s; }
.aide-tab i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transition: background .25s; }
.aide-tab:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: #111827; transform: none; box-shadow: none; }
.aide-tab.is-active { background: var(--accent); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.aide-tab.is-active i { background: #fff; }
.aide-link { background: var(--accent); color: #fff; border: 0; padding: 5px 12px; transition: transform .2s, box-shadow .2s; }
.aide-link:hover { background: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
html.acc-no-anim .aide-tab, html.acc-no-anim .aide-link { transition: none; }
/* aides : cartes plus aérées et visuelles */
.aide-grid { gap: 22px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.aide-card { gap: 12px; padding: 30px 26px 26px; border: 0; border-radius: 26px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, #fff) 0%, #fff 55%); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 16%, transparent); }
.aide-card::before { right: -50px; top: -50px; width: 170px; height: 170px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.aide-card::after { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 5px; border-radius: 0 0 6px 6px; background: var(--accent); }
.aide-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px color-mix(in srgb, var(--accent) 28%, transparent); }
.aide-num { width: 40px; height: 40px; font-size: 1.05rem; box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.aide-card h3 { font-size: 1.12rem; margin-top: 4px; }
.aide-card p { font-size: .92rem; line-height: 1.6; margin-bottom: 10px; }
.aide-link { padding: 9px 18px; font-size: .88rem; font-weight: 700; box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 32%, transparent); }
.aide-link span { display: inline-block; transition: transform .2s; }
.aide-link:hover span { transform: translateX(4px); }
.aide-place { align-self: flex-start; }
.aide-card::after { left: 0; right: 0; border-radius: 0; height: 6px; }
/* aides : version plus compacte (ajustement) */
.aide-grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.aide-card { gap: 8px; padding: 20px 20px 18px; border-radius: 20px; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent); }
.aide-card::before { right: -40px; top: -40px; width: 110px; height: 110px; }
.aide-card::after { height: 4px; }
.aide-num { width: 28px; height: 28px; font-size: .85rem; box-shadow: none; }
.aide-card h3 { font-size: .98rem; margin-top: 2px; }
.aide-card p { font-size: .86rem; line-height: 1.5; margin-bottom: 4px; }
.aide-link { padding: 6px 14px; font-size: .8rem; box-shadow: none; }
.aide-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 24%, transparent); }
/* aides : version épurée */
.aide-num, .aide-card::before, .aide-card::after { display: none; }
.aide-grid { gap: 20px; }
.aide-card { gap: 10px; padding: 24px 24px 22px; background: color-mix(in srgb, var(--accent) 7%, #fff); box-shadow: none; border-radius: 20px; }
.aide-card h3 { font-size: 1rem; color: color-mix(in srgb, var(--accent) 75%, black); margin-top: 0; }
.aide-card p { margin-bottom: 8px; }
.aide-card:hover { box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 20%, transparent); }
/* aides : équilibre */
.aide-card::before { display: block; right: -34px; top: -34px; width: 100px; height: 100px; background: color-mix(in srgb, var(--accent) 13%, transparent); }
.aide-ico { position: relative; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; font-size: 1rem; margin-bottom: 4px; transform: rotate(-6deg); transition: transform .25s; }
.aide-card:hover .aide-ico { transform: rotate(6deg) scale(1.08); }
html.acc-no-anim .aide-ico { transition: none; }
.aide-card { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, #fff), color-mix(in srgb, var(--accent) 3%, #fff)); }
/* aides : retour version avec bande + relief + dynamisme */
.aide-ico { display: none; }
.aide-card { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, #fff) 0%, #fff 60%); padding: 22px 22px 20px; border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(20,30,60,.05), 0 12px 26px color-mix(in srgb, var(--accent) 20%, transparent), 0 4px 0 color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.aide-card::after { display: block; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)); border-radius: 0; }
.aide-card::before { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.aide-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 8px rgba(20,30,60,.06), 0 20px 36px color-mix(in srgb, var(--accent) 32%, transparent), 0 4px 0 var(--accent); }
.aide-card:hover::before { transform: scale(1.5) translate(-8px, 8px); }
.aide-card .aide-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%); transform: translateX(-120%); }
.aide-card:hover .aide-shine { transform: translateX(120%); transition: transform .7s ease; }
.aide-card h3 { color: #111827; }
.aide-link:hover { transform: translateY(-2px) scale(1.04); }
@media (prefers-reduced-motion: reduce) { .aide-card:hover { transform: none; } .aide-card:hover .aide-shine { transition: none; } }
html.acc-no-anim .aide-card, html.acc-no-anim .aide-card::before, html.acc-no-anim .aide-shine { transition: none !important; }
html.acc-no-anim .aide-card:hover { transform: none; }
/* aides : sans bandes, ombre marquée */
.aide-card::after { display: none; }
.aide-card { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(20,30,60,.10), 0 10px 22px rgba(20,30,60,.12), 0 22px 44px color-mix(in srgb, var(--accent) 30%, transparent); }
.aide-card:hover { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 10px rgba(20,30,60,.12), 0 16px 30px rgba(20,30,60,.15), 0 32px 60px color-mix(in srgb, var(--accent) 40%, transparent); }

/* ===== Quiz ===== */
.quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin: 10px 0 30px; }
.quiz-card { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; overflow: hidden; background: var(--accent); color: #fff; box-shadow: 0 10px 22px rgba(20,30,60,.12), 0 20px 40px color-mix(in srgb, var(--accent) 32%, transparent); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.quiz-card::before { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.18); transition: transform .5s; }
.quiz-card:hover, .quiz-card:focus-visible { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(20,30,60,.15), 0 30px 56px color-mix(in srgb, var(--accent) 42%, transparent); }
.quiz-card:hover::before { transform: scale(1.4); }
.quiz-card:focus-visible { outline: 3px solid #111827; outline-offset: 3px; }
.quiz-card-count { position: relative; align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.25); font-size: .75rem; font-weight: 700; }
.quiz-card h2 { position: relative; margin: 0; font-size: 1.15rem; line-height: 1.3; color: #fff; }
.quiz-card p { position: relative; margin: 0; font-size: .9rem; opacity: .95; }
.quiz-card-go { position: relative; margin-top: 8px; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: #fff; color: #111827; font-weight: 700; font-size: .82rem; }
.quiz-box { --qa: var(--accent); max-width: 760px; margin: 10px auto 30px; padding: 22px 26px 26px; border-radius: 24px; background: #fff; box-shadow: 0 10px 22px rgba(20,30,60,.10), 0 24px 48px color-mix(in srgb, var(--accent) 22%, transparent); }
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.quiz-back { all: unset; cursor: pointer; font-size: .85rem; font-weight: 700; color: #4b5563; }
.quiz-back:hover { color: var(--accent); }
.quiz-title { font-size: .82rem; font-weight: 700; color: var(--accent); }
.quiz-progress { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 15%, #fff); overflow: hidden; }
.quiz-progress span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .4s; }
.quiz-count { margin: 18px 0 4px; font-size: .82rem; font-weight: 700; color: var(--accent); }
.quiz-q { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.35; }
.quiz-note { margin: 0; font-size: .85rem; color: #6b7280; }
.quiz-options { display: grid; gap: 10px; margin: 18px 0 8px; }
.quiz-opt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, #fff); font-weight: 600; font-size: .98rem; box-shadow: 0 2px 6px rgba(20,30,60,.08); transition: transform .2s, box-shadow .2s, background .2s; }
.quiz-opt:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 25%, transparent); }
.quiz-opt:focus-visible { outline: 3px solid #111827; outline-offset: 2px; }
.quiz-opt-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent); background: #fff; display: grid; place-items: center; font-size: .75rem; color: #fff; }
.quiz-opt.is-selected { background: color-mix(in srgb, var(--accent) 18%, #fff); }
.quiz-opt.is-selected .quiz-opt-mark { background: var(--accent); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.is-right { background: #dcfce7; } .quiz-opt.is-right .quiz-opt-mark { background: #16a34a; border-color: #16a34a; } .quiz-opt.is-right .quiz-opt-mark::after { content: "✓"; }
.quiz-opt.is-wrong { background: #fee2e2; } .quiz-opt.is-wrong .quiz-opt-mark { background: #dc2626; border-color: #dc2626; } .quiz-opt.is-wrong .quiz-opt-mark::after { content: "✕"; }
.quiz-feedback { display: none; margin-top: 14px; padding: 12px 16px; border-radius: 14px; font-size: .92rem; line-height: 1.55; }
.quiz-feedback.is-shown { display: block; }
.quiz-feedback.ok { background: #f0fdf4; border-left: 5px solid #16a34a; }
.quiz-feedback.ko { background: #fff7ed; border-left: 5px solid #f59e0b; }
.quiz-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.quiz-btn { all: unset; box-sizing: border-box; cursor: pointer; padding: 9px 20px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem; box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .2s; }
.quiz-btn:hover:not(:disabled) { transform: translateY(-2px); }
.quiz-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.quiz-btn:focus-visible { outline: 3px solid #111827; outline-offset: 2px; }
.quiz-btn--ghost { background: color-mix(in srgb, var(--accent) 12%, #fff); color: color-mix(in srgb, var(--accent) 70%, black); box-shadow: none; }
.quiz-result { text-align: center; }
.quiz-result .quiz-actions { justify-content: center; }
.quiz-score { margin: 26px auto 10px; width: 130px; height: 130px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-content: center; box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 40%, transparent); }
.quiz-score b { font-size: 2.8rem; line-height: 1; } .quiz-score span { font-size: .9rem; opacity: .9; }
.quiz-source { margin: 22px 0 0; font-size: .8rem; color: #6b7280; }
.quiz-source a { color: var(--accent); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .quiz-card, .quiz-opt, .quiz-btn, .quiz-progress span { transition: none; } }
html.acc-no-anim .quiz-card, html.acc-no-anim .quiz-card::before, html.acc-no-anim .quiz-opt, html.acc-no-anim .quiz-btn, html.acc-no-anim .quiz-progress span { transition: none; }
.quiz-grid[hidden], #quiz-play[hidden], .contact-cta[hidden], .quiz-btn[hidden] { display: none !important; }
.quiz-card-tags { position: relative; display: flex; gap: 6px; flex-wrap: wrap; }
.quiz-card-src { background: #fff; color: #111827; }
.quiz-badge { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; }

/* ===== Prescrire l'APA ===== */
.presc-legal { margin: 0 0 14px; font-size: .95rem; color: #374151; max-width: 760px; }
.presc-note { margin: 14px 0 0; font-size: .82rem; color: #6b7280; font-style: italic; }
.presc-step { padding-top: 22px; }
.presc-num { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; display: grid; place-items: center; box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.aide-section .aide-place { margin-bottom: 2px; }

/* ===== Outils d'accompagnement ===== */
.outil-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; margin: 10px 0 36px; align-items: stretch; }
.outil-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 24px; background: var(--accent); color: #fff; box-shadow: 0 10px 22px rgba(20,30,60,.12), 0 22px 44px color-mix(in srgb, var(--accent) 32%, transparent); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.outil-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(20,30,60,.14), 0 30px 56px color-mix(in srgb, var(--accent) 42%, transparent); }
.outil-blob { position: absolute; right: -50px; top: -50px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.16); pointer-events: none; }
.outil-card h2 { position: relative; margin: 0; font-size: 1.25rem; line-height: 1.25; color: #fff; }
.outil-card p { position: relative; margin: 0; font-size: .92rem; line-height: 1.55; opacity: .96; }
.outil-links { position: relative; margin-top: auto; padding-top: 10px; display: grid; gap: 10px; }
.outil-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-radius: 999px; background: #fff; color: #111827; font-weight: 700; font-size: .85rem; text-decoration: none; box-shadow: 0 6px 14px rgba(20,30,60,.16); transition: transform .2s, box-shadow .2s; }
.outil-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(20,30,60,.22); }
.outil-btn:focus-visible { outline: 3px solid #111827; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .outil-card, .outil-btn { transition: none; } }
html.acc-no-anim .outil-card, html.acc-no-anim .outil-btn { transition: none; }
/* outils : boutons discrets */
.outil-btn { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; padding: 8px 14px; font-weight: 600; font-size: .82rem; border: 1px solid rgba(255,255,255,.3); }
.outil-btn:hover { background: rgba(255,255,255,.34); transform: none; box-shadow: none; }
.outil-btn:focus-visible { outline-color: #fff; }

/* Événements : le menu déroulant ne doit plus être coupé par le cadre des filtres */
.event-filters-card { overflow: visible; z-index: 10; }
.event-filters-card::before { border-radius: 20px 20px 0 0; }

/* ===== Guide Booster : connexion ===== */
.login-card { max-width: 480px; margin: 10px auto 40px; padding: 28px 28px 24px; border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 10px 22px rgba(20,30,60,.10), 0 24px 48px color-mix(in srgb, var(--accent) 22%, transparent); }
.login-card h2 { margin: 0 0 4px; font-size: 1.5rem; }
.login-sub { margin: 0 0 20px; color: #4b5563; font-size: .95rem; }
.login-profiles { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #f1f3f9; margin-bottom: 20px; }
.login-profile { all: unset; box-sizing: border-box; flex: 1; cursor: pointer; padding: 8px 10px; border-radius: 999px; font-weight: 700; font-size: .84rem; color: #374151; text-align: center; transition: background .25s, color .25s, box-shadow .25s; }
.login-profile:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.login-profile.is-active { background: var(--accent); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.login-profile:focus-visible { outline: 3px solid #111827; outline-offset: 2px; }
.login-form { display: grid; gap: 10px; text-align: left; }
.login-form label { font-weight: 700; font-size: .85rem; }
.login-form input { padding: 11px 14px; border-radius: 14px; border: 1.5px solid #d6dbe6; font: inherit; font-size: .95rem; }
.login-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.login-submit { text-align: center; margin-top: 4px; padding: 11px 20px; }
.login-msg { margin: 4px 0 0; padding: 10px 14px; border-radius: 12px; background: #eff6ff; border-left: 4px solid #1566b1; font-size: .88rem; }
.login-msg.is-error { background: #fef2f2; border-left-color: #dc2626; }
.login-msg[hidden] { display: none; }
.login-alt { margin: 16px 0 6px; font-size: .88rem; color: #4b5563; }
.login-alt a { color: var(--accent); font-weight: 700; }
.login-card .event-detail-back { display: inline-block; margin-top: 8px; }
html.acc-no-anim .login-profile { transition: none; }

/* ===== Guide Booster : annuaire ===== */
.gb-preview { margin: 6px 0 14px; padding: 8px 14px; border-radius: 12px; background: #fff7ed; border-left: 4px solid #fba91c; font-size: .85rem; }
.gb-filters { display: grid; grid-template-columns: 2fr 1.4fr 1.4fr 1.4fr; gap: 12px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 10px 22px rgba(20,30,60,.08), 0 18px 40px rgba(21,102,177,.12); }
.gb-field { display: grid; gap: 4px; }
.gb-field label { font-size: .75rem; font-weight: 700; color: #4b5563; }
.gb-field input, .gb-field select { padding: 9px 12px; border-radius: 12px; border: 1.5px solid #d6dbe6; background: #fff; font: inherit; font-size: .9rem; min-width: 0; }
.gb-field input:focus, .gb-field select:focus { outline: none; border-color: #1566b1; box-shadow: 0 0 0 4px rgba(21,102,177,.15); }
.gb-count { margin: 14px 2px 8px; font-size: .85rem; font-weight: 700; color: #4b5563; }
.gb-layout { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 18px; align-items: start; margin-bottom: 36px; }
.gb-list { display: grid; gap: 10px; max-height: 640px; overflow-y: auto; padding: 4px 6px 8px 2px; align-content: start; }
.gb-card { --accent: #1566b1; border-radius: 16px; background: #fff; box-shadow: 0 2px 6px rgba(20,30,60,.08), 0 8px 18px rgba(20,30,60,.06); border-left: 5px solid var(--accent); overflow: hidden; }
.gb-card.dir-rose { --accent: #ed1b5f; } .gb-card.dir-bleu { --accent: #1566b1; }
.gb-card.is-open { box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 25%, transparent); }
.gb-card-head { all: unset; box-sizing: border-box; width: 100%; display: grid; gap: 4px; padding: 12px 14px; cursor: pointer; }
.gb-card-head:focus-visible { outline: 3px solid #111827; outline-offset: -3px; }
.gb-card-name { font-weight: 800; font-size: .95rem; line-height: 1.3; }
.gb-card-addr { font-size: .8rem; color: #6b7280; }
.gb-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.gb-tag { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: color-mix(in srgb, var(--accent) 80%, black); font-size: .72rem; font-weight: 700; }
.gb-card-body { padding: 0 14px 14px; font-size: .86rem; line-height: 1.5; }
.gb-card-body[hidden] { display: none; }
.gb-card-body p { margin: 0 0 8px; }
.gb-contacts { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.gb-contacts li { display: grid; grid-template-columns: 78px 1fr; gap: 8px; }
.gb-contacts span { font-weight: 700; color: #6b7280; font-size: .78rem; }
.gb-contacts a, .gb-upd a { color: var(--accent); font-weight: 700; word-break: break-word; }
.gb-info { padding: 8px 10px; border-radius: 10px; background: #f6f8fc; }
.gb-upd { font-size: .78rem; color: #6b7280; }
.gb-empty { padding: 20px; text-align: center; color: #6b7280; }
.gb-mapwrap { position: sticky; top: 12px; }
#gb-map { height: 640px; border-radius: 20px; overflow: hidden; background: #e8eef7; box-shadow: 0 10px 22px rgba(20,30,60,.10), 0 22px 44px rgba(21,102,177,.16); z-index: 1; }
.gb-geo { margin: 8px 2px 0; font-size: .8rem; color: #4b5563; }
.gb-geo[hidden] { display: none; }
.gb-pin span { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.35); box-sizing: border-box; }
@media (max-width: 900px) {
  .gb-filters { grid-template-columns: 1fr 1fr; } .gb-field--search { grid-column: 1 / -1; }
  .gb-layout { grid-template-columns: 1fr; } .gb-mapwrap { position: static; order: -1; } #gb-map { height: 340px; } .gb-list { max-height: none; }
}
.login-demo { margin: 14px 0 0; font-size: .8rem; } .login-demo a { color: #6b7280; text-decoration: underline; }
/* Leaflet essentials (inline: external stylesheets are not allowed in the preview) */
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}
.leaflet-container{overflow:hidden;-webkit-tap-highlight-color:transparent;background:#e8eef7;outline-offset:1px;font-family:inherit}
.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.leaflet-tile::selection{background:transparent}
.leaflet-container img.leaflet-tile,.leaflet-container .leaflet-marker-icon{max-width:none!important;max-height:none!important;width:auto;padding:0}
.leaflet-tile{visibility:hidden}.leaflet-tile-loaded{visibility:inherit}
.leaflet-zoom-box{width:0;height:0;box-sizing:border-box;z-index:800}
.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}
.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}
.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto;float:left;clear:both}
.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}
.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}
.leaflet-right .leaflet-control{float:right;margin-right:10px}
.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}
.leaflet-left .leaflet-control{margin-left:10px}
.leaflet-zoom-animated{transform-origin:0 0}
.leaflet-zoom-anim .leaflet-zoom-animated{transition:transform .25s cubic-bezier(0,0,.25,1)}
.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{transition:none}
.leaflet-fade-anim .leaflet-popup{opacity:0;transition:opacity .2s linear}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}
.leaflet-interactive{cursor:pointer}
.leaflet-grab{cursor:grab}.leaflet-dragging .leaflet-grab{cursor:move}
.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,.35);border-radius:6px;background:#fff}
.leaflet-bar a{display:block;width:30px;height:30px;line-height:30px;text-align:center;text-decoration:none;color:#222;background:#fff;font:bold 18px 'Lucida Console',Monaco,monospace;border-bottom:1px solid #ccc}
.leaflet-bar a:first-child{border-radius:6px 6px 0 0}.leaflet-bar a:last-child{border-radius:0 0 6px 6px;border-bottom:none}
.leaflet-bar a:hover{background:#f4f4f4}
.leaflet-control-attribution{background:rgba(255,255,255,.8);padding:0 6px;font-size:11px;margin:0}
.leaflet-container a{color:#1566b1}
.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}
.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.3)}
.leaflet-popup-content{margin:13px 24px 13px 20px;line-height:1.4;min-height:1px}
.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none}
.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;transform:rotate(45deg);background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.3)}
.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;padding:4px 8px 0 0;text-align:center;width:24px;height:24px;font:16px/24px Tahoma,Verdana,sans-serif;color:#757575;text-decoration:none;background:transparent}
.leaflet-div-icon{background:#fff;border:1px solid #666}
/* markercluster */
.leaflet-cluster-anim .leaflet-marker-icon,.leaflet-cluster-anim .leaflet-marker-shadow{transition:transform .3s ease-out,opacity .3s ease-in}
.marker-cluster{background-clip:padding-box;border-radius:20px}
.marker-cluster div{width:30px;height:30px;margin-left:5px;margin-top:5px;text-align:center;border-radius:15px;font:12px "Helvetica Neue",Arial,Helvetica,sans-serif}
.marker-cluster span{line-height:30px}
.marker-cluster-small{background-color:rgba(21,102,177,.35)}.marker-cluster-small div{background-color:rgba(21,102,177,.8);color:#fff}
.marker-cluster-medium{background-color:rgba(101,75,158,.35)}.marker-cluster-medium div{background-color:rgba(101,75,158,.8);color:#fff}
.marker-cluster-large{background-color:rgba(237,27,95,.35)}.marker-cluster-large div{background-color:rgba(237,27,95,.8);color:#fff}

/* Prescrire l'APA : cadre */
.apa-def { max-width: 860px; }
.apa-quote { margin: 0 0 8px; padding: 6px 0 6px 22px; border-left: 5px solid var(--accent); font-size: 1rem; line-height: 1.65; color: #1f2937; font-style: italic; }
.apa-src { margin: 0; font-size: .85rem; color: #6b7280; }
.apa-srclink { color: var(--accent); font-weight: 600; }
.apa-who { max-width: 860px; font-size: .92rem; color: #374151; }
.apa-intro { margin: 0 0 8px; font-weight: 600; }
.apa-list { margin: 0 0 14px; padding-left: 22px; line-height: 1.6; }
.apa-list li { margin-bottom: 6px; }
.apa-list a { color: var(--accent); font-weight: 600; }
.apa-recap { margin: 0; font-size: .92rem; }
.apa-links { display: flex; flex-wrap: wrap; gap: 8px; }
.apa-links--card { margin-top: auto; padding-top: 4px; }
.apa-links--card .aide-link { margin-top: 0; }
.aide-card.dir-orange .aide-link, .aide-card.dir-cyan .aide-link { color: #1b1b2b; }
.apa-list > li { margin-bottom: 12px; }
.apa-sub { list-style: none; margin: 6px 0 0; padding-left: 4px; font-size: .88rem; }
.apa-sub li { margin: 3px 0; }
.apa-note { color: #6b7280; font-style: italic; font-size: .85rem; }
.apa-note a{color:var(--accent);font-weight:600;font-style:normal}
/* APA : professions en lignes */
.apa-rows { display: grid; gap: 10px; margin: 6px 0 16px; max-width: 860px; }
.apa-row { display: grid; grid-template-columns: 18px minmax(200px, 1.3fr) 2fr; gap: 14px; align-items: center; padding: 12px 18px; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(20,30,60,.07); }
.apa-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 5px rgba(0,0,0,.06); }
.apa-name { display: flex; flex-direction: column; gap: 2px; }
.apa-name strong { font-size: .98rem; color: #1f2937; }
.apa-name small { font-size: .78rem; color: #6b7280; }
.apa-name .apa-note { font-size: .78rem; font-style: normal; color: #4b5563; margin-top: 3px; }
.apa-name .apa-note a { color: var(--accent); font-weight: 600; }
.apa-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.apa-btn { padding: 5px 13px; border-radius: 999px; border: 1.5px solid #cfd8e6; background: #f7f9fc; color: #1f2937; font-weight: 600; font-size: .8rem; text-decoration: none; transition: background .2s, border-color .2s; }
.apa-btn:hover { background: #fff; border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) { .apa-row { grid-template-columns: 18px 1fr; } .apa-btns { grid-column: 2; justify-content: flex-start; } }
/* APA : professions en cases */
.apa-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 8px 0 16px; }
.apa-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 20px 16px 16px; border-radius: 22px; background: #fff; box-shadow: 0 10px 26px color-mix(in srgb, var(--c) 18%, transparent); transition: transform .25s, box-shadow .25s; }
.apa-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 32px color-mix(in srgb, var(--c) 28%, transparent); }
.apa-badge { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--c); box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 40%, transparent); margin-bottom: 6px; }
.apa-badge svg { width: 30px; height: 30px; fill: #fff; }
.apa-tile strong { font-size: .98rem; line-height: 1.3; color: #1f2937; }
.apa-tile small { font-size: .78rem; color: #6b7280; margin-bottom: 8px; }
.apa-tile .apa-btns { justify-content: center; margin-top: auto; }
.apa-tile .apa-note { margin-top: 8px; font-size: .75rem; font-style: normal; color: #4b5563; line-height: 1.4; }
.apa-tile .apa-note a { color: var(--c); font-weight: 600; }
html.acc-no-anim .apa-tile { transition: none; }
.apa-who { max-width: none; }
.apa-tile .apa-btns { margin-top: 0; }
.apa-tiles { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .apa-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .apa-tiles { grid-template-columns: 1fr; } }
/* APA : version allégée */
.apa-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin: 14px 0 18px; }
.apa-tile { padding: 22px 12px 18px; gap: 10px; border-radius: 20px; }
.apa-badge { width: 46px; height: 46px; margin-bottom: 2px; }
.apa-badge svg { width: 24px; height: 24px; }
.apa-tile strong { font-size: .88rem; }
.apa-tile .apa-btns { flex-direction: column; align-items: center; gap: 6px; }
.apa-btn { padding: 4px 11px; font-size: .74rem; }
.apa-eapa { margin: 0 0 12px; font-size: .85rem; color: #4b5563; }
.apa-eapa a { color: #654b9e; font-weight: 600; }
@media (max-width: 800px) { .apa-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .apa-tiles { grid-template-columns: repeat(2, 1fr); } }
.apa-who { max-width: 860px; }
.apa-tiles { grid-template-columns: repeat(6, 1fr); gap: 12px; }
.apa-tile { padding: 18px 8px 14px; }
.apa-tile strong { font-size: .8rem; overflow-wrap: anywhere; hyphens: auto; }
.apa-btn { padding: 3px 9px; font-size: .7rem; }
@media (max-width: 800px) { .apa-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .apa-tiles { grid-template-columns: repeat(2, 1fr); } }
/* alignement : texte et cases sur toute la largeur */
.apa-def, .apa-who { max-width: none; }
.apa-tiles { gap: 16px; }
.apa-tile { padding: 20px 10px 16px; }
.apa-tile strong { font-size: .85rem; overflow-wrap: normal; hyphens: manual; }
.apa-btn { padding: 4px 11px; font-size: .72rem; }
/* Tableau AFP-SPAP */
.apa-table { --accent: #1566b1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, #fff), #fff 60%); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 16%, transparent); }
.apa-table-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent); box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.apa-table-ico svg { width: 26px; height: 26px; }
.apa-table-txt { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.apa-table-txt strong { font-size: .98rem; color: #1f2937; }
.apa-table-txt span { font-size: .88rem; color: #374151; }
.apa-table-txt small { font-size: .78rem; color: #6b7280; }
.apa-table .aide-link { margin-top: 0; align-self: center; }
/* La prescription : déroulé */
.apa-flow { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 14px; position: relative; }
.apa-flow li { position: relative; display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-radius: 20px; background: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--c) 14%, transparent); }
.apa-flow li:not(:last-child)::after { content: ""; position: absolute; left: 44px; top: 100%; width: 3px; height: 14px; background: color-mix(in srgb, var(--c) 35%, #fff); }
.apa-flow-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--c); box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 40%, transparent); }
.apa-flow-ico svg { width: 24px; height: 24px; }
.apa-flow p { margin: 0; font-size: .93rem; line-height: 1.6; color: #374151; }
.apa-flow p a { color: color-mix(in srgb, var(--c) 80%, black); font-weight: 600; }
.apa-extras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 22px 0 12px; }
.apa-extra { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: color-mix(in srgb, var(--c) 7%, #fff); border: 1.5px dashed color-mix(in srgb, var(--c) 45%, #fff); }
.apa-extra .apa-flow-ico { width: 40px; height: 40px; }
.apa-extra .apa-flow-ico svg { width: 21px; height: 21px; }
.apa-extra p { margin: 0; font-size: .88rem; line-height: 1.55; color: #374151; }
@media (max-width: 700px) { .apa-extras { grid-template-columns: 1fr; } }
/* À part du parcours : même style de cases que le parcours, sans fil, empilées */
.apa-extras { grid-template-columns: 1fr; gap: 14px; margin: 28px 0 12px; }
.apa-extra { padding: 16px 22px; gap: 18px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--c) 14%, transparent); }
.apa-extra .apa-flow-ico { width: 46px; height: 46px; }
.apa-extra .apa-flow-ico svg { width: 24px; height: 24px; }
.apa-extra p { font-size: .93rem; line-height: 1.6; }
/* À part : simples lignes de texte, sans case, sous un trait de séparation */
.apa-extras { display: block; margin: 30px 0 12px; padding-top: 18px; border-top: 2px solid #e5e9f2; }
.apa-extra { display: flex; align-items: flex-start; gap: 12px; padding: 0; margin: 0 0 12px; background: none; border: 0; box-shadow: none; border-radius: 0; }
.apa-extra .apa-flow-ico { width: 26px; height: 26px; margin-top: 1px; box-shadow: none; }
.apa-extra .apa-flow-ico svg { width: 14px; height: 14px; }
.apa-extra p { font-size: .88rem; line-height: 1.55; color: #4b5563; }
.apa-extra p { font-size: .93rem; line-height: 1.6; color: #374151; }
.apa-extra { gap: 14px; margin-bottom: 14px; }
.apa-extra .apa-flow-ico { width: 30px; height: 30px; margin-top: 0; }
.apa-extra .apa-flow-ico svg { width: 16px; height: 16px; }
/* Fiche de prescription mise en avant */
.presc-doc { grid-column: 1 / -1; --accent: #ed1b5f; display: flex; align-items: center; gap: 34px; padding: 26px 34px; border-radius: 26px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, #fff), #fff 60%); box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 18%, transparent); flex-wrap: wrap; }
.presc-sheet { position: relative; flex: none; width: 118px; height: 150px; padding: 14px 14px 12px; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(20,30,60,.18), 6px 6px 0 -1px #fde3ec; transform: rotate(-4deg); display: flex; flex-direction: column; gap: 8px; }
.presc-sheet-head { align-self: flex-start; padding: 2px 9px; border-radius: 5px; background: var(--accent); color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .06em; }
.presc-sheet i { display: block; height: 6px; border-radius: 3px; background: #e6e9f0; }
.presc-sheet i.s { width: 60%; }
.presc-sheet b { position: absolute; right: 14px; bottom: 12px; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--accent); }
.presc-sheet b::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); }
.presc-doc-txt { flex: 1; min-width: 240px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.presc-doc-txt h3 { margin: 0; font-size: 1.3rem; }
.presc-doc-txt p { margin: 0; color: #4b5563; font-size: .95rem; }
.presc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.presc-chips span { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: color-mix(in srgb, var(--accent) 85%, black); font-weight: 700; font-size: .8rem; }
/* fiche de prescription : plus compacte */
.presc-doc { padding: 16px 28px; gap: 24px; flex-wrap: nowrap; }
.presc-sheet { width: 78px; height: 100px; padding: 9px 9px 8px; gap: 6px; box-shadow: 0 8px 18px rgba(20,30,60,.16), 4px 4px 0 -1px #fde3ec; }
.presc-sheet-head { font-size: .6rem; padding: 1px 7px; }
.presc-sheet i { height: 5px; }
.presc-sheet b { width: 16px; height: 16px; right: 9px; bottom: 8px; border-width: 2px; }
.presc-sheet b::after { left: 3px; top: 0; width: 4px; height: 8px; border-width: 0 2px 2px 0; }
.presc-doc-txt { gap: 6px; min-width: 0; }
.presc-doc-txt h3 { font-size: 1.15rem; }
.presc-sub { margin: 0; font-size: .92rem; color: #6b7280; }
.presc-doc .presc-dl { margin: 0 0 0 auto; align-self: center; flex: none; padding: 12px 24px; font-size: 1rem; font-weight: 700; }
@media (max-width: 640px) { .presc-doc { flex-wrap: wrap; } .presc-doc .presc-dl { margin: 6px 0 0; } }
.apa-extra { padding-left: 22px; gap: 14px; }
.apa-extra .apa-flow-ico { margin-left: 8px; margin-right: 8px; }
.apa-extra { gap: 18px; }
/* Fiches par pathologie : bandeau qui défile + une fiche */
.patho-strip-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.patho-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 4px 10px; scroll-snap-type: x proximity; scrollbar-width: none; flex: 1; flex-wrap: nowrap; }
.patho-strip::-webkit-scrollbar { display: none; }
.patho-strip:not(.is-scroll) { flex-wrap: wrap; }
.patho-chip { flex: none; scroll-snap-align: start; padding: 9px 16px; border-radius: 999px; border: 1.5px solid #f3d9a4; background: #fff; color: #1f2937; font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; white-space: nowrap; transition: background .2s, transform .2s, box-shadow .2s; }
.patho-chip:hover { background: #fff7e6; transform: translateY(-1px); }
.patho-chip.is-active { background: #fba91c; border-color: #fba91c; color: #1b1b2b; box-shadow: 0 6px 14px rgba(251,169,28,.4); }
.patho-arrow { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: #92400e; font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(20,30,60,.15); }
.patho-arrow:hover { background: #fff7e6; }
.patho-sub { margin: 18px 0 6px; font-size: 1rem; color: #1f2937; }
.patho-detail { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 20px 26px; border-radius: 22px; background: linear-gradient(160deg, #fff4dc, #fff 65%); box-shadow: 0 10px 28px rgba(251,169,28,.22); }
.patho-detail strong { font-size: 1.15rem; color: #1f2937; }
.patho-links { display: flex; flex-wrap: wrap; gap: 10px; }
.patho-links .aide-link { margin: 0; padding: 9px 20px; font-size: .92rem; color: #1b1b2b; }
html.acc-no-anim .patho-chip { transition: none; }
.dir-orange .apa-srclink { color: #92400e; }
.patho-detail[hidden] { display: none; }
.presc-doc--blue { --accent: #1566b1; margin-top: 24px; }
.presc-doc--blue .presc-sheet { box-shadow: 0 8px 18px rgba(20,30,60,.16), 4px 4px 0 -1px #dbe8f6; }
.presc-doc--blue { margin-top: 16px; }
/* Accès rapide : à droite du bandeau, centré sur le texte */
.hero-wrap--compact:has(.presc-hero) { position: relative; }
.presc-hero { position: static; }
.quick-box { position: absolute; top: 50%; transform: translateY(-50%); right: max(24px, calc((100% - 1052px) / 2)); width: 290px; padding: 20px 20px 16px; border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 14px 34px rgba(20,30,60,.16); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.quick-box strong { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.quick-box a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 16px; background: color-mix(in srgb, var(--c) 8%, #fff); color: #1f2937; font-weight: 700; font-size: .92rem; line-height: 1.25; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.quick-box a:hover { transform: translateY(-2px); box-shadow: 0 8px 16px color-mix(in srgb, var(--c) 28%, transparent); }
.quick-box a span:nth-child(2) { flex: 1; }
.quick-box em { font-style: normal; color: var(--c); }
.quick-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--c); }
.quick-ico svg { width: 21px; height: 21px; }
html.acc-no-anim .quick-box a { transition: none; }
@media (max-width: 1250px) { .quick-box { position: static; transform: none; width: auto; max-width: 360px; margin: 20px auto 0; } }
.quick-box { right: 24px; }
@media (max-width: 1299px) { .quick-box { position: static; transform: none; width: auto; max-width: 360px; margin: 20px auto 0; } }
/* Accès rapide : à droite de la définition */
.apa-top { display: flex; align-items: center; gap: 28px; }
.apa-top .apa-def { flex: 1; min-width: 0; max-width: none; }
.apa-top .quick-box { position: static; transform: none; flex: none; width: 290px; margin: 0; }
@media (max-width: 900px) { .apa-top { flex-direction: column; align-items: stretch; } .apa-top .quick-box { width: auto; max-width: 360px; align-self: center; } }
/* centré dans l'espace libre à droite de la définition */
@media (min-width: 1300px) { .apa-top .quick-box { margin: 0 0 30px; transform: none; } }
/* grand écran : encadré centré dans la marge à droite du contenu */
@media (min-width: 1700px) {
  .apa-top { position: relative; }
  .apa-top .quick-box { position: absolute; top: 50%; left: calc(100% + (100vw - 1052px) / 4 - 145px); margin: 0; transform: translateY(calc(-50% - 36px)); }
}

/* ---- Page Actualités : cartes comme l'accueil ---- */
.news-filters { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 28px 0 6px; }
.news-chip { padding: 9px 20px; border-radius: 999px; border: 1.5px solid #dbe3f0; background: #fff; color: #1f2937; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; transition: background .2s, box-shadow .2s; }
.news-chip:hover { background: #f1f5fb; }
.news-chip.is-active { background: #1566b1; border-color: #1566b1; color: #fff; box-shadow: 0 6px 14px rgba(21,102,177,.3); }
.news-grid { grid-auto-rows: auto; align-items: stretch; margin-bottom: 40px; }
.news-card .actu-cover { height: 96px; }
.news-card .actu-body h3 { font-size: 1rem; }
.news-card .news-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card.is-open .news-text { display: block; overflow: visible; }
.news-card.is-target { box-shadow: 0 0 0 3px rgba(21,102,177,.35), 0 14px 26px rgba(20,30,60,.12); }
.news-more { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; margin-top: auto; }
.news-more:hover span { transform: translateX(4px); }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }
.news-card .news-text.news-full { display: block; overflow: visible; }

.news-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.news-actions .news-more { margin-top: 0; }
.news-dl { font-size: .78rem; font-weight: 600; color: #5b6475; text-decoration: underline; }
.news-lb { position: fixed; inset: 0; z-index: 3000; background: rgba(15,18,30,.97); display: flex; flex-direction: column; }
.news-lb[hidden] { display: none; }
.news-lb-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: #fff; }
.news-lb-title { flex: 1; font-weight: 700; font-size: .95rem; }
.news-lb-count { font-size: .85rem; opacity: .8; margin-right: 6px; }
.news-lb-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.news-lb-btn:hover { background: rgba(255,255,255,.3); }
.news-lb-stage { flex: 1; overflow: auto; display: flex; justify-content: center; padding: 0 12px 20px; }
.news-lb-stage img { max-width: min(100%, 900px); height: auto; align-self: flex-start; border-radius: 6px; background: #fff; }
.news-card .news-text { margin-bottom: 14px; }

/* ---- Page Contact ---- */
.contact-layout { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: start; margin: 36px 0 50px; }
.contact-side { display: flex; flex-direction: column; gap: 18px; }
.contact-card { background: #fff; border-radius: 20px; padding: 24px; border: 1px solid rgba(20,22,31,.06); box-shadow: 0 6px 20px rgba(20,30,60,.07); }
.contact-card h2 { font-size: 1.1rem; margin: 12px 0 6px; color: #14161f; }
.contact-card p { margin: 0 0 10px; color: #4b5565; line-height: 1.55; font-size: .95rem; }
.contact-ico { display: inline-flex; width: 48px; height: 48px; border-radius: 14px; align-items: center; justify-content: center; background: #e8f1fb; color: #1566b1; }
.contact-ico svg { width: 26px; height: 26px; }
.contact-ico--rose { background: #fde8ef; color: #ed1b5f; }
.contact-mailto { display: inline-block; font-weight: 800; color: #1566b1; word-break: break-all; text-decoration: none; border-bottom: 2px solid #bcd6ee; }
.contact-mailto:hover { border-color: #1566b1; }
.contact-help { background: linear-gradient(135deg, #fff4f7, #f4f0fb); }
.contact-help .contact-ico { margin-bottom: 10px; }
form.contact-form.contact-form--card { max-width: none; margin: 0; background: #fff; border-radius: 22px; padding: 30px; border: 1px solid rgba(20,22,31,.06); box-shadow: 0 10px 30px rgba(20,30,60,.09); position: relative; overflow: hidden; }
form.contact-form--card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #fba91c, #ed1b5f, #654b9e, #4ac8db); }
form.contact-form--card input, form.contact-form--card select, form.contact-form--card textarea { border-radius: 12px; border: 1.5px solid #dbe3f0; background: #f9fbfe; }
form.contact-form--card input:focus, form.contact-form--card select:focus, form.contact-form--card textarea:focus { outline: none; border-color: #1566b1; background: #fff; box-shadow: 0 0 0 3px rgba(21,102,177,.15); }
form.contact-form--card textarea { min-height: 150px; }
form.contact-form--card .btn { border: 0; cursor: pointer; font-size: 1rem; padding: 14px; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
form.contact-form--card .btn { width: 100%; }

/* ---- Page Faire un don ---- */
.don-main { text-align: center; max-width: 720px; margin: 40px auto 46px; background: #fff; border-radius: 24px; padding: 38px 34px; border: 1px solid rgba(20,22,31,.06); box-shadow: 0 10px 30px rgba(20,30,60,.09); position: relative; overflow: hidden; }
.don-main::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #fba91c, #ed1b5f, #654b9e, #4ac8db); }
.don-heart { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; background: #fde8ef; color: #ed1b5f; }
.don-heart svg { width: 32px; height: 32px; }
.don-main h2 { margin: 14px 0 8px; font-size: 1.5rem; color: #14161f; }
.don-main p { color: #4b5565; line-height: 1.6; margin: 0 auto 20px; max-width: 560px; }
.don-btn { display: inline-flex; font-size: 1.05rem; padding: 15px 30px; }
.don-main .don-note { font-size: .8rem; color: #6b7280; margin: 14px 0 0; }
.don-title { text-align: center; font-size: 1.3rem; margin: 0 0 20px; color: #14161f; }
.don-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 50px; }
.don-card { background: #fff; border-radius: 18px; padding: 22px; border: 1px solid rgba(20,22,31,.06); box-shadow: 0 2px 8px rgba(20,30,60,.05); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.don-card h3 { margin: 4px 0 0; font-size: 1.05rem; color: #14161f; }
.don-card p { margin: 0 0 10px; color: #4b5565; line-height: 1.55; font-size: .92rem; flex: 1; }
.don-tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 4px 11px; border-radius: 999px; }
.don-tag--bleu { background: #e8f1fb; color: #1566b1; }
.don-tag--rose { background: #fde8ef; color: #c4124a; }
.don-tag--orange { background: #fff1d6; color: #9a5b00; }
@media (max-width: 900px) { .don-grid { grid-template-columns: 1fr; } }
.don-card .btn-outline { color: #fff; } .don-card:nth-child(3) .btn-outline { color: #1b1b2b; }
.don-grid { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .don-grid { grid-template-columns: 1fr; } }
.login-hint { font-size: .8rem; color: #6b7280; margin: 6px 0 12px; }
#login-admin-block[hidden], #login-mail-block[hidden] { display: none; }
#login-mail-block, #login-admin-block { display: grid; gap: 10px; } #login-admin-block[hidden], #login-mail-block[hidden] { display: none; }

/* Annuaire / formulaire de référencement */
.gb-refer { text-align:center; margin: 0 0 6px; font-weight: 700; }
.ref-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; }
.ref-checks label { display: flex; gap: 8px; align-items: center; font-weight: 500; margin: 0; font-size: .92rem; }
.ref-checks input { width: auto; }
form.contact-form .ref-checks label { display: flex; gap: 8px; align-items: center; font-weight: 500; margin: 0; font-size: .92rem; }
form.contact-form .ref-checks input { width: auto; padding: 0; margin: 0; }

/* ---- Pages créées dans l'admin ---- */
.cms-page { padding-top: 34px; padding-bottom: 20px; max-width: 980px; }
.cms-page > * { margin-top: 0; }
.cms-title { color: #14161f; margin: 38px 0 12px; line-height: 1.25; }
.cms-title--h2 { font-size: 1.55rem; padding-left: 14px; border-left: 6px solid #1566b1; }
.cms-title--h3 { font-size: 1.15rem; }
.cms-text { color: #2b3342; line-height: 1.7; font-size: 1.02rem; margin: 0 0 14px; }
.cms-text p { margin: 0 0 14px; } .cms-text ul { margin: 0 0 14px; padding-left: 22px; } .cms-text li { margin-bottom: 4px; }
.cms-text a, .cms-callout a:not(.cms-btn) { color: #1566b1; font-weight: 600; }
.cms-cards { display: grid; gap: 18px; margin: 20px 0 26px; }
.cms-cards--3 { grid-template-columns: repeat(3, 1fr); } .cms-cards--2 { grid-template-columns: repeat(2, 1fr); }
.cms-card { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border-radius: 18px; padding: 22px; border: 1px solid rgba(20,22,31,.06); border-top: 6px solid var(--accent, #1566b1); box-shadow: 0 4px 16px rgba(20,30,60,.07); }
.cms-card h3 { margin: 0 0 8px; font-size: 1.1rem; color: #14161f; }
.cms-card-text { color: #4b5565; font-size: .95rem; line-height: 1.55; margin-bottom: 14px; flex: 1; }
.cms-card-text p { margin: 0 0 8px; }
.cms-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent, #1566b1); color: #fff !important; font-weight: 700; font-size: .92rem; padding: 11px 20px; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 14px color-mix(in srgb, var(--accent, #1566b1) 35%, transparent); transition: filter .2s, transform .2s; margin-top: auto; }
.cms-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dir-orange.cms-btn { color: #1b1b2b !important; }
.cms-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 26px; }
.cms-buttons .cms-btn { margin-top: 0; }
.cms-figure { margin: 22px 0; text-align: center; } .cms-figure img { max-width: 100%; height: auto; border-radius: 16px; box-shadow: 0 6px 20px rgba(20,30,60,.12); }
.cms-figure figcaption { color: #5b6475; font-size: .88rem; margin-top: 8px; }
.cms-files { display: grid; gap: 12px; margin: 18px 0 26px; }
.cms-file { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid rgba(20,22,31,.08); border-radius: 14px; padding: 14px 18px; text-decoration: none; color: #14161f; box-shadow: 0 2px 8px rgba(20,30,60,.05); }
.cms-file:hover { box-shadow: 0 8px 18px rgba(20,30,60,.12); }
.cms-file-ico { width: 40px; height: 40px; border-radius: 12px; background: #e8f1fb; color: #1566b1; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.cms-file small { display: block; color: #5b6475; font-weight: 400; }
.cms-callout { text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #1566b1) 12%, #fff), #fff); border: 1.5px solid color-mix(in srgb, var(--accent, #1566b1) 35%, #fff); border-radius: 22px; padding: 30px 24px; margin: 30px 0; }
.cms-callout h2 { margin: 0 0 8px; font-size: 1.4rem; color: #14161f; } .cms-callout p { color: #3d4657; margin: 0 auto 14px; max-width: 640px; }
.cms-preview { background: #fff1d6; color: #7a4a00; text-align: center; padding: 10px; font-weight: 700; }
@media (max-width: 800px) { .cms-cards--3, .cms-cards--2 { grid-template-columns: 1fr; } }
.cms-card .cms-btn { background: var(--accent, #1566b1); }

.event-poster img { display: block; max-width: 100%; max-height: 640px; margin: 0 auto; border-radius: 12px; box-shadow: 0 6px 18px rgba(20,30,60,.14); }

.actu-cover--img { height: 150px; }
.actu-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.actu-cover--img::after { display: none; }
.news-pager { margin-top: 28px; }

/* ===== Mot de passe : œil ===== */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 48px !important; box-sizing: border-box; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #4b5563; cursor: pointer; }
.pw-eye:hover { background: #eef2f9; color: #1566b1; }
.pw-eye:focus-visible { outline: 3px solid #111827; outline-offset: 1px; }

/* ===== Annuaire Guide Booster (gbx) : filtres en haut, liste à gauche, carte à droite ===== */
.container--gb { max-width: 1320px; }
.gbx-title { padding: 22px 4px 14px; }
.gbx-title .breadcrumb { margin: 0 0 6px; font-size: .8rem; }
.gbx-title h1 { margin: 0 0 4px; font-size: 1.9rem; line-height: 1.15; }
.gbx-sub { margin: 0; color: #4b5563; max-width: 70ch; }

.gbx-stage { display: flex; flex-direction: column; border-radius: 28px; background: #fff; box-shadow: 0 10px 24px rgba(20,30,60,.08), 0 24px 56px rgba(21,102,177,.14); overflow: hidden; margin-bottom: 40px; }
.gbx-bar { padding: 18px 20px 14px; background: linear-gradient(180deg, #f7f9fd, #fff); border-bottom: 1px solid #e7ebf3; display: grid; gap: 12px; }
.gbx-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(230px, 1.15fr); gap: 12px; align-items: stretch; }
.gbx-chip { position: relative; display: block; border-radius: 999px; box-shadow: 0 6px 14px rgba(20,30,60,.14); transition: transform .12s, box-shadow .12s; }
.gbx-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(20,30,60,.2); }
.gbx-chip--blue { background: #1566b1; } .gbx-chip--pink { background: #ed1b5f; } .gbx-chip--orange { background: #fba91c; } .gbx-chip--teal { background: #11a5b8; }
.gbx-chip select { width: 100%; height: 100%; min-height: 50px; padding: 0 44px 0 22px; border: 0; border-radius: 999px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M4 8l8 9 8-9z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 18px center; color: #fff; font: inherit; font-weight: 800; font-size: .95rem; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.gbx-chip select option { color: #111827; background: #fff; font-weight: 500; }
.gbx-chip:focus-within { outline: 3px solid #111827; outline-offset: 2px; }
.gbx-chip select:focus { outline: none; }
.gbx-radius { background: #654b9e; color: #fff; border-radius: 22px; padding: 9px 18px 10px; display: grid; gap: 2px; box-shadow: 0 6px 14px rgba(20,30,60,.14); }
.gbx-radius label { font-size: .85rem; font-weight: 800; text-align: center; }
.gbx-radius input[type=range] { width: 100%; accent-color: #fff; margin: 0; }
.gbx-radius.is-off { opacity: .78; }
.gbx-radius-hint { text-align: center; font-size: .7rem; opacity: .9; }
.gbx-radius-hint[hidden] { display: none; }

.gbx-row2 { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gbx-addr { flex: 1 1 380px; display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 16px; border-radius: 999px; border: 2px solid #d6dbe6; background: #fff; min-width: 0; }
.gbx-addr:focus-within { border-color: #1566b1; box-shadow: 0 0 0 4px rgba(21,102,177,.15); }
.gbx-addr-ico { color: #6b7280; flex: none; }
.gbx-addr input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: .95rem; padding: 8px 0; }
.gbx-clear { border: 0; background: #eef2f9; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: #4b5563; font-size: .8rem; flex: none; }
.gbx-clear[hidden] { display: none; }
.gbx-go { border: 0; border-radius: 999px; background: #1566b1; color: #fff; font: inherit; font-weight: 800; font-size: .88rem; padding: 10px 20px; cursor: pointer; flex: none; }
.gbx-go:hover { background: #0f528f; }
.gbx-toggle, .gbx-full { display: inline-flex; gap: 6px; align-items: center; padding: 11px 18px; border-radius: 999px; border: 0; font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.gbx-toggle { background: #ed1b5f; color: #fff; box-shadow: 0 6px 14px rgba(237,27,95,.3); }
.gbx-toggle:hover { background: #d1104f; }
.gbx-full { background: #eef2f9; color: #111827; }
.gbx-full:hover { background: #dfe7f3; }
.gbx-toggle:focus-visible, .gbx-full:focus-visible, .gbx-go:focus-visible { outline: 3px solid #111827; outline-offset: 2px; }
.gbx-reset { border: 0; background: none; color: #1566b1; font: inherit; font-size: .82rem; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0 4px; }
.gbx-msg { margin: 0; font-size: .85rem; color: #4b5563; }
.gbx-msg[hidden] { display: none; }
.gbx-msg.is-error { color: #b91c1c; font-weight: 700; }
.gbx-msg.is-ok { color: #15803d; font-weight: 700; }

.gbx-body { display: grid; grid-template-columns: 390px minmax(0, 1fr); height: 640px; min-height: 0; }
.gbx-stage.is-list-off .gbx-body { grid-template-columns: 1fr; }
.gbx-stage.is-list-off .gbx-side { display: none; }
.gbx-side { overflow-y: auto; padding: 14px 14px 18px; background: #f7f9fd; border-right: 1px solid #e7ebf3; scrollbar-width: thin; }
.gb-count { margin: 0 4px 10px; font-size: .82rem; font-weight: 800; color: #4b5563; }
.gbx-mapcol { position: relative; min-width: 0; min-height: 0; }
.gbx-mapcol #gb-map { position: absolute; inset: 0; height: auto; border-radius: 0; box-shadow: none; z-index: 1; }
.gb-geo { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 600; margin: 0; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.95); box-shadow: 0 4px 14px rgba(0,0,0,.2); font-size: .8rem; font-weight: 700; color: #374151; }
.gb-geo[hidden] { display: none; }

.gbx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gbx-item { all: unset; box-sizing: border-box; width: 100%; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: #fff; border: 2px solid #e3e8f1; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.gbx-item:hover { border-color: #1566b1; box-shadow: 0 8px 18px rgba(21,102,177,.18); transform: translateY(-1px); }
.gbx-item:focus-visible { outline: 3px solid #111827; outline-offset: 2px; }
.gbx-item svg { flex: none; }
.gbx-item-main { display: grid; gap: 2px; min-width: 0; }
.gbx-item-name { font-weight: 800; font-size: .92rem; line-height: 1.25; }
.gbx-item-sub { font-size: .76rem; color: #6b7280; }
.gbx-dist { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #eaf3fb; color: #1566b1; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.gb-empty { padding: 24px 12px; text-align: center; color: #6b7280; }

.gbx-side.is-detail .gb-count { display: none; }
.gbx-detail { --pin: #1566b1; display: grid; gap: 12px; padding: 16px 16px 14px; border-radius: 20px; background: #fff; border-top: 6px solid var(--pin); box-shadow: 0 6px 18px rgba(20,30,60,.10); font-size: .88rem; line-height: 1.5; }
.gbx-back { justify-self: start; border: 0; background: #eef4fb; border-radius: 999px; padding: 7px 14px; color: #1566b1; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.gbx-back:hover { background: #dfeaf6; }
.gbx-head { display: flex; gap: 12px; align-items: center; }
.gbx-head h2 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.gbx-type { margin: 2px 0 0; font-size: .8rem; color: #6b7280; font-weight: 700; }
.gbx-dl { margin: 0; display: grid; gap: 9px; }
.gbx-row { display: grid; gap: 1px; }
.gbx-row dt { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.gbx-row dd { margin: 0; word-break: break-word; }
.gbx-row a { color: #1566b1; font-weight: 700; }
.gbx-validate { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: #f6f8fc; }
.gbx-valid { margin: 0; font-size: .82rem; color: #6b7280; }
.gbx-valid.is-ok { color: #15803d; font-weight: 700; }
.gbx-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.gbx-btns .btn { font-size: .84rem; padding: 9px 14px; }
.gbx-upd { margin: 0; font-size: .74rem; color: #6b7280; }

.gbx-pin, .gbx-home { background: transparent !important; border: 0 !important; }
.gbx-pin svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); transition: transform .12s; }
.gbx-pin:hover svg { transform: scale(1.12); }
.gbx-pin.is-active { z-index: 1000 !important; }
.gbx-home svg { filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(21,102,177,.25) !important; }
.marker-cluster div { background: #1566b1 !important; color: #fff !important; font-weight: 800; }

body.gbx-noscroll { overflow: hidden; }
.gbx-stage.is-full { position: fixed; inset: 0; z-index: 9999; border-radius: 0; margin: 0; box-shadow: none; }
.gbx-stage.is-full .gbx-body { flex: 1; height: auto; }
.gbx-stage.is-full .gbx-bar { padding: 12px 16px 10px; }

@media (max-width: 1100px) { .gbx-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gbx-radius { grid-column: 1 / -1; } }
@media (max-width: 800px) {
  .gbx-body { grid-template-columns: 1fr; height: auto; }
  .gbx-mapcol { order: -1; height: 52vh; }
  .gbx-side { border-right: 0; max-height: none; overflow: visible; }
  .gbx-stage { border-radius: 20px; }
  .gbx-stage.is-full .gbx-body { grid-template-rows: 45% 1fr; }
  .gbx-stage.is-full .gbx-mapcol { height: 100%; }
  .gbx-stage.is-full .gbx-side { overflow-y: auto; }
  .gbx-stage.is-full .gbx-bar { max-height: 38vh; overflow-y: auto; }
}
@media (max-width: 520px) { .gbx-chips { grid-template-columns: 1fr; } }
.gbx-chips { align-items: center; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(250px, 1.1fr); }
.gbx-chip select { height: 52px; min-height: 52px; padding: 0 38px 0 20px; font-size: .9rem; background-position: right 15px center; }
.gbx-radius { padding: 7px 18px 8px; gap: 0; border-radius: 26px; min-height: 52px; align-content: center; }
.gbx-radius label { white-space: nowrap; font-size: .8rem; }
.gbx-radius-hint { display: none; }
.gbx-chips { grid-template-columns: repeat(4, minmax(0, 1fr)) 285px; }
.gbx-radius label { font-size: .76rem; }
@media (max-width: 1100px) { .gbx-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gbx-chips { grid-template-columns: 1fr; } }

/* accordéon + plein écran à volet gauche */
.gbx-list > li { border-radius: 18px; }
.gbx-list > li.is-open { background: #fff; border: 2px solid var(--pin, #1566b1); box-shadow: 0 8px 20px rgba(20,30,60,.14); overflow: hidden; }
.gbx-list > li.is-open > .gbx-item { border: 0; border-radius: 0; box-shadow: none; transform: none; }
.gbx-list > li.is-open .gbx-detail { border-top: 1px solid #e7ebf3; border-radius: 0; box-shadow: none; padding: 12px 14px 14px; }
.gbx-chev { margin-left: auto; flex: none; width: 10px; height: 10px; border-right: 2.5px solid #9aa3b2; border-bottom: 2.5px solid #9aa3b2; transform: rotate(45deg); transition: transform .15s; }
.gbx-item[aria-expanded="true"] .gbx-chev { transform: rotate(-135deg); }
.gbx-full { position: absolute; top: 12px; right: 12px; z-index: 600; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.28); }
.gbx-full:hover { background: #eef2f9; }
.gbx-stage.is-full { display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.gbx-stage.is-full .gbx-bar { grid-column: 1; grid-row: 1; border-right: 1px solid #e7ebf3; padding: 14px 16px 12px; max-height: none; overflow: visible; }
.gbx-stage.is-full .gbx-body { display: contents; }
.gbx-stage.is-full .gbx-side { grid-column: 1; grid-row: 2; height: auto; min-height: 0; }
.gbx-stage.is-full .gbx-mapcol { grid-column: 2; grid-row: 1 / 3; height: auto; }
.gbx-stage.is-full .gbx-chips { grid-template-columns: 1fr 1fr; }
.gbx-stage.is-full .gbx-radius { grid-column: 1 / -1; }
.gbx-stage.is-full .gbx-toggle { display: none; }
@media (max-width: 800px) {
  .gbx-stage.is-full { display: block; overflow-y: auto; }
  .gbx-stage.is-full .gbx-mapcol { position: sticky; top: 0; z-index: 5; height: 42vh; }
  .gbx-stage.is-full .gbx-body { display: block; }
  .gbx-stage.is-full .gbx-side { overflow: visible; }
}
.gbx-chips { grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; }
.gbx-stage.is-full .gbx-chips { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .gbx-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gbx-chips { grid-template-columns: 1fr; } }
.gbx-ico { display: block; border-radius: 50%; flex: none; object-fit: cover; }
.gbx-pin .gbx-ico { box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.gbx-pin.is-active .gbx-ico { box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,.55); }
.gbx-pin svg { filter: none; }

/* ===== Annuaire compact : tout tient à l'écran ===== */
.gbx-title { padding: 8px 4px 8px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.gbx-title .breadcrumb { order: 2; margin: 0; font-size: .75rem; }
.gbx-title h1 { order: 1; margin: 0; font-size: 1.35rem; }
.gbx-sub { display: none; }
.gbx-stage { margin-bottom: 8px; border-radius: 20px; }
.gbx-bar { padding: 8px 12px 8px; gap: 8px; }
.gbx-chips { gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)) 250px; }
.gbx-chip select { height: 40px; min-height: 40px; padding: 0 32px 0 16px; font-size: .82rem; background-position: right 12px center; }
.gbx-radius { min-height: 40px; padding: 4px 14px 5px; border-radius: 20px; }
.gbx-radius label { font-size: .72rem; }
.gbx-radius input[type=range] { height: 14px; }
.gbx-row2 { gap: 8px; }
.gbx-addr { flex: 1 1 320px; padding: 2px 3px 2px 12px; }
.gbx-addr input { padding: 6px 0; font-size: .85rem; }
.gbx-go { padding: 7px 16px; font-size: .82rem; }
.gbx-toggle { padding: 8px 14px; font-size: .8rem; box-shadow: none; }
.gbx-full { padding: 7px 12px; font-size: .8rem; }
.gbx-msg { font-size: .78rem; }
.gbx-body { grid-template-columns: 340px minmax(0, 1fr); height: auto; flex: 1 1 auto; min-height: 0; }
.gbx-stage:not(.is-full) { min-height: 480px; }
.gbx-side { padding: 8px 8px 12px; }
.gb-count { margin: 0 4px 6px; font-size: .76rem; }
.gbx-list { gap: 6px; }
.gbx-item { padding: 7px 10px; gap: 9px; border-radius: 14px; }
.gbx-item .gbx-ico { width: 30px; height: 30px; }
.gbx-item-name { font-size: .84rem; }
.gbx-item-sub { font-size: .72rem; }
.gbx-list > li { border-radius: 14px; }
.leaflet-container { touch-action: none; }
.leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; font-size: 24px !important; }
.leaflet-touch .leaflet-bar { border: 0; box-shadow: 0 3px 12px rgba(0,0,0,.3); border-radius: 12px; overflow: hidden; }
.gbx-stage.is-full { display: grid; border-radius: 0; margin: 0; height: auto !important; }
@media (max-width: 1100px) { .gbx-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .gbx-stage { height: auto !important; } .gbx-body { height: auto; } .gbx-mapcol { height: 55vh; } }
@media (max-width: 520px) { .gbx-chips { grid-template-columns: 1fr; } }
.gbx-ref { order: 3; margin-left: auto; padding: 6px 14px; border-radius: 999px; background: #1566b1; color: #fff; font-weight: 800; font-size: .8rem; text-decoration: none; }
.gbx-ref:hover { background: #0f528f; }
.ref-other { margin-top: 10px; display: grid; gap: 8px; }
.ref-other input[type=text] { width: 100%; }
.charte-box { border: 2px solid #1566b1; background: #eef5fc; border-radius: 16px; padding: 16px 18px; display: grid; gap: 12px; }
.charte-title { margin: 0; font-weight: 800; color: #0f4c85; }
.charte-link { justify-self: start; border-color: #1566b1; color: #1566b1; font-weight: 800; }
.charte-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.charte-check input { margin-top: 4px; width: auto; }
.charte-check a { color: #0f4c85; text-decoration: underline; }
.btn-ref { display: inline-block; margin-top: 8px; padding: 13px 28px; border-radius: 999px; background: #ed1b5f; color: #fff !important; font-weight: 800; font-size: 1rem; text-decoration: none; box-shadow: 0 6px 14px rgba(237,27,95,.3); border: 0; }
.btn-ref:hover { background: #d1104f; }
.gbx-ref.btn-ref { margin: 0 0 0 auto; padding: 7px 16px; font-size: .82rem; box-shadow: none; background: #ed1b5f; }
.charte-check a { color: #1566b1; text-decoration: underline; }

/* encadrés de ressources dans un article */
.conseil-rescard{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid rgba(27,37,64,.12);padding:18px 0 0;margin:22px 0 4px}
.conseil-rescard h3{margin:0;font-size:1.1rem;color:#1b2540}
.conseil-rescard p{margin:0;color:#46506b}
.conseil-section .conseil-rescard p{padding-left:0;font-size:.95rem;line-height:1.5;margin:0}
.conseil-section .conseil-rescard p::before{display:none}
.conseil-section p.conseil-btnrow{padding-left:0;margin:18px 0 6px}
.conseil-section p.conseil-btnrow::before{display:none}

/* ressources : deux blocs distincts côte à côte */
.conseil-rescards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0 6px}
.conseil-section .conseil-rescards .conseil-rescard{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;border:0;border-top:5px solid #1566b1;border-radius:16px;background:#eef5fc;padding:20px 22px;margin:0}
.conseil-section .conseil-rescards .conseil-rescard:nth-child(2){border-top-color:#ed1b5f;background:#fdeff4}
.conseil-section .conseil-rescards .conseil-rescard h3{font-size:1.08rem;line-height:1.35}
.conseil-section .conseil-rescards .conseil-rescard p{margin:8px 0 0}
@media (max-width:760px){.conseil-rescards{grid-template-columns:1fr}}
/* ressources : version compacte, une ligne par ressource */
.conseil-rescards{grid-template-columns:1fr;gap:10px;margin:10px 0 0}
.conseil-section .conseil-rescards .conseil-rescard{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:0;border-left:5px solid #1566b1;border-radius:12px;padding:12px 16px}
.conseil-section .conseil-rescards .conseil-rescard:nth-child(2){border-left-color:#ed1b5f}
.conseil-section .conseil-rescards .conseil-rescard h3{font-size:.98rem;margin:0}
.conseil-section .conseil-rescards .conseil-rescard p{font-size:.88rem;line-height:1.4;margin:2px 0 0}
.conseil-section .conseil-rescards .conseil-rescard .btn{padding:8px 18px;font-size:.88rem;white-space:nowrap}
.conseil-section .conseil-rescards .conseil-rescard{flex-wrap:nowrap}
.conseil-section .conseil-rescards .conseil-rescard > div{flex:1 1 0;min-width:0}
@media (max-width:640px){.conseil-section .conseil-rescards .conseil-rescard{flex-wrap:wrap}}
/* listes plus légères : pas de fond, petit point */
.conseil-list li{background:none;border-radius:0;padding:4px 0 4px 22px;margin-bottom:2px;font-size:.92rem}
.conseil-list li::before{left:4px;top:.85em;width:6px;height:6px}

/* bannière de reconstruction retirée */
.bandeau-maintenance{display:none !important}

/* références : document sans lien */
.outil-btn--soon{cursor:default;opacity:.75;pointer-events:none}
.outil-btn--soon .soon-tag{font-size:.72rem;font-weight:700;white-space:nowrap;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.07)}

/* page Références : liste lisible */
.ref-list{max-width:860px;margin:34px auto 10px;display:grid;gap:22px}
.ref-card{--accent:#1566b1;background:#fff;border-radius:20px;padding:22px 26px 14px;box-shadow:0 8px 24px rgba(20,30,60,.08);border-top:6px solid var(--accent)}
.ref-card.dir-rose{--accent:#ed1b5f}.ref-card.dir-orange{--accent:#f59e0b}.ref-card.dir-violet{--accent:#654b9e}.ref-card.dir-cyan{--accent:#2bb5cf}
.ref-card h2{margin:0 0 4px;font-size:1.25rem;color:#1b2540}
.ref-intro{margin:0 0 10px;color:#46506b;font-size:.95rem}
.ref-items{list-style:none;margin:8px 0 0;padding:0}
.ref-items li{border-top:1px solid rgba(27,37,64,.1)}
.ref-items a,.ref-items li.ref-soon{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 2px;text-decoration:none;color:#1b2540}
.ref-title{font-size:.97rem;line-height:1.4}
.ref-go{flex:none;font-size:.85rem;font-weight:700;color:var(--accent);white-space:nowrap}
.ref-items a:hover .ref-title{text-decoration:underline}
.ref-soon .ref-title{color:#6b7390}
.ref-soon .ref-go{color:#8a90a8;font-weight:600;font-size:.78rem;background:rgba(0,0,0,.05);padding:3px 10px;border-radius:999px}
@media (max-width:600px){.ref-items a,.ref-items li.ref-soon{flex-wrap:wrap}}

/* références : cases cliquables + liste avec source */
.ref-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.ref-tile{--accent:#1566b1;display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:20px;padding:22px 24px;border-top:6px solid var(--accent);box-shadow:0 8px 24px rgba(20,30,60,.08);text-decoration:none;color:#1b2540;transition:transform .15s,box-shadow .15s}
.ref-tile.dir-rose{--accent:#ed1b5f}.ref-tile.dir-orange{--accent:#f59e0b}.ref-tile.dir-violet{--accent:#654b9e}.ref-tile.dir-cyan{--accent:#2bb5cf}
.ref-tile:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,30,60,.14)}
.ref-tile h2{margin:0;font-size:1.25rem;color:#1b2540}
.ref-tile p{margin:0;color:#46506b;font-size:.95rem;line-height:1.5}
.ref-tile-go{margin-top:auto;padding-top:8px;font-weight:700;font-size:.9rem;color:var(--accent)}
.ref-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.ref-note{font-size:.82rem;color:#6b7390;line-height:1.4}
.ref-empty{text-align:center;color:#6b7390;margin:30px 0}
#ref-list .ref-tiles + .ref-card{margin-top:22px}
#ref-list{max-width:1000px}

/* références : lignes de documents */
.ref-items li a.ref-title{display:inline;font-weight:600;color:#1b2540;text-decoration:none}
.ref-items li a.ref-title:hover{text-decoration:underline}
.ref-items li{border-top:1px solid rgba(27,37,64,.1)}
.ref-items li:first-child{border-top:0}
.ref-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 2px}
.ref-btn{flex:none;display:inline-block;padding:9px 18px;border-radius:999px;background:var(--accent);color:#fff !important;font-weight:700;font-size:.88rem;text-decoration:none;white-space:nowrap}
.ref-btn:hover{filter:brightness(.92)}
.ref-items li.ref-soon{display:block;padding:0}
@media (max-width:600px){.ref-row{flex-wrap:wrap}}
.ref-items li a.ref-title{display:inline;padding:0;justify-content:normal}
.ref-items li a.ref-btn{display:inline-block;padding:9px 18px;color:#fff;justify-content:normal}
/* références : liste simple, sans encadré, titres + lien/PDF uniquement */
#ref-list .ref-card{background:none;box-shadow:none;border:0;border-radius:0;padding:0}
#ref-list .ref-note{display:none}
#ref-list .ref-items{margin:0;border-bottom:1px solid rgba(27,37,64,.12)}
#ref-list .ref-items li{border-top:1px solid rgba(27,37,64,.12)}
#ref-list .ref-row{padding:16px 4px}

/* références : boutons Afficher / Télécharger + visionneuse PDF intégrée */
.ref-btns{display:flex;gap:10px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.ref-btn{border:0;cursor:pointer;font-family:inherit}
.ref-btn--view{background:#fff;color:var(--accent) !important;box-shadow:inset 0 0 0 2px var(--accent)}
#ref-list .ref-viewer{padding:0 4px 18px}
#ref-list .ref-frame{width:100%;height:78vh;min-height:480px;border:1px solid rgba(27,37,64,.15);border-radius:12px;background:#fff}
@media (max-width:600px){.ref-btns{justify-content:flex-start}}
#ref-list span.ref-title{font-weight:600;color:#1b2540}

/* références : cases de départ = cartes blanches avec icône */
.ref-ctiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:1000px;margin:0 auto}
.ref-ctile{--accent:#1566b1;display:flex;align-items:center;gap:16px;background:#fff;border-radius:20px;padding:22px 22px;box-shadow:0 8px 24px rgba(20,30,60,.08);text-decoration:none;color:#1b2540;border:1px solid rgba(27,37,64,.06);transition:transform .15s,box-shadow .15s}
.ref-ctile.dir-rose{--accent:#ed1b5f}.ref-ctile.dir-orange{--accent:#f59e0b}.ref-ctile.dir-violet{--accent:#654b9e}.ref-ctile.dir-cyan{--accent:#2bb5cf}
.ref-ctile:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,30,60,.14)}
.ref-ctile-ico{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent)}
.ref-ctile-ico svg{width:28px;height:28px}
.ref-ctile-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.ref-ctile-name{font-weight:800;font-size:1.1rem;line-height:1.25}
.ref-ctile-text{font-size:.88rem;line-height:1.4;color:#5a6481}
.ref-ctile-go{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:800}