/* ===========================================================================
   PAGES INTERNES
   Memes regles typographiques et memes composants que l accueil : banniere de
   page, corps de texte, tableaux, pastilles, reperes et appel a l action.
   =========================================================================== */

/* ------------------------------------------------------------------ fil d Ariane */
.m-ariane {
  border-bottom: 1px solid var(--line);
  background: #fbfdfd;
  font-size: 0.8125rem;
  color: var(--muted);
}
.m-ariane .m-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 13px 0;
}
.m-ariane a { color: var(--navy); }
.m-ariane a:hover { text-decoration: underline; }
.m-ariane [aria-current='page'] { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ bannière de page */
.m-page-banner {
  padding: 56px 0 52px;
  background:
    radial-gradient(1100px 380px at 12% -40%, rgba(6, 89, 167, 0.1), transparent 62%),
    linear-gradient(180deg, #f6f9fb, #fff);
  border-bottom: 1px solid var(--line);
}
.m-page-banner-grid { display: grid; gap: 40px; align-items: center; }
.m-page-banner--media .m-page-banner-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.m-page-banner h1 {
  margin: 0 0 16px;
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(2.05rem, 1.2rem + 2.6vw, 3.15rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.6px;
}
.m-page-banner h1 em { font-style: normal; color: var(--navy); }
.m-page-banner h1 b { font-weight: 800; color: var(--green); }
.m-page-banner .m-hero-description {
  max-width: 62ch;
  margin: 0 0 24px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--muted);
}
.m-page-banner .m-hero-actions { margin-bottom: 18px; }
.m-page-banner-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(16, 43, 67, 0.16);
}
.m-page-banner-media img { width: 100%; height: auto; display: block; }

/* bannière sombre, pour les pages « urgence » et « zone » */
.m-page-banner--nuit {
  background:
    radial-gradient(900px 340px at 80% -30%, rgba(47, 137, 44, 0.22), transparent 60%),
    linear-gradient(160deg, #0a2740, #071a2c 60%);
  border-bottom: 0;
  color: #fff;
}
.m-page-banner--nuit h1 { color: #fff; }
.m-page-banner--nuit h1 em { color: #7fc4ff; }
.m-page-banner--nuit .m-hero-description { color: #b7cbdd; }
.m-page-banner--nuit .m-eyebrow { color: #7fc4ff; }
.m-page-banner--nuit .m-hero-checks span { color: #cfe0ef; }
.m-page-banner--nuit .m-button.m-outline { border-color: rgba(255, 255, 255, 0.34); color: #fff; }

/* ------------------------------------------------------------------ corps de texte */
.m-prose-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 46px; align-items: start; }
.m-prose-body { max-width: 68ch; }
.m-prose-body h2 {
  margin: 0 0 18px;
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -1.1px;
}
.m-prose-body h2 em { font-style: normal; color: var(--navy); }
.m-prose-body h3 {
  margin: 34px 0 10px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.m-prose-body p { margin: 0 0 16px; line-height: 1.8; color: #3f4d5a; }
.m-prose-body ul,
.m-prose-body ol { margin: 0 0 18px; padding-left: 20px; line-height: 1.8; color: #3f4d5a; }
.m-prose-body li { margin-bottom: 7px; }
.m-prose-body li::marker { color: var(--green); }
.m-prose-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.m-prose-body strong { color: var(--ink); }

.m-prose-aside { display: grid; gap: 16px; position: sticky; top: 118px; }
.m-prose-aside > div,
.m-prose-aside > nav {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 0 14px 14px 0;
  background: var(--white);
  font-size: 0.9rem;
  line-height: 1.65;
}
.m-prose-aside h2,
.m-prose-aside strong {
  display: block;
  margin: 0 0 10px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.m-prose-aside a { display: block; padding: 5px 0; color: var(--muted); }
.m-prose-aside a:hover { color: var(--navy); }

/* ------------------------------------------------------------------ tableaux */
.m-table-wrap { overflow-x: auto; }
.m-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.m-table th,
.m-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.m-table thead th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--pale);
}
.m-table tbody th { font-weight: 700; color: var(--ink); }
.m-table tbody tr:last-child th,
.m-table tbody tr:last-child td { border-bottom: 0; }
.m-table-note { margin: 12px 0 0; font-size: 0.84rem; color: var(--muted); }

/* ------------------------------------------------------------------ pastilles */
.m-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.m-pills a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.88rem;
  transition: border-color 180ms, background 180ms, color 180ms;
}
.m-pills a b {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--navy);
}
.m-pills a:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.m-pills a:hover b { color: rgba(255, 255, 255, 0.8); }

/* ------------------------------------------------------------------ repères */
.m-marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px; }
.m-marks > div {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.m-marks svg { width: 26px; height: 26px; margin-bottom: 12px; color: var(--green); }
.m-marks strong {
  display: block;
  margin-bottom: 7px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.02rem;
  letter-spacing: -0.35px;
}
.m-marks p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--muted); }

/* ------------------------------------------------------------------ étapes */
.m-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px; }
.m-steps > div {
  position: relative;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.m-step-number {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #e7eef4;
}
.m-steps svg { width: 24px; height: 24px; margin-bottom: 14px; color: var(--navy); }
.m-steps h3 {
  margin: 0 0 8px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.35px;
}
.m-steps p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--muted); }
.m-step-note {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eef6ed;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--deep-green);
}

/* ------------------------------------------------------------------ encadrés sombres */
.m-commitment-cards { display: grid; gap: 14px; }
.m-commitment-cards > div {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.m-commitment-cards svg { width: 22px; height: 22px; margin-bottom: 10px; color: var(--navy); }
.m-commitment-cards strong {
  display: block;
  margin-bottom: 6px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}
.m-commitment-cards p { margin: 0; font-size: 0.88rem; line-height: 1.7; color: var(--muted); }
.m-commitment-cards p:empty { display: none; }

/* ------------------------------------------------------------------ appel à l action */
.m-cta-inner {
  padding: 46px clamp(24px, 4vw, 56px);
  border-radius: 24px;
  background:
    radial-gradient(700px 260px at 85% -20%, rgba(47, 137, 44, 0.3), transparent 60%),
    linear-gradient(150deg, #0a2740, #071a2c);
  color: #fff;
  text-align: center;
}
.m-cta-inner .m-eyebrow { color: #7fc4ff; justify-content: center; }
.m-cta-inner h2 {
  max-width: 24ch;
  margin: 12px auto 14px;
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -1px;
}
.m-cta-inner p { max-width: 58ch; margin: 0 auto 22px; line-height: 1.75; color: #b7cbdd; }
.m-cta-inner .m-hero-actions { justify-content: center; }
.m-cta-inner .m-button.m-outline { border-color: rgba(255, 255, 255, 0.34); color: #fff; }

/* ------------------------------------------------------------------ adaptations */
@media (max-width: 62rem) {
  .m-prose-grid { grid-template-columns: 1fr; gap: 28px; }
  .m-prose-aside { position: static; order: -1; }
  .m-prose-aside > nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 2px 14px;
  }
  .m-prose-aside > nav strong { grid-column: 1 / -1; }
  .m-page-banner--media .m-page-banner-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .m-page-banner { padding: 34px 0 32px; }
  .m-page-banner .m-hero-actions { flex-direction: column; align-items: stretch; }
  .m-page-banner .m-hero-actions .m-button { justify-content: center; }
  .m-cta-inner { padding: 34px 22px; }
  .m-cta-inner .m-hero-actions { flex-direction: column; }
  .m-table { font-size: 0.86rem; }
  .m-table thead { display: none; }
  .m-table tbody tr { display: grid; border-bottom: 1px solid var(--line); }
  .m-table tbody tr:last-child { border-bottom: 0; }
  .m-table th,
  .m-table td {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 10px;
    padding: 10px 14px;
    border: 0;
  }
  .m-table td::before,
  .m-table tbody th::before {
    content: attr(data-libelle);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* ------------------------------------------------------------------ boutons sur fond clair */
/* la maquette prévoit le bouton à contour pour un héros sombre : sur une
   bannière claire, son texte blanc devenait invisible. */
.m-page-banner:not(.m-page-banner--nuit) .m-hero-actions .m-outline {
  background: #fff;
  color: var(--navy);
  border-color: #b8cde1;
  backdrop-filter: none;
}
.m-page-banner:not(.m-page-banner--nuit) .m-hero-actions .m-outline:hover {
  border-color: var(--navy);
  background: #f0f6fc;
}
.m-page-banner:not(.m-page-banner--nuit) .m-hero-checks span { color: var(--muted); }
.m-page-banner:not(.m-page-banner--nuit) .m-hero-checks svg { color: var(--green); }

/* ------------------------------------------------------------------ cartes de département */
.m-zone-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 16px; }
.m-zone-cards article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.m-zone-cards article:hover {
  border-color: var(--navy);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(16, 43, 67, 0.1);
}
.m-zone-cards header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.m-zone-cards h3 {
  margin: 0;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.m-zone-cards header span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 1.4px;
  color: var(--navy);
}
.m-zone-cards p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--muted); }
.m-zone-cards-communes { font-size: 0.82rem !important; color: #8a97a3 !important; }
.m-zone-cards .m-text-link { margin-top: auto; padding-top: 6px; }

/* ------------------------------------------------------------------ listes de communes */
.m-commune-groupe { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.m-commune-groupe:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.m-commune-groupe h3 {
  margin: 0 0 12px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.35px;
}
.m-commune-groupe h3 a { display: inline-flex; align-items: baseline; gap: 8px; }
.m-commune-groupe h3 b {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--navy);
}
.m-commune-groupe h3 a:hover { color: var(--navy); }

/* ------------------------------------------------------------------ liste d arguments sombres */
.m-commitment-list { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.m-commitment-list li {
  display: grid;
  gap: 3px;
  padding-left: 22px;
  position: relative;
  font-size: 0.92rem;
  line-height: 1.65;
}
.m-commitment-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.m-commitment-list strong { color: var(--ink); font-weight: 700; }
.m-commitment-list span { color: var(--muted); }

/* ------------------------------------------------------------------ éléments vérifiables */
.m-preuve-detail {
  display: block;
  margin-top: 4px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--navy);
}
.m-marks p a { color: var(--navy); }

/* ------------------------------------------------------------------ avis */
.m-avis-bandeau {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid #f0d9a8;
  border-left: 3px solid #d79a2b;
  border-radius: 0 14px 14px 0;
  background: #fdf8ee;
}
.m-avis-bandeau svg { width: 24px; height: 24px; color: #b8801d; }
.m-avis-bandeau strong {
  display: block;
  margin-bottom: 6px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1rem;
}
.m-avis-bandeau p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: #6b5b3e; }

.m-avis-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 16px; }
.m-avis-carte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.m-avis-note { color: #e9a531; letter-spacing: 2px; font-size: 0.95rem; }
.m-avis-carte p { margin: 0; font-size: 0.93rem; line-height: 1.75; color: #3f4d5a; }
.m-avis-carte footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}
.m-avis-carte footer strong { color: var(--ink); font-size: 0.9rem; }
.m-avis-carte time { margin-left: auto; font-size: 0.76rem; }

/* ------------------------------------------------------------------ plan du site */
.m-plan-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 30px; }
.m-plan-colonne h3 {
  margin: 0 0 14px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.m-plan-colonne ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.m-plan-colonne a {
  display: block;
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--ink);
  transition: color 180ms, transform 180ms;
}
.m-plan-colonne a:hover { color: var(--navy); transform: translateX(3px); }

/* ===========================================================================
   SECTION D ENGAGEMENTS SANS VISUEL
   La grille de la maquette attend une image à gauche et le texte à droite.
   Sans image, la moitié de la largeur restait vide et les encadrés
   s’empilaient en colonne. Ici, le titre occupe le haut et les encadrés se
   répartissent en dessous.
   =========================================================================== */
.m-commitments--plein .m-commitments-grid {
  display: block;
}
.m-commitments--plein .m-commitment-title {
  max-width: 46rem;
  margin-bottom: 30px;
}
.m-commitments--plein .m-commitment-cards {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 16px;
}
.m-commitments--plein .m-commitment-cards > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* un encadré sans texte n’a pas besoin de la place d’un paragraphe */
.m-commitments--plein .m-commitment-cards p:empty { display: none; }

@media (max-width: 700px) {
  .m-commitments--plein .m-commitment-title { margin-bottom: 22px; }
  .m-commitments--plein .m-commitment-cards { grid-template-columns: 1fr; }
}

/* ===========================================================================
   DENSITÉ DES PAGES INTERNES
   La maquette espace ses sections de 95 px en haut et en bas : c’est juste sur
   l’accueil, où chaque section porte des photos et des cartes. Sur les pages
   de contenu, cela créait de grands vides entre un titre et une simple liste.
   Ces règles ne touchent que les pages internes, reconnaissables à leur
   bannière — l’accueil garde exactement son rythme d’origine.
   =========================================================================== */
body:has(.m-page-banner) .m-section { padding: 58px 0; }
body:has(.m-page-banner) .m-section + .m-section { padding-top: 0; }
body:has(.m-page-banner) .m-section-heading { margin-bottom: 28px; gap: 38px; }

body:has(.m-page-banner) .m-section-heading h2,
body:has(.m-page-banner) .m-commitment-title h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: -1px;
}
body:has(.m-page-banner) .m-section-heading p { font-size: 0.95rem; line-height: 1.7; }

/* une section qui ne porte qu’une liste de pastilles n’a pas besoin d’air */
body:has(.m-page-banner) .m-zone-autres,
body:has(.m-page-banner) .m-zone-rappel,
body:has(.m-page-banner) .m-faq-liens,
body:has(.m-page-banner) .m-404 {
  padding: 40px 0;
}
body:has(.m-page-banner) .m-zone-autres .m-section-heading,
body:has(.m-page-banner) .m-zone-rappel .m-section-heading,
body:has(.m-page-banner) .m-faq-liens .m-section-heading {
  margin-bottom: 18px;
}
body:has(.m-page-banner) .m-zone-autres .m-section-heading h2,
body:has(.m-page-banner) .m-zone-rappel .m-section-heading h2,
body:has(.m-page-banner) .m-faq-liens .m-section-heading h2 {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
}

/* la bannière et le premier bloc se suivent de près */
body:has(.m-page-banner) .m-page-banner { padding: 46px 0 42px; }
body:has(.m-page-banner) .m-prose-grid { gap: 38px; }
body:has(.m-page-banner) .m-cta-inner { padding: 38px clamp(22px, 3.5vw, 48px); }

@media (max-width: 700px) {
  body:has(.m-page-banner) .m-section { padding: 38px 0; }
  body:has(.m-page-banner) .m-zone-autres,
  body:has(.m-page-banner) .m-zone-rappel,
  body:has(.m-page-banner) .m-faq-liens { padding: 28px 0; }
}

/* ===========================================================================
   CARTES DE DÉPARTEMENT
   La liste de pastilles était trop maigre pour occuper une section entière.
   Chaque département devient une carte : son numéro en grand, son nom, le
   nombre de communes, et une flèche qui se révèle au survol.
   =========================================================================== */
.m-depts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 12px;
}
/* une ligne simple : pastille, texte, fleche — pas de grille imbriquee, qui
   coupait les noms longs comme « Hauts-de-Seine » sur trois lignes */
.m-dept {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
  transition: border-color 200ms, transform 200ms, box-shadow 220ms;
}
.m-dept::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--navy), var(--green));
  opacity: 0;
  transition: opacity 200ms;
}
.m-dept:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(16, 43, 67, 0.1);
}
.m-dept:hover::before { opacity: 1; }

