/* ============================================================
   MAGHEN.EU — Feuille de style principale
   Polices : system-font stack (zéro requête externe)
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  /* Palette (issue du thème Tailwind d'origine) */
  --bg: hsl(30, 25%, 97%);
  --fg: hsl(25, 30%, 12%);
  --card: hsl(30, 20%, 95%);
  --primary: hsl(24, 78%, 38%);
  --primary-fg: hsl(30, 25%, 97%);
  --accent: hsl(36, 80%, 55%);
  --muted: hsl(30, 15%, 92%);
  --muted-fg: hsl(25, 10%, 45%);
  --border: hsl(30, 20%, 85%);
  --secondary: hsl(30, 30%, 90%);
  --destructive: hsl(0, 84%, 60%);

  /* Effets */
  --gradient-warm: linear-gradient(135deg, hsl(24, 78%, 38%), hsl(36, 80%, 55%));
  --shadow-warm: 0 10px 40px -10px hsl(24, 78%, 38%, 0.2);
  --shadow-card: 0 4px 20px -4px hsl(25, 30%, 12%, 0.08);
  --radius: 0.75rem;

  /* Polices système — performant, RGPD-safe, 0 téléchargement */
  --font-display: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* ── Personnalisation de l'interface du navigateur ───────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--muted);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-warm);
  border-radius: 4px;
  border: 1px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

::selection {
  background: hsl(24, 78%, 38%, 0.3);
  color: var(--fg);
}

::-moz-selection {
  background: hsl(24, 78%, 38%, 0.3);
  color: var(--fg);
}

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

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}

/* ── Reset minimal ────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

/* Les destinations d'ancre restent visibles sous la navigation fixe. */
[id] {
  scroll-margin-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.2;
  margin: 0;
}

p {
  margin: 0;
}

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

img {
  display: block;
  max-width: 100%;
}

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

button {
  cursor: pointer;
  font-family: inherit;
}

/* ── Utilitaires de base ──────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gradient-warm {
  background: var(--gradient-warm);
}

.shadow-warm {
  box-shadow: var(--shadow-warm);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.text-primary {
  color: var(--primary);
}

.text-muted {
  color: var(--muted-fg);
}

.bg-card {
  background: var(--card);
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  opacity: 0;
  animation: fade-up 0.6s ease-out forwards;
}

/* ── Respect prefers-reduced-motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {

  .animate-fade-up,
  .scroll-fade-up {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__title {
    animation: none;
    background-position: 0% 50%;
  }

  .section__title::after {
    width: 80%;
    transition: none;
  }
}

/* ── Staggered animations pour les grilles ────────────────── */
.grid-3 .animate-fade-up:nth-child(1) {
  animation-delay: 0.05s;
}

.grid-3 .animate-fade-up:nth-child(2) {
  animation-delay: 0.15s;
}

.grid-3 .animate-fade-up:nth-child(3) {
  animation-delay: 0.25s;
}

.grid-2 .animate-fade-up:nth-child(1) {
  animation-delay: 0.05s;
}

.grid-2 .animate-fade-up:nth-child(2) {
  animation-delay: 0.15s;
}

.feature-grid .feature:nth-child(1) {
  animation-delay: 0.05s;
}

.feature-grid .feature:nth-child(2) {
  animation-delay: 0.12s;
}

.feature-grid .feature:nth-child(3) {
  animation-delay: 0.19s;
}

.feature-grid .feature:nth-child(4) {
  animation-delay: 0.26s;
}

.feature-grid .feature:nth-child(5) {
  animation-delay: 0.33s;
}

.feature-grid .feature:nth-child(6) {
  animation-delay: 0.40s;
}

.feature-grid .feature:nth-child(7) {
  animation-delay: 0.47s;
}

.feature-grid .feature:nth-child(8) {
  animation-delay: 0.54s;
}

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 4rem;
  background: hsl(30, 25%, 97%, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.navbar__logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.navbar__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--fg);
  display: none;
}

@media (min-width: 640px) {
  .navbar__name {
    display: block;
  }
}

.navbar__links {
  display: none;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .navbar__links {
    display: flex;
  }
}

.navbar__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-fg);
  transition: color 0.15s;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}

.navbar__link:hover,
.navbar__link[aria-current="page"] {
  color: var(--primary);
}

.navbar__cta {
  display: inline-block;
  background: var(--gradient-warm);
  color: var(--primary-fg);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  transition: opacity 0.15s;
}

.navbar__cta:hover {
  opacity: 0.9;
}

/* ── Menu burger (button + aria-expanded) ──────────────── */
.navbar__burger {
  display: block;
  position: relative;
}

@media (min-width: 768px) {
  .navbar__burger {
    display: none;
  }
}

.navbar__burger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--fg);
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}

.navbar__burger-btn:hover {
  background: hsl(24, 78%, 38%, 0.08);
}

.navbar__burger-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.navbar__burger-btn .icon-menu {
  display: block;
}

.navbar__burger-btn .icon-close {
  display: none;
}

.navbar__burger-btn[aria-expanded="true"] .icon-menu {
  display: none;
}

.navbar__burger-btn[aria-expanded="true"] .icon-close {
  display: block;
}

.navbar__mobile-menu {
  position: absolute;
  right: 1rem;
  top: calc(100% + 0.75rem);
  width: 18rem;
  max-width: calc(100vw - 2rem);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  z-index: 200;
}

/* hidden attribute → display:none (natif, mais on renforce) */
.navbar__mobile-menu[hidden] {
  display: none;
}

.navbar__mobile-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-fg);
}

.navbar__mobile-links {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.navbar__mobile-link {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius) - 2px);
  color: var(--muted-fg);
  transition: background 0.15s, color 0.15s;
}

.navbar__mobile-link:hover,
.navbar__mobile-link[aria-current="page"] {
  background: hsl(24, 78%, 38%, 0.1);
  color: var(--primary);
}

.navbar__mobile-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.navbar__mobile-cta {
  display: block;
  text-align: center;
  margin-top: 0.5rem;
  background: var(--gradient-warm);
  color: var(--primary-fg);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
}


/* ── Footer ───────────────────────────────────────────────── */
.footer {
  padding: 3rem 0;
  border-top: 1px solid var(--border);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer__logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.footer__name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg);
  font-size: 1rem;
}

.footer__tagline {
  font-size: 0.75rem;
  color: var(--muted-fg);
}

.footer__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--muted-fg);
}

.footer__links a:hover {
  color: var(--primary);
  transition: color 0.15s;
}

.footer__copy {
  font-size: 0.75rem;
  color: var(--muted-fg);
}

/* ── Page intro (bandeau titre sous-pages) ───────────────── */
.page-intro {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.page-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, hsl(24, 78%, 38%, 0.05), transparent, hsl(36, 80%, 55%, 0.1));
}

.page-intro__inner {
  position: relative;
  padding-top: 7rem;
  padding-bottom: 3.5rem;
}

.page-intro__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.page-intro__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  max-width: 48rem;
  line-height: 1.15;
  /* Effet dégradé subtil sur le titre */
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.page-intro__desc {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  color: var(--muted-fg);
  max-width: 48rem;
  line-height: 1.7;
}

