/* Fédération Française du Senior Connecté : mise en page (novembre 2026). Lecture confortable pour des seniors : texte de 18 px,
   contrastes forts, bleus du logo. */
: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; } }

/* En-tête */
.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; }
}

/* Fil d'Ariane */
.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; }

/* Surtitre et titres de section */
.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); }

/* Accueil */
.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); }

/* Grille de cartes */
.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; }
/* Article sans image : visuel de remplacement au motif du logo (un réseau de points reliés) */
.ffs-carte__visuel:not(:has(img)) {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%234b8ef1'/%3E%3Cstop offset='1' stop-color='%232fc4f4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='160' height='100' fill='url(%23g)'/%3E%3Cg stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.6' fill='none'%3E%3Cpath d='M52 38 L80 28 L108 40 L100 68 L66 70 Z M52 38 L80 50 L108 40 M80 28 L80 50 L66 70 M80 50 L100 68'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='52' cy='38' r='6'/%3E%3Ccircle cx='80' cy='28' r='5'/%3E%3Ccircle cx='108' cy='40' r='7'/%3E%3Ccircle cx='100' cy='68' r='6'/%3E%3Ccircle cx='66' cy='70' r='6'/%3E%3Ccircle cx='80' cy='50' r='4.5'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}
.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; }

/* Rubrique */
.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; }

/* Article : en-tête, titre à gauche, image à droite */
.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__meta span:first-child { color: var(--ffs-encre); font-weight: 500; }
.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; } }

/* Article : sommaire à gauche, texte à droite */
.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; }
}

/* Texte des articles et des pages */
.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; } }

/* Encadré auteur : carte blanche, photo carrée arrondie */
.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; } }

/* Pages fixes */
.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; }

/* Formulaire de contact */
.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); }

/* Pied de page */
.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; }

/* Page d'auteur (06/11/2026) : gabarit author.html, bio longue ; l'encadré des articles n'en montre que le premier paragraphe. */
.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; }
}

/* Logo « Pas à pas après 55 ans » (06/11/2026) : plus large que l'ancien logo vertical, le menu passait sous lui en ordinateur. */
@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; }
}