/* =========================================================
   COMPOSANTS JOURNAL ET METIERS
   Se charge APRES assets/systeme.css, qui porte les tokens, la
   base typographique, la navigation, le pied et les boutons.
   Le 2026-09-09, les selecteurs qui redefinissaient cette base
   ont ete retires d'ici : c'est ce qui faisait que le journal et
   les metiers ressemblaient a un autre site que l'accueil.
   ========================================================= */
.colonne { width: min(720px, 100% - 3rem); margin-inline: auto; }

/* ---------- Fil d'ariane ---------- */
.ariane {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
  margin-bottom: 1.5rem;
}
.ariane a { color: var(--teal); text-decoration: none; }
.ariane a:hover { text-decoration: underline; }

/* ---------- En tete d'article ---------- */
.tete-article { }
.tete-article h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); max-width: 22ch; }
.meta-article {
  margin-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-family: var(--font-mono); font-size: 0.76rem;
  color: var(--encre-douce);
}
.chapo {
  margin-top: 1.75rem;
  font-size: 1.1rem;
  color: var(--encre-douce);
  padding-left: 1.1rem;
  border-left: 2px solid var(--or);
}

/* ---------- Corps d'article ---------- */
.corps-article { padding-bottom: 4.5rem; }
.corps-article h2 {
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  margin: 3rem 0 1rem;
  font-weight: 600;
}
.corps-article h3 {
  font-size: 1.1rem;
  margin: 2rem 0 0.6rem;
  font-weight: 600;
}
.corps-article p { margin-bottom: 1.15rem; }
.corps-article ul, .corps-article ol { margin: 0 0 1.35rem; padding-left: 1.15rem; }
.corps-article li { margin-bottom: 0.55rem; }
.corps-article a { color: var(--teal); text-underline-offset: 3px; }
.corps-article strong { font-weight: 600; color: var(--encre); }

.encadre {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  background: var(--blanc);
  border: 1px solid var(--ligne-fine);
  border-radius: var(--r);
}
.encadre .cle {
  display: block;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.6rem;
}
.encadre p:last-child { margin-bottom: 0; }

.encadre.sombre {
  background: var(--encre-profonde);
  border-color: transparent;
  color: var(--blanc);
}
.encadre.sombre .cle { color: var(--or); }
.encadre.sombre p { color: var(--teal-200); }
.encadre.sombre a { color: var(--or); }

/* ---------- FAQ ---------- */
.faq { margin-top: 3rem; }
.faq details {
  border-bottom: 1px solid var(--ligne-fine);
  padding: 1.1rem 0;
}
.faq summary {
  cursor: pointer;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--teal);
  font-weight: 400;
  flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0.8rem 0 0; color: var(--encre-douce); }

/* ---------- Sources ---------- */
.sources {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ligne-fine);
  font-size: 0.88rem;
  color: var(--encre-douce);
}
.sources h2 { font-size: 0.95rem; margin: 0 0 0.8rem; font-weight: 600; }
.sources ul { padding-left: 1.1rem; margin: 0; }

/* ---------- Index du journal ---------- */
.tete-index { text-align: center; }
.tete-index h1 { font-size: clamp(2rem, 5vw, 3.05rem); max-width: 18ch; margin-inline: auto; }
.tete-index p {
  margin: 1.6rem auto 0; max-width: 56ch;
  font-size: 1.03rem; color: var(--encre-douce);
}

