/* Énergie Senior Active (energyseniors.com), thème du 06/11/2026.
   Parti pris : un magazine pratique et chaleureux pour les 50 ans et plus qui travaillent ou entreprennent. Couleurs du logo
   (bleu ardoise, soleil levant orangé), fond crème, grande lisibilité (Lexend en 17 px, conçue pour la lisibilité), titres en
   Bricolage Grotesque. Image d'accueil en arche, intertitres marqués d'un petit soleil, cartes sans image illustrées
   d'un lever de soleil dessiné pour le site. */

:root {
  --esa-encre: #1e3347;
  --esa-texte: #2a3540;
  --esa-doux: #56626d;
  --esa-lien: #a3431a;
  --esa-lien-survol: #7d3212;
  --esa-soleil: #f5a524;
  --esa-braise: #e2622b;
  --esa-creme: #fff6ea;
  --esa-sable: #f8e8d2;
  --esa-trait: #ead9c2;
  --esa-blanc: #ffffff;
  --esa-titres: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --esa-corps: "Lexend", Verdana, sans-serif;
  --esa-marge: clamp(18px, 4vw, 36px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--esa-blanc);
  color: var(--esa-texte);
  font-family: var(--esa-corps);
  font-size: 17px;
  line-height: 1.72;
  font-weight: 400;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--esa-lien); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--esa-lien-survol); text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--esa-titres); color: var(--esa-encre); line-height: 1.2; font-weight: 700; }

.esa-cadre { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: var(--esa-marge); padding-right: var(--esa-marge); }

/* En-tête */
.esa-entete { background: var(--esa-blanc); border-bottom: 1px solid var(--esa-trait); position: relative; z-index: 20; }
.esa-entete__ligne { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 86px; }
.esa-logo { display: block; flex: 0 0 auto; }
.esa-logo img { height: 58px; width: auto; }
.esa-menu__bascule { position: absolute; opacity: 0; pointer-events: none; }
.esa-menu__bouton { display: none; }
.esa-nav__liste { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.esa-nav__lien {
  display: block; padding: 10px 12px; border-radius: 999px;
  font-family: var(--esa-titres); font-weight: 600; font-size: 16.5px; color: var(--esa-encre);
  text-decoration: none; white-space: nowrap;
}
.esa-nav__lien:hover, .esa-nav__lien:focus-visible { background: var(--esa-creme); color: var(--esa-encre); text-decoration: none; box-shadow: inset 0 -3px 0 var(--esa-soleil); }

@media (max-width: 1023px) {
  .esa-entete__ligne { min-height: 72px; flex-wrap: wrap; gap: 0; }
  .esa-logo img { height: 46px; }
  .esa-menu__bouton {
    display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--esa-trait); border-radius: 999px;
    font-family: var(--esa-titres); font-weight: 600; font-size: 16px; color: var(--esa-encre); cursor: pointer; background: var(--esa-creme);
  }
  .esa-menu__traits { display: inline-grid; gap: 4px; }
  .esa-menu__traits span { display: block; width: 18px; height: 2px; background: var(--esa-encre); border-radius: 2px; }
  .esa-nav { display: none; width: 100%; padding: 4px 0 16px; }
  .esa-menu__bascule:checked ~ .esa-nav { display: block; }
  .esa-nav__liste { flex-direction: column; align-items: stretch; gap: 2px; }
  .esa-nav__lien { border-radius: 10px; padding: 12px 14px; white-space: normal; }
}

/* Fil d'Ariane */
.esa-fil { background: var(--esa-creme); border-bottom: 1px solid var(--esa-trait); font-size: 15.5px; }
.esa-fil nav { padding: 10px 0; }
.esa-fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; color: var(--esa-doux); }
.esa-fil li { margin: 0; }
.esa-fil a { color: var(--esa-lien); }
.esa-fil--article li[aria-current="page"], .esa-fil--article li:has(+ li[aria-current="page"]) { display: none; }
/* Rubrique mère « Publications » : les 5 rubriques y sont rattachées (détachement impossible par l'API au 06/11/2026). Son cran est
   masqué pour que le fil affiché dise « Accueil › Rubrique », comme les données structurées. */
.esa-fil li:has(> a[href$="/publications.html"]), .esa-fil li:has(> a[href$="/publications.html"]) + li[aria-hidden="true"] { display: none; }

/* Boutons et surtitres */
.esa-surtitre {
  display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: var(--esa-sable);
  font-family: var(--esa-titres); font-weight: 600; font-size: 14px; letter-spacing: .02em; color: var(--esa-encre);
}