/* ── Hero section ─────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: 4rem;
  overflow: hidden;
}

.hero__img-wrap {
  position: relative;
  height: 70vh;
  min-height: 500px;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, hsl(30, 25%, 97%, 0.6) 50%, transparent 100%);
}

.hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 4rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.75rem;
  animation-delay: 0s;
}

.hero__eyebrow::before {
  content: '◆';
  font-size: 0.6rem;
  color: var(--primary);
  opacity: 0.7;
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  max-width: 48rem;
  line-height: 1.1;
  background: var(--gradient-warm);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 20px hsla(24, 78%, 38%, 0.15);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.hero__title.animate-fade-up {
  animation: fade-up 0.6s ease-out forwards,
    gradient-shift 6s ease-in-out 0.6s infinite alternate;
  animation-delay: 0.1s;
}

.hero__title:hover {
  transform: scale(1.02) perspective(400px) rotateX(2deg);
  text-shadow: 0 8px 30px hsla(24, 78%, 38%, 0.3);
}

.hero__desc {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--muted-fg);
  max-width: 42rem;
  animation-delay: 0.2s;
}

.hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  animation-delay: 0.3s;
}

.hero__quick {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
  animation-delay: 0.4s;
}

.hero__quick a {
  margin-left: 0.5rem;
  font-weight: 600;
  color: var(--primary);
  transition: color 0.15s;
}

.hero__quick a:hover {
  color: hsl(24, 78%, 30%);
}

.hero__quick .sep {
  margin-inline: 0.5rem;
}

/* ── Boutons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s, transform 0.2s ease;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.btn--primary {
  background: var(--gradient-warm);
  background-size: 200% auto;
  color: var(--primary-fg);
  box-shadow: var(--shadow-warm);
  transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn--primary:hover {
  background-position: right center;
  transform: scale(1.02);
  box-shadow: 0 8px 30px -6px hsla(24, 78%, 38%, 0.5);
}

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

.btn--secondary:hover {
  background: hsl(30, 30%, 84%);
}

.btn--outline {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
}

.btn--outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn--ghost {
  background: hsl(24, 78%, 38%, 0.1);
  color: var(--primary);
}

.btn--ghost:hover {
  background: hsl(24, 78%, 38%, 0.15);
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.btn--full {
  width: 100%;
  justify-content: center;
}

/* ── Section générique ────────────────────────────────────── */
.section {
  padding: 5rem 0;
}

.section--card {
  background: var(--card);
}

.section__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.section__eyebrow::before {
  content: '◆';
  font-size: 0.6rem;
  color: var(--primary);
  opacity: 0.7;
}

.section__title {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.25rem;
}

.section__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--gradient-warm);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.section__title:hover::after,
.section__title.is-visible::after {
  width: 80%;
}

.section__desc {
  text-align: center;
  color: var(--muted-fg);
  max-width: 42rem;
  margin-inline: auto;
  line-height: 1.7;
}

.section__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    border-color 0.2s ease;
  will-change: transform;
}

.card:hover:not(.no-hover) {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px -12px hsla(24, 78%, 38%, 0.25);
  border-color: var(--primary);
}

.card__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: calc(var(--radius) - 2px);
  background: var(--gradient-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--primary-fg);
  flex-shrink: 0;
}

.card__icon--light {
  background: hsl(24, 78%, 38%, 0.1);
  color: var(--primary);
}

/* Variantes sémantiques (03/09/2026, alignement maquette Dashboard Staff) —
   mêmes teintes que .status-badge--ok/--degraded déjà utilisées ailleurs
   (Mission Control, invitations...), jamais une nouvelle couleur inventée. */
.card__icon--ok {
  background: hsl(142, 60%, 94%);
  color: hsl(142, 60%, 28%);
}

.card__icon--degraded {
  background: hsl(36, 80%, 93%);
  color: hsl(30, 80%, 35%);
}

.card__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.card__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 0.75rem;
}

.card__desc {
  display: block;
  color: var(--muted-fg);
  line-height: 1.7;
  font-size: 0.9rem;
}

/* ── Grid helpers ─────────────────────────────────────────── */
.grid-3 {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-2 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.max-4xl {
  max-width: 56rem;
  margin-inline: auto;
}

.max-3xl {
  max-width: 48rem;
  margin-inline: auto;
}

.max-5xl {
  max-width: 64rem;
  margin-inline: auto;
}

.max-6xl {
  max-width: 72rem;
  margin-inline: auto;
}

/* ── Mission section ──────────────────────────────────────── */
.mission-text {
  font-size: 1.125rem;
  color: var(--muted-fg);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.mission-text strong {
  color: var(--fg);
}

/* ── Page des trois piliers ───────────────────────────────── */
.pillar-jump {
  border-block: 1px solid var(--border);
  background: var(--bg);
}

.pillar-jump__inner {
  display: flex;
  gap: 0.75rem;
  padding-block: 0.875rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pillar-jump__inner::-webkit-scrollbar {
  display: none;
}

.pillar-jump a {
  flex: 0 0 auto;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-fg);
  font-size: 0.8125rem;
  font-weight: 650;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.pillar-jump a:hover,
.pillar-jump a:focus-visible {
  border-color: var(--primary);
  background: hsl(24, 78%, 38%, 0.07);
  color: var(--primary);
}

.action-model {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.action-model__step {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-card);
}

.action-model__step--active {
  border-color: var(--primary);
  background: hsl(24, 78%, 38%, 0.05);
}

.action-model__number {
  display: block;
  margin-bottom: 1rem;
  color: hsl(24, 78%, 38%, 0.32);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.action-model__step h3 {
  margin-bottom: 0.625rem;
  font-size: 1.25rem;
}

.action-model__step p:not(.card__eyebrow) {
  color: var(--muted-fg);
  font-size: 0.9rem;
  line-height: 1.65;
}

.action-model__step a {
  display: inline-flex;
  margin-top: 1rem;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 650;
}

.action-model__step a:hover {
  text-decoration: underline;
}

@media (min-width: 640px) {
  .action-model {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .action-model {
    grid-template-columns: repeat(4, 1fr);
  }

  .action-model__step:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: 2rem;
    right: -0.8rem;
    z-index: 1;
    color: var(--primary);
    font-size: 1.15rem;
    font-weight: 800;
  }
}

.pillar-detail {
  margin-top: 2rem;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-card);
}

.pillar-detail+.pillar-detail {
  margin-top: 2rem;
}

.pillar-detail__heading {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.pillar-detail__heading .card__icon {
  margin-bottom: 0;
}

.pillar-detail__heading h3 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.pillar-detail__lead {
  margin-bottom: 1.5rem;
  color: var(--muted-fg);
  font-size: 1.05rem;
  line-height: 1.75;
}

.pillar-detail h4 {
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.pillar-principles {
  gap: 0.625rem;
  line-height: 1.55;
}

.pillar-principles strong {
  color: var(--fg);
}

.pillar-example {
  padding: 1.5rem;
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: hsl(24, 78%, 38%, 0.07);
  color: var(--muted-fg);
  line-height: 1.7;
}

.pillar-detail__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.pillar-detail__links a {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.875rem;
}

.pillar-detail__links a:hover {
  text-decoration: underline;
}

.pillar-flow {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .pillar-flow {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pillar-flow__step {
  position: relative;
  padding: 1.75rem;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.pillar-flow__step span {
  display: block;
  color: var(--primary);
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.pillar-flow__verb {
  margin-bottom: 0.5rem;
  color: var(--primary) !important;
  font-size: 0.75rem !important;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pillar-flow__step h3 {
  margin-bottom: 0.5rem;
}

.pillar-flow__step p {
  color: var(--muted-fg);
  line-height: 1.7;
}

@media (min-width: 768px) {
  .pillar-flow__step:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: 50%;
    right: -1.15rem;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 800;
    z-index: 1;
  }
}

.pillar-case {
  margin-top: 2rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid hsl(24, 78%, 38%, 0.2);
  border-radius: var(--radius);
  background: hsl(24, 78%, 38%, 0.06);
}

.pillar-case__heading {
  max-width: 46rem;
  margin-bottom: 1.5rem;
}

.pillar-case__heading h3 {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
}

.pillar-case__steps {
  display: grid;
  gap: 0.875rem;
  padding: 0;
  list-style: none;
  counter-reset: pillar-case;
}

.pillar-case__steps li {
  position: relative;
  padding-left: 2.5rem;
  color: var(--muted-fg);
  line-height: 1.65;
  counter-increment: pillar-case;
}

.pillar-case__steps li::before {
  content: counter(pillar-case);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 0.75rem;
  font-weight: 800;
}

.pillar-case__steps strong {
  color: var(--fg);
}

.pillar-proof__list {
  display: grid;
  gap: 0.625rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
  color: var(--muted-fg);
  font-size: 0.875rem;
}

.pillar-proof__list li {
  position: relative;
  padding-left: 1.35rem;
  line-height: 1.5;
}

.pillar-proof__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 800;
}

@media (max-width: 639px) {
  .pillar-detail {
    padding: 1.5rem;
  }

  .pillar-detail__heading {
    align-items: flex-start;
  }
}

/* ── Valeurs institutionnelles ───────────────────────────── */
.values-intro {
  max-width: 42rem;
  margin: 1.25rem auto 0;
  text-align: center;
  color: var(--muted-fg);
  line-height: 1.7;
}

.values-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .value-card--wide {
    grid-column: 1 / -1;
  }
}

.value-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}

.value-card__action {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--muted-fg);
  line-height: 1.7;
  font-size: 0.9rem;
}

.value-card__action strong {
  color: var(--fg);
}

/* ── Page Nous rejoindre ─────────────────────────────────── */
.join-lead {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--muted-fg);
}

.join-lead+.join-lead {
  margin-top: 1rem;
}

.join-highlight {
  margin-top: 2rem;
  padding: 1.5rem;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  background: hsl(24, 78%, 38%, 0.08);
}

.join-highlight strong {
  color: var(--fg);
}

.join-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.join-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--muted-fg);
  line-height: 1.7;
}

.join-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 800;
}

.join-pole {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}

.join-pole .btn {
  margin-top: auto;
  align-self: flex-start;
}

.join-meta {
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.join-steps {
  counter-reset: join-step;
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .join-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.join-step {
  counter-increment: join-step;
  padding: 1.5rem;
  border-top: 3px solid var(--primary);
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.join-step::before {
  content: '0' counter(join-step);
  display: block;
  margin-bottom: 1rem;
  color: var(--primary);
  font-weight: 800;
  font-size: 1.5rem;
}

.join-step h3 {
  margin-bottom: 0.75rem;
}

.join-step p {
  color: var(--muted-fg);
  line-height: 1.7;
}

/* ── Engagement cards (flex row) ───────────────────────────── */
.engagement-card {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
  align-items: flex-start;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    border-color 0.2s ease;
  will-change: transform;
}

.engagement-card:hover:not(.no-hover) {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px -12px hsla(24, 78%, 38%, 0.25);
  border-color: var(--primary);
}

/* ── Project articles ─────────────────────────────────────── */
.project-article {
  border-radius: var(--radius);
  background: var(--bg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  border: 1px solid hsl(30, 20%, 85%, 0.6);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    border-color 0.2s ease;
  will-change: transform;
}

.project-article:hover:not(.no-hover) {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px -12px hsla(24, 78%, 38%, 0.25);
  border-color: var(--primary);
}

.project-article__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: auto;
  padding-top: 1.5rem;
  transition: color 0.15s;
}

.project-article__link:hover {
  color: hsl(24, 78%, 30%);
}

/* ── e-PhotoID pricing ────────────────────────────────────── */
.pricing-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    border-color 0.2s ease;
  will-change: transform;
}

.pricing-card:hover:not(.no-hover) {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px -12px hsla(24, 78%, 38%, 0.25);
  border-color: var(--primary);
}

.pricing-card__price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.pricing-card__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
}

.pricing-card__desc {
  font-size: 0.75rem;
  color: var(--muted-fg);
}


/* ── Sélecteur de sujet (pills radio) ───────────────────── */
.form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.subject-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.subject-pill {
  cursor: pointer;
}

.subject-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.subject-pill span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.875rem;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-fg);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}

