:root {
  --ffs-encre: #1d2433;
  --ffs-texte: #2a303c;
  --ffs-gris: #586174;
  --ffs-bleu: #1f5fcf;
  --ffs-bleu-vif: #4b8ef1;
  --ffs-cyan: #2fc4f4;
  --ffs-fond: #f1f6fe;
  --ffs-trait: #d9e3f2;
  --ffs-nuit: #15213a;
  --ffs-rayon: 20px;
  --ffs-degrade: linear-gradient(110deg, #4b8ef1 0%, #2fc4f4 100%);
}

body.ffs { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; font-size: 18px; line-height: 1.7; color: var(--ffs-texte); background: #fff; }
.ffs img { max-width: 100%; height: auto; }
.ffs a { color: var(--ffs-bleu); }
.ffs h1, .ffs h2, .ffs h3 { font-family: 'Roboto Slab', Georgia, serif; color: var(--ffs-encre); font-weight: 700; }
.ffs-cadre { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .ffs-cadre { padding: 0 18px; } body.ffs { font-size: 17px; } }

.ffs-entete { background: #fff; border-bottom: 1px solid var(--ffs-trait); }
.ffs-entete__ligne { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 104px; flex-wrap: wrap; }
.ffs-logo img { height: 86px; width: auto; display: block; }
.ffs-bascule { position: absolute; opacity: 0; pointer-events: none; }
.ffs-bouton-menu { display: none; }
.ffs-nav__liste { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 0; padding: 0; }
.ffs-nav__lien { display: block; padding: 8px 12px; border-radius: 999px; color: var(--ffs-encre) !important; font-weight: 500; font-size: 16px; text-decoration: none !important; }
.ffs-nav__lien:hover, .ffs-nav__lien:focus { background: var(--ffs-fond); color: var(--ffs-bleu) !important; }
@media (max-width: 991px) {
  .ffs-entete__ligne { min-height: 84px; }
  .ffs-logo img { height: 64px; }
  .ffs-bouton-menu { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; padding: 12px; margin: 0; border-radius: 12px; background: var(--ffs-fond); cursor: pointer; }
  .ffs-bouton-menu span { display: block; height: 3px; border-radius: 2px; background: var(--ffs-encre); }
  .ffs-nav { display: none; flex-basis: 100%; padding: 0 0 16px; }
  .ffs-bascule:checked ~ .ffs-nav { display: block; }
  .ffs-nav__liste { flex-direction: column; gap: 2px; }
  .ffs-nav__lien { padding: 12px 14px; border-radius: 12px; font-size: 18px; }
}

.ffs-fil { background: var(--ffs-fond); font-size: 15px; color: var(--ffs-gris); }
.ffs-fil .ffs-cadre { padding-top: 10px; padding-bottom: 10px; }
.ffs-fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ffs-fil li { list-style: none; }
.ffs-fil a { color: var(--ffs-bleu); text-decoration: none; }
.ffs-fil a:hover { text-decoration: underline; }
.ffs-fil--article li[aria-current="page"], .ffs-fil--article li[aria-hidden="true"]:nth-last-child(2) { display: none; }

.ffs-surtitre { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ffs-bleu); }
.ffs-titre-section { font-size: 30px; margin: 0 0 28px; }
.ffs-titre-section::after { content: ""; display: block; width: 56px; height: 5px; margin-top: 12px; border-radius: 3px; background: var(--ffs-degrade); }

.ffs-une { background: var(--ffs-fond); padding: 56px 0; }
.ffs-une__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ffs-une__titre { font-size: 44px; line-height: 1.18; margin: 0 0 18px; }
.ffs-une__accroche { font-size: 20px; color: var(--ffs-gris); margin: 0; }
.ffs-une__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; box-shadow: 0 18px 40px rgba(29, 54, 110, .18); display: block; }
.ffs-une__image:not(:has(img)) { display: none; }
@media (max-width: 991px) { .ffs-une { padding: 32px 0; } .ffs-une__grille { grid-template-columns: 1fr; gap: 24px; } .ffs-une__titre { font-size: 32px; } }
.ffs-presentation { padding: 56px 0 24px; }
.ffs-texte--accueil { max-width: 820px; }
.ffs-derniers, .ffs-lies { padding: 48px 0 64px; }
.ffs-lies { background: var(--ffs-fond); }

.ffs-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 28px; }
@media (max-width: 400px) { .ffs-grille { grid-template-columns: minmax(0, 1fr); } }
.ffs-grille--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ffs-grille--trois { grid-template-columns: 1fr; } }
.ffs-carte { height: 100%; }
.ffs-carte__lien { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--ffs-trait); border-radius: var(--ffs-rayon); overflow: hidden; text-decoration: none !important; color: inherit !important; box-shadow: 0 6px 18px rgba(29, 54, 110, .07); transition: box-shadow .2s, transform .2s; }
.ffs-carte__lien:hover { box-shadow: 0 12px 28px rgba(29, 54, 110, .14); transform: translateY(-2px); }
.ffs-carte__visuel { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ffs-fond); }
.ffs-carte__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ffs-carte__visuel:not(:has(img)) { position: relative; background: #f4f7fc url("/img/pas-a-pas-apres-55-ans-logo-2026-11.webp") 50% 52% / 58% auto no-repeat; }
.ffs-carte__visuel:not(:has(img))::before { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, transparent 0 56%, rgba(96, 104, 117, .09) 56% 100%); }
.ffs-carte__visuel:not(:has(img))::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, transparent 0 56%, #8b929c 56% 100%); mix-blend-mode: saturation; }
.ffs-carte__corps { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.ffs-carte__rubrique { font-size: 14px; font-weight: 600; color: var(--ffs-bleu); margin-bottom: 6px; }
.ffs-carte__titre { font-size: 20px; line-height: 1.32; margin: 0 0 8px; }
.ffs-carte__date { font-size: 14px; color: var(--ffs-gris); margin: 0 0 8px; }
.ffs-carte__extrait { font-size: 16px; line-height: 1.6; color: var(--ffs-texte); margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ffs-carte__suite { margin-top: auto; font-weight: 700; font-size: 16px; color: var(--ffs-bleu); }
.ffs-carte__suite::after { content: " \2192"; }
.ffs-rubrique-liste .ffs-carte__rubrique { display: none; }

.ffs-rubrique-tete { background: var(--ffs-fond); padding: 36px 0 30px; }
.ffs-rubrique-tete__titre { font-size: 40px; margin: 0; }
.ffs-rubrique-intro { padding: 32px 0 8px; }
.ffs-rubrique-intro__texte { column-count: 2; column-gap: 48px; font-size: 17px; }
.ffs-rubrique-intro__texte p { margin: 0 0 1em; break-inside: avoid-column; }
.ffs-rubrique-intro:not(:has(p)) { display: none; }
@media (max-width: 900px) { .ffs-rubrique-intro__texte { column-count: 1; } .ffs-rubrique-tete__titre { font-size: 30px; } }
.ffs-rubrique-liste { padding: 24px 0 64px; }
.ffs-pagination { margin-top: 32px; text-align: center; }
.ffs-pagination:not(:has(a)) { display: none; }
.ffs-pagination .page { display: inline-block; min-width: 42px; padding: 8px 12px; margin: 0 3px; border-radius: 10px; border: 1px solid var(--ffs-trait); }
.ffs-pagination .active { background: var(--ffs-bleu); color: #fff; }

.ffs-article-tete { background: var(--ffs-fond); padding: 34px 0 30px; }
.ffs-article-tete__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.ffs-article-tete__grille:not(:has(.ffs-article-tete__image img)) { grid-template-columns: minmax(0, 1fr); }
.ffs-article-tete__titre { font-size: 38px; line-height: 1.22; margin: 0 0 16px; max-width: 30ch; }
.ffs-article-tete__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 16px; color: var(--ffs-gris); }
.ffs-article-tete__qui { color: var(--ffs-encre); font-weight: 500; }
.ffs-article-tete__meta > span + span::before { content: "\00B7"; margin-right: 12px; color: #9aa6ba; font-weight: 400; }
@media (max-width: 600px) { .ffs-article-tete__meta { gap: 2px 14px; } .ffs-article-tete__meta > span + span::before { content: none; } }
.ffs-article-tete__image { margin: 0; }
.ffs-article-tete__image:not(:has(img)) { display: none; }
.ffs-article-tete__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; display: block; }
@media (max-width: 991px) { .ffs-article-tete { padding: 22px 0 20px; } .ffs-article-tete__grille { grid-template-columns: 1fr; gap: 18px; } .ffs-article-tete__titre { font-size: 28px; } }

.ffs-article { display: grid; grid-template-columns: 250px minmax(0, 740px); gap: 56px; justify-content: center; padding-top: 28px; padding-bottom: 56px; }
.ffs-article:not(:has(.ffs-sommaire a)) { grid-template-columns: minmax(0, 760px); }
.ffs-article:not(:has(.ffs-sommaire a)) .ffs-sommaire { display: none; }
.ffs-sommaire details { position: sticky; top: 20px; border: 1px solid var(--ffs-trait); border-radius: 16px; padding: 4px 18px 10px; background: #fff; }
.ffs-sommaire summary { cursor: pointer; list-style: none; padding: 10px 0 6px; font-family: 'Roboto Slab', Georgia, serif; font-weight: 700; color: var(--ffs-encre); }
.ffs-sommaire summary::-webkit-details-marker { display: none; }
.ffs-sommaire ol, .ffs-sommaire ul { list-style: none; margin: 0; padding: 0; }
.ffs-sommaire li { margin: 0; padding: 6px 0; border-top: 1px solid var(--ffs-trait); font-size: 15px; line-height: 1.45; }
.ffs-sommaire li li { border: 0; padding: 3px 0 3px 12px; }
.ffs-sommaire a { color: var(--ffs-texte); text-decoration: none; }
.ffs-sommaire a:hover { color: var(--ffs-bleu); }
@media (max-width: 991px) {
  .ffs-article { grid-template-columns: minmax(0, 1fr) !important; gap: 0; padding-top: 16px; }
  .ffs-sommaire { position: sticky; top: 0; z-index: 20; margin: 0 -18px 18px; }
  .ffs-sommaire details { position: static; border-radius: 0; border-width: 0 0 1px; box-shadow: 0 6px 14px rgba(29, 54, 110, .08); padding: 0 18px; }
  .ffs-sommaire summary { padding: 12px 0; }
  .ffs-sommaire summary::after { content: "Afficher"; float: right; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 14px; color: var(--ffs-bleu); }
  .ffs-sommaire details[open] summary::after { content: "Masquer"; }
  .ffs-sommaire details[open] { max-height: 60vh; overflow: auto; padding-bottom: 10px; }
}

.ffs-texte { font-size: 18px; line-height: 1.75; color: var(--ffs-texte); }
.ffs-texte > :first-child { margin-top: 0; }
.ffs-texte > p:first-child { font-size: 1.12em; font-weight: 500; color: var(--ffs-encre); }
.ffs-texte p { margin: 0 0 1.05em; }
.ffs-texte h2 { font-size: 1.55em; line-height: 1.3; margin: 1.9em 0 .6em; }
.ffs-texte h2::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .45em; border-radius: 4px; background: var(--ffs-degrade); vertical-align: .08em; }
.ffs-texte h3 { font-size: 1.2em; line-height: 1.35; color: var(--ffs-bleu); margin: 1.5em 0 .5em; }
.ffs-texte ul, .ffs-texte ol { margin: .6em 0 1.1em; padding-left: 1.5em; }
.ffs-texte li { margin-bottom: .4em; }
.ffs-texte li::marker { color: var(--ffs-bleu-vif); }
.ffs-texte a { color: var(--ffs-bleu); text-decoration: underline !important; text-underline-offset: 2px; }
.ffs-texte strong { color: var(--ffs-encre); }
.ffs-texte img { border-radius: 16px; margin: 1.2em 0; display: block; }
.ffs-texte blockquote { margin: 1.4em 0; padding: 18px 22px; border-radius: 16px; background: var(--ffs-fond); color: var(--ffs-encre); }
.ffs-texte table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 16px; line-height: 1.5; table-layout: auto; border: 0; }
.ffs-texte th, .ffs-texte td { padding: 10px 14px; border-bottom: 1px solid var(--ffs-trait); text-align: left; vertical-align: top; letter-spacing: normal; }
.ffs-texte thead th, .ffs-texte tr:first-child th { background: var(--ffs-nuit); color: #fff; }
.ffs-texte tbody tr:nth-child(odd), .ffs-texte tbody tr:nth-child(even) { background: transparent; }
.ffs-texte tbody tr:nth-child(even) { background: var(--ffs-fond); }
@media (max-width: 767px) { .ffs-texte table { display: block; overflow-x: auto; } .ffs-texte th, .ffs-texte td { min-width: 8.5em; } }

.ffs-auteur { display: flex; gap: 22px; align-items: flex-start; margin-top: 44px; padding: 24px; background: #fff; border: 1px solid var(--ffs-trait); border-radius: var(--ffs-rayon); box-shadow: 0 8px 22px rgba(29, 54, 110, .08); }
.ffs-auteur__photo { flex: 0 0 96px; }
.ffs-auteur__photo img { width: 96px; height: 96px; object-fit: cover; border-radius: 22px; display: block; }
.ffs-auteur__label { margin: 0 0 2px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ffs-bleu); }
.ffs-auteur__nom { margin: 0 0 6px; font-family: 'Roboto Slab', Georgia, serif; font-size: 21px; font-weight: 700; color: var(--ffs-encre); }
.ffs-auteur__bio, .ffs-auteur__bio p { margin: 0; font-size: 16px; line-height: 1.6; }
@media (max-width: 520px) { .ffs-auteur { flex-direction: column; gap: 14px; padding: 20px; } .ffs-auteur__photo { flex-basis: auto; } .ffs-auteur__photo img { width: 80px; height: 80px; } }

.ffs-page-tete { background: var(--ffs-fond); padding: 34px 0 28px; }
.ffs-page-tete__titre { font-size: 38px; margin: 0; }
.ffs-page { padding: 36px 0 64px; }
.ffs-page__cadre { max-width: 860px; }
.ffs-portrait { float: left; width: 180px; margin: 4px 30px 16px 0; }
.ffs-portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 26px; margin: 0; }
.ffs-texte--auteur h2 { clear: both; }
@media (max-width: 600px) { .ffs-portrait { float: none; width: 140px; margin: 0 0 18px; } .ffs-page-tete__titre { font-size: 30px; } }
.ffs-editeur img { width: auto; max-width: min(100%, 560px); border-radius: 0; margin: 0 0 1.4em; }

.ffs-contact { clear: both; margin-top: 40px; padding: 28px; border-radius: var(--ffs-rayon); background: var(--ffs-fond); }
.ffs-contact__titre { font-size: 24px; margin: 0 0 6px; }
.ffs-contact__aide { margin: 0 0 18px; color: var(--ffs-gris); font-size: 16px; }
.ffs-contact__champ { display: block; width: 100%; padding: 12px 14px; margin-bottom: 12px; border: 1px solid #c4d1e6; border-radius: 12px; font: inherit; font-size: 17px; background: #fff; color: var(--ffs-texte); }
.ffs-contact__champ:focus { outline: 3px solid rgba(75, 142, 241, .35); border-color: var(--ffs-bleu-vif); }
.ffs-contact__bouton { display: inline-block; padding: 12px 26px; border: 0; border-radius: 999px; background: var(--ffs-bleu); color: #fff; font-weight: 700; font-size: 17px; cursor: pointer; }
.ffs-contact__bouton:hover { background: var(--ffs-nuit); }

.ffs-pied { background: var(--ffs-nuit); color: #dfe7f5; padding: 34px 0; font-size: 15px; }
.ffs-pied__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; }
.ffs-pied p { margin: 0; }
.ffs-pied__nom { font-family: 'Roboto Slab', Georgia, serif; font-weight: 700; color: #fff; }
.ffs-pied a { color: #fff !important; text-decoration: underline !important; }

.ffs-profil-tete__cadre { display: flex; align-items: center; gap: 28px; }
.ffs-profil-tete__photo { flex: 0 0 150px; }
.ffs-profil-tete__img, .ffs-profil-tete__photo img { width: 150px; height: 150px; object-fit: cover; border-radius: 30px; display: block; box-shadow: 0 10px 26px rgba(29, 54, 110, .14); }
.ffs-profil-tete__sur { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ffs-bleu); }
.ffs-profil p { margin: 0 0 1.1em; }
.ffs-profil > p:first-child { font-size: 20px; color: var(--ffs-encre); }
.ffs-profil__suite { margin: 28px 0 0; padding: 18px 22px; background: var(--ffs-fond); border-radius: var(--ffs-rayon); font-weight: 500; }
.ffs-auteur__bio p:not(:first-child) { display: none; }
.ffs-auteur__suite { margin: 10px 0 0; font-size: 15px; font-weight: 600; }
.ffs-article-tete__auteur { color: inherit !important; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .ffs-profil-tete__cadre { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ffs-profil-tete__photo { flex-basis: auto; }
  .ffs-profil-tete__img, .ffs-profil-tete__photo img { width: 110px; height: 110px; border-radius: 24px; }
  .ffs-profil > p:first-child { font-size: 18px; }
}

@media (min-width: 992px) {
  .ffs-entete__ligne { flex-wrap: nowrap; }
  .ffs-logo img { height: 58px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .ffs-logo img { height: 48px; }
  .ffs-nav__lien { padding: 8px 9px; font-size: 15px; }
}
