/* Le Salon des Rêves — thème Ghost « Veilleuse, nuit et jour ».
   1. Polices (OFL, auto-hébergées)  2. Jetons du design system  3. Composants (bundle.css du design system)
   4. Mise en page des gabarits  5. Adaptations au HTML de Ghost */

/* 1. Polices */
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/YoungSerif-Regular.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/YoungSerif-Regular-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2"); }

/* 2. Jetons : nuit par défaut, jour avec <html data-theme="jour">. Sans JavaScript, le réglage de l'appareil décide. */
:root {
  --font-serif: var(--gh-font-heading, "Young Serif", Georgia, "Times New Roman", serif);
  --font-sans: var(--gh-font-body, "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius-pill: 999px;
  --radius-32: 32px;
  --radius-28: 28px;
  --radius-24: 24px;
  --radius-20: 20px;
  --radius-18: 18px;
  --radius-16: 16px;
  --radius-12: 12px;
  --radius-8: 8px;
  --measure: 660px;
  --header-width: 840px;
  --wide: 1040px;
  --page: 1200px;
  --toc-width: 250px;
  --tap: 44px;
  --hairline: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --toc-mark: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-22: 88px;
  --space-28: 112px;
}
:root, [data-theme="nuit"] {
  --bg: #041434;
  --surface: #0a1d45;
  --deep: #020c1f;
  --line: #16285a;
  --line2: #2a3d6e;
  --field-line: #6878a3;
  --title: #f1ebdd;
  --text: #e4ddcd;
  --soft: #cfd3df;
  --muted: #a9b2c8;
  --accent: #dbc475;
  --focus: #dbc475;
  --star: #dbc475;
  --dot: #f1ebdd;
  --violet: #6c59b4;
  --btn-bg: #dbc475;
  --btn-fg: #041434;
  --btn-hover: #e8d797;
  --reves: #b9aef0;
  --sommeil: #9fc4ea;
  --journal: #a8c9a4;
  --input: #041434;
  --cover-bg: #0d2250;
  --knob: #dbc475;
  --knob-line: #dbc475;
  --sun: #c2a24a;
  --highlight: rgba(219, 196, 117, 0.25);
  --error: #f0a493;
}
[data-theme="jour"] {
  --bg: #faf6ee;
  --surface: #f3ecdf;
  --deep: #efe6d3;
  --line: #e8dfcd;
  --line2: #d9ccb4;
  --field-line: #8f8163;
  --title: #1b2140;
  --text: #2c3150;
  --soft: #4a4f66;
  --muted: #5a5f73;
  --accent: #7d6219;
  --focus: #7d6219;
  --star: #c2a24a;
  --dot: #b8a98a;
  --violet: #6c59b4;
  --btn-bg: #041434;
  --btn-fg: #faf6ee;
  --btn-hover: #13265a;
  --reves: #5b48a8;
  --sommeil: #24508a;
  --journal: #3f6b45;
  --input: #faf6ee;
  --cover-bg: #0d2250;
  --knob: #ffffff;
  --knob-line: #8f8163;
  --sun: #c2a24a;
  --highlight: rgba(194, 162, 74, 0.35);
  --error: #a33a2c;
}
@media (prefers-color-scheme: light) { :root:not([data-theme]) {
  --bg: #faf6ee;
  --surface: #f3ecdf;
  --deep: #efe6d3;
  --line: #e8dfcd;
  --line2: #d9ccb4;
  --field-line: #8f8163;
  --title: #1b2140;
  --text: #2c3150;
  --soft: #4a4f66;
  --muted: #5a5f73;
  --accent: #7d6219;
  --focus: #7d6219;
  --star: #c2a24a;
  --dot: #b8a98a;
  --violet: #6c59b4;
  --btn-bg: #041434;
  --btn-fg: #faf6ee;
  --btn-hover: #13265a;
  --reves: #5b48a8;
  --sommeil: #24508a;
  --journal: #3f6b45;
  --input: #faf6ee;
  --cover-bg: #0d2250;
  --knob: #ffffff;
  --knob-line: #8f8163;
  --sun: #c2a24a;
  --highlight: rgba(194, 162, 74, 0.35);
  --error: #a33a2c;
} }

/* 3. Composants du design system */
/* Le Salon des Rêves — feuille de style des composants.
   Les valeurs viennent de tokens.json (custom properties). Aucune couleur en dur
   sauf le décor des couvertures, identique dans les deux modes. */

/* ---------- Base ---------- */
html { color-scheme: dark; }
[data-theme="jour"] { color-scheme: light; }
body { margin: 0; }
.sdr-site {
  container: sdr / inline-size;
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 20px; line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .3s;
}
:where(.sdr-site, .sdr-panel) * { box-sizing: border-box; }
:where(.sdr-site, .sdr-panel) a { color: inherit; text-decoration: none; }
.sdr-site :focus-visible, .sdr-panel :focus-visible, .is-focus {
  outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset);
}
.sdr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .sdr-site *, .sdr-panel * { transition: none !important; animation: none !important; }
}

.sdr-pad { padding: 32px; }
.sdr-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.sdr-stack { display: flex; flex-direction: column; gap: 16px; }
.sdr-note { font: 13px/1.5 var(--font-sans); color: var(--muted); }

/* ---------- Pictogrammes des univers ---------- */
.sdr-pic { display: inline-block; flex: none; width: 1em; height: 1em; font-size: 12px; vertical-align: middle; }
.sdr-pic--etoile { background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.sdr-pic--lune { border-radius: 50%; box-shadow: inset .32em -.16em 0 0 currentColor; }
.sdr-pic--carnet { width: .78em; border: .15em solid currentColor; border-left-width: .31em; border-radius: .15em .23em .23em .15em; }
.sdr-pic--reves { color: var(--reves); }
.sdr-pic--sommeil { color: var(--sommeil); }
.sdr-pic--journal { color: var(--journal); }
.sdr-pic--or { color: var(--star); }
.sdr-losange { display: inline-block; flex: none; width: 8px; height: 8px; background: var(--star); transform: translateY(-3px) rotate(45deg); }

/* ---------- Logo ---------- */
.sdr-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--title); font: 400 24px/1 var(--font-serif); }
.sdr-logo .sdr-croissant { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 6px -3px 0 0 var(--accent); }
.sdr-logo--pied { font-size: 22px; } .sdr-logo--pied .sdr-croissant { width: 18px; height: 18px; box-shadow: inset 5px -3px 0 0 var(--accent); }
.sdr-logo--mobile { gap: 9px; font-size: 17px; line-height: 1.05; } .sdr-logo--mobile .sdr-croissant { width: 15px; height: 15px; box-shadow: inset 4px -2px 0 0 var(--accent); }
.sdr-logo--mobile .sdr-logo-nom { max-width: 5.6em; }

/* ---------- Lien « Aller au contenu » ---------- */
.sdr-skip { position: absolute; left: 16px; top: 12px; z-index: 50; padding: 12px 20px; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg) !important; font: 700 16px/1 var(--font-sans); transform: translateY(-200%); transition: transform .2s; }
.sdr-skip:focus, .sdr-skip.is-visible { transform: none; }

/* ---------- Boutons ---------- */
.sdr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--radius-pill); font: 700 17px/1 var(--font-sans); cursor: pointer; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.sdr-btn--primaire { background: var(--btn-bg); color: var(--btn-fg); }
.sdr-btn--primaire:hover, .sdr-btn--primaire.is-hover { background: var(--btn-hover); }
.sdr-btn--secondaire { background: transparent; border-color: var(--line2); color: var(--accent); }
.sdr-btn--secondaire:hover, .sdr-btn--secondaire.is-hover { border-color: var(--accent); }
.sdr-btn--univers { background: transparent; border-color: currentColor; height: 48px; padding: 0 20px; font-size: 16px; }
.sdr-btn--univers:hover, .sdr-btn--univers.is-hover { background: var(--surface); }
.sdr-btn--reves { color: var(--reves); } .sdr-btn--sommeil { color: var(--sommeil); } .sdr-btn--journal { color: var(--journal); }
.sdr-btn--moyen { height: 48px; padding: 0 22px; font-size: 16px; }
.sdr-btn--petit { height: 44px; padding: 0 16px; font-size: 14px; }
.sdr-btn--plein { width: 100%; }
.sdr-btn[disabled], .sdr-btn.is-disabled { opacity: .55; cursor: not-allowed; }
.sdr-btn.is-loading { cursor: progress; }
.sdr-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sdr-spin 1s linear infinite; }
@keyframes sdr-spin { to { transform: rotate(360deg); } }
.sdr-lien-fleche { display: inline-flex; gap: 6px; color: var(--accent); font-weight: 700; font-size: 17px; line-height: 1.4; }
.sdr-lien-fleche:hover, .sdr-lien-fleche.is-hover { text-decoration: underline; text-underline-offset: .2em; }
.sdr-btn-rond { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line2); border-radius: 50%; background: none; color: var(--title); cursor: pointer; transition: border-color .2s; }
.sdr-btn-rond:hover, .sdr-btn-rond.is-hover { border-color: var(--accent); }
.sdr-btn-rond--40 { width: 40px; height: 40px; }
.sdr-ico-loupe { position: relative; width: 17px; height: 17px; }
.sdr-ico-loupe::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.sdr-ico-loupe::after { content: ""; position: absolute; left: 11px; top: 11px; width: 2px; height: 7px; background: currentColor; transform: rotate(-45deg); transform-origin: top; }
.sdr-ico-menu { display: flex; flex-direction: column; gap: 5px; } .sdr-ico-menu::before, .sdr-ico-menu::after { content: ""; width: 16px; height: 2px; background: currentColor; }
.sdr-ico-fermer { position: relative; width: 16px; height: 16px; } .sdr-ico-fermer::before, .sdr-ico-fermer::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: currentColor; transform: rotate(45deg); } .sdr-ico-fermer::after { transform: rotate(-45deg); }
.sdr-chevron { width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform .2s; }
.is-open > * > .sdr-rond-chevron .sdr-chevron, [open] > summary .sdr-chevron { transform: rotate(225deg); margin-top: 3px; }
.sdr-rond-chevron { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; }