.subject-pill input:checked+span {
  border-color: var(--primary);
  background: hsl(24, 78%, 38%, 0.1);
  color: var(--primary);
  font-weight: 600;
}

.subject-pill:hover span {
  border-color: var(--primary);
  color: var(--primary);
}

.subject-pill input:focus-visible+span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Formulaire de contact ────────────────────────────────── */
.contact-grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-grid--spaced {
  margin-top: 3.5rem;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-info__text {
  color: var(--muted-fg);
  line-height: 1.7;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-icon-wrap {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: calc(var(--radius) - 2px);
  background: hsl(24, 78%, 38%, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
}

.contact-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 0.125rem;
}

.contact-label--mt {
  margin-top: 0.5rem;
}

.whatsapp-img-link {
  display: inline-block;
  margin-top: 0.5rem;
}

.whatsapp-btn-img {
  width: 140px;
  height: auto;
}

.contact-value {
  font-size: 0.875rem;
  color: var(--muted-fg);
}

.contact-value a:hover {
  color: var(--primary);
  transition: color 0.15s;
}

/* Champs */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
}

.form-label__opt {
  font-size: 0.8em;
  font-weight: 400;
  color: var(--muted-fg);
  margin-left: 0.25rem;
}

.form-required {
  color: var(--destructive);
}

.form-field {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--fg);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.form-field::placeholder {
  color: var(--muted-fg);
}

.form-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsl(24, 78%, 38%, 0.15);
}

.form-field[data-state="valid"] {
  border-color: #22c55e;
  background: #f0fdf4;
}

.form-field[data-state="invalid"] {
  border-color: #ef4444;
  background: #fef2f2;
}

textarea.form-field {
  resize: none;
}

/* Compteur caractères */
.form-counter-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.form-counter {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted-fg);
  flex-shrink: 0;
}

.form-counter--warn {
  color: #d97706;
  font-weight: 600;
}

.form-counter--error {
  color: #dc2626;
  font-weight: 600;
}

/* Messages inline */
.form-hint {
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-hint--valid {
  color: #16a34a;
}

.form-hint--invalid {
  color: #dc2626;
}

/* Bandeaux résultat */
.form-result {
  border-radius: var(--radius);
  border: 1px solid;
  padding: 1rem;
  font-size: 0.875rem;
  display: none;
}

.form-result[data-visible="true"] {
  display: block;
}

.form-result--success {
  border-color: #86efac;
  background: #f0fdf4;
  color: #14532d;
}

.form-result--error {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #7f1d1d;
}

.form-result__title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.form-result__code {
  font-family: monospace;
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 0.25rem;
}

.form-result__mailto {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.form-result__email-link {
  font-weight: 600;
  text-decoration: underline;
}

/* ── Note d'alerte (e-photoID) ────────────────────────────── */
.alert-note {
  border-left: 4px solid var(--primary);
  background: hsl(24, 78%, 38%, 0.05);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
  line-height: 1.7;
}

.alert-note strong {
  color: var(--fg);
}

/* ── Note info box ────────────────────────────────────────── */
.info-box {
  border-radius: var(--radius);
  background: hsl(24, 78%, 38%, 0.05);
  border: 1px solid hsl(24, 78%, 38%, 0.1);
  padding: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
  line-height: 1.7;
}

/* ── Mentions légales ─────────────────────────────────────── */
.legal-content {
  max-width: 48rem;
  margin-inline: auto;
  padding: 6rem 1rem 3rem;
  /* 6rem pour compenser la navbar fixe (4rem) */
  min-height: 100vh;
  background: var(--bg);
}

.legal-content h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 2.5rem;
}

.legal-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 0.75rem;
}

.legal-section {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.legal-section:last-child {
  border-bottom: none;
}

.legal-list {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1.25rem;
  list-style: disc;
  color: var(--muted-fg);
  font-size: 0.9rem;
}

.legal-list a:hover {
  color: var(--primary);
  transition: color 0.15s;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
  margin-bottom: 2rem;
  font-size: 0.9rem;
}

.legal-back:hover {
  text-decoration: underline;
}

.legal-update {
  margin-top: 3rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
}

.legal-content a {
  color: var(--primary);
}

.not-found__back {
  margin-top: 1.5rem;
  display: inline-block;
}

.not-found__suggestions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ── 404 ──────────────────────────────────────────────────── */
.not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  text-align: center;
}