/* Accueil : bandeau */
.esa-une { background: linear-gradient(180deg, var(--esa-creme) 0%, var(--esa-blanc) 100%); padding: 48px 0 40px; overflow: hidden; }
.esa-une__grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.esa-une__titre { font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; margin: 0 0 18px; letter-spacing: -.01em; }
.esa-une__accroche { font-size: 21px; color: var(--esa-doux); margin: 0; }
.esa-une__image { position: relative; margin: 0; }
.esa-une__image::before {
  content: ""; position: absolute; width: 62%; aspect-ratio: 1; right: -8%; top: -10%; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--esa-soleil) 0%, var(--esa-braise) 70%); opacity: .9; z-index: 0;
}
.esa-une__image img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: 48% 48% 22px 22px / 34% 34% 22px 22px; }
@media (max-width: 860px) {
  .esa-une { padding: 28px 0 24px; }
  .esa-une__grille { grid-template-columns: 1fr; gap: 24px; }
  .esa-une__image { max-width: 420px; }
  .esa-une__image img { aspect-ratio: 4 / 3; }
}

/* Accueil : rubriques */
.esa-themes { padding: 40px 0 8px; }
.esa-titre-section { font-size: clamp(26px, 3vw, 34px); margin: 0 0 22px; display: flex; align-items: center; gap: 12px; }
.esa-titre-section::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, var(--esa-soleil) 0 55%, transparent 56%), radial-gradient(circle, var(--esa-braise) 0 100%); flex: 0 0 auto; }
.esa-themes__liste { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
.esa-theme {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 18px 20px; border-radius: 18px; background: var(--esa-creme);
  border: 1px solid var(--esa-trait); text-decoration: none; color: var(--esa-texte);
}
.esa-theme:hover { border-color: var(--esa-soleil); color: var(--esa-texte); text-decoration: none; box-shadow: 0 6px 18px rgba(30, 51, 71, .08); }
.esa-theme__nom { font-family: var(--esa-titres); font-weight: 700; font-size: 19px; color: var(--esa-encre); line-height: 1.25; }
.esa-theme__desc { font-size: 15.5px; color: var(--esa-doux); line-height: 1.45; }
@media (max-width: 1023px) { .esa-themes__liste { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .esa-themes__liste { grid-template-columns: 1fr; } }

/* Grilles et cartes */
.esa-derniers, .esa-lies, .esa-rubrique-liste { padding: 36px 0 48px; }
.esa-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 1023px) { .esa-grille { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 600px) { .esa-grille { grid-template-columns: 1fr; } }
.esa-carte { height: 100%; }
.esa-carte__lien {
  display: flex; flex-direction: column; height: 100%; border-radius: 18px; overflow: hidden; background: var(--esa-blanc);
  border: 1px solid var(--esa-trait); text-decoration: none; color: var(--esa-texte); transition: box-shadow .2s, transform .2s;
}
.esa-carte__lien:hover { color: var(--esa-texte); text-decoration: none; box-shadow: 0 10px 24px rgba(30, 51, 71, .1); transform: translateY(-2px); }
.esa-carte__visuel { aspect-ratio: 16 / 10; background: var(--esa-sable); overflow: hidden; }
.esa-carte__visuel img { width: 100%; height: 100%; object-fit: cover; }
.esa-carte__visuel:not(:has(img)) {
  background: #fff1dc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cdefs%3E%3CradialGradient id='s' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23f8b838'/%3E%3Cstop offset='1' stop-color='%23e2622b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='320' height='200' fill='%23fff1dc'/%3E%3Ccircle cx='160' cy='138' r='58' fill='url(%23s)'/%3E%3Crect y='136' width='320' height='64' fill='%23fff1dc'/%3E%3Cpath d='M0 136h320' stroke='%231e3347' stroke-width='3'/%3E%3Cpath d='M40 156h240M80 172h160M120 186h80' stroke='%231e3347' stroke-width='3' stroke-linecap='round' opacity='.35'/%3E%3Cg stroke='%23f5a524' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M160 52v-22M110 68l-14-16M210 68l14-16M84 104l-20-8M236 104l20-8'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}
.esa-carte:nth-child(even) .esa-carte__visuel:not(:has(img)) {
  background: #eef2f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Crect width='320' height='200' fill='%23eef2f6'/%3E%3Ccircle cx='236' cy='70' r='34' fill='%23f5a524'/%3E%3Cpath d='M0 150 C70 110 120 120 170 140 S270 160 320 120 V200 H0Z' fill='%231e3347' opacity='.85'/%3E%3Cpath d='M0 172 C80 150 150 168 210 176 S290 172 320 160 V200 H0Z' fill='%23e2622b' opacity='.8'/%3E%3C/svg%3E") center / cover no-repeat;
}
.esa-carte__corps { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; flex: 1; }
.esa-carte__rubrique { font-family: var(--esa-titres); font-weight: 600; font-size: 14px; color: var(--esa-lien); }
.esa-carte__titre { font-size: 21px; margin: 0; line-height: 1.28; }
.esa-carte__date { font-size: 14.5px; color: var(--esa-doux); margin: 0; }
.esa-carte__extrait { font-size: 16px; color: var(--esa-doux); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.esa-rubrique-liste .esa-carte__rubrique { display: none; }
.esa-lies:not(:has(.esa-carte)) { display: none; }

/* Accueil : texte */
.esa-accueil-texte { background: var(--esa-creme); padding: 48px 0 56px; border-top: 1px solid var(--esa-trait); }

/* Texte courant (articles, pages, accueil) */
.esa-texte { max-width: 760px; margin: 0 auto; }
.esa-texte > :first-child { margin-top: 0; }
.esa-texte p { margin: 0 0 1em; }
.esa-texte h2 {
  font-size: 1.55em; margin: 1.9em 0 .6em; padding-left: 34px; position: relative;
}
.esa-texte h2::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, var(--esa-soleil) 0 52%, transparent 53%), radial-gradient(circle, rgba(226, 98, 43, .28) 0 100%);
}
.esa-texte h3 { font-size: 1.25em; margin: 1.6em 0 .5em; }
.esa-texte ul, .esa-texte ol { padding-left: 1.5em; margin: 0 0 1.1em; }
.esa-texte li { margin: 0 0 .35em; }
.esa-texte li::marker { color: var(--esa-braise); }
.esa-texte img { border-radius: 16px; margin: 1.4em auto; }
.esa-texte figure { margin: 1.4em 0; }
.esa-texte blockquote { margin: 1.4em 0; padding: 18px 22px; background: var(--esa-creme); border-radius: 14px; font-style: italic; }
.esa-texte strong, .esa-texte b { color: var(--esa-encre); font-weight: 600; }
.esa-texte table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 16px; }
.esa-texte th, .esa-texte td { padding: .6em .75em; border-bottom: 1px solid var(--esa-trait); text-align: left; vertical-align: top; }
.esa-texte thead th, .esa-texte thead td, .esa-texte tr:first-child th { background: var(--esa-sable); color: var(--esa-encre); font-family: var(--esa-titres); font-weight: 600; }
.esa-texte tbody tr:nth-child(even) { background: #fffaf3; }
@media (max-width: 760px) { .esa-texte table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* Article */
.esa-article__tete { padding-top: 34px; }
.esa-article__titre { font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; margin: 0 0 14px; max-width: 900px; letter-spacing: -.01em; }
.esa-article__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; width: fit-content; max-width: 100%; margin: 0 0 22px; font-size: 16px; color: var(--esa-doux); }
.esa-article__meta span + span::before { content: "·"; margin-right: 18px; color: var(--esa-braise); font-weight: 700; }
.esa-article__image { margin: 0 auto 28px; }
.esa-article__image img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 22px; }
.esa-article__image:not(:has(img)) { display: none; }
.esa-article__corps { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 48px; justify-content: center; align-items: start; padding-bottom: 24px; }
.esa-texte--article { margin: 0; }
.esa-texte--article > p:first-child { font-size: 1.17em; line-height: 1.6; color: var(--esa-encre); }

.esa-sommaire { position: sticky; top: 20px; font-size: 15.5px; }
.esa-sommaire__bascule { position: absolute; opacity: 0; pointer-events: none; }
.esa-sommaire__barre { display: block; font-family: var(--esa-titres); font-weight: 700; color: var(--esa-encre); margin: 0 0 10px; }
.esa-sommaire__liste ul, .esa-sommaire__liste ol { list-style: none; margin: 0; padding: 0; }
.esa-sommaire__liste ul ul { display: none; }
.esa-sommaire__liste li { margin: 0; }
.esa-sommaire__liste a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--esa-trait); color: var(--esa-texte); text-decoration: none; line-height: 1.35; }
.esa-sommaire__liste a:hover { border-left-color: var(--esa-braise); color: var(--esa-lien); }
.esa-sommaire:not(:has(a)) { display: none; }

