/* ==========================================================================
   Entre Deux Dates — feuille de style
   Mise en page : une seule colonne de lecture (48rem max), l'outil en tête,
   le résultat présenté comme une feuille d'éphéméride (bandeau rouge,
   grand chiffre). Dimanches et jours fériés en rouge, comme sur un calendrier.
   Aucune police externe : polices système uniquement (rapidité).
   ========================================================================== */

:root {
  --paper: #f4f6f9;
  --surface: #ffffff;
  --ink: #18202d;
  --muted: #566073;
  --line: #d8dde6;
  --red: #c42433;
  --on-red: #ffffff;
  --red-soft: #fbe9eb;
  --link: #1f4aa8;
  --tint: #eef1f6;
  --focus: #1f4aa8;
  --ok: #1b7443;
  --shadow: rgba(24, 32, 45, 0.18);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10141b;
    --surface: #181e28;
    --ink: #e6eaf1;
    --muted: #9ea8b9;
    --line: #2b3342;
    --red: #f0646d;
    --on-red: #1b0b0e;
    --red-soft: #3a1d23;
    --link: #93b1ff;
    --tint: #1e2531;
    --focus: #93b1ff;
    --ok: #62c98f;
    --shadow: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #10141b;
  --surface: #181e28;
  --ink: #e6eaf1;
  --muted: #9ea8b9;
  --line: #2b3342;
  --red: #f0646d;
  --on-red: #1b0b0e;
  --red-soft: #3a1d23;
  --link: #93b1ff;
  --tint: #1e2531;
  --focus: #93b1ff;
  --ok: #62c98f;
  --shadow: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.6 var(--font-body);
}
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--tint); padding: 0.1em 0.35em; border-radius: 4px; }
strong { font-weight: 650; }

.wrap { max-width: 48rem; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 40rem) { .wrap { padding-inline: 24px; } }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 6px; }
.skip:focus { left: 16px; }

/* ---------- En-tête ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; letter-spacing: -0.005em; }
.brand svg { width: 34px; height: 34px; flex: none; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; cursor: pointer; user-select: none; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.lang-menu[open] summary { border-color: var(--ink); }
.lang-menu[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 11rem; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 30px -14px var(--shadow); }
.lang-menu li + li { margin-top: 0; }
.lang-menu a { display: block; padding: 10px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.lang-menu a:hover { background: var(--tint); }
.lang-menu a[aria-current] { background: var(--tint); font-weight: 700; }

.tools-nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: -4px; }
.tools-nav::-webkit-scrollbar { display: none; }
.tools-nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0 4px 12px; white-space: nowrap; }
.tools-nav li + li { margin-top: 0; }
@media (min-width: 40rem) { .tools-nav ul { flex-wrap: wrap; } }
.tools-nav a { display: block; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 0.9rem; line-height: 1.4; }
.tools-nav a:hover { border-color: var(--ink); }
.tools-nav a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- Typographie ---------- */
main { padding-block: 28px 56px; }
h1, h2, .foot-brand { font-family: var(--font-display); text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 6.4vw, 2.7rem); line-height: 1.12; margin: 0 0 0.45em; letter-spacing: -0.012em; }
.lead { font-size: 1.1rem; color: var(--muted); margin: 0 0 1.6rem; max-width: 62ch; }
h2 { font-size: clamp(1.35rem, 4.4vw, 1.6rem); line-height: 1.25; margin: 2.4em 0 0.6em; }
h3 { font-size: 1.06rem; line-height: 1.35; margin: 1.7em 0 0.4em; }
p, li { max-width: 68ch; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li + li { margin-top: 0.3em; }
.updated { color: var(--muted); font-size: 0.92rem; }
.formula { font-family: var(--font-mono); font-size: 0.95rem; background: var(--tint); padding: 12px 14px; border-radius: 8px; overflow-x: auto; }
.note { background: var(--tint); padding: 12px 16px; border-radius: 8px; font-size: 0.97rem; }

/* ---------- Outil ---------- */
.tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 18px; box-shadow: 0 10px 24px -22px var(--shadow); }
@media (min-width: 40rem) { .tool { padding: 24px; } }
.fields { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { min-width: 0; }
.field > label, .field > .label { display: block; font-weight: 600; font-size: 0.93rem; margin-bottom: 6px; }
.hint { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 5px; }
.row { display: flex; gap: 8px; }
.row > input, .row > select { flex: 1 1 auto; }

input[type="date"], input[type="text"], select {
  width: 100%; min-width: 0; min-height: 46px;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px;
}
input[type="date"] { font-variant-numeric: tabular-nums; }
input:hover, select:hover { border-color: var(--muted); }
input[aria-invalid="true"] { border-color: var(--red); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 8px 14px;
  font: inherit; font-size: 0.93rem; font-weight: 600; white-space: nowrap;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.btn:hover { border-color: var(--ink); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-small { min-height: 38px; padding: 6px 12px; font-size: 0.88rem; }
.btn[aria-pressed="true"] { background: var(--red-soft); border-color: var(--red); }

.options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.check { display: inline-flex; align-items: center; gap: 9px; font-size: 0.96rem; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--red); flex: none; }

.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 28rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); }
.seg label { position: relative; cursor: pointer; display: grid; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; text-align: center; min-height: 46px; padding: 8px 10px; font-size: 0.93rem; font-weight: 600; line-height: 1.25; color: var(--muted); }
.seg small { display: block; font-size: 0.78rem; font-weight: 500; white-space: nowrap; opacity: 0.85; }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.seg label + label span { border-left: 1px solid var(--line); }

