/* ========================================================================
   Lockpit — pages locales : les trois piliers Vendée et les 36 communes.
   ------------------------------------------------------------------------
   Le socle (lockpit.css) et pilier.css fournissent l'essentiel : héros en
   scène, repères, manifeste, étapes, objections, contact, pied de page.
   Ne reste ici que ce que ces pages sont seules à utiliser : les cartes de
   secteur avec leur icône, le chapeau, les cartes de maillage et les puces
   des communes.
   ======================================================================== */

/* ---------- SECTEURS : une carte par métier, icône en tête ---------- */
.secteurs {
  display: grid;
  gap: 18px;
}
.secteur {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 26px;
  border-radius: 26px;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.06), var(--ombre-douce);
  transition: transform 0.7s var(--ressort), box-shadow 0.7s var(--ressort);
}
.secteur:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08), var(--ombre-portee);
}
.secteur .ic {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: 8px;
  color: var(--blue);
  background: var(--soft);
}
.secteur h3 {
  margin: 0;
  font: 700 clamp(20px, 1.9vw, 24px) / 1.12 "Bricolage Grotesque";
  letter-spacing: -0.03em;
}
.secteur p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}
.secteur a {
  color: var(--blue-texte);
  font-weight: 600;
  text-decoration: none;
}

/* Dans le manifeste local, les mots en italique deviennent des appuis. */
.manifeste-texte em {
  font-style: normal;
  font-weight: 600;
}

/* Chapeau : le paragraphe qui introduit ou conclut une grille. */
.chapeau {
  max-width: 34em;
  margin: -24px 0 40px;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
}
.chapeau.apres {
  margin: 40px 0 0;
}
.chapeau strong {
  color: var(--ink);
  font-weight: 600;
}
.chapeau a {
  color: var(--blue-texte);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- MAILLAGE : les pages voisines ---------- */
.maillage {
  display: grid;
  gap: 14px;
}
.maillage a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 64px 22px 24px;
  border-radius: 22px;
  background: white;
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.06);
  transition: transform 0.5s var(--ressort), box-shadow 0.5s var(--ressort);
}
.maillage a:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08), var(--ombre-douce);
}
.maillage b {
  font: 700 19px / 1.2 "Bricolage Grotesque";
  letter-spacing: -0.025em;
}
.maillage small {
  color: var(--muted);
  font-size: 14px;
}
.maillage i {
  position: absolute;
  right: 18px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.06);
  font-style: normal;
  transition: background 0.5s var(--ressort), color 0.5s var(--ressort), transform 0.5s var(--ressort);
}
.maillage a:hover i {
  background: var(--ink);
  color: var(--paper);
  transform: rotate(-45deg);
}


/* ---------- Réactif ---------- */
@media (min-width: 700px) {
  .secteurs {
    grid-template-columns: repeat(2, 1fr);
  }
  .maillage {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .secteurs {
    grid-template-columns: repeat(3, 1fr);
  }
  .maillage {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .secteur,
  .maillage a,
  .maillage i {
    transition: none;
  }
}