.m-dept__code {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #eef4fb;
  font-family: Manrope, Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--navy);
  transition: background 200ms, color 200ms;
}
.m-dept:hover .m-dept__code { background: var(--navy); color: #fff; }

/* le nom et le detail forment une colonne qui prend la place restante */
.m-dept__nom {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Manrope, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.35px;
  line-height: 1.25;
  color: var(--ink);
}
.m-dept__detail {
  display: block;
  margin-top: 1px;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.m-dept__fleche {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--navy);
  opacity: 0;
  translate: -5px 0;
  transition: opacity 200ms, translate 200ms;
}
.m-dept__fleche svg { width: 16px; height: 16px; }
.m-dept:hover .m-dept__fleche { opacity: 1; translate: 0 0; }

:root[data-theme='nuit'] .m-dept { background: var(--white); border-color: var(--line); }
:root[data-theme='nuit'] .m-dept__code { background: #16324c; color: #7fc4ff; }
:root[data-theme='nuit'] .m-dept__nom { color: var(--ink); }

@media (max-width: 600px) {
  .m-depts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-dept { padding: 12px 13px; gap: 10px; }
  .m-dept__code { width: 34px; height: 34px; font-size: 0.82rem; }
  .m-dept__nom { font-size: 0.86rem; }
  .m-dept__fleche { display: none; }
}

/* ===========================================================================
   PAGE APPLICATION
   =========================================================================== */
.m-app-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 16px;
}
.m-app-carte {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.m-app-carte h3 {
  margin: 0;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.35px;
}
.m-app-carte p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--muted); }
.m-app-carte .m-button { justify-self: start; margin-top: 4px; }