/* ---------- Interrupteur nuit / jour ---------- */
.sdr-toggle { position: relative; flex: none; width: 66px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.sdr-toggle-piste { position: absolute; inset: 0; border-radius: var(--radius-pill); border: 1px solid var(--line2); background: var(--surface); transition: border-color .2s; }
.sdr-toggle:hover .sdr-toggle-piste, .sdr-toggle.is-hover .sdr-toggle-piste { border-color: var(--accent); }
.sdr-toggle-lune { position: absolute; left: 11px; top: 11px; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 4px -2px 0 0 var(--muted); }
.sdr-toggle-soleil { position: absolute; right: 13px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.sdr-toggle-bouton { position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--knob); box-shadow: 0 0 0 1px var(--knob-line); display: flex; align-items: center; justify-content: center; transition: transform .25s, background-color .25s; }
.sdr-toggle[aria-pressed="true"] .sdr-toggle-bouton, .sdr-toggle.is-jour .sdr-toggle-bouton { transform: translateX(30px); }
.sdr-toggle-bouton::before { content: ""; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 4px -2px 0 0 #041434; }
.sdr-toggle.is-jour .sdr-toggle-bouton::before, .sdr-toggle[aria-pressed="true"] .sdr-toggle-bouton::before { width: 12px; height: 12px; box-shadow: 0 0 0 3px rgba(194, 162, 74, .3); background: var(--sun); }
.sdr-toggle--petit { width: 58px; height: 44px; }
.sdr-toggle--petit .sdr-toggle-piste { top: 6px; bottom: 6px; }
.sdr-toggle--petit .sdr-toggle-lune { left: 10px; top: 16px; width: 12px; height: 12px; box-shadow: inset 3px -2px 0 0 var(--muted); }
.sdr-toggle--petit .sdr-toggle-soleil { right: 11px; top: 18px; width: 8px; height: 8px; }
.sdr-toggle--petit .sdr-toggle-bouton { left: 3px; top: 9px; width: 26px; height: 26px; }
.sdr-toggle--petit.is-jour .sdr-toggle-bouton, .sdr-toggle--petit[aria-pressed="true"] .sdr-toggle-bouton { transform: translateX(26px); }
.sdr-toggle--petit .sdr-toggle-bouton::before { width: 12px; height: 12px; }
.sdr-toggle--petit.is-jour .sdr-toggle-bouton::before { width: 10px; height: 10px; }

/* ---------- Étiquettes ---------- */
.sdr-tag { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1.3 var(--font-sans); }
.sdr-tag--reves { color: var(--reves); } .sdr-tag--sommeil { color: var(--sommeil); } .sdr-tag--journal { color: var(--journal); }
.sdr-tag--pilule { padding: 8px 18px; border: 1px solid var(--line2); border-radius: var(--radius-pill); transition: border-color .2s; }
.sdr-tag--pilule:hover, .sdr-tag--pilule.is-hover { border-color: currentColor; }
.sdr-tag--petit { font-size: 13px; gap: 6px; } .sdr-tag--petit .sdr-pic { font-size: 10px; }
.sdr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- En-tête ---------- */
/* Barre flottante : une pilule centrée dans la largeur des pages, posée sur le fond */
.sdr-entete { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: min(var(--page), calc(100% - 48px)); margin: 20px auto 0; padding: 12px 14px 12px 28px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); }
@container sdr (max-width: 1360px) { .sdr-entete-nav { gap: 22px; font-size: 16px; } }
.sdr-entete-nav { display: flex; align-items: center; gap: 30px; font-size: 17px; line-height: 1.4; color: var(--title); }
.sdr-entete-nav > a { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.sdr-entete-nav > a:hover, .sdr-entete-nav > a.is-hover { color: var(--accent); }
.sdr-entete-nav > a[aria-current] { color: var(--accent); font-weight: 700; }
.sdr-entete-nav > a.sdr-nav--reves[aria-current] { color: var(--reves); }
.sdr-entete-nav > a.sdr-nav--sommeil[aria-current] { color: var(--sommeil); }
.sdr-entete-nav > a.sdr-nav--journal[aria-current] { color: var(--journal); }
.sdr-entete-outils { display: flex; align-items: center; gap: 14px; }
.sdr-entete-mobile { display: none; align-items: center; gap: 6px; }
.sdr-compte { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 6px; border: 1px solid var(--line2); border-radius: var(--radius-pill); color: var(--title); font: 700 16px/1 var(--font-sans); transition: border-color .2s; }
.sdr-compte:hover, .sdr-compte.is-hover { border-color: var(--accent); }
.sdr-compte-initiale { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font: 400 15px/1 var(--font-serif); color: var(--accent); }
@container sdr (max-width: 1200px) {
  .sdr-entete { max-width: none; margin: 0; padding: 12px 14px 12px 20px; gap: 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  .sdr-entete .sdr-logo { gap: 9px; font-size: 17px; line-height: 1.05; }
  .sdr-entete .sdr-logo .sdr-croissant { width: 15px; height: 15px; box-shadow: inset 4px -2px 0 0 var(--accent); }
  .sdr-entete .sdr-logo-nom { max-width: 5.6em; }
  .sdr-entete-nav { display: none; }
  .sdr-entete-mobile { display: flex; }
}
.sdr-entete-mobile .sdr-btn { height: 40px; padding: 0 13px; font-size: 14px; }
.sdr-entete-mobile .sdr-compte { height: 44px; width: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
.sdr-entete-mobile .sdr-compte-initiale { width: 34px; height: 34px; font-size: 15px; }

/* ---------- Barre des univers (mobile) ---------- */
.sdr-univers-barre { display: flex; gap: 6px; padding: 0 16px 14px; border-bottom: 1px solid var(--line); font: 700 14px/1 var(--font-sans); }
.sdr-univers-barre a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--line2); color: var(--title); transition: border-color .2s; }
.sdr-univers-barre a:last-child { flex: 1.2; }
.sdr-univers-barre a:hover, .sdr-univers-barre a.is-hover { border-color: var(--accent); }
.sdr-univers-barre .sdr-pic { font-size: 10px; }
.sdr-univers-barre a[aria-current].sdr-nav--reves { background: var(--surface); border-color: var(--reves); color: var(--reves); }
.sdr-univers-barre a[aria-current].sdr-nav--sommeil { background: var(--surface); border-color: var(--sommeil); color: var(--sommeil); }
.sdr-univers-barre a[aria-current].sdr-nav--journal { background: var(--surface); border-color: var(--journal); color: var(--journal); }

/* ---------- Menu mobile plein écran ---------- */
.sdr-menu { display: flex; flex-direction: column; min-height: 100%; }
.sdr-menu-haut { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.sdr-menu-corps { flex: 1; display: flex; flex-direction: column; padding: 20px 22px 28px; }
.sdr-recherche-champ { position: relative; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--field-line); background: var(--surface); color: var(--muted); font: 16px/1 var(--font-sans); text-align: left; cursor: pointer; width: 100%; }
.sdr-menu-nav { display: flex; flex-direction: column; margin-top: 20px; }
.sdr-menu-nav a { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--title); font: 400 28px/1 var(--font-serif); }
.sdr-menu-nav a .sdr-pic { font-size: 16px; }
.sdr-menu-nav a.sdr-menu-petit { font: 400 18px/1.2 var(--font-sans); }
.sdr-menu-nav a[aria-current] { color: var(--accent); }
.sdr-menu-mode { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; font-size: 16px; color: var(--soft); }
.sdr-menu-bas { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.sdr-menu-connexion { display: flex; justify-content: center; align-items: center; height: 48px; color: var(--accent); font: 700 15px/1 var(--font-sans); }

/* ---------- Pied de page ---------- */
.sdr-pied { width: 100%; max-width: min(var(--page), calc(100% - 48px)); margin: 0 auto 32px; padding: 56px 56px 32px; border-radius: var(--radius-32); background: var(--deep); }
.sdr-pied-grille { max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.sdr-pied p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.sdr-pied-col { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--text); }
.sdr-pied-col a:hover, .sdr-pied-col a.is-hover { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.sdr-surtitre { font: 700 13px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sdr-pied-bas { max-width: var(--page); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--muted); }
@container sdr (max-width: 720px) {
  .sdr-pied { max-width: none; margin: 0; padding: 44px 22px 32px; border-radius: 0; }
  .sdr-pied-grille { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .sdr-pied-grille > :first-child { grid-column: 1 / -1; }
  .sdr-pied .sdr-logo { font-size: 20px; } .sdr-pied .sdr-croissant { width: 16px; height: 16px; box-shadow: inset 5px -2px 0 0 var(--accent); }
  .sdr-pied p { margin-top: 12px; font-size: 15px; }
  .sdr-pied-col .sdr-surtitre { display: none; }
  .sdr-pied-bas { margin-top: 28px; padding-top: 20px; font-size: 13px; }
}

/* ---------- Filtres et pagination ---------- */
.sdr-filtres { display: flex; flex-wrap: wrap; gap: 10px; font: 700 16px/1 var(--font-sans); }
.sdr-filtres a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--radius-pill); border: 1px solid var(--line2); color: var(--title); transition: border-color .2s; }
.sdr-filtres a:hover, .sdr-filtres a.is-hover { border-color: var(--accent); }
.sdr-filtres a[aria-current] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.sdr-filtres .sdr-pic { font-size: 11px; }
@container sdr (max-width: 720px) {
  .sdr-filtres { flex-wrap: nowrap; overflow-x: auto; gap: 8px; font-size: 15px; scrollbar-width: none; }
  .sdr-filtres a { padding: 0 16px; }
}
.sdr-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line2); font-size: 16px; line-height: 1.4; }
.sdr-pagination-info { color: var(--muted); }
.sdr-pagination-vide { color: var(--muted); }
.sdr-pagination .sdr-btn { height: 48px; padding: 0 22px; font-size: 16px; }
@container sdr (max-width: 720px) { .sdr-pagination { font-size: 15px; padding-top: 20px; } .sdr-pagination-vide { display: none; } }