@media (max-width: 1023px) {
  .esa-article__corps { display: block; }
  .esa-sommaire { position: sticky; top: 0; z-index: 10; margin: 0 0 22px; background: var(--esa-blanc); border: 1px solid var(--esa-trait); border-radius: 12px; }
  .esa-sommaire__barre { margin: 0; padding: 12px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .esa-sommaire__barre::after { content: "+"; font-size: 22px; line-height: 1; color: var(--esa-braise); }
  .esa-sommaire__bascule:checked + .esa-sommaire__barre::after { content: "−"; }
  .esa-sommaire__liste { display: none; max-height: 60vh; overflow-y: auto; padding: 0 16px 12px; }
  .esa-sommaire__bascule:checked ~ .esa-sommaire__liste { display: block; }
  .esa-article__image { margin-bottom: 20px; }
}

/* Encadré de l'autrice */
.esa-autrice { display: flex; gap: 18px; align-items: flex-start; margin: 40px 0 8px; padding: 22px 24px; border-radius: 18px; background: var(--esa-creme); border-top: 3px solid var(--esa-soleil); }
.esa-autrice__photo { flex: 0 0 68px; width: 68px; height: 68px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--esa-soleil), var(--esa-braise)); color: var(--esa-blanc); font-family: var(--esa-titres); font-weight: 800; font-size: 28px; }
.esa-autrice__photo img { width: 100%; height: 100%; object-fit: cover; }
.esa-autrice__label { margin: 0; font-size: 14px; color: var(--esa-doux); }
.esa-autrice__nom { margin: 0 0 6px; font-family: var(--esa-titres); font-weight: 700; font-size: 20px; color: var(--esa-encre); }
.esa-autrice__bio { font-size: 16px; line-height: 1.55; }
.esa-autrice__bio p { margin: 0; }
.esa-autrice__bio p:not(:first-child) { display: none; }
@media (max-width: 520px) { .esa-autrice { padding: 18px; gap: 14px; } .esa-autrice__photo { flex-basis: 56px; width: 56px; height: 56px; font-size: 23px; } }

