/* =====================================================================
   Observatoire des Transitions — composants sectoriels
   Tuiles, vignettes d'analyse, badges. Dépend de tokens-secteurs.css.

   Facture recherchée : presse institutionnelle française. Donc pas de
   dégradé décoratif, pas d'ombre diffuse, pas de coin trop arrondi —
   ce sont les tics du gabarit d'application. Ici : du filet, du blanc,
   une hiérarchie typographique nette, et de l'asymétrie assumée.
   ===================================================================== */

.fil{font-size:.8rem;color:#cbbf9a;margin:0 0 10px}
.fil a{color:#cbbf9a;text-decoration:underline;text-underline-offset:2px}

/* --- Familles --------------------------------------------------------- */
.famille{margin:38px 0 0}
.famille h2{font-family:var(--serif);font-size:1.32rem;color:var(--green);margin:0 0 2px;font-weight:600}
.famille .compte{font-size:.86rem;color:var(--sage);margin:0 0 16px}

/* --- Tuile de secteur : aplat + texte blanc (variante -aplat, ≥4,5:1) -- */
.tuiles{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.tuile{background:var(--tc);color:#fff;border-radius:6px;padding:15px 14px;min-height:116px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .15s ease,box-shadow .15s ease}
.tuile:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(23,52,39,.20)}
.tuile:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
.tuile img{filter:brightness(0) invert(1);opacity:.94}
.tuile .nm{font-size:.82rem;font-weight:700;line-height:1.22;margin-top:12px}
/* Un secteur sans contenu se signale par la sobriété, pas par une couleur d'alerte. */
.tuile.vide{opacity:.52}
.tuile .nb{display:block;font-size:.67rem;font-weight:400;opacity:.82;margin-top:3px}

/* --- Bandeau de page sectorielle -------------------------------------- */
.bande-secteur{border-bottom:4px solid var(--tc)}
.titre-secteur{display:flex;gap:18px;align-items:flex-start}
.titre-secteur img{filter:brightness(0) invert(1);opacity:.92;flex:0 0 auto;margin-top:4px}
.titre-secteur h1{margin:0}
.titre-secteur p{margin:8px 0 0}

/* --- Badge de rubrique : voile + accent (le motif accessible) ---------- */
.badge{display:inline-block;background:var(--bv);color:var(--bc);border:1px solid var(--bc);
  border-radius:999px;padding:3px 11px;font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;align-self:flex-start}
.mini-badge{display:inline-block;color:var(--bc);border:1px solid var(--bc);background:var(--bv);
  border-radius:999px;padding:1px 8px;font-size:.6rem;font-weight:600;margin-right:5px}

/* --- Vignette d'analyse ------------------------------------------------ */
.vignettes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vig{background:#fff;border:1px solid var(--line);border-top:4px solid var(--vc);
  border-radius:6px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .15s ease,box-shadow .15s ease}
.vig:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(23,52,39,.10)}
.vig:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
.vig .illu{background:var(--vv);height:96px;display:flex;align-items:center;justify-content:center}
.vig .corps{padding:14px 17px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.vig .titre{font-family:var(--serif);font-size:1.04rem;line-height:1.3;color:var(--green);
  font-weight:600;text-wrap:balance}
.vig .autres{line-height:1.9}
.vig .autres:empty{display:none}
.vig .pied{margin-top:auto;padding-top:4px;font-size:.72rem;color:var(--sage);
  text-transform:uppercase;letter-spacing:.05em}

.vide-note{background:var(--ivory);border:1px solid var(--line);border-left:3px solid var(--copper);
  border-radius:0 6px 6px 0;padding:16px 20px;font-size:.95rem;color:var(--sage)}
.retour{color:var(--action);font-weight:700;font-size:.9rem}

@media(max-width:1000px){
  .tuiles{grid-template-columns:repeat(4,1fr)}
  .vignettes{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .tuiles{grid-template-columns:1fr 1fr}
  .vignettes{grid-template-columns:1fr}
  .titre-secteur{gap:12px}
}

/* --- Loupe de recherche dans la navigation ---------------------------- */
.loupe{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin-left:14px;border-radius:50%;
  color:var(--ivory);opacity:.82;transition:.14s}
.loupe:hover{opacity:1;background:rgba(246,243,234,.10)}
.loupe:focus-visible{outline:2px solid var(--copper);outline-offset:2px;opacity:1}
@media(max-width:860px){.loupe{margin-left:auto}}

/* --- Secteurs et suggestions sur une page d'analyse -------------------- */
.secteurs-analyse{margin:-14px 0 26px;line-height:2.1}
.secteurs-analyse .badge{margin-right:4px}

.lire-aussi{max-width:760px;margin:44px auto 0;padding:26px 24px 0;
  border-top:2px solid var(--green)}
.lire-aussi h2{font-family:var(--serif);font-size:1.25rem;color:var(--green);
  margin:0 0 18px;font-weight:600}
.lire-aussi .vignettes{grid-template-columns:repeat(3,1fr);gap:16px}
.lire-aussi .vig .illu{height:76px}
.lire-aussi .vig .titre{font-size:.97rem}
@media(max-width:760px){
  .lire-aussi{padding:22px 18px 0}
  .lire-aussi .vignettes{grid-template-columns:1fr}
}