.not-found h1 {
  font-size: 4rem;
  font-weight: 700;
}

.not-found p {
  font-size: 1.25rem;
  color: var(--muted-fg);
  margin: 1rem 0;
}

/* ── Loader spinner ───────────────────────────────────────── */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Le sélecteur de classe ci-dessus a la même spécificité que la règle UA
   [hidden]{display:none} mais, étant dans la feuille auteur, il l'emporte.
   Sans cette règle explicite, le spinner tourne dès le chargement de la
   page même si l'attribut hidden est posé (ex : bouton "Se connecter"). */
.spinner[hidden] {
  display: none;
}

/* ── Cards adhésion ─────────────────────────────────────── */
.adhesion-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    border-color 0.2s ease;
  will-change: transform;
}

.adhesion-card:hover:not(.no-hover) {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px -12px hsla(24, 78%, 38%, 0.25);
  border-color: var(--primary);
}

.adhesion-card--featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-card);
}

.adhesion-card__badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-warm);
  color: var(--primary-fg);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.75rem;
  border-radius: 99px;
  white-space: nowrap;
}

.adhesion-card__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--fg);
}

.adhesion-card__price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.adhesion-card__price span {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--muted-fg);
}

.adhesion-card__desc {
  font-size: 0.9375rem;
  color: var(--muted-fg);
  line-height: 1.6;
}

.adhesion-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--fg);
  flex: 1;
}

/* ── Engagement card title & icon (factorisation) ────────── */
.engagement-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: .25rem;
}

.engagement-icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

/* ── FAQ ────────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* .faq-question fonctionne pour <summary> (details natif) ET <button> (aria-expanded) */
.faq-question {
  list-style: none;
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: background 0.15s;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 0.2s;
}

/* État ouvert : details natif OU button[aria-expanded="true"] */
details[open] .faq-question,
.faq-question[aria-expanded="true"] {
  background: hsl(24, 78%, 38%, 0.05);
}

details[open] .faq-question::after,
.faq-question[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.faq-question:hover {
  background: hsl(24, 78%, 38%, 0.05);
}

.faq-question:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.faq-answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--muted-fg);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.faq-answer a {
  color: var(--primary);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — @media (prefers-color-scheme: dark)
   Les variables CSS --bg, --fg, etc. sont déjà définies dans
   :root ; on les surcharge ici pour le mode sombre.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Fonds */
    --bg: hsl(24, 10%, 8%);
    --card: hsl(24, 10%, 11%);
    --muted: hsl(24, 8%, 14%);
    --secondary: hsl(24, 8%, 17%);

    /* Texte */
    --fg: hsl(30, 20%, 94%);
    --muted-fg: hsl(30, 10%, 60%);
    --primary-fg: hsl(30, 20%, 98%);

    /* Bords */
    --border: hsl(24, 10%, 20%);

    /* Ombres */
    --shadow-card: 0 2px 8px hsl(0, 0%, 0%, 0.4);
    --shadow-warm: 0 4px 16px hsl(24, 78%, 30%, 0.35);
  }

  /* Navbar */
  .navbar {
    background: hsl(24, 10%, 8%, 0.95);
    border-bottom-color: hsl(24, 10%, 18%);
  }

  /* Hero overlay adapté au fond sombre */
  .hero__overlay {
    background: linear-gradient(to top,
        hsl(24, 10%, 8%) 0%,
        hsl(24, 10%, 8%, 0.5) 50%,
        transparent 100%);
  }

  /* Cards */
  .card,
  .adhesion-card,
  .engagement-card,
  .project-article {
    background: var(--card);
    border-color: var(--border);
  }

  /* Formulaire */
  .form-field {
    background: var(--muted);
    color: var(--fg);
    border-color: var(--border);
  }

  .form-field::placeholder {
    color: hsl(30, 10%, 45%);
  }

  .subject-pill span {
    background: var(--muted);
  }

  /* Page intro */
  .page-intro {
    background: var(--card);
  }

  /* Bouton secondary */
  .btn--secondary {
    background: var(--secondary);
    color: var(--fg);
  }

  /* Info box */
  .info-box {
    background: hsl(24, 10%, 13%);
    border-color: hsl(24, 78%, 38%, 0.25);
  }

  /* Footer */
  .footer {
    border-top-color: var(--border);
  }

  /* FAQ */
  .faq-item {
    border-color: var(--border);
  }

  .faq-question:hover,
  details[open] .faq-question {
    background: hsl(24, 78%, 38%, 0.08);
  }

  /* Navbar mobile menu */
  .navbar__mobile-menu {
    background: var(--card);
    border-color: var(--border);
  }

  /* Code / pre */
  pre,
  code {
    background: var(--muted);
    color: var(--fg);
  }
}

/* ── Classes utilitaires (factorisation styles inline) ───── */
.mt-section {
  margin-top: 3.5rem;
}

.mt-sm {
  margin-top: 1.5rem;
}

.mt-md {
  margin-top: 2rem;
}

.mb-sm {
  margin-bottom: 1.5rem;
}

.mx-auto {
  margin-inline: auto;
}

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

.card__title--lg {
  font-size: 1.5rem;
}

.card__title--sm {
  font-size: 1rem;
}

.card__desc--mb {
  margin-bottom: 1.5rem;
}

.card--horizontal {
  flex-direction: row;
  gap: 1rem;
  padding: 1.5rem;
  align-items: flex-start;
}

.card__icon--sm {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0;
  flex-shrink: 0;
}

.pricing-grid--mt {
  margin-top: 1rem;
}

.legal-note {
  font-size: 0.75rem;
  color: var(--muted-fg);
  margin-top: 1rem;
  text-align: center;
}

.mb-card {
  margin-bottom: 2rem;
}

/* ── Bandeau cookie RGPD ─────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--fg);
  color: var(--bg);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__text {
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
  flex: 1;
  min-width: 16rem;
}

.cookie-banner__link {
  color: var(--primary-light, #f4a261);
  text-decoration: underline;
  white-space: nowrap;
}

.cookie-banner__btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.cookie-banner__btn:hover {
  opacity: 0.9;
}

.cookie-banner__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════
   ESPACE COMPTE — /accounts/
   ═══════════════════════════════════════════════════════════ */

/* ── Conteneur login centré ──────────────────────────────── */
.accounts-login-wrap {
  max-width: 37.5rem;
  margin-inline: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}

@media (max-width: 480px) {
  .accounts-login-wrap {
    padding: 1.5rem 1.25rem;
    border-radius: calc(var(--radius) - 2px);
    box-shadow: none;
  }
}

/* ── Variante large (tableau de bord) — divergence V1, ce backend
   uniquement, voir functions/_shared/theme.js dashboardPage() ── */
.accounts-login-wrap--wide {
  max-width: 56rem;
}

@media (max-width: 480px) {
  .accounts-login-wrap--wide {
    padding: 1.5rem 1.25rem;
    border-radius: calc(var(--radius) - 2px);
    box-shadow: none;
  }
}

/* ── Connexion en diptyque « couverture + formulaire » (V2 design,
   26/08/2026) — voir src/theme.mjs renderPage({ cover }), réservé à
   loginPage(). Empilé (couverture condensée au-dessus) en dessous de
   900px, deux colonnes fusionnées au-delà. ── */
.accounts-login-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* 28/08/2026 — logo au-dessus de l'eyebrow, demande SEO/indexation.
   Composant absent côté maghen.fr (le diptyque de login n'existe que dans
   ce dépôt), donc pas de classe verbatim à reprendre pour ce point précis.
   Agrandi/centré/rond le 29/08/2026 (demande explicite) : le logo était
   trop petit et collé à gauche (.accounts-login-cover est en
   flex-direction: column sans align-items: center — un <img> en display
   par défaut reste aligné à gauche sans `margin: 0 auto` + `display:
   block`). */
.accounts-login-cover__logo {
  display: block;
  width: 7rem;
  height: 7rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  object-fit: cover;
  /* Évite de déformer l'image */
}