/* ---------- Couvertures en arche ---------- */
.sdr-couv { position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: var(--cover-bg); background-image: repeating-linear-gradient(135deg, #0d2250 0 10px, #0a1c44 10px 20px); }
.sdr-couv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sdr-couv-label { position: relative; margin: 20px; padding: 5px 10px; border-radius: var(--radius-pill); background: #041434; color: #a9b2c8; font: 11.5px/1.4 ui-monospace, Menlo, monospace; text-align: center; }
.sdr-couv--article { width: 100%; max-width: var(--wide); height: 560px; margin: 0 auto; border-radius: 50% 50% var(--radius-28) var(--radius-28) / 260px 260px var(--radius-28) var(--radius-28); }
.sdr-couv--une { height: 460px; border-radius: 300px 300px var(--radius-24) var(--radius-24); }
.sdr-couv--carte { height: 300px; border-radius: 187px 187px var(--radius-20) var(--radius-20); }
.sdr-couv--liee { height: 220px; border-radius: 90px 90px var(--radius-16) var(--radius-16); background-size: 16px 16px; }
.sdr-couv--compacte { height: 112px; border-radius: 46px 46px var(--radius-12) var(--radius-12); background-image: repeating-linear-gradient(135deg, #0d2250 0 8px, #0a1c44 8px 16px); }
.sdr-couv--compacte .sdr-couv-label, .sdr-couv--liee .sdr-couv-label { display: none; }
.sdr-legende { max-width: var(--wide); margin: 12px auto 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); }
@container sdr (max-width: 720px) {
  .sdr-couv--article { width: auto; margin: 0 16px; height: 280px; border-radius: 50% 50% var(--radius-20) var(--radius-20) / 110px 110px var(--radius-20) var(--radius-20); }
  .sdr-couv--une { height: 320px; border-radius: 175px 175px var(--radius-20) var(--radius-20); }
  .sdr-couv-label { margin: 16px; font-size: 11px; }
  .sdr-legende { padding: 0 22px; font-size: 13px; }
}

/* ---------- Cartes d'article ---------- */
.sdr-carte { display: flex; flex-direction: column; gap: 16px; color: inherit; }
.sdr-carte-titre { margin: 0; font: 400 25px/1.25 var(--font-serif); color: var(--title); text-wrap: balance; transition: color .2s; }
.sdr-carte:hover .sdr-carte-titre, .sdr-carte.is-hover .sdr-carte-titre { color: var(--accent); }
.sdr-carte-meta { font-size: 15px; line-height: 1.5; color: var(--muted); }
.sdr-carte-meta strong { color: var(--title); }
.sdr-carte-resume { margin: 0; font-size: 19px; line-height: 1.65; color: var(--soft); text-wrap: pretty; }
.sdr-carte--une { display: grid; grid-template-columns: 600px minmax(0, 1fr); gap: 64px; align-items: center; }
.sdr-carte--une .sdr-carte-titre { margin-top: 4px; font-size: 44px; line-height: 1.12; }
.sdr-carte--une .sdr-carte-corps { display: flex; flex-direction: column; gap: 20px; }
.sdr-carte-signature { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 15px; color: var(--muted); }
.sdr-carte--compacte { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; }
.sdr-carte--compacte .sdr-carte-corps { display: flex; flex-direction: column; gap: 6px; }
.sdr-carte--compacte .sdr-carte-titre { font-size: 18px; line-height: 1.3; }
.sdr-carte--compacte .sdr-carte-meta { font-size: 13px; }
.sdr-carte--compacte .sdr-tag { font-size: 13px; gap: 6px; } .sdr-carte--compacte .sdr-tag .sdr-pic { font-size: 10px; }
.sdr-carte--liee { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: center; }
.sdr-carte--liee .sdr-carte-corps { display: flex; flex-direction: column; gap: 12px; }
.sdr-carte--liee .sdr-carte-titre { font-size: 24px; }
.sdr-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 40px; }
.sdr-liste { display: flex; flex-direction: column; gap: 28px; }
@container sdr (max-width: 720px) {
  .sdr-carte--une { display: flex; flex-direction: column; gap: 0; }
  .sdr-carte--une .sdr-carte-corps { gap: 12px; margin-top: 20px; }
  .sdr-carte--une .sdr-carte-titre { font-size: 27px; line-height: 1.18; }
  .sdr-carte--une .sdr-carte-resume { font-size: 17px; line-height: 1.6; }
  .sdr-carte--une .sdr-tag { font-size: 14px; }
  .sdr-carte--une .sdr-carte-signature { font-size: 14px; margin-top: 2px; }
  .sdr-carte--une .sdr-avatar { display: none; }
  .sdr-grille { grid-template-columns: 1fr; gap: 28px; }
  .sdr-carte--liee { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; }
  .sdr-carte--liee .sdr-couv--liee { height: 112px; border-radius: 46px 46px var(--radius-12) var(--radius-12); }
  .sdr-carte--liee .sdr-carte-titre { font-size: 18px; line-height: 1.3; }
  .sdr-carte--liee .sdr-carte-meta { font-size: 13px; }
}

/* ---------- Avatar et signature ---------- */
.sdr-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: repeating-linear-gradient(135deg, var(--surface) 0 6px, var(--line) 6px 12px); display: inline-flex; align-items: center; justify-content: center; font: 400 16px/1 var(--font-serif); color: var(--soft); }
.sdr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sdr-avatar--36 { width: 36px; height: 36px; font-size: 14px; } .sdr-avatar--80 { width: 80px; height: 80px; font-size: 26px; }
.sdr-avatars { display: inline-flex; } .sdr-avatars .sdr-avatar { box-shadow: 0 0 0 3px var(--bg); } .sdr-avatars .sdr-avatar + .sdr-avatar { margin-left: -12px; }

/* ---------- Liste vide ---------- */
.sdr-vide { max-width: 560px; margin: 0 auto; padding: 56px 32px; text-align: center; border-radius: var(--radius-24); border: 1px dashed var(--line2); }
.sdr-vide .sdr-pic { font-size: 22px; }
.sdr-vide h2 { margin: 18px 0 0; font: 400 30px/1.2 var(--font-serif); color: var(--title); }
.sdr-vide p { margin: 12px 0 0; font-size: 18px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.sdr-vide .sdr-row { justify-content: center; margin-top: 24px; gap: 10px; }

/* ---------- En-tête d'article ---------- */
.sdr-art-tete { max-width: var(--header-width); margin: 0 auto; padding: 40px 0 52px; text-align: center; }
.sdr-ariane { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sdr-ariane a:hover, .sdr-ariane a.is-hover { color: var(--title); text-decoration: underline; text-underline-offset: .2em; }
.sdr-ariane a.sdr-ariane--reves { color: var(--reves); font-weight: 700; } .sdr-ariane a.sdr-ariane--sommeil { color: var(--sommeil); font-weight: 700; } .sdr-ariane a.sdr-ariane--journal { color: var(--journal); font-weight: 700; }
.sdr-art-titre { margin: 28px 0 0; font: 400 62px/1.08 var(--font-serif); color: var(--title); text-wrap: balance; }
.sdr-art-chapo { margin: 22px auto 0; max-width: 640px; font-size: 21px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.sdr-signature { margin-top: 28px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--soft); }
.sdr-signature-nom { color: var(--title); font-weight: 700; }
.sdr-signature-nom:hover { color: var(--accent); }
.sdr-sep { color: var(--muted); }
.sdr-signature-bloc { display: contents; }
.sdr-signature-details { display: contents; }
@container sdr (max-width: 720px) {
  .sdr-art-tete { padding: 32px 22px 24px; text-align: left; }
  .sdr-ariane { justify-content: flex-start; gap: 8px; font-size: 13px; }
  .sdr-art-titre { margin-top: 14px; font-size: 34px; line-height: 1.12; }
  .sdr-art-chapo { margin: 16px 0 0; font-size: 18px; }
  .sdr-signature { justify-content: flex-start; margin-top: 20px; font-size: 14px; flex-wrap: nowrap; }
  .sdr-signature .sdr-avatar { width: 40px; height: 40px; }
  .sdr-signature-bloc { display: flex; flex-direction: column; }
  .sdr-signature-nom { font-size: 15px; }
  .sdr-signature-bloc > .sdr-sep { display: none; }
  .sdr-signature-details { display: block; }
}

/* ---------- Sommaire ---------- */
.sdr-toc { max-width: var(--toc-width); padding-top: 6px; }
.sdr-toc-titre { display: flex; align-items: center; gap: 10px; }
.sdr-toc-titre .sdr-pic { font-size: 11px; color: var(--star); }
.sdr-toc ol { margin: 18px 0 0; padding: 0; list-style: none; border-left: 1px solid var(--line2); }
.sdr-toc ol a { display: block; margin-left: -1px; padding: 9px 0 9px 18px; border-left: 2px solid transparent; font-size: 15.5px; line-height: 1.4; color: var(--soft); transition: color .2s, border-color .2s; }
.sdr-toc ol a:hover, .sdr-toc ol a.is-hover { color: var(--title); border-left-color: var(--line2); }
.sdr-toc ol a[aria-current] { border-left-color: var(--star); color: var(--title); font-weight: 700; }
.sdr-toc ol ol { margin: 0; border-left: 0; } .sdr-toc ol ol a { padding-left: 34px; font-size: 14.5px; }
.sdr-toc-haut { display: inline-block; margin-top: 22px; font-size: 14px; font-weight: 700; color: var(--accent); }
.sdr-toc--colonne { position: sticky; top: 32px; }
.sdr-toc-bloc { border: 1px solid var(--line2); border-radius: var(--radius-18); background: var(--surface); }
.sdr-toc-bloc > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 14px 8px 18px; cursor: pointer; list-style: none; border-radius: var(--radius-18); }
.sdr-toc-bloc > summary::-webkit-details-marker { display: none; }
.sdr-toc-bloc > summary .sdr-toc-titre { font-weight: 700; font-size: 16px; color: var(--title); }
.sdr-toc-bloc > summary:hover .sdr-rond-chevron, .sdr-toc-bloc.is-hover .sdr-rond-chevron { border-color: var(--accent); }
.sdr-toc-bloc ol { margin: 0; padding: 0 18px 12px; list-style: none; }
.sdr-toc-bloc ol a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 11px 0; border-top: 1px solid var(--line2); font-size: 16px; line-height: 1.4; color: var(--title); }
.sdr-toc-bloc ol a:hover { color: var(--accent); }
.sdr-toc-num { font: 400 17px/1.3 var(--font-serif); color: var(--accent); }

/* ---------- Mise en page d'article ---------- */

/* ---------- Texte d'article (= .gh-content dans le thème) ---------- */
.sdr-prose { max-width: var(--measure); margin: 0 auto; font-size: 20px; line-height: 1.75; color: var(--text); }
.sdr-prose > * + * { margin-top: 20px; }
.sdr-prose > :first-child { margin-top: 0; }
.sdr-prose .sdr-chapo { font-size: 23px; line-height: 1.6; color: var(--title); text-wrap: pretty; }
.sdr-prose p { margin-bottom: 0; text-wrap: pretty; }
.sdr-prose h2 { margin: 56px 0 0; font: 400 34px/1.2 var(--font-serif); color: var(--title); }
.sdr-prose h3 { margin: 40px 0 0; font: 400 26px/1.25 var(--font-serif); color: var(--title); }
.sdr-prose h4 { margin: 32px 0 0; font: 700 20px/1.4 var(--font-sans); color: var(--title); }
.sdr-prose h2 + *, .sdr-prose h3 + *, .sdr-prose h4 + * { margin-top: 16px; }
/* Liens écrits dans le texte seulement : les boutons et les cartes (qui ont une classe) gardent leur style. */
.sdr-prose a:not([class]), .sdr-prose a.is-hover, .sdr-prose a.is-visited { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .2s, text-decoration-thickness .2s; }
.sdr-prose a:not([class]):hover, .sdr-prose a.is-hover { color: var(--title); text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.sdr-prose a:not([class]):visited, .sdr-prose a.is-visited { color: var(--soft); text-decoration-color: var(--accent); }
.sdr-prose strong, .sdr-prose b { font-weight: 700; color: var(--title); }
.sdr-prose em, .sdr-prose i { font-style: italic; }
.sdr-prose mark { background: var(--highlight); color: inherit; padding: 0 .15em; border-radius: 3px; }
/* Listes : chaque <li> reste un bloc de texte ; puce et numéro sont posés en absolu dans la marge. */
.sdr-prose ul, .sdr-prose ol { padding: 0; list-style: none; }
.sdr-prose li { display: block; position: relative; }
.sdr-prose li + li { margin-top: 14px; }
.sdr-prose ul > li { padding-left: 26px; }
.sdr-prose ul > li::before { content: ""; position: absolute; left: 0; top: calc(.875em - 4px); width: 8px; height: 8px; background: var(--star); transform: rotate(45deg); }
.sdr-prose ol { counter-reset: sdr-ol; }
.sdr-prose ol > li { padding-left: 38px; counter-increment: sdr-ol; }
.sdr-prose ol > li::before { content: counter(sdr-ol); position: absolute; left: 0; top: 0; width: 28px; font: 400 1.05em/1.6667 var(--font-serif); color: var(--accent); }
.sdr-prose li > ul, .sdr-prose li > ol { margin-top: 12px; }
.sdr-prose code:not(pre code) { padding: .1em .35em; border-radius: var(--radius-8); background: var(--surface); border: 1px solid var(--line); font: .85em/1 var(--font-mono); }
.sdr-prose hr { height: 18px; margin: 56px 0; border: 0; background: var(--star); clip-path: polygon(50% 0, calc(50% + 2px) 7px, calc(50% + 9px) 9px, calc(50% + 2px) 11px, 50% 18px, calc(50% - 2px) 11px, calc(50% - 9px) 9px, calc(50% - 2px) 7px); }
/* Citation simple et citation « alternative » de Ghost */
.sdr-prose blockquote { margin: 56px 0; padding: 0; text-align: center; font: 400 30px/1.4 var(--font-serif); color: var(--title); text-wrap: balance; }
.sdr-prose blockquote::before { content: ""; display: block; width: 18px; height: 18px; margin: 0 auto 18px; background: var(--star); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.sdr-prose blockquote p { margin: 0; }
.sdr-prose blockquote cite, .sdr-prose blockquote footer { display: block; margin-top: 16px; font: 400 16px/1.4 var(--font-sans); font-style: normal; color: var(--muted); }
.sdr-prose blockquote + * { margin-top: 0; }
.sdr-prose blockquote.kg-blockquote-alt { margin: 40px 0; padding: 4px 0 4px 28px; text-align: left; font: italic 400 22px/1.6 var(--font-sans); color: var(--soft); border-left: 2px solid var(--star); }
.sdr-prose blockquote.kg-blockquote-alt::before { display: none; }
.sdr-prose blockquote.kg-blockquote-alt + * { margin-top: 40px; }
/* Tableau */
.sdr-table { overflow-x: auto; border: 1px solid var(--line2); border-radius: var(--radius-16); }
.sdr-prose table, .sdr-table table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.sdr-table th { background: var(--surface); color: var(--title); font-weight: 700; text-align: left; }
.sdr-table th, .sdr-table td { padding: 14px 18px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.sdr-table tr:last-child td { border-bottom: 0; }
.sdr-table td { color: var(--text); }
.sdr-table caption { caption-side: bottom; padding: 12px 18px; text-align: left; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line2); }
@container sdr (max-width: 720px) {
  .sdr-prose { font-size: 18px; line-height: 1.7; }
  .sdr-prose > * + * { margin-top: 16px; }
  .sdr-prose .sdr-chapo { font-size: 20px; line-height: 1.55; }
  .sdr-prose h2 { margin-top: 44px; font-size: 26px; }
  .sdr-prose h3 { margin-top: 36px; font-size: 22px; }
  .sdr-prose h4 { margin-top: 28px; font-size: 18px; }
  .sdr-prose li + li { margin-top: 12px; } .sdr-prose ul > li { padding-left: 23px; } .sdr-prose ul > li::before { top: calc(.85em - 3.5px); width: 7px; height: 7px; } .sdr-prose ol > li::before { line-height: 1.62; }
  .sdr-prose blockquote { margin: 44px 0; font-size: 23px; } .sdr-prose blockquote::before { width: 14px; height: 14px; margin-bottom: 14px; }
  .sdr-prose blockquote.kg-blockquote-alt { font-size: 19px; padding-left: 20px; }
  .sdr-prose hr { margin: 44px 0; }
  .sdr-table table { font-size: 15px; min-width: 520px; } .sdr-table th, .sdr-table td { padding: 12px 14px; }
}

/* ---------- Cartes de l'éditeur Ghost (dans .sdr-prose / .gh-content) ---------- */
.kg-card { margin: 40px 0 0; }
.kg-card + * { margin-top: 40px; }
.kg-image-card img, .kg-image { display: block; width: 100%; height: auto; border-radius: var(--radius-12); }
.kg-image-card figcaption, .kg-gallery-card figcaption, .kg-embed-card figcaption, .kg-video-card figcaption, .kg-bookmark-card figcaption { margin-top: 12px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); }
.kg-width-wide { position: relative; width: min(var(--wide), calc(100cqi - 64px)); left: 50%; transform: translateX(-50%); }
.kg-width-full { position: relative; width: 100cqi; left: 50%; transform: translateX(-50%); }
.kg-width-full img { border-radius: 0; }
.kg-width-full figcaption { padding: 0 22px; }
.sdr-img-ph { aspect-ratio: 3 / 2; border-radius: var(--radius-12); background: repeating-linear-gradient(135deg, #0d2250 0 10px, #0a1c44 10px 20px); display: flex; align-items: flex-end; justify-content: center; }
.kg-width-full .sdr-img-ph { border-radius: 0; aspect-ratio: 21 / 8; }
.kg-gallery-container { display: flex; flex-direction: column; gap: 10px; }
.kg-gallery-row { display: flex; gap: 10px; }
.kg-gallery-image { flex: 1; } .kg-gallery-image .sdr-img-ph, .kg-gallery-image img { aspect-ratio: 1; border-radius: var(--radius-8); width: 100%; object-fit: cover; display: block; }
/* Encadré (callout) : « À retenir », « Astuce », « Attention » */
.kg-callout-card { display: block; padding: 36px 40px; border-radius: var(--radius-24); background: var(--surface); border: 1px solid var(--line2); font-size: 18px; line-height: 1.6; color: var(--text); }
.kg-callout-emoji { display: none; }
.sdr-callout-titre { display: flex; align-items: center; gap: 10px; font: 400 21px/1.25 var(--font-serif); color: var(--accent); }
.sdr-callout-titre .sdr-pic { font-size: 14px; color: var(--star); }
.kg-callout-text { margin-top: 20px; }
.kg-callout-text ul { margin: 0; padding: 0; list-style: none; }
.kg-callout-text li { display: block; position: relative; padding-left: 28px; }
.kg-callout-text li + li { margin-top: 12px; }
.kg-callout-text li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.kg-callout-card-blue { border-color: var(--sommeil); } .kg-callout-card-blue .sdr-callout-titre { color: var(--sommeil); }
.kg-callout-card-yellow { border-style: dashed; border-color: var(--accent); }
.kg-callout-card-purple { border-color: var(--reves); } .kg-callout-card-purple .sdr-callout-titre { color: var(--reves); }
.kg-callout-card-green { border-color: var(--journal); } .kg-callout-card-green .sdr-callout-titre { color: var(--journal); }
@container sdr (max-width: 720px) { .kg-callout-card { padding: 26px 22px; border-radius: var(--radius-20); font-size: 17px; } .sdr-callout-titre { font-size: 19px; } .kg-callout-text { margin-top: 16px; } }
/* Déroulant (toggle) : FAQ */
.sdr-faq { display: flex; flex-direction: column; gap: 12px; }
.kg-toggle-card { margin: 0; border-radius: var(--radius-20); background: var(--surface); border: 1px solid var(--line); }
.kg-toggle-card + .kg-toggle-card { margin-top: 12px; }
.sdr-faq > .kg-toggle-card + .kg-toggle-card { margin-top: 0; }
.kg-toggle-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px 18px 26px; cursor: pointer; }
.kg-toggle-heading-text, .sdr-prose .kg-toggle-heading-text { margin: 0; font: 700 19px/1.4 var(--font-sans); color: var(--title); }
.kg-toggle-card-icon { flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line2); background: none; display: flex; align-items: center; justify-content: center; color: var(--accent); font: 400 20px/1 var(--font-sans); cursor: pointer; transition: border-color .2s; }
.kg-toggle-heading:hover .kg-toggle-card-icon, .kg-toggle-card.is-hover .kg-toggle-card-icon { border-color: var(--accent); }
.kg-toggle-content { padding: 0 26px 24px; font-size: 18px; line-height: 1.7; color: var(--soft); }
.kg-toggle-content p { margin: 0; }
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content { display: none; }
@container sdr (max-width: 720px) { .kg-toggle-heading { gap: 12px; padding: 16px 14px 16px 18px; } .kg-toggle-heading-text, .sdr-prose .kg-toggle-heading-text { font-size: 17px; } .kg-toggle-card-icon { width: 32px; height: 32px; font-size: 18px; } .kg-toggle-content { font-size: 17px; line-height: 1.65; padding: 0 18px 20px; } }
/* Bouton */
.kg-button-card { display: flex; } .kg-button-card.kg-align-center { justify-content: center; }
/* Signet (bookmark) */
.kg-bookmark-container { display: grid; grid-template-columns: minmax(0, 1fr) 200px; border: 1px solid var(--line2); border-radius: var(--radius-16); overflow: hidden; background: var(--surface); text-decoration: none !important; color: inherit !important; transition: border-color .2s; }
.kg-bookmark-container:hover, .kg-bookmark-card.is-hover .kg-bookmark-container { border-color: var(--accent); }
.kg-bookmark-content { padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kg-bookmark-title { font: 400 20px/1.3 var(--font-serif); color: var(--title); }
.kg-bookmark-description { font-size: 15px; line-height: 1.5; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kg-bookmark-metadata { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.kg-bookmark-icon { width: 20px; height: 20px; border-radius: 4px; }
.kg-bookmark-thumbnail { position: relative; min-height: 140px; background: repeating-linear-gradient(135deg, #0d2250 0 8px, #0a1c44 8px 16px); }
.kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@container sdr (max-width: 720px) { .kg-bookmark-container { grid-template-columns: 1fr; } .kg-bookmark-thumbnail { order: -1; min-height: 160px; } }
/* Vidéo, audio, fichier */
.sdr-media { border-radius: var(--radius-16); overflow: hidden; background: var(--deep); border: 1px solid var(--line); }
.sdr-video-ecran { position: relative; aspect-ratio: 16 / 9; background: repeating-linear-gradient(135deg, #0d2250 0 10px, #0a1c44 10px 20px); display: flex; align-items: center; justify-content: center; }
.sdr-lecture { width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--btn-bg); color: var(--btn-fg); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s; }
.sdr-lecture:hover, .sdr-lecture.is-hover { background: var(--btn-hover); }
.sdr-lecture::before { content: ""; margin-left: 5px; border-left: 18px solid currentColor; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.sdr-lecture--petit { width: 48px; height: 48px; } .sdr-lecture--petit::before { margin-left: 4px; border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; }
.sdr-media-barre { display: flex; align-items: center; gap: 14px; padding: 14px 18px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sdr-progression { flex: 1; height: 4px; border-radius: 2px; background: var(--line2); position: relative; }
.sdr-progression::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 30%); border-radius: 2px; background: var(--accent); }
.kg-audio-card { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: var(--radius-16); background: var(--surface); border: 1px solid var(--line2); }
.kg-audio-thumbnail { flex: none; width: 72px; height: 72px; border-radius: 36px 36px 10px 10px; background: repeating-linear-gradient(135deg, #0d2250 0 8px, #0a1c44 8px 16px); }
.kg-audio-player-container { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.kg-audio-title { font: 400 19px/1.3 var(--font-serif); color: var(--title); }
.kg-audio-player { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kg-file-card-container { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border-radius: var(--radius-16); border: 1px solid var(--line2); background: var(--surface); text-decoration: none !important; color: inherit !important; transition: border-color .2s; }
.kg-file-card-container:hover, .kg-file-card.is-hover .kg-file-card-container { border-color: var(--accent); }
.kg-file-card-title { font: 400 19px/1.3 var(--font-serif); color: var(--title); }
.kg-file-card-caption { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--soft); }
.kg-file-card-metadata { margin-top: 6px; font-size: 14px; color: var(--muted); }
.kg-file-card-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.sdr-ico-telecharger { position: relative; width: 14px; height: 16px; border-bottom: 2px solid currentColor; }
.sdr-ico-telecharger::before { content: ""; position: absolute; left: 6px; top: 0; width: 2px; height: 10px; background: currentColor; }
.sdr-ico-telecharger::after { content: ""; position: absolute; left: 3px; top: 4px; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
/* Contenus intégrés */
.kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.sdr-embed { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-16); background: var(--deep); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; color: var(--muted); font-size: 15px; }
.sdr-embed--carre { aspect-ratio: auto; height: 152px; }
/* Code */
.sdr-prose pre, .sdr-code { margin: 32px 0 0; padding: 22px 24px; overflow-x: auto; border-radius: var(--radius-16); background: var(--deep); border: 1px solid var(--line); color: var(--text); font: 16px/1.6 var(--font-mono); tab-size: 2; }
.sdr-code .c { color: var(--muted); } .sdr-code .k { color: var(--accent); } .sdr-code .s { color: var(--journal); }
/* En-tête (header card) */
.kg-header-card { padding: 72px 48px; border-radius: var(--radius-28); background: var(--deep); text-align: center; position: relative; overflow: hidden; }
.kg-header-card h2.kg-header-card-heading { margin: 0; font: 400 44px/1.1 var(--font-serif); color: var(--title); text-wrap: balance; }
.kg-header-card .kg-header-card-subheading { margin: 16px auto 0; max-width: 520px; font-size: 19px; line-height: 1.6; color: var(--soft); }
.kg-header-card .sdr-btn { margin-top: 28px; }
.sdr-ciel { position: absolute; inset: 0; pointer-events: none; }
.sdr-ciel span { position: absolute; }
.sdr-ciel .sdr-ciel-point { width: 3px; height: 3px; border-radius: 50%; background: var(--dot); opacity: .6; }
@container sdr (max-width: 720px) { .kg-header-card { padding: 48px 22px; border-radius: var(--radius-20); } .kg-header-card h2.kg-header-card-heading { font-size: 30px; } .kg-header-card .kg-header-card-subheading { font-size: 17px; } }
/* Appel à l'action (CTA) */
.kg-cta-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; align-items: center; padding: 32px; border-radius: var(--radius-24); border: 1px solid var(--line2); background: var(--surface); }
.kg-cta-image { height: 190px; border-radius: 80px 80px var(--radius-16) var(--radius-16); background: repeating-linear-gradient(135deg, #0d2250 0 8px, #0a1c44 8px 16px); }
.kg-cta-label { font: 700 13px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kg-cta-text { margin-top: 10px; font: 400 23px/1.35 var(--font-serif); color: var(--title); text-wrap: pretty; }
.kg-cta-card .sdr-btn { margin-top: 20px; }
@container sdr (max-width: 720px) { .kg-cta-card { grid-template-columns: 1fr; padding: 24px 22px; gap: 20px; } .kg-cta-image { height: 150px; border-radius: 75px 75px var(--radius-12) var(--radius-12); } .kg-cta-text { font-size: 20px; } }

/* ---------- Formulaire d'inscription ---------- */
.sdr-form { max-width: 540px; }
.sdr-form-ligne { display: flex; gap: 12px; }
.sdr-champ { flex: 1; min-width: 0; height: 56px; padding: 0 22px; border-radius: var(--radius-pill); border: 1px solid var(--field-line); background: var(--input); color: var(--title); font: 17px/1 var(--font-sans); transition: border-color .2s; }
.sdr-champ::placeholder { color: var(--muted); opacity: 1; }
.sdr-champ:hover, .sdr-champ.is-hover { border-color: var(--accent); }
.sdr-champ:focus-visible, .sdr-champ.is-focus { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); border-color: var(--accent); }
.sdr-form.is-erreur .sdr-champ { border-color: var(--error); border-width: 2px; padding-left: 21px; }
.sdr-form-message { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 16px; line-height: 1.5; text-align: left; }
.sdr-form-message--erreur { color: var(--error); font-weight: 700; }
.sdr-ico-alerte { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--error); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font: 700 14px/1 var(--font-sans); }
.sdr-form-succes { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; border-radius: var(--radius-20); border: 1px solid var(--line2); background: var(--input); text-align: left; }
.sdr-form-succes .sdr-pic { font-size: 18px; margin-top: 4px; color: var(--star); }
.sdr-form-succes strong { display: block; font: 400 21px/1.3 var(--font-serif); color: var(--title); }
.sdr-form-succes span { display: block; margin-top: 4px; font-size: 16px; line-height: 1.55; color: var(--soft); }
@container sdr (max-width: 720px) { .sdr-form-ligne { flex-direction: column; gap: 10px; } .sdr-champ { flex: none; } .sdr-champ, .sdr-form .sdr-btn { height: 52px; font-size: 16px; } }

/* ---------- Bloc newsletter et carte d'inscription ---------- */
.sdr-newsletter { max-width: 880px; margin: 0 auto; padding: 64px; border-radius: var(--radius-32); background: var(--surface); border: 1px solid var(--line); text-align: center; }
.sdr-newsletter > .sdr-pic { font-size: 20px; color: var(--star); }
.sdr-newsletter h2 { margin: 16px 0 0; font: 400 40px/1.15 var(--font-serif); color: var(--title); }
.sdr-newsletter > p { margin: 14px 0 0; font-size: 18px; line-height: 1.55; color: var(--soft); }
.sdr-newsletter .sdr-form { margin: 32px auto 0; }
.kg-signup-card.sdr-newsletter { padding: 48px 40px; border-radius: var(--radius-24); }
.kg-signup-card.sdr-newsletter h2 { font-size: 32px; }
@container sdr (max-width: 720px) { .sdr-newsletter, .kg-signup-card.sdr-newsletter { padding: 36px 22px; border-radius: var(--radius-24); } .sdr-newsletter h2, .kg-signup-card.sdr-newsletter h2 { margin-top: 12px; font-size: 28px; } .sdr-newsletter > p { font-size: 16px; } .sdr-newsletter .sdr-form { margin-top: 24px; } }

/* ---------- Fin d'article ---------- */
.sdr-auteur { display: flex; gap: 24px; align-items: flex-start; padding: 32px; border-radius: var(--radius-24); background: var(--surface); }
.sdr-auteur-nom { margin-top: 6px; font: 400 26px/1.1 var(--font-serif); color: var(--title); }
.sdr-auteur p { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: var(--soft); }
.sdr-auteur .sdr-lien-fleche { margin-top: 12px; font-size: 16px; }
@container sdr (max-width: 720px) { .sdr-auteur { flex-direction: column; gap: 14px; padding: 24px 22px; border-radius: var(--radius-20); } .sdr-auteur .sdr-avatar--80 { width: 60px; height: 60px; } .sdr-auteur-nom { font-size: 22px; } .sdr-auteur p { font-size: 16px; } }
.sdr-partage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sdr-partage-titre { margin-right: 6px; font-size: 16px; font-weight: 700; color: var(--title); }
.sdr-partage a, .sdr-partage button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--line2); background: none; color: var(--title); font: 700 15px/1 var(--font-sans); cursor: pointer; transition: border-color .2s; }
.sdr-partage a:hover, .sdr-partage button:hover, .sdr-partage .is-hover { border-color: var(--accent); }
.sdr-partage .is-copie { border-color: var(--accent); color: var(--accent); }
.sdr-ico-lien { position: relative; width: 16px; height: 10px; }
.sdr-ico-lien::before, .sdr-ico-lien::after { content: ""; position: absolute; top: 0; width: 9px; height: 10px; border: 2px solid currentColor; border-radius: 5px; box-sizing: border-box; }
.sdr-ico-lien::before { left: 0; } .sdr-ico-lien::after { right: 0; }
.sdr-coche { width: 6px; height: 11px; margin: -3px 2px 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.sdr-commentaires { border-top: 1px solid var(--line2); padding-top: 40px; }
.sdr-commentaires h2 { margin: 0; font: 400 34px/1.2 var(--font-serif); color: var(--title); }
.sdr-commentaires-acces { margin-top: 24px; padding: 28px; border-radius: var(--radius-20); background: var(--surface); border: 1px solid var(--line); text-align: center; }
.sdr-commentaires-acces strong { display: block; font: 400 22px/1.3 var(--font-serif); color: var(--title); }
.sdr-commentaires-acces p { margin: 8px 0 0; font-size: 17px; line-height: 1.55; color: var(--soft); }
.sdr-commentaires-acces .sdr-row { justify-content: center; margin-top: 20px; gap: 10px; }
.sdr-commentaire { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line2); }
.sdr-commentaire .sdr-avatar { width: 40px; height: 40px; font-size: 15px; }
.sdr-commentaire-tete { font-size: 15px; color: var(--muted); } .sdr-commentaire-tete strong { color: var(--title); }
.sdr-commentaire p { margin: 6px 0 0; font-size: 17px; line-height: 1.6; color: var(--text); }
.sdr-lies h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 36px; font: 400 34px/1.2 var(--font-serif); color: var(--title); }
.sdr-lies h2 .sdr-pic { font-size: 20px; }
.sdr-lies-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
@container sdr (max-width: 720px) { .sdr-lies h2 { gap: 10px; margin-bottom: 24px; font-size: 25px; } .sdr-lies h2 .sdr-pic { font-size: 15px; } .sdr-lies-grille { grid-template-columns: 1fr; gap: 24px; } .sdr-commentaires h2 { font-size: 26px; } }

/* ---------- Messages de confirmation ---------- */
.sdr-notif { display: flex; align-items: flex-start; gap: 14px; max-width: 460px; padding: 16px 16px 16px 20px; border-radius: var(--radius-20); background: var(--surface); border: 1px solid var(--line2); color: var(--text); font-size: 16px; line-height: 1.5; }
.sdr-notif .sdr-pic { font-size: 16px; margin-top: 4px; color: var(--star); }
.sdr-notif strong { display: block; color: var(--title); font-weight: 700; }
.sdr-notif-corps { flex: 1; }
.sdr-notif .sdr-btn-rond { width: 36px; height: 36px; color: var(--soft); }
.sdr-notif .sdr-ico-fermer { width: 12px; height: 12px; } .sdr-notif .sdr-ico-fermer::before, .sdr-notif .sdr-ico-fermer::after { width: 12px; top: 5px; }
.sdr-notif--erreur { border-color: var(--error); }
.sdr-notif--erreur strong { color: var(--error); }
.sdr-notif-place { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; }
.sdr-prose .kg-callout-text li { padding-left: 28px; }
.sdr-prose .kg-callout-text li + li { margin-top: 12px; }
.sdr-prose .kg-callout-text li::before { content: "—"; position: absolute; left: 0; top: 0; width: auto; height: auto; background: none; transform: none; color: var(--accent); font: inherit; font-weight: 700; }

/* ---------- Mise en page d'article et de page ----------
   Un seul cadre pour le héros, le texte, la fin d'article et les articles liés : la largeur de la barre
   d'en-tête (1 200 px au plus, 24 px d'air de chaque côté), contenu à 28 px du bord comme le logo.
   Deux colonnes (65 / 35) : à gauche le titre puis le texte (680 px au plus), alignés ; à droite (380 px) l'arche puis le sommaire.
   <header class="sdr-art-hero"><div class="sdr-art-hero-in sdr-cadre sdr-cadre--2col"><div class="sdr-art-tete">…</div>
     <figure class="sdr-art-hero-fig"><div class="sdr-couv sdr-couv--hero"><img></div></figure></div></header>   (figure facultative)
   <div class="sdr-art-grille sdr-cadre sdr-cadre--2col"><div class="sdr-prose">…</div><div class="pg-toc-col">sommaire</div></div>
   Sous 1 200 px : le sommaire passe dans le texte, la colonne de droite reste celle de l'image.
   Sous 900 px : une seule colonne. */
.sdr-cadre { box-sizing: border-box; width: 100%; max-width: min(var(--page), calc(100% - 48px)); margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; }
.sdr-cadre--2col { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 64px; align-items: start; }
.sdr-cadre--2col > * { grid-column: 1; min-width: 0; }
.sdr-cadre--2col > .sdr-art-hero-fig, .sdr-cadre--2col > .pg-toc-col { grid-column: 2; grid-row: 1; }
.sdr-cadre .sdr-prose { max-width: 680px; margin-left: 0; margin-right: 0; }

.sdr-art-hero { padding: 56px 0 0; }
.sdr-art-hero-in { align-items: center; }
.sdr-art-hero .sdr-art-tete { max-width: none; margin: 0; padding: 0; text-align: left; }
.sdr-art-hero .sdr-ariane, .sdr-art-hero .sdr-signature { justify-content: flex-start; }
.sdr-art-hero .sdr-art-titre { margin-top: 20px; font-size: 52px; line-height: 1.1; }
.sdr-art-hero .sdr-art-chapo { margin: 20px 0 0; max-width: var(--measure); }
.sdr-art-hero-fig { margin: 0; }
.sdr-art-hero-fig figcaption { margin-top: 12px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sdr-couv--hero { width: 100%; height: 470px; border-radius: 190px 190px var(--radius-24) var(--radius-24); }
.sdr-couv--hero img { object-position: 50% 40%; }

.sdr-art-grille { padding-top: 64px; }
.sdr-art-grille > .pg-toc-col { align-self: start; position: sticky; top: 32px; }
.sdr-art-grille > .pg-toc-col .sdr-toc { max-width: 320px; }

/* Cartes larges : le texte n'est plus centré, elles partent du bord gauche du texte.
   Avec le sommaire à droite, elles restent dans la colonne de texte. */
.sdr-cadre .kg-width-wide, .sdr-cadre .kg-width-full { left: 0; transform: none; width: 100%; }

@container sdr (max-width: 1200px) {
  .sdr-cadre { max-width: none; padding-left: 22px; padding-right: 22px; }
  .sdr-cadre--2col { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 48px; }
  .sdr-art-hero .sdr-art-titre { font-size: 44px; }
  .sdr-couv--hero { height: 450px; border-radius: 180px 180px var(--radius-24) var(--radius-24); }
  .sdr-art-grille { padding-top: 40px; }
  .sdr-cadre .kg-width-wide { width: calc(100% + 408px); max-width: calc(100cqi - 44px); }
  .sdr-cadre .kg-width-full { width: 100cqi; margin-left: -22px; }
}
@container sdr (max-width: 900px) {
  .sdr-cadre--2col { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .sdr-cadre--2col > .sdr-art-hero-fig { grid-column: 1; grid-row: auto; }
  .sdr-art-hero { padding: 32px 0 0; }
  .sdr-art-hero .sdr-art-titre { margin-top: 14px; font-size: 34px; line-height: 1.12; }
  .sdr-art-hero .sdr-art-chapo { margin-top: 16px; font-size: 18px; }
  .sdr-art-hero .sdr-signature { margin-top: 20px; }
  .sdr-couv--hero { height: 300px; border-radius: 50% 50% var(--radius-20) var(--radius-20) / 120px 120px var(--radius-20) var(--radius-20); }
  .sdr-cadre .kg-width-wide { width: 100%; max-width: none; }
}
@container sdr (max-width: 720px) { .sdr-art-grille { padding-top: 32px; } }


/* 4. Mise en page des gabarits */
/* ---------- Visibilité selon la largeur ---------- */
@container sdr (max-width: 720px) { .pg-desk { display: none !important; } }
@container sdr (min-width: 721px) { .pg-mob { display: none !important; } }
@container sdr (min-width: 1081px) { .pg-sous-menu { display: none !important; } }

/* ---------- Conteneurs ---------- */
.pg-page { max-width: var(--page); margin: 0 auto; }
.pg-section { padding: 0 72px 120px; }
.pg-h2 { margin: 0; font: 400 40px/1.1 var(--font-serif); color: var(--title); }
.pg-tete-liste { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.pg-bouton-bas { margin-top: 32px; }
.pg-nl { padding: 112px 72px; }
@container sdr (max-width: 720px) {
  .pg-section { padding: 0 20px 64px; }
  .pg-h2 { font-size: 30px; }
  .pg-tete-liste { margin-bottom: 24px; }
  .pg-nl { padding: 56px 20px; }
}

/* ---------- Ciel (étoiles fixes, jamais animées) ---------- */
.pg-ciel { position: absolute; inset: 0; pointer-events: none; }
.pg-ciel > span { position: absolute; }
.pg-ciel .pg-point { width: 2px; height: 2px; border-radius: 50%; background: var(--dot); opacity: .6; }
.pg-ciel .pg-point--or { width: 3px; height: 3px; background: var(--star); opacity: .8; }
.pg-ciel .sdr-pic { color: var(--star); opacity: .85; }

/* ---------- Accueil ---------- */
.pg-hero { position: relative; padding: 128px 72px 96px; text-align: center; overflow: hidden; }
.pg-hero h1 { position: relative; margin: 0 auto; max-width: 900px; font: 400 80px/1.04 var(--font-serif); color: var(--title); text-wrap: balance; }
.pg-hero p { position: relative; margin: 28px auto 0; max-width: 580px; font-size: 22px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.pg-univers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* Icône à gauche du nom, phrase en dessous, « Entrer » toujours en bas de la carte (cartes de même hauteur). */
.pg-u { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 14px; padding: 36px; border-radius: var(--radius-24); background: var(--surface); border: 1px solid var(--line); transition: border-color .2s; }
.pg-u > .sdr-pic { grid-column: 1; grid-row: 1; align-self: center; }
.pg-u-txt { display: contents; }
.pg-u-nom { grid-column: 2; grid-row: 1; align-self: center; }
.pg-u-phrase { grid-column: 1 / -1; grid-row: 2; }
.pg-u-go { grid-column: 1 / -1; grid-row: 3; align-self: end; }
.pg-u--reves:hover { border-color: var(--reves); } .pg-u--sommeil:hover { border-color: var(--sommeil); } .pg-u--journal:hover { border-color: var(--journal); }
.pg-u-nom { font: 400 32px/1.1 var(--font-serif); color: var(--title); }
.pg-u-phrase { font-size: 17px; line-height: 1.5; color: var(--soft); }
.pg-u-go { margin-top: 6px; font-size: 16px; line-height: 1.3; font-weight: 700; }
.pg-u--reves .pg-u-go { color: var(--reves); } .pg-u--sommeil .pg-u-go { color: var(--sommeil); } .pg-u--journal .pg-u-go { color: var(--journal); }
.pg-une { margin-bottom: 88px; }
.pg-qui { padding: 88px 72px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pg-qui-in { max-width: var(--wide); margin: 0 auto; display: flex; align-items: center; gap: 44px; }
.pg-qui .sdr-avatars .sdr-avatar { box-shadow: 0 0 0 3px var(--bg); }
.pg-qui .sdr-avatars .sdr-avatar + .sdr-avatar { margin-left: -18px; }
.pg-phrase { margin: 0; font: 400 25px/1.45 var(--font-serif); color: var(--title); text-wrap: pretty; }
.pg-qui .sdr-lien-fleche { margin-top: 14px; font-size: 16px; }
@container sdr (max-width: 720px) {
  .pg-hero { padding: 64px 22px 48px; }
  .pg-hero h1 { font-size: 44px; line-height: 1.06; }
  .pg-hero p { margin-top: 20px; font-size: 18px; }
  .pg-univers { grid-template-columns: 1fr; gap: 12px; }
  .pg-u { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; gap: 14px; padding: 20px; border-radius: var(--radius-20); }
  .pg-u > .sdr-pic { grid-column: 1; grid-row: 1; }
  .pg-u-txt { display: flex; flex-direction: column; gap: 4px; grid-column: 2; grid-row: 1; }
  .pg-u-nom, .pg-u-phrase { grid-column: auto; grid-row: auto; align-self: auto; }
  .pg-u-go { grid-column: 3; grid-row: 1; align-self: center; }
  .pg-u-nom { font-size: 22px; }
  .pg-u-phrase { font-size: 15px; line-height: 1.4; }
  .pg-u-go { margin: 0; }
  .pg-u-go-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pg-une { margin-bottom: 40px; }
  .pg-qui { padding: 48px 22px; }
  .pg-qui-in { flex-direction: column; align-items: flex-start; gap: 20px; }
  .pg-phrase { font-size: 20px; }
}

/* ---------- Titres de page (blog, thématiques, auteur, rubrique) ---------- */
.pg-titre { padding: 96px 72px 0; }
.pg-titre h1 { margin: 0; font: 400 64px/1.05 var(--font-serif); color: var(--title); text-wrap: balance; }
.pg-intro { margin: 18px 0 0; max-width: 620px; font-size: 20px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.pg-titre .sdr-filtres { margin-top: 32px; }
.pg-liste { padding: 64px 72px 0; }
.pg-liste .sdr-pagination { margin-top: 88px; }
@container sdr (max-width: 720px) {
  .pg-titre { padding: 48px 22px 0; }
  .pg-titre h1 { font-size: 38px; }
  .pg-intro { margin-top: 14px; font-size: 17px; }
  .pg-titre .sdr-filtres { margin: 24px -22px 0; padding: 0 22px 4px; }
  .pg-liste { padding: 28px 20px 0; }
  .pg-liste .sdr-pagination { margin-top: 40px; }
}

/* ---------- Thématiques ---------- */
.pg-th-hero { padding: 104px 72px 72px; text-align: center; }
.pg-th-hero h1 { margin: 0; font: 400 68px/1.05 var(--font-serif); color: var(--title); }
.pg-th-hero p { margin: 22px auto 0; max-width: 560px; font-size: 21px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.pg-th-liste { display: flex; flex-direction: column; gap: 24px; padding: 0 72px; }
.pg-th { width: 100%; max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; padding: 56px; border-radius: var(--radius-28); background: var(--surface); border: 1px solid var(--line); }
.pg-th-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pg-th-tete h2 { margin: 0; font: 400 50px/1.05 var(--font-serif); color: var(--title); }
.pg-th-tete > .sdr-pic { font-size: 28px; }
.pg-th-tete p { margin: 0; font-size: 19px; line-height: 1.65; color: var(--soft); text-wrap: pretty; }
.pg-th-tete .sdr-btn { margin-top: 4px; }
.pg-th-derniers .sdr-surtitre { display: block; margin-bottom: 8px; }
.pg-th-derniers .sdr-carte--compacte { padding: 16px 0; border-bottom: 1px solid var(--line2); }
.pg-th-derniers .sdr-carte--compacte .sdr-couv--compacte { height: 78px; border-radius: 32px 32px 10px 10px; }
.pg-th-derniers .sdr-carte--compacte { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; }
.pg-th-derniers .sdr-carte--compacte .sdr-carte-titre { font-size: 21px; line-height: 1.25; }
.pg-th-derniers .sdr-carte--compacte .sdr-tags { display: none; }
@container sdr (max-width: 720px) {
  .pg-th-hero { padding: 52px 22px 36px; text-align: left; }
  .pg-th-hero h1 { font-size: 40px; }
  .pg-th-hero p { margin-top: 16px; font-size: 18px; }
  .pg-th-liste { gap: 14px; padding: 0 16px; }
  .pg-th { grid-template-columns: 1fr; gap: 12px; padding: 26px 22px; border-radius: 22px; }
  .pg-th-tete { gap: 14px; }
  .pg-th-tete h2 { font-size: 32px; }
  .pg-th-tete > .sdr-pic { font-size: 20px; }
  .pg-th-tete p { font-size: 16px; line-height: 1.6; }
  .pg-th-tete .sdr-btn { display: none; }
  .pg-th-derniers .sdr-surtitre { display: none; }
  .pg-th-derniers .sdr-carte--compacte { display: block; padding: 12px 0; border-bottom: 0; border-top: 1px solid var(--line2); }
  .pg-th-derniers .sdr-carte--compacte .sdr-couv, .pg-th-derniers .sdr-carte--compacte .sdr-carte-meta { display: none; }
  .pg-th-derniers .sdr-carte--compacte .sdr-carte-titre { font-size: 17px; line-height: 1.3; }
  .pg-th-bouton-mob { display: block; margin-top: 12px; }
}
@container sdr (min-width: 721px) { .pg-th-bouton-mob { display: none; } }

/* ---------- Rubrique ---------- */
.pg-rub { padding: 88px 72px 0; }
.pg-rub-in { max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 72px; align-items: center; }
.pg-rub-texte > .sdr-pic { font-size: 28px; }
.pg-rub-texte h1 { margin: 20px 0 0; font: 400 68px/1.05 var(--font-serif); color: var(--title); }
.pg-rub-texte .pg-intro { max-width: 560px; font-size: 21px; }
.pg-rub-texte .pg-intro + .pg-intro { margin-top: 14px; }
.pg-rub-meta { margin-top: 24px; font-size: 15px; color: var(--muted); }
.pg-rub .sdr-couv--une { height: 420px; }
.pg-rub-legende { margin-top: 12px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); }
.pg-autres { padding: 0 72px 0; }
.pg-autres-in { max-width: var(--page); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.pg-autres-in .pg-phrase { font-size: 24px; }
.pg-autres-in .sdr-row { gap: 10px; flex-wrap: nowrap; }
@container sdr (max-width: 720px) {
  .pg-rub { padding: 32px 22px 0; }
  .pg-rub-in { grid-template-columns: 1fr; gap: 28px; }
  .pg-rub-texte > .sdr-pic { font-size: 20px; }
  .pg-rub-texte h1 { margin-top: 14px; font-size: 40px; }
  .pg-rub-texte .pg-intro { font-size: 17px; }
  .pg-rub .sdr-couv--une { height: 260px; border-radius: 175px 175px var(--radius-20) var(--radius-20); }
  .pg-rub-legende { font-size: 13px; }
  .pg-autres { padding: 0 22px; }
  .pg-autres-in { flex-direction: column; align-items: flex-start; padding: 24px 0; }
  .pg-autres-in .pg-phrase { font-size: 19px; }
  .pg-autres-in .sdr-row { flex-wrap: wrap; }
}

/* ---------- Page simple (À propos) ---------- */
/* Héros et texte dans le cadre commun du design system (.sdr-cadre) : texte aligné sur le titre. */
.pg-simple .sdr-art-hero { padding-top: 88px; }
.pg-simple .sdr-art-tete h1 { margin-top: 0; }
.pg-simple-corps { padding-top: 72px; }
.pg-simple-corps:not(.sdr-cadre) { padding-left: 72px; padding-right: 72px; }
@container sdr (max-width: 900px) { .pg-simple .sdr-art-hero { padding-top: 40px; } }
@container sdr (max-width: 720px) {
  .pg-simple-corps { padding-top: 32px; }
  .pg-simple-corps:not(.sdr-cadre) { padding-left: 22px; padding-right: 22px; }
}

/* ---------- Page auteur ---------- */
.pg-auteur { padding: 96px 72px 0; text-align: center; }
.pg-auteur .sdr-avatar--80 { width: 120px; height: 120px; font-size: 38px; }
.pg-auteur .sdr-surtitre { display: block; margin-top: 24px; }
.pg-auteur h1 { margin: 10px 0 0; font: 400 64px/1.05 var(--font-serif); color: var(--title); }
.pg-auteur .pg-intro { margin: 18px auto 0; max-width: 600px; }
.pg-auteur .sdr-row { justify-content: center; margin-top: 24px; gap: 10px; }
.pg-auteur-meta { margin-top: 20px; font-size: 15px; color: var(--muted); }
.pg-sous-titre { max-width: var(--page); margin: 0 auto 40px; padding-top: 40px; border-top: 1px solid var(--line2); }
.pg-sous-titre h2 { margin: 0; font: 400 34px/1.2 var(--font-serif); color: var(--title); }
@container sdr (max-width: 720px) {
  .pg-auteur { padding: 48px 22px 0; text-align: left; }
  .pg-auteur .sdr-avatar--80 { width: 88px; height: 88px; font-size: 28px; }
  .pg-auteur .sdr-surtitre { margin-top: 18px; }
  .pg-auteur h1 { font-size: 40px; }
  .pg-auteur .pg-intro { margin-left: 0; }
  .pg-auteur .sdr-row { justify-content: flex-start; }
  .pg-sous-titre { margin-bottom: 24px; padding-top: 28px; }
  .pg-sous-titre h2 { font-size: 26px; }
}

/* ---------- Erreur 404 ---------- */
.pg-404 { position: relative; padding: 128px 72px 112px; text-align: center; overflow: hidden; }
.pg-404 .sdr-surtitre { position: relative; display: block; }
.pg-404 h1 { position: relative; margin: 18px auto 0; max-width: 760px; font: 400 64px/1.08 var(--font-serif); color: var(--title); text-wrap: balance; }
.pg-404 p { position: relative; margin: 22px auto 0; max-width: 560px; font-size: 20px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.pg-404 .sdr-row { position: relative; justify-content: center; margin-top: 32px; gap: 10px; }
@container sdr (max-width: 720px) {
  .pg-404 { padding: 64px 22px 56px; text-align: left; }
  .pg-404 h1 { font-size: 36px; }
  .pg-404 p { font-size: 17px; }
  .pg-404 .sdr-row { justify-content: flex-start; }
}


/* 5. Adaptations à Ghost */
/* =====================================================================
   Adaptations au HTML que produit Ghost
   ===================================================================== */

html { background: var(--bg); scroll-padding-top: 24px; }
body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
.sdr-site { min-height: 100vh; display: flex; flex-direction: column; }
.sdr-site > main { flex: 1; }
img { max-width: 100%; height: auto; }
.sdr-avatar img { display: block; }

/* Univers : le slug de l'étiquette Ghost est « journaling », le design system dit « journal » */
.sdr-tag--journaling { color: var(--journal); }
.sdr-pic--journaling { color: var(--journal); }
.sdr-entete-nav > a.sdr-nav--journaling[aria-current] { color: var(--journal); }
.sdr-univers-barre a[aria-current].sdr-nav--journaling { background: var(--surface); border-color: var(--journal); color: var(--journal); }
.sdr-btn--journaling { color: var(--journal); }
.pg-u--journaling:hover { border-color: var(--journal); } .pg-u--journaling .pg-u-go { color: var(--journal); }
.sdr-ariane--journaling { color: var(--journal); font-weight: 700; }
.sdr-ariane--reves { color: var(--reves); font-weight: 700; } .sdr-ariane--sommeil { color: var(--sommeil); font-weight: 700; }

/* Navigation de Ghost : l'élément en cours est marqué par Ghost avec la classe nav-current */
.sdr-entete-nav > a.nav-current { color: var(--accent); font-weight: 700; }
.sdr-entete-nav > a.sdr-nav--reves.nav-current { color: var(--reves); }
.sdr-entete-nav > a.sdr-nav--sommeil.nav-current { color: var(--sommeil); }
.sdr-entete-nav > a.sdr-nav--journaling.nav-current { color: var(--journal); }

/* ---------- Cartes : couvertures avec ou sans image ---------- */
.sdr-couv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sdr-couv--vide { display: block; }

/* Cartes standard : sur mobile, elles prennent la forme compacte (petite arche à gauche) */
@container sdr (max-width: 720px) {
  .sdr-grille { gap: 28px; }
  .sdr-grille .sdr-carte { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: start; }
  .sdr-grille .sdr-carte > .sdr-couv { grid-row: 1 / span 3; height: 112px; border-radius: 46px 46px var(--radius-12) var(--radius-12); align-self: center; }
  .sdr-grille .sdr-carte > .sdr-couv .sdr-couv-label { display: none; }
  .sdr-grille .sdr-carte .sdr-tags { align-self: end; }
  .sdr-grille .sdr-carte .sdr-tag { font-size: 13px; gap: 6px; } .sdr-grille .sdr-carte .sdr-tag .sdr-pic { font-size: 10px; }
  .sdr-grille .sdr-carte .sdr-carte-titre { font-size: 18px; line-height: 1.3; }
  .sdr-grille .sdr-carte .sdr-carte-meta { font-size: 13px; align-self: start; }
}

/* ---------- Article : texte de Ghost ---------- */
.gh-content > p:first-child { font-size: 23px; line-height: 1.6; color: var(--title); }
@container sdr (max-width: 720px) { .gh-content > p:first-child { font-size: 20px; line-height: 1.55; } }
.gh-content h2, .gh-content h3 { scroll-margin-top: 24px; }
.sdr-art-figure { margin: 0; }
.sdr-couv--article img { border-radius: inherit; }
.sdr-signature-nom a:hover { color: var(--accent); }

/* Sommaire : colonne à droite (au-dessus de 1 200 px), bloc repliable sous le premier paragraphe (en dessous).
   Largeurs et colonnes : cadre commun du design system (.sdr-cadre). */
.pg-toc-col:empty { display: none; }
.pg-toc-repli { margin: 28px 0 0; }
/* Le bloc est glissé dans le texte : on neutralise les numéros, retraits et soulignés des listes et liens du texte. */
.sdr-prose .pg-toc-repli .sdr-toc-bloc ol { margin: 0; padding: 0 18px 12px; counter-reset: none; }
.sdr-prose .pg-toc-repli .sdr-toc-bloc li { margin: 0; padding: 0; }
.sdr-prose .pg-toc-repli .sdr-toc-bloc li::before { content: none; }
.sdr-prose .pg-toc-repli .sdr-toc-bloc ol a,
.sdr-prose .pg-toc-repli .sdr-toc-bloc ol a:visited { color: var(--title); text-decoration: none; }
.sdr-prose .pg-toc-repli .sdr-toc-bloc ol a:hover { color: var(--accent); text-decoration: none; }
.pg-toc-repli + * { margin-top: 40px; }
@container sdr (max-width: 1200px) { .sdr-art-grille > .pg-toc-col { display: none; } }
@container sdr (min-width: 1201px) { .pg-toc-repli { display: none !important; } }

/* Fin d'article : même cadre, colonne de gauche */
.pg-art-fin { padding-top: 72px; row-gap: 56px; }
.pg-art-lies { padding-top: 112px; }
@container sdr (max-width: 1200px) { .pg-art-fin { padding-top: 64px; } .pg-art-lies { padding-top: 88px; } }
@container sdr (max-width: 720px) { .pg-art-fin { padding-top: 52px; row-gap: 44px; } .pg-art-lies { padding-top: 64px; } }
.sdr-commentaires { padding-top: 40px; }
.sdr-commentaires h2 { margin-bottom: 8px; }

/* ---------- Cartes de l'éditeur : encadré ----------
   Ghost écrit : <div class="kg-callout-card kg-callout-card-blue"><div class="kg-callout-emoji">…</div>
   <div class="kg-callout-text"><strong>Le savais-tu ?</strong><br>Texte…</div></div>
   Le premier gras devient le titre, précédé de l'étoile dorée. */
.kg-callout-card .kg-callout-emoji { display: none; }
.kg-callout-card .kg-callout-text { margin-top: 0; }
.kg-callout-text > :is(strong, b):first-child { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 400 21px/1.25 var(--font-serif); color: var(--accent); }
.kg-callout-text > :is(strong, b):first-child :is(strong, b, span) { font: inherit; color: inherit; }
.kg-callout-text > :is(strong, b):first-child::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--star); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.kg-callout-text > :is(strong, b):first-child + br { display: none; }
.kg-callout-card-blue .kg-callout-text > :is(strong, b):first-child { color: var(--sommeil); }
.kg-callout-card-purple .kg-callout-text > :is(strong, b):first-child { color: var(--reves); }
.kg-callout-card-green .kg-callout-text > :is(strong, b):first-child { color: var(--journal); }
.kg-callout-card-grey, .kg-callout-card-white { border-color: var(--line2); }
.kg-callout-card-accent { border-color: var(--accent); }
.kg-callout-card-red, .kg-callout-card-pink { border-color: var(--error); }
@container sdr (max-width: 720px) { .kg-callout-text > :is(strong, b):first-child { font-size: 19px; margin-bottom: 12px; } }

/* ---------- Déroulant (FAQ) : icône + / − à la place du chevron de Ghost ---------- */
.kg-toggle-heading { cursor: pointer; }
.kg-toggle-card-icon svg { display: none; }
.kg-toggle-card-icon::before { content: "+"; }
.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon::before { content: "−"; }
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content { display: none; }
.gh-content h2 + .kg-toggle-card { margin-top: 20px; }

/* ---------- Bouton (carte) ---------- */
.kg-button-card { display: flex; }
.kg-button-card.kg-align-left { justify-content: flex-start; }
.kg-btn-accent { background: var(--btn-bg); color: var(--btn-fg) !important; }
.kg-button-card.kg-align-center { justify-content: center; }
.kg-btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 28px; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg) !important; font: 700 17px/1 var(--font-sans); text-decoration: none !important; transition: background-color .2s; }
.kg-btn:hover { background: var(--btn-hover); }

/* ---------- Signet : image et favicon fournis par Ghost ---------- */
.kg-bookmark-thumbnail { position: relative; min-height: 100%; background: var(--cover-bg); }
.kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kg-bookmark-author, .kg-bookmark-publisher { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-bookmark-publisher + .kg-bookmark-author::before, .kg-bookmark-author + .kg-bookmark-publisher::before { content: "·"; margin: 0 6px; }
.kg-bookmark-icon { width: 18px; height: 18px; margin-right: 8px; vertical-align: middle; }

/* ---------- Fichier ---------- */
.kg-file-card-contents { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kg-file-card-metadata { display: flex; flex-wrap: wrap; gap: 8px; }
.kg-file-card-filename { font-weight: 700; color: var(--text); }
.kg-file-card-filesize::before { content: "·"; margin-right: 8px; }
.kg-file-card-small .kg-file-card-caption { display: none; }
.kg-file-card-medium .kg-file-card-title { font-size: 19px; }
.kg-file-card-icon svg { width: 20px; height: 20px; color: var(--accent); }

/* ---------- Tableaux importés (carte HTML) ---------- */
.gh-content .table-scroll { overflow-x: auto; border: 1px solid var(--line2); border-radius: var(--radius-16); }
.gh-content .table-scroll table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
.gh-content .table-scroll th { background: var(--surface); color: var(--title); font-weight: 700; text-align: left; }
.gh-content .table-scroll th, .gh-content .table-scroll td { padding: 14px 18px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.gh-content .table-scroll tr:last-child td { border-bottom: 0; }
@container sdr (max-width: 720px) { .gh-content .table-scroll table { font-size: 15px; min-width: 520px; } .gh-content .table-scroll th, .gh-content .table-scroll td { padding: 12px 14px; } }

/* ---------- Cartes laissées au style de Ghost : on y reporte nos couleurs ---------- */
:root { --ghost-accent-color: var(--accent); }
.kg-header-card, .kg-signup-card, .kg-cta-card, .kg-product-card-container, .kg-audio-card, .kg-video-card { font-family: var(--font-sans); }
.kg-header-card h2, .kg-signup-card h2, .kg-product-card-title { font-family: var(--font-serif); font-weight: 400; }
.kg-product-card-container { background: var(--surface) !important; border: 1px solid var(--line2) !important; border-radius: var(--radius-24) !important; color: var(--text) !important; }
.kg-audio-card { background: var(--surface) !important; border: 1px solid var(--line2) !important; border-radius: var(--radius-16) !important; box-shadow: none !important; color: var(--text) !important; }

/* ---------- Formulaire d'inscription Ghost (data-members-form) ---------- */
.sdr-form .sdr-form-message, .sdr-form .sdr-form-succes { display: none; }
.sdr-form.error .sdr-form-message--erreur { display: flex; }
.sdr-form.error .sdr-champ { border-color: var(--error); border-width: 2px; padding-left: 21px; }
.sdr-form.success .sdr-form-ligne { display: none; }
.sdr-form.success .sdr-form-succes { display: flex; }
.sdr-form .sdr-spin { display: none; }
.sdr-form.loading .sdr-spin { display: inline-block; }
.sdr-form.loading .sdr-btn { cursor: progress; }

/* ---------- Menu mobile plein écran (hors du conteneur, au-dessus de tout) ---------- */
.sdr-menu-ecran { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
.sdr-menu-ecran[hidden] { display: none; }
.sdr-menu-ecran .sdr-menu { min-height: 100%; }
.sdr-menu-ecran a { color: inherit; text-decoration: none; }
html.sdr-menu-ouvert { overflow: hidden; }
@media (min-width: 1201px) { .sdr-menu-ecran { display: none !important; } }

/* ---------- Messages de confirmation (après inscription, connexion) ---------- */
.sdr-notif-place[hidden] { display: none; }
.sdr-notif-place .sdr-notif { width: min(460px, calc(100vw - 32px)); }

/* ---------- Pagination de Ghost ---------- */
.sdr-pagination .sdr-btn { text-decoration: none; }

/* ---------- Page simple : contenu HTML de la page À propos ---------- */
.sdr-prose ol.sdr-frise { list-style: none; padding: 0; margin: 28px 0 0; border-left: 1px solid var(--line2); }
.sdr-prose ol.sdr-frise > li { display: flex; flex-direction: column; gap: 6px; position: relative; margin: 0; padding: 0 0 32px 32px; }
.sdr-prose ol.sdr-frise > li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; background: var(--star); transform: rotate(45deg); }
.sdr-prose ol.sdr-frise > li:last-child { padding-bottom: 0; }
.sdr-frise-date { font: 700 13px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.sdr-frise-titre { font: 400 24px/1.25 var(--font-serif); color: var(--title); }
.sdr-frise-texte { font-size: 18px; line-height: 1.6; color: var(--soft); }
.sdr-equipe { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.sdr-membre { display: flex; gap: 24px; align-items: flex-start; padding: 32px; border-radius: var(--radius-24); background: var(--surface); }
.sdr-membre img { flex: none; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.sdr-prose .sdr-membre p { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: var(--soft); }
.sdr-membre-nom { margin-top: 6px; font: 400 26px/1.1 var(--font-serif); color: var(--title); }
.sdr-prose .sdr-membre .sdr-membre-citation { margin-top: 14px; font: 400 19px/1.45 var(--font-serif); color: var(--title); }
.sdr-valeurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.sdr-valeur { padding: 24px; border-radius: var(--radius-20); border: 1px solid var(--line2); }
.sdr-valeur-nom { font: 400 22px/1.2 var(--font-serif); color: var(--title); }
.sdr-valeur-nom::before { content: ""; display: block; width: 14px; height: 14px; margin-bottom: 12px; background: var(--star); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.sdr-prose .sdr-valeur p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--soft); }
@container sdr (max-width: 720px) {
  .sdr-prose ol.sdr-frise > li { padding-left: 24px; }
  .sdr-frise-titre { font-size: 21px; } .sdr-frise-texte { font-size: 16px; }
  .sdr-membre { flex-direction: column; gap: 14px; padding: 24px 22px; border-radius: var(--radius-20); }
  .sdr-membre img { width: 60px; height: 60px; }
  .sdr-prose .sdr-membre p { font-size: 16px; }
  .sdr-valeurs { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Impression ---------- */
@media print {
  .sdr-entete, .sdr-univers-barre, .sdr-pied, .pg-nl, .sdr-partage, .sdr-commentaires, .pg-art-lies, .pg-toc-col, .pg-toc-repli { display: none !important; }
}

/* ---------- Compléments ---------- */
.pg-rub-in--seul { grid-template-columns: minmax(0, 1fr); }
.sdr-menu-ecran *, .sdr-notif-place * { box-sizing: border-box; }
.sdr-menu-ecran :focus-visible, .sdr-notif-place :focus-visible, .sdr-skip:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.sdr-notif-place { font-family: var(--font-sans); }
.sdr-newsletter > .sdr-pic { font-size: 20px; }
.sdr-form-succes .sdr-pic { font-size: 18px; }
.sdr-avatar > span[data-initiale] { line-height: 1; }

/* ---------- Commentaires Ghost ----------
   L'appli de commentaires s'affiche dans un cadre (iframe) dont la page interne est en schéma clair.
   Si le cadre lui-même est en schéma sombre, le navigateur le peint en blanc (et le texte clair devient
   invisible). « normal » ne suffit pas : avec la balise meta color-scheme « dark light », il suit le
   mode du téléphone. On force donc « light » sur le cadre : les deux schémas concordent, le fond reste
   transparent, nuit comme jour. L'appli choisit seule ses couleurs d'après la couleur du texte autour d'elle. */
.sdr-commentaires { color: var(--text); }
.sdr-commentaires iframe { color-scheme: light !important; background: transparent !important; }

/* ==========================================================================
   Pages en sections (page.hbs) : À propos, Contact, Mentions légales, Confidentialité…
   Chaque H2 de l'éditeur ouvre une section : titre à gauche, texte à droite.
   Le script de page.hbs range le contenu ; sans lui, la page reste sur une colonne.
   ========================================================================== */
.px-etoiles { position: relative; height: 200px; }
.px-sections { max-width: none; margin: 0; }
.px-sections.sdr-prose { max-width: 680px; }
.px-intro { padding-bottom: 56px; }
.px-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px); column-gap: 72px; align-items: start; padding: 56px 0; border-top: 1px solid var(--line2); }
.px-sec > h2 { margin: 0; max-width: 400px; font: 400 34px/1.15 var(--font-serif); color: var(--title); text-wrap: balance; }
.px-sec-corps { min-width: 0; }
.px-sec-corps.sdr-prose > :first-child { margin-top: 0; }
/* Dans une section, le premier paragraphe n'est pas un chapô */
.px-sec-corps.gh-content > p:first-child { font-size: inherit; line-height: inherit; color: inherit; }
.px-sec-corps.sdr-prose > blockquote:last-child { margin-bottom: 0; }
.px-sec-corps.sdr-prose > h3 + blockquote, .px-sec-corps.sdr-prose > p + blockquote { margin-top: 32px; }
.px-sec-corps.sdr-prose > blockquote { margin-bottom: 40px; font-size: 24px; text-align: left; }
.px-sec-corps.sdr-prose > blockquote::before { margin-left: 0; }
.px-fin { height: 56px; }

/* Frise : liste numérotée, « titre en gras » puis texte */
.sdr-prose ol.px-frise { counter-reset: none; border-left: 1px solid var(--line2); }
.sdr-prose ol.px-frise > li { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 0 32px 32px; counter-increment: none; }
.sdr-prose ol.px-frise > li:last-child { padding-bottom: 0; }
.sdr-prose ol.px-frise > li::before { content: ""; left: -5px; top: 9px; width: 9px; height: 9px; background: var(--star); transform: rotate(45deg); font-size: 0; }
.sdr-prose .px-frise-titre { font: 400 24px/1.25 var(--font-serif); color: var(--title); }
.sdr-prose .px-frise-texte { font-size: 18px; line-height: 1.6; color: var(--soft); }

/* Fiche : liste à puces, « libellé en gras » puis valeur */
.sdr-prose ul.px-fiche { padding: 6px 28px; border-radius: var(--radius-20); background: var(--surface); border: 1px solid var(--line); }
.sdr-prose ul.px-fiche > li { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 20px; margin: 0; padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.5; color: var(--title); }
.sdr-prose ul.px-fiche > li:first-child { border-top: 0; }
.sdr-prose ul.px-fiche > li::before { content: none; }
.sdr-prose ul.px-fiche .px-fiche-nom { font-weight: 400; font-size: 15px; line-height: 1.7; color: var(--muted); }
.sdr-prose ul.px-fiche + p { margin-top: 24px; }

@container sdr (max-width: 1000px) {
  .px-sec { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .px-sec > h2 { max-width: none; }
  .px-sec-corps.sdr-prose { max-width: 680px; }
}
@container sdr (max-width: 900px) { .px-etoiles { display: none; } }
@container sdr (max-width: 720px) {
  .px-intro { padding-bottom: 36px; }
  .px-sec { padding: 36px 0; row-gap: 16px; }
  .px-sec > h2 { font-size: 27px; }
  .px-sec-corps.sdr-prose > blockquote { font-size: 21px; }
  .sdr-prose ol.px-frise > li { padding-left: 24px; }
  .sdr-prose .px-frise-titre { font-size: 21px; }
  .sdr-prose .px-frise-texte { font-size: 16px; }
  .sdr-prose ul.px-fiche { padding: 4px 20px; }
  .sdr-prose ul.px-fiche > li { grid-template-columns: minmax(0, 1fr); padding: 12px 0; font-size: 16px; }
  .sdr-prose ul.px-fiche .px-fiche-nom { font-size: 14px; }
  .px-fin { height: 24px; }
}

/* Formulaire d'inscription avec prénom : prénom, email, bouton */
.sdr-form--prenom { max-width: 720px; }
.sdr-champ--prenom { flex: 0 1 190px; }
.sdr-form.error .sdr-champ--prenom, .sdr-form.is-erreur .sdr-champ--prenom { border-color: var(--field-line); border-width: 1px; padding-left: 22px; }
@container sdr (max-width: 720px) { .sdr-champ--prenom { flex: none; } }