/* Fiche d'actualité (voir fiche-article.js), maquette validée par le
   propriétaire en novembre 2026. Couleurs : variables de l'article
   (--accent, --accent-fonce, --accent-pale, --encre, --texte, --doux…). */

/* Mode fiche : seule la fiche est visible ; mode complet : l'article. */
body.fx-fiche .fx-zone > :not(.fx) { display: none !important; }
body:not(.fx-fiche) .fx { display: none; }
body.fx-fiche .fx-retour { display: none; }

/* Ancien gabarit (.ap-main .ap-card, page sombre) : en mode fiche, la page passe au fond clair
   de la fiche et les éléments de l'article complet sont masqués. */
body.fx-ancien.fx-fiche { background: #f3f4f6 !important; }
body.fx-ancien.fx-fiche .bg-orb, body.fx-ancien.fx-fiche .ap-band, body.fx-ancien.fx-fiche .ap-back-bar,
body.fx-ancien.fx-fiche .ap-footer, body.fx-ancien.fx-fiche .ap-card > :not(.fx-zone):not(.fx) { display: none !important; }
body.fx-ancien.fx-fiche .ap-main { max-width: 1216px; padding: 40px 32px 88px; }
body.fx-ancien.fx-fiche .ap-card { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
body.fx-ancien .fx-retour { margin: 20px 0 0 40px; }

.fx { max-width: 1120px; margin: 0 auto; font-family: 'Figtree', system-ui, sans-serif; text-align: left; }
.fx-carte { background: var(--carte, #fff); border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 30px rgba(0,0,0,.05); overflow: hidden; }
.fx-lab { margin-bottom: 16px; font: 700 .75rem/1.2 'Figtree', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-fonce); }

/* En-tête */
.fx-tete { padding: 34px 44px 30px; border-bottom: 1px solid var(--filet); }
.fx-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.fx-tag { padding: 6px 10px; border-radius: 6px; background: var(--accent-pale); color: var(--accent-fonce); font: 700 .74rem/1 'Figtree', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.fx-tag.t0 { background: var(--accent); color: #fff; }
.fx-meta { font-size: .86rem; color: var(--doux); }
.fx-tag + .fx-meta { margin-left: 6px; }
.fx-titre { max-width: 980px; font-family: 'Fraunces', Georgia, serif; font-size: 2.5rem; line-height: 1.12; font-weight: 600; letter-spacing: -.01em; color: var(--encre); }

/* Deux colonnes : l'essentiel et l'analyse à gauche ; photo, chiffres et liens à droite */
.fx-haut { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fx-gauche { padding: 30px 40px 34px 44px; display: flex; flex-direction: column; gap: 30px; border-right: 1px solid var(--filet); }
.fx-ess ol { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.fx-ess li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.fx-rond { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 .8rem/26px 'Figtree', system-ui, sans-serif; text-align: center; }
.fx-ess p { font-size: 1.03rem; line-height: 1.6; color: var(--texte); }
.fx-ess .fx-ess-p { font-size: 1.08rem; line-height: 1.65; }
.fx-analyse { padding-top: 26px; border-top: 1px solid var(--filet); }
.fx-analyse .fx-lab { margin-bottom: 10px; }
.fx-analyse-t { margin-bottom: 12px; font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; line-height: 1.2; font-weight: 600; color: var(--encre); }
.fx-analyse-p { font-size: 1.03rem; line-height: 1.65; color: var(--texte); }
.fx-analyse-p + .fx-analyse-p { margin-top: 12px; }

.fx-droite { padding: 30px 36px 34px; display: flex; flex-direction: column; gap: 18px; background: #fafbfc; }
.fx-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; display: block; }
.fx-photo[style*="height"] { aspect-ratio: auto; }
.fx-chiffres { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; }
.fx-chiffre, .fx-chiffre-txt { padding: 11px 0; border-bottom: 1px solid var(--filet); }
.fx-chiffre { font: 700 1.7rem/1.05 'Fraunces', Georgia, serif; color: var(--encre); white-space: nowrap; }
.fx-chiffre.rouge { color: var(--accent); }
.fx-chiffre-txt { align-self: stretch; display: flex; align-items: center; font-size: .88rem; line-height: 1.45; color: var(--doux); }
/* Colonne de droite trop haute (voir equilibrer) : chiffres sur deux colonnes */
.fx-droite.serre .fx-chiffres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 18px; }
.fx-droite.serre .fx-chiffre { padding: 10px 0 2px; border-bottom: 0; }
.fx-droite.serre .fx-chiffre-txt { padding: 0 0 10px; align-items: flex-start; }
/* Colonne de gauche trop courte : les chiffres descendent sous l'analyse, sur deux colonnes */
.fx-gauche.avec-chiffres .fx-chiffres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 28px; padding-top: 18px; border-top: 1px solid var(--filet); }
.fx-gauche.avec-chiffres .fx-chiffre { padding: 10px 0 2px; border-bottom: 0; }
.fx-gauche.avec-chiffres .fx-chiffre-txt { padding: 0 0 10px; align-items: flex-start; }
/* Le bloc des liens prend toute la hauteur restante : pas de vide sous les chiffres. */
.fx-plus { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 20px; border-radius: 14px; background: var(--accent-pale); }
.fx-ouvrir { display: flex; align-items: center; justify-content: center; padding: 15px 20px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 1rem/1.2 'Figtree', system-ui, sans-serif; text-align: center; text-decoration: none; transition: background .15s; }
.fx-ouvrir:hover { background: var(--accent-fonce); color: #fff; }
.fx-video { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #fff; color: var(--encre); text-decoration: none; }
.fx-video:hover .fx-video-titre { text-decoration: underline; }
.fx-lecture { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.fx-video-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-video-lab { font: 700 .72rem/1.3 'Figtree', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-fonce); }
.fx-video-titre { font-size: .92rem; line-height: 1.35; font-weight: 600; }
.fx-vignette { display: none; position: relative; aspect-ratio: 16 / 9; background: #0b0b0c; overflow: hidden; }
.fx-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-vignette-lecture { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.fx-video.avec-vignette { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 0 14px; overflow: hidden; align-items: start; }
.fx-video.avec-vignette .fx-vignette { display: block; }
.fx-video.avec-vignette .fx-lecture { display: none; }
.fx-video.avec-vignette .fx-video-txt { padding: 0 14px; }
.fx-plus:has(.fx-video.avec-vignette) { padding-top: 14px; padding-bottom: 14px; gap: 10px; }

/* Chronologie : 4 dates, la plus récente à gauche */
.fx-dates { padding: 26px 44px 30px; border-top: 1px solid var(--filet); }
.fx-dates ol { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fx-dates li { padding-top: 12px; border-top: 4px solid var(--bord); }
.fx-dates li:first-child { border-top-color: var(--accent); }
.fx-date { display: block; font: 700 1.05rem/1.25 'Fraunces', Georgia, serif; color: var(--encre); }
.fx-dates li:first-child .fx-date { color: var(--accent); }
.fx-dates p { margin-top: 6px; font-size: .88rem; line-height: 1.45; color: var(--doux); }

/* Dans une copie : accroche en entier, puis idée-force, sujets, piège */
.fx-copie { padding: 26px 44px 32px; background: var(--accent-pale); }
.fx-copie .fx-lab { margin-bottom: 14px; }
.fx-c { padding: 18px 20px; border-radius: 12px; background: #fff; }
.fx-c h4 { margin-bottom: 8px; font: 700 .8rem/1.3 'Figtree', system-ui, sans-serif; color: var(--accent-fonce); }
.fx-c p, .fx-c li { font-size: .9rem; line-height: 1.55; color: var(--texte); }
.fx-c ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fx-accroche { margin-bottom: 14px; padding: 20px 24px; }
.fx-accroche p, .fx-idee p { font-family: 'Fraunces', Georgia, serif; color: var(--encre); }
.fx-accroche p { font-size: 1.12rem; line-height: 1.55; }
.fx-idee p { font-size: 1.05rem; line-height: 1.5; }
.fx-piege h4 { color: #b0262a; }
.fx-copie-g { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }

/* Fin de fiche */
.fx-fin { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 22px 0 0; }
.fx-tous { font: 600 .9rem/1.2 'Figtree', system-ui, sans-serif; color: var(--encre); text-decoration: none; }
.fx-tous:hover { color: var(--accent); }
.fx-cours { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--bord); background: var(--carte, #fff); color: var(--encre); font: 600 .9rem/1.3 'Figtree', system-ui, sans-serif; text-decoration: none; }
.fx-cours:hover { border-color: var(--accent); color: var(--accent-fonce); }

/* Retour à la fiche, en tête de l'article complet */
.fx-retour { display: inline-flex; margin: 0 0 20px; padding: 9px 16px; border: 1px solid var(--bord); border-radius: 999px; background: var(--carte, #fff); color: var(--encre); font: 600 .9rem/1.2 'Figtree', system-ui, sans-serif; cursor: pointer; }
.fx-retour:hover { border-color: var(--accent); color: var(--accent-fonce); }

@media (max-width: 1000px) {
  .fx-copie-g { grid-template-columns: 1fr; }
  .fx-dates ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Téléphone : une colonne, dans l'ordre photo, essentiel, chiffres, analyse, liens */
@media (max-width: 760px) {
  body.fx-ancien.fx-fiche .ap-main { padding: 24px 16px 64px; }
  body.fx-ancien .fx-retour { margin: 16px 0 0 20px; }
  .fx-carte { border-radius: 14px; }
  .fx-tete { padding: 20px 18px 18px; }
  .fx-titre { font-size: 1.65rem; line-height: 1.15; }
  .fx-haut { display: flex; flex-direction: column; }
  .fx-gauche, .fx-droite { display: contents; }
  .fx-photo { order: 1; border-radius: 0; aspect-ratio: 16 / 10; }
  .fx-ess { order: 2; padding: 22px 18px 6px; }
  .fx-ess p { font-size: .98rem; }
  .fx-chiffres { order: 3; margin: 16px 18px 0; padding: 4px 16px; border-radius: 14px; background: #f6f7f9; }
  .fx-chiffres .fx-chiffre:nth-last-child(2), .fx-chiffres .fx-chiffre-txt:last-child { border-bottom: 0; }
  .fx-chiffre { font-size: 1.45rem; }
  .fx-analyse { order: 4; margin: 22px 18px 0; }
  .fx-analyse-t { font-size: 1.3rem; }
  .fx-analyse-p { font-size: .98rem; }
  .fx-plus { order: 5; flex: none; margin: 22px 18px 24px; padding: 16px; }
  .fx-dates, .fx-copie { padding: 22px 18px 24px; }
  .fx-dates ol { grid-template-columns: 1fr; gap: 14px; }
  .fx-accroche { padding: 16px 18px; }
  .fx-fin { flex-direction: column; align-items: stretch; text-align: center; }
  .fx-cours { justify-content: center; }
}
@media print {
  body.fx-fiche .fx-zone > :not(.fx) { display: revert !important; }
  .fx, .fx-retour { display: none !important; }
}

/* Repères de l'ancien gabarit (ap-facts), affichés dans la colonne de droite quand il y a la place */
.fx-reperes.cache { display: none; }
.fx-reperes .fx-lab { margin-bottom: 8px; }
.fx-reperes dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; }
.fx-reperes dt, .fx-reperes dd { padding: 8px 0; border-bottom: 1px solid var(--filet); font-size: .86rem; line-height: 1.4; }
.fx-reperes dt { color: var(--doux); }
.fx-reperes dd { margin: 0; font-weight: 600; color: var(--encre); }
@media (max-width: 760px) { .fx-reperes { display: none !important; } }