@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,600;6..96,700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --ink: #1b332c;
  --muted: #637167;
  --paper: #f4f0e5;
  --surface: #fffdf7;
  --surface-soft: #e8e1cf;
  --line: rgba(27, 51, 44, .17);
  --coral: #e3462c;
  --ochre: #177a74;
  --button-shadow: #f28c28;
  --shadow: 8px 8px 0 var(--ochre), 16px 16px 0 var(--ink);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }

body {
  min-width: 320px;
  min-height: 100vh;
  padding: 25px 24px 72px;
  color: var(--ink);
  background: var(--paper) !important;
  font-family: "Space Grotesk", Arial, sans-serif;
  line-height: 1.55;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
}

/* Une couleur assumée par univers, sans modifier les contenus. */
.page-citations { --ochre: #e3462c; --coral: #ffc400; }
.page-notide { --ochre: #177a74; --coral: #f05f79; }
.page-films { --ochre: #7055bb; --coral: #ffc400; }
.page-larousse { --ochre: #bf7618; --coral: #167fa8; }
.page-littre { --ochre: #167fa8; --coral: #e3462c; }
.page-recherche { --ochre: #cc3f6b; --coral: #ffc400; }

body[class^="page-"]::after {
  position: fixed;
  z-index: -2;
  right: -140px;
  bottom: -170px;
  width: 390px;
  height: 390px;
  border: 24px solid var(--ink);
  border-radius: 50%;
  background: var(--ochre);
  box-shadow: -36px -36px 0 var(--coral);
  content: "";
  transform: rotate(-11deg);
}

a { color: inherit; text-underline-offset: .2em; }
a:hover { color: var(--coral); }

.wrap { width: min(1080px, 100%); margin: 0 auto; }
.top-home { display: flex; justify-content: center; margin: 0 auto 24px; }
.home-link {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink) !important;
  background: var(--ochre);
  box-shadow: 4px 4px 0 var(--button-shadow);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.home-link:hover { color: var(--ink) !important; border-radius: 35% 65% 40% 60%; box-shadow: -4px 4px 0 var(--button-shadow); text-decoration: none; transform: translate(3px, 2px) rotate(-7deg); }

h1, h2, h3, .page-title, .title {
  color: var(--ink) !important;
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 500;
  letter-spacing: -.055em;
}
h1, .page-title {
  margin: 0 0 31px;
  text-align: center;
  font-size: clamp(3.3rem, 9vw, 6.8rem) !important;
  line-height: .84;
}
h1::after, .page-title::after { display: block; width: 58px; height: 5px; margin: 18px auto 0; background: var(--coral); content: ""; }
h2 { margin: 0 0 12px; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; }
h3 { font-size: 1.25rem; }

.card, .panel, form.search-box, .search, .item, .result-item {
  border: 1px solid var(--line) !important;
  border-radius: 14px 3px 14px 3px !important;
  background: var(--surface) !important;
}
.card, .panel, .item { padding: clamp(18px, 3vw, 29px); }
.card { margin-bottom: 18px; }
.panel { margin-bottom: 18px; }
.panel, .page-larousse .wrap > .card:first-of-type, .page-littre form, .page-notide .wrap > .card:first-of-type { box-shadow: var(--shadow); }

form, .formline, .field, .row, .actions, .options, .check, .toggle, .topline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
form { padding: 22px; }
.card > form, .panel > form { padding: 0; border: 0; background: transparent; }
form.search-box, .search { padding: 22px !important; }
.field, .formline { width: 100%; }

input, select, textarea, button, .btn, a.btn, .pbtn, .read-more, .modal-close, .modal .close { font: inherit; }
input[type="text"], select, textarea {
  min-width: min(100%, 190px);
  padding: 13px 14px;
  border: 1px solid rgba(27, 51, 44, .35);
  border-radius: 0;
  outline: none;
  color: var(--ink);
  background: #fff;
  font-family: "DM Mono", monospace;
  font-size: .9rem;
}
.field input[type="text"], .formline input[type="text"], form > input[type="text"] { flex: 1 1 350px; }
input::placeholder { color: #8a978d; }
input:focus, select:focus, textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(216, 95, 67, .16); }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--coral); }

button, .btn, a.btn, .pbtn, .read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  background: var(--ochre) !important;
  box-shadow: 4px 5px 0 var(--button-shadow);
  font-family: "DM Mono", monospace;
  font-size: .75rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-radius .16s ease;
  cursor: pointer;
}
button:hover, .btn:hover, a.btn:hover, .pbtn:hover, .read-more:hover { color: var(--ink) !important; border-radius: 3px 16px 3px 16px !important; box-shadow: -5px 5px 0 var(--button-shadow); text-decoration: none; transform: translate(4px, 1px) rotate(-1.2deg); }
.btn.secondary, .btn-secondary, a.btn.secondary { background: var(--surface-soft) !important; }
.btn-random { margin-left: auto; background: #efe8d8 !important; }
.btn.disabled, a.btn.disabled, .pbtn.disabled, [aria-disabled="true"] { pointer-events: none; opacity: .48; }
.option-inline, .check, .toggle, .options label { color: var(--muted); font-size: .75rem; }

.sub, .subtitle, .muted, .path, .score, .empty, .foot, .pill, .kpi .label, thead th, td.k, .k, .modal__title, .hint, .small, .meta, .source, .pager .info { color: var(--muted) !important; }
.meta { justify-content: space-between; margin: 21px 0; font-size: .76rem; }
.results, .list { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.item { padding: 22px; box-shadow: 4px 4px 0 rgba(27, 51, 44, .13); }
.result-item { padding: 18px 0; border-width: 0 0 1px !important; }
.result-item:last-child { border-bottom: 0 !important; }
.mot { margin: 0 0 9px; color: var(--ink); font-family: "Playfair Display", Georgia, serif; font-size: 1.65rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.excerpt, .quote, .corpus, pre { color: var(--ink); line-height: 1.68; }
.excerpt, .quote { margin: 0; }
.page-citations .quote { max-width: 54rem; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.35rem, 2.5vw, 2.15rem); line-height: 1.17; letter-spacing: -.035em; }
.page-citations .quote::before { color: var(--coral); content: "« "; }
.page-citations .quote::after { color: var(--coral); content: " »"; }
.badge, .pill, .tag { display: inline-flex; padding: 4px 8px; border: 1px solid var(--line); color: var(--muted) !important; background: var(--surface-soft) !important; font-size: .66rem; }
.source { margin-left: auto; font-size: .7rem; }
mark { padding: 0 .12em; color: inherit; background: #e6d5b7 !important; }

.definition, .littre-definition-text { white-space: pre-wrap; }
.littre-definition-text { color: var(--ink); font-size: 1rem; line-height: 1.78; }
.definition .full { display: none; }
.littre-fulltext-excerpt { margin-top: 8px; }
.entry { min-height: 190px; }
.entry .row { justify-content: space-between; align-items: flex-start; }

table { width: 100%; margin-top: 22px; border-collapse: collapse; color: var(--ink); background: var(--surface); }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--line) !important; text-align: left; vertical-align: top; }
thead th { color: var(--muted) !important; background: var(--surface-soft) !important; font-size: .7rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
tbody tr:hover, tr:hover td { color: var(--ink); background: #f7f2e4 !important; }
.rowlink { cursor: pointer; }
.pagination, .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 25px; }
.pager > a, .pagination > a, .pager > .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pager > a:not(.btn), .pager > a:not(.pbtn) { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: 6px 9px; border: 1px solid var(--line); background: var(--surface); font-size: .73rem; text-decoration: none; }
.pager > a.current { color: var(--ink); background: var(--ochre); }

.error, .err { margin: 18px 0; padding: 14px 16px; border-left: 4px solid var(--coral); color: var(--ink); background: #f2ded6; }
.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(27, 51, 44, .54); }
.modal-backdrop.open { display: flex; }
.modal { width: min(800px, 100%); max-height: min(80vh, 800px); overflow: auto; border: 1px solid var(--ink); border-radius: 0; color: var(--ink); background: var(--surface); box-shadow: 10px 10px 0 var(--ochre); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.modal-title { margin: 0; color: var(--ink) !important; font-family: "Playfair Display", Georgia, serif; font-size: 1.75rem; font-weight: 600; }
.modal-body { padding: 24px; color: var(--ink) !important; white-space: pre-wrap; line-height: 1.72; }
.modal-close, .modal .close { padding: 7px 10px; border: 1px solid var(--ink); border-radius: 10px 2px 10px 2px; color: var(--ink); background: var(--ochre); box-shadow: 3px 3px 0 var(--button-shadow); font-family: "Space Grotesk", Arial, sans-serif; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-radius .16s ease; }
.modal-close:hover, .modal .close:hover { border-radius: 2px 12px 2px 12px; box-shadow: -4px 4px 0 var(--button-shadow); transform: translate(3px, 1px) rotate(-1.2deg); }
.page-films #modalBackdrop { display: none; }
.page-films #modalBackdrop[aria-hidden="false"] { display: flex; }
.page-films .modal { padding: 20px; }
.page-films .close { float: right; }
.noticeBox, .filemeta { margin-top: 13px; padding: 14px; border-left: 4px solid var(--coral); background: var(--surface-soft); }
.filelist { padding-left: 20px; }

.dictionary-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dictionary-result { min-height: 220px; margin: 0; }
.dictionary-result:nth-child(1) { background: #f1e5d5 !important; }
.dictionary-result:nth-child(2) { background: #e0ece7 !important; }
.dictionary-result:nth-child(3) { background: #e7e2f1 !important; }
.word-links { display: flex; gap: 8px; flex-wrap: wrap; }
.word-links a { padding: 5px 7px; border-bottom: 1px solid var(--coral); color: var(--ink); background: rgba(255, 253, 247, .72); text-decoration: none; }
.word-links a:hover { color: var(--coral); }

.protected-page { display: grid; min-height: 100vh; padding: 24px; place-items: center; }
.protected-card { width: min(560px, 100%); text-align: center; box-shadow: var(--shadow); }

/* Nouvelle voix typographique : éditoriale dans les titres, nette dans l’interface. */
h1, h2, h3, .page-title, .title, .mot, .modal-title,
.page-citations .quote, .home-link {
  font-family: "Bodoni Moda", Georgia, serif !important;
}
input[type="text"], select, textarea, button, .btn, a.btn, .pbtn, .read-more,
.modal-close, .modal .close, .option-inline, .check, .toggle, .options label,
.meta, .badge, .pill, .tag, thead th {
  font-family: "Space Grotesk", Arial, sans-serif !important;
}

body[class^="page-"] .panel,
body[class^="page-"] .page-larousse .wrap > .card:first-of-type { border-color: var(--ochre) !important; }

@media (max-width: 720px) {
  body { padding: 18px 16px 54px; }
  h1, .page-title { font-size: clamp(3rem, 16vw, 5rem) !important; }
  .grid, .dictionary-results { grid-template-columns: 1fr; }
  .card, .panel, .item { padding: 18px; }
  form, form.search-box, .search { padding: 18px !important; }
  .page-notide .field input[type="text"],
  .page-films .formline input[type="text"] {
    flex: 0 0 48px;
    width: 100%;
    min-height: 48px;
    height: 48px;
    max-height: 48px;
    padding: 0 14px;
    border-radius: 10px 2px 10px 2px;
    line-height: 20px;
  }
  .btn-random { margin-left: 0; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .source { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }