/* ============================================================
   Epsylon · magazine féminin · feuille de style
   Display : DM Serif Display  ·  Texte : Figtree
   ============================================================ */

:root {
  --framboise:       #DC6A7D;
  --framboise-fonce: #C24E64;
  --peche:           #F1A98F;
  --rose-pale:       #FBEAEE;
  --rose-poudre:     #F7DDE2;
  --creme:           #FCF6F0;
  --creme-alt:       #F6EAE1;
  --prune:           #382630;
  --prune-doux:      #5A4450;
  --texte:           #45323A;
  --texte-doux:      #927C84;
  --bordure:         rgba(56, 38, 44, 0.12);
  --bordure-claire:  rgba(56, 38, 44, 0.07);
  --ombre:           0 18px 40px -28px rgba(120, 50, 70, 0.45);
  --rayon:           12px;
  --rayon-petit:     8px;
  --largeur:         1200px;
  --largeur-texte:   720px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--texte);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--framboise-fonce); }

h1, h2, h3, h4 {
  font-family: "DM Serif Display", "Times New Roman", serif;
  color: var(--prune);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 .5em;
}

em { font-style: italic; }

.contenant { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; background: var(--prune); color: #fff;
  padding: 12px 18px; z-index: 999; border-radius: 0 0 8px 0;
}
.saut-contenu:focus { left: 0; }

.surtitre {
  display: inline-block;
  font-family: "Figtree", sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--framboise-fonce);
  margin-bottom: 14px;
}
.surtitre-clair { color: var(--peche); }

/* ---------- Boutons ---------- */
.bouton-corail, .bouton-ligne {
  display: inline-block; font-weight: 600; font-size: .98rem;
  padding: 13px 28px; border-radius: 40px; text-decoration: none;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.bouton-corail { background: var(--framboise); color: #fff; box-shadow: var(--ombre); }
.bouton-corail:hover { background: var(--framboise-fonce); transform: translateY(-2px); }
.bouton-ligne { border: 1.5px solid var(--framboise); color: var(--framboise-fonce); }
.bouton-ligne:hover { background: var(--rose-pale); }

.lien-fleche {
  font-weight: 600; text-decoration: none; color: var(--framboise-fonce);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.lien-fleche::after { content: "\2192"; transition: transform .15s ease; }
.lien-fleche:hover::after { transform: translateX(4px); }

.etiquette-rubrique {
  display: inline-block;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--framboise-fonce); background: var(--rose-pale);
  padding: 5px 12px; border-radius: 30px; text-decoration: none;
  margin-bottom: 12px;
}
a.etiquette-rubrique:hover { background: var(--rose-poudre); }

/* ============================================================
   En-tête
   ============================================================ */
.bandeau-epsylon {
  background: var(--creme);
  border-bottom: 1px solid var(--bordure);
  position: sticky; top: 0; z-index: 100;
}
.bandeau-rang { display: flex; align-items: center; gap: 28px; min-height: 84px; }

.enseigne { text-decoration: none; display: flex; flex-direction: column; line-height: 1; }
.enseigne-mot {
  font-family: "DM Serif Display", serif; font-weight: 700; font-size: 1.95rem;
  color: var(--prune); letter-spacing: .03em;
}
.enseigne-note {
  font-size: .6rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--framboise-fonce); margin-top: 4px;
}

.navigation-mag { margin-left: auto; }
.navigation-mag ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.navigation-mag a {
  text-decoration: none; color: var(--texte); font-weight: 600; font-size: .96rem;
  padding: 6px 0; position: relative;
}
.navigation-mag a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--framboise); transition: width .2s ease;
}
.navigation-mag a:hover { color: var(--framboise-fonce); }
.navigation-mag a:hover::after { width: 100%; }