/* `.seo-article` (28/08/2026) retirée le 29/08/2026 : plus utilisée depuis
   que le contenu éditorial réutilise les vraies cartes `.card`/`.pillar-detail`
   de maghen.fr (déjà présentes plus bas dans ce fichier). */

/* Widgets `.widget-*`/`.piliers-list`/`.rgpd-notice-text` (29/08/2026)
   retirés le même jour : remplacés par le vrai design system "piliers"
   de maghen.fr (.pillar-detail/.card__icon/.section__eyebrow etc.,
   ci-dessous à leur emplacement d'origine dans ce fichier — copie
   verbatim déjà présente, jamais câblée jusqu'ici dans ce dépôt). Voir
   TODO.md (29/08/2026) pour le contexte : le rendu d'origine de ce bloc
   était jugé nettement inférieur à celui de maghen.fr/piliers/. */

.accounts-login-cover {
  background: var(--gradient-warm);
  color: var(--primary-fg);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius) var(--radius) 0 0;
}

.accounts-login-cover__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.75rem;
}

.accounts-login-cover__title {
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.accounts-login-cover__tagline {
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 0.92;
  max-width: 26rem;
}

.accounts-login-panel .accounts-login-wrap {
  border-radius: 0 0 var(--radius) var(--radius);
  border-top: none;
}

@media (min-width: 900px) {
  .accounts-login-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    max-width: 64rem;
    margin-inline: auto;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .accounts-login-cover {
    padding: 3rem 2.75rem;
    border-radius: 0;
  }

  .accounts-login-cover__title {
    font-size: 2.25rem;
  }

  .accounts-login-panel .accounts-login-wrap {
    max-width: none;
    margin-inline: 0;
    height: 100%;
    box-shadow: none;
    border: none;
    border-radius: 0;
  }
}

/* ── Card générique compte ───────────────────────────────── */
.accounts-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    border-color 0.2s ease;
  will-change: transform;
}

.accounts-card:hover:not(.no-hover) {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px -12px hsla(24, 78%, 38%, 0.25);
  border-color: var(--primary);
}

/* ── « Le Carnet de Famille » (V2 design, 26/08/2026) — divergence V1,
   ce backend uniquement, voir functions/_shared/theme.js et
   src/theme.mjs. L'espace membre est traité comme les pages d'un carnet
   de famille relié (chaleureux, personnel) plutôt qu'un dashboard SaaS
   générique : grain de papier, cartes à coins « coupés à la main » avec
   liseré pointillé façon page d'album, médaillon-sceau, onglets en
   languette de classeur, connexion en diptyque « couverture + formulaire ».
   Toutes les règles ci-dessous ne touchent que l'espace membre — le reste
   du site (copié verbatim de maghen.fr) est inchangé. ── */

/* Grain de papier très subtil sur le fond de toute page espace membre —
   deux dégradés radiaux répétés en quinconce, opacité <4%, aucune image
   externe. */
body:has(.accounts-login-wrap) {
  background-image:
    repeating-radial-gradient(circle at 0 0, hsla(25, 30%, 12%, 0.025) 0, transparent 2px, transparent 18px),
    repeating-radial-gradient(circle at 9px 9px, hsla(25, 30%, 12%, 0.02) 0, transparent 2px, transparent 18px);
  background-size: 18px 18px;
}

/* Coins asymétriques « coupés à la main » + liseré interne en pointillés,
   comme une photo collée dans un album — appliqué aux grandes cartes de
   l'espace membre (profil, sécurité, foyer, zone de danger), pas aux
   petites cartes-liens du grid ni au reste du site. */
.accounts-card {
  position: relative;
  border-radius: 4px 20px 4px 20px;
}

.accounts-card::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px dashed var(--border);
  border-radius: 2px 14px 2px 14px;
  pointer-events: none;
}

/* Cadre avatar façon polaroid : identité « photo d'abord » plutôt que
   dashboard SaaS générique. */
.accounts-avatar-frame {
  position: relative;
  display: inline-flex;
  padding: 0.5rem 0.5rem 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  box-shadow: var(--shadow-card);
  transform: rotate(-2deg);
  flex-shrink: 0;
}

/* Médaillon-sceau — remplace le badge pilule de la Phase 1 : un tampon
   circulaire dégradé superposé sur le coin du cadre polaroid, plutôt
   qu'une pilule à côté du nom. */
.accounts-seal {
  position: absolute;
  bottom: -0.5rem;
  right: -0.5rem;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.25rem;
  border-radius: 50%;
  background: var(--gradient-warm);
  color: var(--primary-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.1;
  text-transform: uppercase;
  box-shadow: var(--shadow-warm);
  border: 2px solid var(--bg);
  transform: rotate(4deg);
}

/* Ligne icône + titre/description, réutilisée par la carte foyer du
   tableau de bord. */
.accounts-card-header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  background: var(--bg);
  border-color: var(--border);
  color: var(--fg);
}

/* ── Navigation en onglets ───────────────────────────────── */
.accounts-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  margin-bottom: 0;
}

.accounts-tabs--inner {
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

/* Languette de classeur plutôt que soulignement plat : l'onglet actif
   « sort » de la reliure — coins arrondis en haut seulement, léger
   soulèvement, ombre chaude portée vers le haut. */
.accounts-tab {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-fg);
  padding: 0.75rem 1.125rem;
  margin-bottom: -1px;
  text-decoration: none;
  transition: color .15s, border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.accounts-tab:hover {
  color: var(--fg);
}

.accounts-tab--active {
  color: var(--primary);
  font-weight: 600;
  background: var(--bg);
  border-color: var(--border);
  box-shadow: 0 -4px 10px -6px hsla(24, 78%, 38%, 0.3);
  transform: translateY(1px);
}

/* ── Avatar ──────────────────────────────────────────────── */
.accounts-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.accounts-avatar--lg {
  width: 5rem;
  height: 5rem;
}

.accounts-avatar-placeholder {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--gradient-warm);
  color: var(--primary-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

.accounts-avatar-placeholder.accounts-avatar--lg {
  width: 5rem;
  height: 5rem;
  font-size: 2rem;
}

/* ── Ligne profil résumé ─────────────────────────────────── */
.accounts-profile-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.accounts-profile-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--fg);
}

.accounts-profile-email {
  font-size: 0.875rem;
  color: var(--muted-fg);
  margin-top: 0.125rem;
}

.accounts-profile-provider {
  font-size: 0.75rem;
  color: var(--muted-fg);
  margin-top: 0.25rem;
}

/* ── Card action rapide (lien cliquable) ─────────────────── */
.accounts-action-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: inherit;
  will-change: transform;
}

.accounts-action-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
  text-decoration: none;
  color: inherit;
}

/* ── Séparateur "ou" ─────────────────────────────────────── */
.accounts-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--muted-fg);
  font-size: 0.8125rem;
}

.accounts-divider::before,
.accounts-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Boutons connexion sociale ───────────────────────────── */
.accounts-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}

@media (max-width: 360px) {
  .accounts-social {
    grid-template-columns: 1fr;
  }
}

.accounts-social-btn {
  justify-content: center;
  gap: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ── Bouton Google GIS natif + repli ─────────────────────── */
/* Le repli (lien classique oauth.php) est affiché par défaut, au cas où
   le script GIS échoue à charger (réseau, bloqueur). Dès que GIS rend son
   propre bouton dans #google-gis-btn, accounts.js ajoute .gis-ready sur
   le parent .accounts-social pour masquer le repli et révéler le bouton
   natif Google — qui occupe alors la même cellule de grille. */
#google-gis-btn {
  display: none;
}

.accounts-social.gis-ready #google-gis-btn {
  display: block;
}

.accounts-social.gis-ready #google-gis-fallback-link {
  display: none;
}

/* ── Champ OTP (grandes lettres monospace) ───────────────── */
.accounts-otp-input {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5rem;
  text-align: center;
}