.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.tool + .tool { margin-top: 16px; }
.tool-title { margin: 0; font-size: 1.2rem; }

/* ---------- Résultat : feuille d'éphéméride ---------- */
.result {
  display: grid; gap: 14px 18px;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  grid-template-areas: "sheet summary" "details details" "actions actions";
  align-items: start;
  border-top: 1px solid var(--line); padding-top: 18px;
}
@media (min-width: 36rem) {
  .result { grid-template-columns: 10rem minmax(0, 1fr); grid-template-areas: "sheet summary" "sheet details" "sheet actions"; }
}
.sheet { grid-area: sheet; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-align: center; box-shadow: 0 1px 0 var(--line), 0 12px 18px -16px var(--shadow); }
.sheet-top {
  position: relative; background: var(--red); color: var(--on-red);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 6px 9px; line-height: 1.2;
}
/* perforation de la feuille détachable */
.sheet-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 6px;
  background: radial-gradient(circle at 5px 3px, var(--surface) 2px, transparent 2.6px) 0 0 / 10px 6px repeat-x;
}
.sheet-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.9rem, 13vw, 3.9rem); line-height: 1.05;
  padding: 12px 6px 0; font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: anywhere;
}
.sheet-unit { color: var(--muted); font-size: 0.95rem; padding: 2px 6px 12px; line-height: 1.3; }
.summary { grid-area: summary; min-width: 0; }
.sentence { font-size: 1.04rem; margin: 0; }
.sentence strong { font-weight: 700; }
.live { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.details { grid-area: details; margin: 0; min-width: 0; }
.details div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.details div:last-child { border-bottom: 0; }
.details dt { color: var(--muted); font-size: 0.94rem; }
.details dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.status { font-size: 0.9rem; color: var(--ok); }
.error { color: var(--red); font-weight: 600; }
.holiday-list { margin: 4px 0 0; padding-left: 1.1em; font-size: 0.92rem; color: var(--muted); }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin: 0 0 1.2em; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
caption { caption-side: top; text-align: left; padding: 12px 14px 4px; font-weight: 650; }
th, td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
thead th { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); background: var(--paper); white-space: nowrap; }
.num { text-align: right; white-space: nowrap; }
.nowrap { white-space: nowrap; }
tr.is-red td.when, td.is-red { color: var(--red); font-weight: 600; }
tr.is-current { background: var(--red-soft); }
tfoot td, tfoot th { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; }
.table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.table-tools label { font-weight: 600; font-size: 0.93rem; }
.table-tools select { width: auto; min-width: 7rem; }

/* ---------- Autres outils ---------- */
.tool-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tool-links li + li { margin-top: 0; }
.tool-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-decoration: none; }
.tool-links a:hover { border-color: var(--ink); }
.tool-links strong { font-family: var(--font-display); font-size: 1.08rem; }
.tool-links span { grid-column: 1; color: var(--muted); font-size: 0.92rem; }
.tool-links a::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; color: var(--red); font-size: 1.2rem; }

/* ---------- Publicité (emplacements réservés) ---------- */
.ad-slot { margin-block: 30px; display: grid; gap: 4px; }
.ad-label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ad-slot ins.adsbygoogle { display: block; min-height: 280px; }
@media (min-width: 48rem) { .ad-slot ins.adsbygoogle { min-height: 250px; } }
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.93rem; }
.foot-grid { display: grid; gap: 22px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 30px 18px; }
.foot-about { grid-column: 1 / -1; }
@media (min-width: 44rem) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; } .foot-about { grid-column: auto; } }
.foot-brand { color: var(--ink); font-weight: 700; font-size: 1.15rem; margin: 0 0 6px; }
.foot-h { font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.site-footer li + li { margin-top: 0; }
.site-footer a, .linkbtn { color: var(--ink); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
.foot-legal { border-top: 1px solid var(--line); padding-block: 14px 22px; font-size: 0.86rem; }
.foot-legal p { margin: 0; max-width: none; }
.site-footer .foot-langs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; }
.foot-langs a[aria-current] { font-weight: 700; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header nav, .ad-slot, .site-footer, .actions, .icon-btn, .lang-menu { display: none !important; }
  body { background: #fff; color: #000; }
}