.bandeau-outils { display: flex; align-items: center; gap: 8px; }
.declencheur-recherche, .declencheur-menu {
  background: none; border: 0; cursor: pointer; color: var(--prune);
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.declencheur-recherche:hover { background: var(--rose-pale); }
.declencheur-recherche svg { width: 22px; height: 22px; }
.declencheur-menu { display: none; flex-direction: column; gap: 5px; }
.declencheur-menu span { width: 22px; height: 2px; background: var(--prune); border-radius: 2px; }

.tiroir-recherche { background: var(--rose-pale); border-bottom: 1px solid var(--bordure); }
.tiroir-recherche .contenant { display: flex; gap: 12px; padding-top: 18px; padding-bottom: 18px; }
.tiroir-recherche input {
  flex: 1; border: 1px solid var(--bordure); border-radius: 40px; padding: 12px 22px;
  font: inherit; font-size: 1rem; background: #fff;
}
.tiroir-recherche button {
  border: 0; background: var(--framboise); color: #fff; font-weight: 600;
  padding: 0 26px; border-radius: 40px; cursor: pointer;
}

.menu-mobile-mag { background: var(--creme); border-bottom: 1px solid var(--bordure); }
.menu-mobile-mag ul { list-style: none; margin: 0; padding: 10px 24px 22px; }
.menu-mobile-mag li { border-bottom: 1px solid var(--bordure-claire); }
.menu-mobile-mag a { display: block; padding: 14px 4px; text-decoration: none; color: var(--texte); font-weight: 600; }

/* ============================================================
   Fil d'Ariane
   ============================================================ */
.fil-ariane { padding: 18px 0 0; }
.fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: .82rem; color: var(--texte-doux); }
.fil-ariane li::after { content: "\203A"; margin-left: 8px; color: var(--texte-doux); }
.fil-ariane li:last-child::after { content: none; }
.fil-ariane a { color: var(--texte-doux); text-decoration: none; }
.fil-ariane a:hover { color: var(--framboise-fonce); }
.fil-ariane li[aria-current] { color: var(--prune); }

/* ============================================================
   Manchette (accueil)
   ============================================================ */
.manchette { background: linear-gradient(180deg, var(--rose-pale) 0%, var(--creme) 100%); }
.manchette-rang {
  display: grid; grid-template-columns: 1fr 0.9fr; gap: 56px; align-items: center;
  padding: 70px 24px 64px;
}
.manchette-texte h1 {
  font-size: clamp(2.6rem, 5.2vw, 4rem); margin: 0 0 18px; letter-spacing: -.01em;
}
.manchette-texte h1 em { color: var(--framboise-fonce); }
.manchette-intro { font-size: 1.12rem; color: var(--prune-doux); max-width: 30em; margin: 0 0 28px; }
.manchette-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.manchette-visuel { position: relative; display: block; text-decoration: none; }
.manchette-visuel img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: 140px 140px var(--rayon) var(--rayon);
}
.manchette-vignette {
  position: absolute; left: 18px; bottom: 18px; right: 18px;
  background: rgba(255,255,255,.93); backdrop-filter: blur(4px);
  padding: 16px 20px; border-radius: var(--rayon-petit); display: flex; flex-direction: column; gap: 4px;
}
.manchette-vignette-sur { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--framboise-fonce); }
.manchette-vignette-titre { font-family: "DM Serif Display", serif; font-size: 1.05rem; color: var(--prune); }

/* ============================================================
   Vignettes de rubriques
   ============================================================ */
.rubriques-vignettes { border-bottom: 1px solid var(--bordure-claire); background: var(--creme); }
.rubriques-vignettes-rang { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 26px 24px; }
.vignette-rubrique {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 10px 20px; border: 1px solid var(--bordure); border-radius: 40px;
  color: var(--prune); font-weight: 600; background: #fff; transition: all .18s ease;
}
.vignette-rubrique:hover { border-color: var(--framboise); color: var(--framboise-fonce); transform: translateY(-2px); }
.vignette-icone { width: 26px; height: 26px; color: var(--framboise); display: inline-flex; }
.vignette-icone svg { width: 100%; height: 100%; }
.vignette-icone-inline { width: 30px; height: 30px; }

/* ============================================================
   Titres de section
   ============================================================ */
.titre-section {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: 28px; padding-bottom: 14px; border-bottom: 2px solid var(--prune);
}
.titre-section h2 { font-size: 1.9rem; margin: 0; }
.titre-section-duo { display: flex; align-items: center; gap: 12px; }
.titre-section-duo .vignette-icone { color: var(--framboise); }

/* ============================================================
   Cartes & grilles
   ============================================================ */
.une-magazine, .fil-recent, .bloc-rubrique { padding: 60px 0; }
.bloc-rubrique:nth-of-type(even) { background: var(--creme-alt); }

.grille-articles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.fil-recent .grille-articles { grid-template-columns: repeat(4, 1fr); }
.grille-articles-4 { grid-template-columns: repeat(4, 1fr); }

.carte-article { display: flex; flex-direction: column; }
.carte-visuel { display: block; border-radius: var(--rayon); overflow: hidden; background: var(--rose-pale); }
.carte-visuel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s ease; }
.carte-visuel:hover img { transform: scale(1.05); }
.carte-corps { padding-top: 16px; }
.carte-titre { font-size: 1.18rem; line-height: 1.25; margin: 0 0 8px; }
.carte-titre a { color: var(--prune); text-decoration: none; }
.carte-titre a:hover { color: var(--framboise-fonce); }
.carte-extrait { color: var(--prune-doux); font-size: .96rem; margin: 0 0 10px; }
.carte-date { color: var(--texte-doux); font-size: .82rem; margin: 0; }

/* Une magazine : 1 grande + secondaires */
.une-rang { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; }
.une-principale .carte-visuel img { aspect-ratio: 3 / 2; }
.une-titre { font-size: 2rem; margin-top: 14px; }
.une-secondaires { display: flex; flex-direction: column; gap: 22px; }
.carte-mini { flex-direction: row; gap: 16px; align-items: center; }
.carte-mini .carte-visuel { flex: 0 0 130px; }
.carte-mini .carte-visuel img { aspect-ratio: 4 / 3; }
.carte-mini .carte-corps { padding-top: 0; }
.carte-mini .carte-titre { font-size: 1.05rem; }
.carte-mini .etiquette-rubrique { margin-bottom: 6px; }

/* ============================================================
   Encart de bas de page d'accueil
   ============================================================ */