.liste-articles { padding-bottom: 5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.carte-article {
  display: block;
  text-decoration: none;
  background: var(--blanc);
  border: 1px solid var(--ligne-fine);
  border-radius: var(--r);
  padding: 2rem;
  transition: border-color 0.2s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.carte-article:hover { border-color: var(--teal-400); transform: translateY(-3px); }
.carte-article .kicker {
  font-family: var(--font-mono); font-size: 0.73rem;
  letter-spacing: 0.06em; color: var(--encre-douce);
  display: block; margin-bottom: 0.7rem;
}
.carte-article h2 { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.7rem; }
.carte-article p { color: var(--encre-douce); font-size: 0.96rem; }
.carte-article .suite {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1.1rem; color: var(--teal); font-weight: 500; font-size: 0.92rem;
}

/* ---------- Pied d'article ---------- */
.suite-lecture { background: var(--blanc); border-block: 1px solid var(--ligne-fine); padding: 3.5rem 0; }
.suite-lecture h2 { font-size: 1.3rem; font-weight: 600; margin-bottom: 1.5rem; }
.grille-suite { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

.bloc-cta { padding: 5rem 0; text-align: center; }
.bloc-cta h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); max-width: 22ch; margin-inline: auto; }
.bloc-cta p { margin: 1.2rem auto 0; max-width: 52ch; color: var(--encre-douce); }
@media (max-width: 900px) {
  .tete-article, .tete-index { padding-top: 10rem; }
  .grille-suite { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .conteneur, .colonne { width: min(1160px, 100% - 2rem); }
}

/* ---------- Visuel d'en tete d'article ---------- */
.visuel-article { margin: 2.5rem 0 0; }
.visuel-article img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1200 / 630;
  border-radius: var(--r);
  border: 1px solid var(--ligne-fine);
}

/* ---------- Vignette dans la liste du journal ---------- */
.carte-article.avec-vignette { padding: 0; overflow: hidden; }
.carte-article .vignette {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-bottom: 1px solid var(--ligne-fine);
}
.carte-article.avec-vignette .kicker { display: block; padding: 1.6rem 2rem 0; margin-bottom: 0.6rem; }
.carte-article.avec-vignette h2 { padding: 0 2rem; }
.carte-article.avec-vignette p { padding: 0 2rem; }
.carte-article.avec-vignette .suite { margin: 1.1rem 2rem 1.8rem; }

@media (max-width: 860px) {
  .liste-articles { grid-template-columns: 1fr; }
}
.carte-article.avec-vignette { display: flex; flex-direction: column; }
.carte-article.avec-vignette h2 { font-size: 1.22rem; }

/* Redacteur de l'article (2026-09-18) */
.auteur-article { display: inline-flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0 0.25rem; color: inherit; text-decoration: none; }
.auteur-article img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #E9ECEF; flex: none; }
.auteur-article > span { display: grid; line-height: 1.3; }
.auteur-nom { font-weight: 600; }
.auteur-role { font-size: 0.88rem; opacity: 0.75; }
.auteur-article:hover .auteur-nom { text-decoration: underline; text-underline-offset: 3px; }

/* Categories de navigation et sommaire d'article (2026-09-23) */
.cats { margin: 0 0 2rem; }
.cats ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; }
.cats a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem; border: 1px solid var(--bord); border-radius: 999px; text-decoration: none; color: inherit; font-size: 0.95rem; line-height: 1.2; background: var(--fond-carte); }
.cats a:hover { border-color: var(--accent-fonce); color: var(--accent-fonce); }
.cats a span { font-size: 0.8rem; opacity: 0.6; }
.cats-pied { margin: 3rem 0 0; }
.cats-titre { margin: 0 0 0.75rem; font-weight: 600; }
.puce-cat { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.sommaire { margin: 0 0 2.25rem; padding: 1.25rem 1.5rem; border-left: 3px solid var(--accent); background: rgba(var(--accent-rgb), 0.06); border-radius: 0 12px 12px 0; }
.sommaire-titre { margin: 0 0 0.6rem; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase; }
.sommaire ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.sommaire li { line-height: 1.45; }
.sommaire a { color: inherit; text-decoration: none; }
.sommaire a:hover { text-decoration: underline; text-underline-offset: 3px; }
.corps-article h2[id] { scroll-margin-top: 90px; }
@media (min-width: 900px) { .sommaire ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } }

/* v2026-09-24 : empreinte renouvelee, la version fb7c4e42 a ete servie sans les regles .cats/.sommaire et reste en cache navigateur */