/* Amélioration progressive JS (assets/otp-boxes.js, 02/09/2026) : le champ
   ci-dessus reste la source de vérité soumise au serveur (name inchangé),
   simplement masqué une fois les 6 cases construites — sans JS, le champ
   d'origine reste visible et pleinement fonctionnel. */
.accounts-otp-input--enhanced {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.accounts-otp-boxes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  max-width: 22rem;
}

.accounts-otp-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  padding: 0;
}

/* ── Dark mode ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {

  .accounts-card,
  .accounts-action-card {
    background: var(--card);
    border-color: var(--border);
  }

  .accounts-tab--active {
    color: var(--primary);
  }

  /* « Veillée » — une lueur chaude douce plutôt qu'un simple fond sombre
     plat, cohérente avec le thème carnet de famille lu le soir. */
  .accounts-tab--active {
    box-shadow: 0 -4px 14px -4px hsla(36, 80%, 55%, 0.35);
  }

  .accounts-card:hover:not(.no-hover) {
    box-shadow: 0 16px 40px -12px hsla(36, 80%, 55%, 0.3);
  }

  .accounts-seal {
    box-shadow: 0 0 0 1px hsla(36, 80%, 55%, 0.4), 0 4px 16px hsla(36, 80%, 55%, 0.35);
  }

  .accounts-avatar-frame {
    box-shadow: 0 4px 20px -6px hsla(36, 80%, 55%, 0.2);
  }
}

/* ══════════════════════════════════════════════════════════════
   UTILITAIRES "CSP-safe" — remplacent les style= inline dans /accounts/
   (CSP : style-src autorise 'unsafe-inline' pour Google GIS, mais ces
   classes restent préférables pour la lisibilité et la maintenabilité).
   ══════════════════════════════════════════════════════════════ */
.hidden {
  display: none !important;
}

.text-right {
  text-align: right;
}

.text-xs {
  font-size: 0.8125rem;
}

.text-error {
  color: var(--primary);
  font-weight: 600;
}

.text-success {
  color: hsl(142, 60%, 28%);
  font-weight: 600;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.form-hint {
  margin-top: 0.375rem;
}

/* ── Badges de statut (missionControlPage, 03/09/2026) ──────
   Seule nouvelle couleur introduite hors palette existante : un vert de
   succès (aucun token --success n'existait). Rouge/ambre/gris réutilisent
   --destructive/--accent/--muted déjà en place. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-badge::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-badge--ok {
  background: hsl(142, 60%, 94%);
  color: hsl(142, 60%, 28%);
}

.status-badge--down {
  background: hsl(0, 84%, 95%);
  color: hsl(0, 70%, 42%);
}

.status-badge--degraded {
  background: hsl(36, 80%, 93%);
  color: hsl(30, 80%, 35%);
}

.status-badge--off,
.status-badge--unknown {
  background: var(--muted);
  color: var(--muted-fg);
}

.accounts-card--destructive {
  border-color: var(--destructive);
}

.card__icon--destructive {
  background: hsl(0 84% 60% / 0.1);
  color: var(--destructive);
  flex-shrink: 0;
}

.card__title--destructive {
  color: var(--destructive);
}

.link--primary {
  color: var(--primary);
}

.delete-header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.btn-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.btn--destructive-outline {
  background: var(--bg);
  border: 1px solid var(--destructive);
  color: var(--destructive);
}

.btn--destructive-outline:hover {
  background: hsl(0 84% 60% / 0.08);
}

/* ── Ligne de statut d'alerte (tableau de bord) — divergence V1,
   voir functions/_shared/theme.js dashboardPage() ── */
.accounts-status-line--warn {
  color: var(--destructive);
}

/* ── Galerie presse (améliorations visuelles) ────────────── */
.gallery-item img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.02);
  box-shadow: var(--shadow-warm);
}

/* ── Feature Grid (si utilisée sur les pages projets) ───── */
.feature {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   ANIMATIONS SCROLL — titres & entrées en viewport
   ============================================================ */

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.hero__eyebrow.scroll-fade-up,
.section__eyebrow.scroll-fade-up {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.has-scroll-animations .hero__eyebrow.scroll-fade-up:not(.is-visible),
html.has-scroll-animations .section__eyebrow.scroll-fade-up:not(.is-visible) {
  opacity: 0;
  transform: translateY(10px);
}

.scroll-fade-up {
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

html.has-scroll-animations .scroll-fade-up:not(.is-visible) {
  opacity: 0;
  transform: translateY(40px);
}

.scroll-fade-up:nth-child(1).is-visible {
  transition-delay: 0.05s;
}

.scroll-fade-up:nth-child(2).is-visible {
  transition-delay: 0.10s;
}

.scroll-fade-up:nth-child(3).is-visible {
  transition-delay: 0.15s;
}

.scroll-fade-up:nth-child(4).is-visible {
  transition-delay: 0.20s;
}

.scroll-fade-up:nth-child(5).is-visible {
  transition-delay: 0.25s;
}

.scroll-fade-up:nth-child(6).is-visible {
  transition-delay: 0.30s;
}

/* ============================================================
   STAFF SHELL — Dashboard Staff V3 (03/09/2026, refonte créative le
   03/09/2026 — voir TODO.md pour le détail)
   Second gabarit isolé de renderPage() (src/theme.mjs::renderStaffPage),
   réservé à /staff/*. Exclusivement construit à partir des --variables
   déjà définies en haut de ce fichier (règle du projet, voir
   doc/rapport-critique-dashboard-staff.md §9.6) — aucune couleur brute
   nouvelle. Reprend délibérément le langage visuel déjà validé de
   « Le Carnet de Famille » (espace membre, d83a713 : grain de papier,
   coins coupés à la main, médaillon-sceau, languette de classeur) plutôt
   qu'un habillage SaaS générique — le Staff est un autre carnet du même
   foyer. Quelques réglages dark-mode dédiés en bas de section (lueur
   « veillée », même patron que le bloc dark-mode espace membre).
   Bascule de la sidebar mobile en CSS pur (checkbox + label, même patron
   que TAB_TOGGLE_CSS dans functions/_shared/theme.js) — pas de JS.
   ============================================================ */

.staff-drawer-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.staff-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--fg);
  /* Même grain de papier que l'espace membre (« Le Carnet de Famille »,
     d83a713) — le Staff est un autre carnet du même foyer, pas un panneau
     SaaS générique. */
  background-image:
    repeating-radial-gradient(circle at 0 0, hsla(25, 30%, 12%, 0.025) 0, transparent 2px, transparent 18px),
    repeating-radial-gradient(circle at 9px 9px, hsla(25, 30%, 12%, 0.02) 0, transparent 2px, transparent 18px);
  background-size: 18px 18px;
}

.staff-sidebar {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 1.5rem 1.25rem;
}

/* Plaque de couverture (03/09/2026, refonte créative) — un aplat chaud
   discret derrière le logo/nom plutôt qu'un simple flex sur le fond de la
   sidebar, comme une page de garde. */
.staff-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: -0.25rem -0.25rem 1.5rem;
  padding: 0.75rem;
  border-radius: var(--radius);
  background: hsl(24, 78%, 38%, 0.08);
  text-decoration: none;
  color: inherit;
}

.staff-sidebar__logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--bg);
  background: var(--bg);
  box-shadow: var(--shadow-warm);
}

.staff-sidebar__brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
}

.staff-sidebar__brand-tag {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-fg);
  margin-top: 0.15rem;
}

.staff-sidebar__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.staff-nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.staff-nav-item:hover {
  background: var(--muted);
}

/* Languette de classeur (03/09/2026, refonte créative) — même logique que
   .accounts-tab--active (onglets espace membre) transposée à une nav
   verticale : un onglet de dossier suspendu à gauche plutôt qu'un simple
   fond plein. */