.m-app-etat {
  padding: 10px 13px;
  border-radius: 10px;
  background: var(--pale);
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
}
.m-app-etat[data-etat='ok'] { background: #eef7ed; color: var(--deep-green) !important; }
.m-app-etat[data-etat='erreur'] { background: #fdeceb; color: #a8342a !important; }
.m-app-etat[data-etat='aide'] { background: #fdf6e8; color: #8a6420 !important; }

.m-app-note {
  margin-top: 20px;
  padding: 20px 24px;
  border: 1px solid #f0d9a8;
  border-left: 3px solid #d79a2b;
  border-radius: 0 14px 14px 0;
  background: #fdf8ee;
}
.m-app-note strong {
  display: block;
  margin-bottom: 6px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1rem;
}
.m-app-note p { margin: 0; font-size: 0.9rem; line-height: 1.75; color: #6b5b3e; }

:root[data-theme='nuit'] .m-app-carte { background: var(--white); border-color: var(--line); }
:root[data-theme='nuit'] .m-app-etat { background: #0b1f33; }
:root[data-theme='nuit'] .m-app-note { background: #2a2113; border-color: #5a4520; }
:root[data-theme='nuit'] .m-app-note p { color: #d6c39a; }

/* ===========================================================================
   APPARITION DES BLOCS
   Montée courte et fondu. Le décalage entre les cartes d’une même grille est
   posé par le script : c’est lui qui donne la cascade.
   =========================================================================== */
.cps-apparait {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 620ms cubic-bezier(0.22, 0.8, 0.28, 1) var(--cps-retard, 0ms),
    transform 620ms cubic-bezier(0.22, 0.8, 0.28, 1) var(--cps-retard, 0ms);
  will-change: opacity, transform;
}
.cps-apparait.cps-vu {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* un visiteur qui limite les animations voit la page telle quelle */
@media (prefers-reduced-motion: reduce) {
  .cps-apparait { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================================
   EN-TÊTE DE SECTION — COMPOSITION
   ---------------------------------------------------------------------------
   Le flex en space-between poussait le paragraphe contre le bord droit : sur
   un grand écran il restait 600 px de vide entre le titre et lui, et le texte
   semblait détaché de la section. Une grille de deux colonnes tenues remet le
   propos à distance de lecture du titre.
   =========================================================================== */
.m-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr);
  align-items: end;
  gap: clamp(26px, 3.4vw, 58px);
}
/* un en-tête sans paragraphe garde toute la largeur */
.m-section-heading > :only-child { grid-column: 1 / -1; }

.m-section-heading > p {
  max-width: 46ch;
  border-left: 3px solid var(--green);
  padding: 4px 0 4px 22px;
  margin-bottom: 6px;
}

@media (max-width: 900px) {
  .m-section-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }
  .m-section-heading > p { margin-bottom: 0; }
}