.encart-lettre { background: var(--prune); color: #fff; padding: 64px 0; }
.encart-lettre-rang { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.encart-lettre h2 { color: #fff; font-size: 2.1rem; margin: 0 0 10px; }
.encart-lettre p { color: rgba(255,255,255,.82); margin: 0; max-width: 36em; }

/* ============================================================
   Tête de rubrique / pages listes
   ============================================================ */
.tete-rubrique { background: var(--rose-pale); text-align: center; padding: 54px 0 46px; }
.tete-rubrique-icone { width: 46px; height: 46px; color: var(--framboise); margin: 0 auto 14px; }
.tete-rubrique-titre { font-size: clamp(2.2rem, 4vw, 3rem); margin: 0 0 10px; }
.tete-rubrique-titre em { color: var(--framboise-fonce); }
.tete-rubrique-intro { color: var(--prune-doux); max-width: 34em; margin: 0 auto; font-size: 1.05rem; }

/* Liste de toutes les rubriques */
.liste-rubriques { padding: 60px 0; }
.grille-rubriques { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.carte-rubrique {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 28px 24px; background: #fff; border: 1px solid var(--bordure);
  border-radius: var(--rayon); text-decoration: none; transition: all .18s ease;
}
.carte-rubrique:hover { border-color: var(--framboise); transform: translateY(-3px); box-shadow: var(--ombre); }
.carte-rubrique-icone { width: 40px; height: 40px; color: var(--framboise); }
.carte-rubrique h2 { font-size: 1.4rem; margin: 4px 0 0; }
.carte-rubrique p { color: var(--prune-doux); font-size: .94rem; margin: 0; flex: 1; }
.carte-rubrique-compte { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--framboise-fonce); }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 48px; }
.lien-page {
  min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bordure); border-radius: 50%; text-decoration: none; color: var(--prune); font-weight: 600;
}
.lien-page:hover { border-color: var(--framboise); color: var(--framboise-fonce); }
.lien-page[aria-current] { background: var(--framboise); color: #fff; border-color: var(--framboise); }

/* ============================================================
   Article
   ============================================================ */
.feuille-article { padding: 30px 0 64px; }
.article-rang { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.article-corps { min-width: 0; max-width: 820px; }
.article-entete { margin: 18px 0 24px; }
.article-entete h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 10px 0 14px; }
.article-meta { color: var(--texte-doux); font-size: .9rem; display: flex; gap: 10px; align-items: center; margin: 0; }
.article-meta-sep { color: var(--peche); }
.article-photo { margin: 0 0 32px; border-radius: var(--rayon); overflow: hidden; }
.article-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.article-texte { font-size: 1.08rem; color: var(--texte); }
.article-texte p { margin: 0 0 1.3em; }
.article-texte h2 {
  font-size: 1.75rem; margin: 1.8em 0 .6em; padding-bottom: .25em;
  border-bottom: 1px solid var(--bordure);
}
.article-texte h3 { font-size: 1.32rem; margin: 1.5em 0 .5em; color: var(--framboise-fonce); }
.article-texte a { color: var(--framboise-fonce); text-decoration: underline; text-underline-offset: 2px; }
.article-texte ul, .article-texte ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.article-texte li { margin-bottom: .5em; }
.article-texte img { border-radius: var(--rayon-petit); margin: 1.5em auto; }
.article-texte blockquote {
  margin: 1.6em 0; padding: 6px 0 6px 24px; border-left: 4px solid var(--framboise);
  font-family: "DM Serif Display", serif; font-style: italic; font-size: 1.2rem; color: var(--prune);
}
.article-texte strong { color: var(--prune); }
.cadre-video { position: relative; display: block; padding-bottom: 56.25%; height: 0; margin: 1.6em 0; border-radius: var(--rayon-petit); overflow: hidden; }
.cadre-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tableau-defilant { overflow-x: auto; margin: 1.6em 0; }
.article-texte table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.article-texte th, .article-texte td { border: 1px solid var(--bordure); padding: 10px 14px; text-align: left; }
.article-texte th { background: var(--rose-pale); color: var(--prune); }

.article-retour { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--bordure); }

/* Aside */
.colonne-aside { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 30px; }
.bloc-aside { background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 22px 22px 8px; }
.bloc-aside > h2 { font-size: 1.05rem; letter-spacing: .02em; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid var(--framboise); display: inline-block; }
.liste-aside { list-style: none; margin: 0; padding: 0; }
.liste-aside li { margin-bottom: 16px; }
.liste-aside a { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--prune); font-weight: 600; font-size: .92rem; line-height: 1.3; }
.liste-aside img { flex: 0 0 72px; width: 72px; height: 56px; object-fit: cover; border-radius: 6px; }
.liste-aside a:hover span { color: var(--framboise-fonce); }
.liste-rubriques-aside { list-style: none; margin: 0; padding: 0; }
.liste-rubriques-aside li { border-bottom: 1px solid var(--bordure-claire); }
.liste-rubriques-aside li:last-child { border-bottom: 0; }
.liste-rubriques-aside a { display: flex; justify-content: space-between; padding: 11px 2px; text-decoration: none; color: var(--texte); font-weight: 600; }
.liste-rubriques-aside a span { color: var(--texte-doux); font-weight: 600; }
.liste-rubriques-aside a:hover { color: var(--framboise-fonce); }

.a-lire-aussi { background: var(--creme-alt); padding: 60px 0; }

/* ============================================================
   Pages statiques / contact
   ============================================================ */