.staff-nav-item--active,
.staff-nav-item--active:hover {
  background: hsl(24, 78%, 38%, 0.12);
  color: var(--primary);
  font-weight: 700;
  border-radius: 4px 14px 14px 4px;
  border-left: 3px solid var(--primary);
  padding-left: calc(0.75rem - 3px);
}

.staff-nav-item__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.staff-sidebar__footer {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 1rem;
}

.staff-sidebar__user {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
}

.staff-sidebar__user-name {
  font-weight: 600;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-sidebar__user-role {
  font-size: 0.75rem;
  color: var(--muted-fg);
}

/* Déconnexion en ligne discrète (03/09/2026, alignement maquette) — remplace
   l'ancien bouton plein encadré, même patron visuel que .staff-nav-item
   (icône + libellé, fond au survol), mais un <button> de formulaire. */
.staff-logout-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  color: var(--muted-fg);
  font-size: 0.9rem;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.staff-logout-btn:hover {
  background: var(--muted);
  color: var(--fg);
}

.staff-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Bandeau « couverture » (03/09/2026, refonte créative) — remplace le
   fond photo pleine largeur (voir renderStaffPage() dans src/theme.mjs
   pour l'historique de la régression mobile qui a motivé cet abandon) par
   un aplat dégradé chaud, même traitement que .accounts-login-cover
   (connexion diptyque, d83a713) : le Staff ouvre chaque page sur la même
   couverture chaleureuse que le reste du site, pas un bandeau SaaS gris. */
.staff-header {
  position: relative;
  padding: 1.75rem 2rem;
  background: var(--gradient-warm);
  color: var(--primary-fg);
  box-shadow: 0 4px 20px -8px hsl(24, 78%, 38%, 0.35);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.staff-header__text {
  min-width: 0;
}

.staff-header__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-fg);
  opacity: 0.85;
}

.staff-header__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0.2rem 0 0.25rem;
  color: var(--primary-fg);
}

.staff-header__desc {
  color: var(--primary-fg);
  opacity: 0.85;
  font-size: 0.9rem;
  margin: 0;
}

/* Photo épinglée façon médaillon/polaroid — voir le commentaire de
   renderStaffPage() (src/theme.mjs) : à cette taille le texte embarqué
   dans l'image source n'est plus lisible, donc plus de risque de conflit
   avec le H1 sur aucun format d'écran. Masquée sous 900px par simplicité
   (voir media query plus bas). */
.staff-header__seal-photo {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-fg);
  box-shadow: var(--shadow-warm);
  transform: rotate(-4deg);
  flex-shrink: 0;
}

.staff-drawer-btn {
  display: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.4rem;
  border-radius: var(--radius);
  color: var(--primary-fg);
}

.staff-drawer-btn:hover {
  background: hsl(0, 0%, 100%, 0.18);
}

/* Menu utilisateur du header : posé sur le dégradé, pas sur --card —
   couleurs adaptées localement (le panneau déroulant .staff-user-menu__panel
   garde son propre fond opaque, inchangé). */
.staff-header .staff-user-menu>summary {
  color: var(--primary-fg);
}

.staff-header .staff-user-menu>summary:hover {
  background: hsl(0, 0%, 100%, 0.18);
}

.staff-header .accounts-avatar-placeholder {
  background: var(--primary-fg);
  color: var(--primary);
  border: 2px solid hsl(0, 0%, 100%, 0.5);
}

.staff-drawer-overlay {
  display: none;
}

.staff-content {
  padding: 1.75rem 2rem;
  flex: 1;
}

/* ── Cartes statistiques ─────────────────────────────────── */
.staff-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.staff-stat-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

/* Icône en médaillon plutôt qu'en carré arrondi — même esprit que
   .accounts-seal (03/09/2026, refonte créative), réservé aux 4 cartes
   stat pour les distinguer visuellement des lignes d'action ci-dessous. */
.staff-stat-card .card__icon {
  border-radius: 50%;
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--border);
  transform: rotate(-4deg);
}

.staff-stat-card__value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.staff-stat-card__label {
  font-weight: 600;
  font-size: 0.875rem;
}

.staff-stat-card__hint {
  font-size: 0.75rem;
  color: var(--muted-fg);
}

/* ── État « indisponible » (backend en préparation, jamais un
     chiffre inventé — voir doc/rapport-critique-dashboard-staff.md) ── */
.staff-unavailable {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  color: var(--muted-fg);
  font-size: 0.875rem;
  text-align: center;
}

/* ── Grille 2 colonnes (Actions rapides / Invitations) ──── */
.staff-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* ── Menu utilisateur (details/summary natif, sans JS) ──── */
.staff-user-menu {
  position: relative;
}

.staff-user-menu>summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
}

.staff-user-menu>summary::-webkit-details-marker {
  display: none;
}

.staff-user-menu>summary:hover {
  background: var(--muted);
}

.staff-user-menu__panel {
  position: absolute;
  right: 0;
  margin-top: 0.4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 0.5rem;
  min-width: 180px;
  z-index: 20;
}

@media (min-width: 900px) {
  .staff-columns {
    grid-template-columns: 3fr 2fr;
  }
}

@media (max-width: 899px) {
  .staff-drawer-btn {
    display: inline-flex;
  }

  .staff-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-card);
    overflow-y: auto;
  }

  .staff-drawer-toggle-input:checked~.staff-sidebar {
    transform: translateX(0);
  }

  .staff-drawer-toggle-input:checked~.staff-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: hsl(25, 30%, 12%, 0.4);
    z-index: 30;
  }

  .staff-header {
    padding: 1.1rem 1.25rem;
  }

  .staff-content {
    padding: 1.25rem;
  }

  /* Le médaillon épinglé (.staff-header__seal-photo) n'a plus le problème
     de lisibilité de l'ancien fond photo pleine largeur (voir renderStaffPage()
     dans src/theme.mjs) — masqué ici par simplicité, le header wrap déjà
     sur 4-5 lignes sous ce point de rupture et n'a pas la place. */
  .staff-header__seal-photo {
    display: none;
  }

  /* Bug réel trouvé par capture d'écran mobile (03/09/2026, refonte
     créative) : le libellé de rôle du menu utilisateur (ex. "Propriétaire
     de la plateforme") ne rétrécit jamais dans la ligne flex du header —
     ses voisins (bouton ☰, libellé) n'ont pas de min-width:0, contrairement
     à .staff-header__text qui en a un — donc c'est le H1/eyebrow/desc qui
     absorbait toute la contrainte de largeur et s'effondrait en colonne
     d'un seul mot. Ne garder que l'avatar-initiale sous ce point de
     rupture, motif mobile courant. */
  .staff-user-menu>summary span:last-child {
    display: none;
  }
}

/* « Veillée » Staff (03/09/2026) — même principe que le bloc dark-mode
   espace membre plus haut (une lueur chaude douce plutôt qu'un simple
   assombrissement plat), transposé aux nouveaux éléments de la refonte
   créative de cette section. */
@media (prefers-color-scheme: dark) {

  .staff-nav-item--active,
  .staff-nav-item--active:hover {
    box-shadow: -3px 0 14px -4px hsla(36, 80%, 55%, 0.35);
  }

  .staff-stat-card .card__icon {
    box-shadow: 0 0 0 1px var(--border), 0 4px 14px -4px hsla(36, 80%, 55%, 0.3);
  }

  .staff-sidebar__logo {
    box-shadow: 0 0 0 1px hsla(36, 80%, 55%, 0.4), 0 4px 16px hsla(36, 80%, 55%, 0.3);
  }

  .staff-header__seal-photo {
    box-shadow: 0 0 0 1px hsla(36, 80%, 55%, 0.4), 0 4px 16px hsla(36, 80%, 55%, 0.35);
  }
}


/* ── Direction visuelle Staff 2026 ─────────────────────────
   Une interface d'administration calme et éditoriale : la photo de
   l'association devient une présence discrète dans l'en-tête, tandis que
   les actions restent très lisibles au premier regard. */