/* Rubrique */
.esa-rubrique__tete { background: var(--esa-creme); padding: 34px 0 30px; border-bottom: 1px solid var(--esa-trait); }
.esa-rubrique__titre { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; margin: 0 0 16px; }
.esa-rubrique__intro { column-count: 2; column-gap: 48px; font-size: 17px; }
.esa-rubrique__intro p { margin: 0 0 .9em; break-inside: avoid-column; }
.esa-rubrique__intro:empty { display: none; }
@media (max-width: 860px) { .esa-rubrique__intro { column-count: 1; } }

/* Pages fixes */
.esa-page__tete { background: var(--esa-creme); padding: 34px 0 28px; border-bottom: 1px solid var(--esa-trait); }
.esa-page__titre { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; margin: 0; }
.esa-page { padding: 36px 0 48px; }
.esa-texte--page img { max-width: min(100%, 560px); margin: 0 0 1.4em; border-radius: 0; }
.esa-contact { background: var(--esa-creme); padding: 40px 0 52px; border-top: 1px solid var(--esa-trait); }
.esa-contact__cadre { max-width: 760px; margin: 0 auto; }
.esa-contact h2 { font-size: 28px; margin: 0 0 8px; }
.esa-contact__intro { margin: 0 0 18px; color: var(--esa-doux); }
.esa-formulaire { display: grid; gap: 12px; }
.esa-formulaire input, .esa-formulaire textarea, .esa-champ {
  width: 100%; padding: 12px 14px; border: 1px solid #cdbca5; border-radius: 10px; background: var(--esa-blanc);
  font: inherit; font-size: 17px; color: var(--esa-texte);
}
.esa-formulaire textarea { min-height: 150px; }
.esa-formulaire button, .esa-formulaire input[type="submit"] {
  justify-self: start; width: auto; padding: 12px 24px; border: 0; border-radius: 999px; background: var(--esa-encre); color: var(--esa-blanc);
  font-family: var(--esa-titres); font-weight: 700; font-size: 17px; cursor: pointer;
}
.esa-formulaire button:hover, .esa-formulaire input[type="submit"]:hover { background: var(--esa-lien); }

/* Pied de page */
.esa-pied { background: var(--esa-encre); color: #e9eef3; padding: 30px 0; font-size: 15.5px; }
.esa-pied__ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 28px; }
.esa-pied p { margin: 0; }
.esa-pied__nom { font-family: var(--esa-titres); font-weight: 800; font-size: 20px; color: var(--esa-blanc); }
.esa-pied__accroche { color: #c9d3dc; }
.esa-pied a { color: #ffd59a; }
.esa-pied a:hover { color: var(--esa-blanc); }