.page-statique { padding: 36px 0 70px; }
.page-statique-cadre, .page-contact { max-width: var(--largeur-texte); margin: 0 auto; }
.page-statique-titre { font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 18px 0 24px; }
.page-statique-contenu { font-size: 1.06rem; }
.page-statique-contenu h2 { font-size: 1.6rem; margin: 1.6em 0 .5em; }
.page-statique-contenu p { margin: 0 0 1.2em; }
.page-statique-contenu a { color: var(--framboise-fonce); }

.form-contact { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.form-contact label { display: flex; flex-direction: column; gap: 7px; font-weight: 600; color: var(--prune); }
.form-contact input, .form-contact textarea {
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit); padding: 13px 16px;
  font: inherit; font-size: 1rem; background: #fff;
}
.form-contact input:focus, .form-contact textarea:focus { outline: 2px solid var(--framboise); border-color: var(--framboise); }
.pot-de-miel { position: absolute; left: -9999px; }
.message-ok { background: #E8F3EC; color: #2C6E47; padding: 16px 20px; border-radius: var(--rayon-petit); }
.message-erreur { background: var(--rose-pale); color: var(--framboise-fonce); padding: 16px 20px; border-radius: var(--rayon-petit); }

/* Plan du site */
.plan-rang { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; margin-top: 20px; }
.plan-bloc h2 { font-size: 1.3rem; border-bottom: 2px solid var(--framboise); padding-bottom: 8px; }
.plan-bloc h2 a { color: var(--prune); text-decoration: none; }
.plan-bloc ul { list-style: none; margin: 0; padding: 0; }
.plan-bloc li { padding: 5px 0; border-bottom: 1px solid var(--bordure-claire); }
.plan-bloc a { color: var(--texte); text-decoration: none; font-size: .94rem; }
.plan-bloc a:hover { color: var(--framboise-fonce); }

/* Recherche */
.tete-recherche { background: var(--rose-pale); padding: 48px 0; text-align: center; }
.tete-recherche h1 { font-size: 2rem; }
.barre-recherche-page { display: flex; gap: 12px; max-width: 560px; margin: 22px auto 0; }
.barre-recherche-page input { flex: 1; border: 1px solid var(--bordure); border-radius: 40px; padding: 13px 22px; font: inherit; background: #fff; }
.barre-recherche-page button { border: 0; background: var(--framboise); color: #fff; font-weight: 600; padding: 0 28px; border-radius: 40px; cursor: pointer; }

/* Écran d'erreur */
.ecran-erreur { text-align: center; padding: 90px 24px; max-width: 620px; }
.erreur-code { font-family: "DM Serif Display", serif; font-size: 6rem; font-weight: 700; color: var(--framboise); line-height: 1; }
.ecran-erreur h1 { font-size: 2rem; margin: 6px 0 14px; }
.ecran-erreur p { color: var(--prune-doux); margin-bottom: 26px; }
.erreur-liens ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; padding: 0; margin: 34px 0 0; }
.erreur-liens a { color: var(--framboise-fonce); text-decoration: none; font-weight: 600; }

/* ============================================================
   Pied de page
   ============================================================ */
.pied-epsylon { background: var(--prune); color: rgba(255,255,255,.78); margin-top: 0; }
.pied-rang { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 60px 24px 44px; }
.pied-marque { font-family: "DM Serif Display", serif; font-size: 1.7rem; font-weight: 700; color: #fff; }
.pied-baseline { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--peche); margin: 6px 0 16px; }
.pied-mot { font-size: .92rem; line-height: 1.7; }
.pied-colonne h2 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.pied-colonne ul { list-style: none; margin: 0; padding: 0; }
.pied-colonne li { margin-bottom: 10px; }
.pied-colonne a { color: rgba(255,255,255,.74); text-decoration: none; font-size: .94rem; }
.pied-colonne a:hover { color: #fff; }
.pied-socle { border-top: 1px solid rgba(255,255,255,.12); }
.pied-socle-rang { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 20px 24px; font-size: .82rem; color: rgba(255,255,255,.6); }
.pied-socle-rang p { margin: 0; }

/* ============================================================
   Boîte à outils éditoriale (composants d'article réutilisables)
   ============================================================ */

/* L'essentiel : résumé en tête d'article (utile lecteur + extraits Google) */
.encadre-essentiel {
  position: relative;
  background: linear-gradient(180deg, var(--rose-pale) 0%, #fff 100%);
  border: 1px solid var(--rose-poudre);
  border-top: 3px solid var(--framboise);
  border-radius: var(--rayon);
  padding: 28px 32px;
  margin: 0 0 40px;
  box-shadow: var(--ombre);
}
.encadre-essentiel > strong {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Figtree", sans-serif;
  font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--framboise-fonce); margin-bottom: 16px;
}
.encadre-essentiel > strong::before {
  content: ""; width: 22px; height: 22px; flex: 0 0 auto;
  background: var(--framboise);
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l2.4 5.6L20 10l-5.6 2.4L12 18l-2.4-5.6L4 10l5.6-2.4z'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l2.4 5.6L20 10l-5.6 2.4L12 18l-2.4-5.6L4 10l5.6-2.4z'/%3E%3C/svg%3E");
}
.encadre-essentiel ul { list-style: none; margin: 0; padding: 0; }
.encadre-essentiel li {
  position: relative; padding-left: 26px; margin-bottom: 9px;
  font-size: 1rem; color: var(--texte); line-height: 1.55;
}
.encadre-essentiel li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--framboise);
}
.encadre-essentiel li:last-child { margin-bottom: 0; }

/* Encadrés thématiques (conseil / attention) avec étiquette */
.encadre {
  position: relative;
  background: #fff;
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--framboise);
  border-radius: var(--rayon-petit);
  padding: 22px 26px; margin: 30px 0;
}
.encadre-titre {
  display: block; font-weight: 800; color: var(--prune);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px;
}
.encadre p:last-child { margin-bottom: 0; }
.encadre-conseil { border-left-color: #4FA07A; background: #F1F8F4; }
.encadre-conseil .encadre-titre { color: #2C6E47; }
.encadre-attention { border-left-color: var(--peche); background: #FDF3EE; }
.encadre-attention .encadre-titre { color: var(--framboise-fonce); }

/* Notre avis : signature éditoriale (la voix qui tranche) */
.avis-redac {
  background: var(--prune); color: #fff;
  border-radius: var(--rayon); padding: 30px 34px; margin: 38px 0;
}
.avis-redac .avis-titre {
  display: flex; align-items: center; gap: 10px;
  font-family: "DM Serif Display", serif; font-size: 1.35rem; color: #fff; margin: 0 0 12px;
}
.avis-redac .avis-titre::before {
  content: ""; width: 26px; height: 3px; background: var(--peche); border-radius: 3px;
}
.avis-redac p { color: rgba(255,255,255,.9); margin: 0 0 .8em; }
.avis-redac p:last-child { margin-bottom: 0; }
.avis-redac strong { color: #fff; }

/* Matrice de compatibilité (actifs, associations, comparatifs) */
.matrice { width: 100%; border-collapse: collapse; font-size: .96rem; margin: 1.6em 0; }
.matrice th, .matrice td { border: 1px solid var(--bordure); padding: 12px 14px; text-align: left; vertical-align: middle; }
.matrice thead th { background: var(--prune); color: #fff; font-weight: 700; }
.matrice tbody th { background: var(--rose-pale); color: var(--prune); font-weight: 700; }
.matrice tbody tr:nth-child(even) td { background: var(--creme-alt); }
.pastille {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  padding: 4px 11px; border-radius: 30px; white-space: nowrap;
}
.pastille-oui { background: #E2F1E8; color: #2C6E47; }
.pastille-non { background: #FBE3E3; color: #B23B3B; }
.pastille-prudence { background: #FBF0DC; color: #9A6B12; }

/* Étapes numérotées (routine, marche à suivre, chronologie) */
.parcours-etapes { list-style: none; counter-reset: etape; margin: 1.6em 0; padding: 0; }
.parcours-etapes > li {
  position: relative; counter-increment: etape;
  padding: 4px 0 22px 62px; margin: 0;
}
.parcours-etapes > li::before {
  content: counter(etape); position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--framboise); color: #fff;
  font-family: "DM Serif Display", serif; font-weight: 700; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.parcours-etapes > li::after {
  content: ""; position: absolute; left: 20px; top: 46px; bottom: 4px; width: 2px;
  background: var(--rose-poudre);
}
.parcours-etapes > li:last-child::after { display: none; }
.parcours-etapes .etape-titre { display: block; font-weight: 700; color: var(--prune); margin-bottom: 4px; }

/* Titre de section FAQ (centré, accentué) */
.article-texte h2.titre-faq {
  text-align: center; border-bottom: 0; padding-bottom: 0;
  margin: 2.2em 0 1.1em; font-size: 2rem;
}
.article-texte h2.titre-faq::after {
  content: ""; display: block; width: 64px; height: 3px;
  margin: 16px auto 0; background: var(--framboise); border-radius: 3px;
}

/* FAQ dépliante (questions fréquentes, bon pour la recherche vocale et l'IA) */
.faq-epsylon { margin: 1.8em 0; }
.faq-epsylon details {
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  margin-bottom: 12px; background: #fff; overflow: hidden;
}
.faq-epsylon summary {
  cursor: pointer; padding: 18px 22px; font-weight: 700; color: var(--prune);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq-epsylon summary::-webkit-details-marker { display: none; }
.faq-epsylon summary::after {
  content: "+"; font-size: 1.5rem; color: var(--framboise); font-weight: 400; line-height: 1; flex: 0 0 auto;
}
.faq-epsylon details[open] summary::after { content: "\2013"; }
.faq-epsylon details[open] summary { border-bottom: 1px solid var(--bordure-claire); }
.faq-epsylon .faq-corps { padding: 16px 22px 4px; }
.faq-epsylon .faq-corps p:last-child { margin-bottom: 1em; }

/* Sources citées en bas d'article (toujours cliquables) */
.sources-epsylon {
  margin: 40px 0 0; padding: 22px 26px;
  background: var(--creme-alt); border-radius: var(--rayon-petit);
}
.sources-epsylon > strong {
  display: block; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--prune-doux); margin-bottom: 12px;
}
.sources-epsylon ul { list-style: none; margin: 0; padding: 0; }
.sources-epsylon li {
  font-size: .9rem; margin-bottom: 10px; color: var(--texte); line-height: 1.5;
  padding-left: 16px; position: relative; overflow-wrap: anywhere; word-break: break-word;
}
.sources-epsylon li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--framboise);
}
.sources-epsylon li:last-child { margin-bottom: 0; }
.sources-epsylon .src-url { color: var(--prune-doux); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .grille-articles, .grille-articles-4, .fil-recent .grille-articles { grid-template-columns: repeat(3, 1fr); }
  .grille-rubriques { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .navigation-mag { display: none; }
  .declencheur-menu { display: inline-flex; }
  .article-rang { grid-template-columns: 1fr; }
  .colonne-aside { position: static; }
  .manchette-rang { grid-template-columns: 1fr; gap: 36px; padding: 48px 24px; }
  .manchette-visuel img { border-radius: var(--rayon); aspect-ratio: 16 / 10; }
  .une-rang { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .grille-articles, .grille-articles-4, .fil-recent .grille-articles { grid-template-columns: repeat(2, 1fr); }
  .grille-rubriques { grid-template-columns: repeat(2, 1fr); }
  .plan-rang { grid-template-columns: 1fr; }
  .pied-rang { grid-template-columns: 1fr 1fr; }
  .titre-section { flex-wrap: wrap; }
  .titre-section h2 { font-size: 1.6rem; }
  .encart-lettre-rang { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .grille-articles, .grille-articles-4, .fil-recent .grille-articles, .grille-rubriques { grid-template-columns: 1fr; }
  .carte-mini { flex-direction: row; }
  .pied-rang { grid-template-columns: 1fr; }
  .manchette-texte h1 { font-size: 2.4rem; }
}