.staff-shell {
  --staff-ink: hsl(21, 26%, 13%);
  --staff-paper: hsl(38, 38%, 97%);
  --staff-terracotta: hsl(22, 71%, 43%);
  --staff-sage: hsl(137, 27%, 42%);
  background: var(--staff-paper);
  background-image:
    radial-gradient(circle at 78% 7%, hsla(28, 85%, 72%, 0.22), transparent 24rem),
    linear-gradient(115deg, hsla(38, 38%, 97%, 0.96), hsla(38, 38%, 97%, 0.78));
  color: var(--staff-ink);
}

.staff-sidebar {
  width: 276px;
  padding: 2rem 1.35rem 1.35rem;
  background: hsla(40, 42%, 98%, 0.88);
  border-right: 1px solid hsla(22, 35%, 28%, 0.13);
  backdrop-filter: blur(18px);
}

.staff-sidebar__brand {
  margin: 0 0 2.25rem;
  padding: 0.2rem 0.35rem;
  background: transparent;
}

.staff-sidebar__logo {
  width: 3.75rem;
  height: 3.75rem;
  border: 3px solid var(--staff-paper);
  box-shadow: 0 8px 22px hsla(22, 71%, 43%, 0.18);
}

.staff-sidebar__brand-name {
  color: var(--staff-ink);
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.staff-sidebar__brand-tag {
  color: var(--staff-terracotta);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.staff-sidebar__nav {
  gap: 0.45rem;
}

.staff-nav-item {
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.8rem;
  color: hsl(21, 15%, 36%);
  font-size: 0.875rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.staff-nav-item:hover {
  background: hsla(22, 71%, 43%, 0.08);
  color: var(--staff-ink);
  transform: translateX(3px);
}

.staff-nav-item--active,
.staff-nav-item--active:hover {
  background: var(--staff-terracotta);
  color: #fffaf2;
  border-left: 0;
  border-radius: 0.8rem;
  padding-left: 0.85rem;
  box-shadow: 0 8px 18px hsla(22, 71%, 43%, 0.2);
  transform: none;
}

.staff-nav-item__icon {
  opacity: 0.8;
}

.staff-nav-item--active .staff-nav-item__icon {
  opacity: 1;
}

.staff-sidebar__footer {
  border-top-color: hsla(22, 35%, 28%, 0.13);
  padding-top: 1.25rem;
}

/* Hauteur FIXE (04/09/2026) plutôt que `min-height` : évite qu'une `desc`
   sur 2 lignes pousse la boîte plus haut sans contrôle — voir
   .staff-header__desc ci-dessous pour le filet de sécurité si le texte
   dépasse malgré tout.
   `background-size: ..., auto 450px` sur la photo (04/09/2026) : PAS
   `cover`, trouvé insuffisant par capture d'écran réelle à plusieurs
   largeurs — `cover` recalcule l'échelle en fonction de la LARGEUR de la
   boîte, donc la fenêtre de recadrage verticale visible se déplace avec la
   largeur d'écran (visible/propre à 1600-1920px, mais laissait réapparaître
   le haut du gros titre "LE LABORATOIRE D'INNOVATION FAMILIALE" intégré à
   l'image dès 1280-1400px). L'image source fait 1536×1024 ; le texte
   commence vers 59% de la hauteur. Une taille de fond en PIXELS FIXES
   (indépendante de la largeur de la boîte) + `background-position: ...,
   right top` ne montre jamais que le haut de l'image (184/450 ≈ 41% de sa
   hauteur once mise à l'échelle) — le trio logo/ampoule/famille, jamais le
   texte — quelle que soit la largeur d'écran. */
.staff-header {
  height: 11.5rem;
  padding: 2.5rem 3.25rem;
  overflow: hidden;
  background-color: hsl(31, 57%, 94%);
  background-image: linear-gradient(90deg, hsl(31, 57%, 94%) 0%, hsla(31, 57%, 94%, 0.93) 43%, hsla(31, 57%, 94%, 0.48) 100%), url('/assets/img/staff-dashboard-bg.webp');
  background-position: center, right top;
  background-repeat: no-repeat;
  background-size: 100% 100%, auto 450px;
  color: var(--staff-ink);
  box-shadow: none;
  border-bottom: 1px solid hsla(22, 35%, 28%, 0.1);
}

.staff-header__eyebrow {
  color: var(--staff-terracotta);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

.staff-header__title {
  max-width: 42rem;
  color: var(--staff-ink);
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  letter-spacing: -0.035em;
}

/* Filet de sécurité pour la hauteur fixe ci-dessus : si un `desc` dépasse
   2 lignes (texte plus long qu'aujourd'hui, ou zoom navigateur), il est
   tronqué proprement avec une ellipse plutôt que de pousser la boîte plus
   haut et rouvrir le problème de recadrage de la photo. */
.staff-header__desc {
  max-width: 38rem;
  color: hsl(21, 15%, 34%);
  opacity: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.staff-header .staff-user-menu>summary {
  color: var(--staff-ink);
}

.staff-header .staff-user-menu>summary:hover {
  background: hsla(22, 71%, 43%, 0.09);
}

.staff-header .accounts-avatar-placeholder {
  background: var(--staff-terracotta);
  color: #fffaf2;
  border-color: hsl(31, 57%, 94%);
}

.staff-content {
  max-width: 1360px;
  width: 100%;
  margin-inline: auto;
  padding: 2.25rem 3.25rem 3.5rem;
}

.staff-stat-grid {
  gap: 1.1rem;
  margin-bottom: 2rem;
}

.staff-stat-card {
  min-height: 7.4rem;
  padding: 1.35rem 1.5rem;
  background: hsla(0, 0%, 100%, 0.78);
  border-color: hsla(22, 35%, 28%, 0.12);
  border-radius: 1rem 1rem 1rem 0.35rem;
  box-shadow: 0 8px 24px hsla(22, 35%, 28%, 0.07);
}

.staff-stat-card .card__icon {
  width: 3.35rem;
  height: 3.35rem;
  border: 0;
  box-shadow: none;
  transform: none;
}

.staff-stat-card__value {
  color: var(--staff-terracotta);
  font-size: 2rem;
}

.staff-stat-card__label {
  color: var(--staff-ink);
  margin-top: 0.2rem;
}

.staff-columns {
  gap: 1.5rem;
}

.staff-content .accounts-card {
  background: hsla(0, 0%, 100%, 0.76);
  border-color: hsla(22, 35%, 28%, 0.12);
  border-radius: 1rem;
  box-shadow: 0 8px 24px hsla(22, 35%, 28%, 0.055);
}

.staff-content .accounts-card::before {
  display: none;
}

.staff-content .accounts-action-card {
  border-color: hsla(22, 35%, 28%, 0.1);
  border-radius: 0.75rem;
  background: hsla(40, 42%, 98%, 0.7);
}

.staff-content .accounts-action-card:hover {
  border-color: hsla(22, 71%, 43%, 0.45);
  box-shadow: 0 8px 20px hsla(22, 35%, 28%, 0.08);
  transform: translateX(3px);
}

@media (max-width: 899px) {
  .staff-header {
    min-height: 10rem;
    padding: 1.5rem 1.25rem;
    /* Photo retirée sous ce point de rupture (régression déjà rencontrée à
       plusieurs reprises avec cette même image, voir plus haut/TODO.md) :
       même avec un voile à 0.9 d'opacité, le texte à fort contraste de la
       bannière marketing ("LA FAMILLE MAGHEN", "LABORATOIRE D'INNOVATION
       FAMILIALE") restait lisible une fois la photo agrandie en `cover` sur
       un en-tête mobile plus compact — vérifié par capture d'écran réelle.
       Fond uni (dégradé conservé) en repli, comme la correction précédente. */
    background-image: linear-gradient(90deg, hsl(31, 57%, 94%) 0%, hsla(31, 57%, 94%, 0.9) 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .staff-content {
    padding: 1.25rem 1rem 2.5rem;
  }

  .staff-sidebar {
    width: min(276px, 88vw);
  }
}