/* =========================================================
   CSS Page.js — Rapport institutionnel élégant
   ========================================================= */

:root {
  /* Surchargeables par css/print/{org}.css sur le site */
  --repogo-ink: #0B2545;
  --repogo-navy: #0B2545;
  --repogo-link: #2F6BFF;
  --repogo-accent: #2F6BFF;
  --repogo-surface: #F7F6F2;
  --repogo-muted: #687280;
  --repogo-line: #E4E1DA;

  --ink: var(--repogo-ink);
  --navy: var(--repogo-navy);
  --blue: var(--repogo-link);
  --orange: var(--repogo-accent);
  --light-blue: var(--repogo-surface);
  --light-grey: #f5f6f6;
  --medium-grey: var(--repogo-muted);
  --line: var(--repogo-line);
  --paper: #ffffff;

  --serif: "Georgia", "Times New Roman", serif;
  --sans: 'Atkinson',"Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: 'Atkinson', "Georgia", "Times New Roman", serif;
  --sans-serif: 'Atkinson', "Helvetica", "Neue Haas Grotesk Text Std", "Arial", sans-serif;
}

/* ---------------------------------------------------------
   Format des pages
   --------------------------------------------------------- */

@page {
  size: A4;
  margin: 20mm 10mm 18mm 13mm;

  @bottom-left {
    content: "";
    color: var(--medium-grey);
    font-family: var(--sans);
    font-size: 7pt;
    letter-spacing: 0.04em;
  }

  @bottom-right {
    content: counter(page);
    color: var(--medium-grey);
    font-family: var(--sans);
    font-size: 8pt;
  }
}

@page :first {
  margin: 0;
}

/* ---------------------------------------------------------
   Affichage écran
   --------------------------------------------------------- */

@media screen {
  body {
    margin: 0;
    background: var(--repogo-surface);
  }

  .pagedjs_pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12mm;
    padding: 12mm 0;
  }

  .pagedjs_page {
    background: white;
    box-shadow: 0 0 0 1px #c7ccce, 0 5px 22px rgba(0, 0, 0, 0.12);
  }
}

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html,
body {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 10.5pt;
  line-height: 1.5;
}

body {
  margin: 0;
  orphans: 3;
  widows: 3;
}

p {
  margin: 0 0 0.8em;
}

strong {
  color: var(--navy);
}

a {
  color: var(--blue);
  text-decoration: none;
}

/* ---------------------------------------------------------
   Titres
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 700;
  break-inside: avoid;
  break-after: avoid;
}

h1 {
  max-width: 150mm;
  margin: 0 0 8mm;
  font-size: 34pt;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

h1.smaller {
  font-size: 26pt;
}

h2 {
  display: flex;
  align-items: baseline;
  gap: 5mm;
  margin: 14mm 0 6mm;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 3mm;
  font-size: 21pt;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

h2::before {
  display: none;
  color: var(--orange);
  content: counter(chapter, decimal-leading-zero);
  font-size: 13pt;
  letter-spacing: 0;
}

h3 {
  margin: 9mm 0 3mm;
  border-left: 4px solid var(--orange);
  padding-left: 4mm;
  font-size: 14pt;
  line-height: 1.25;
}

h4 {
  margin: 6mm 0 2mm;
  color: var(--blue);
  font-size: 10pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

figure+p+h4 {
  margin-top: 33px;
}

h4+p {
  margin-top: 18px;
}

h5 {
  font-size: var(--text-base);
  line-height: calc(var(--baseline) * 3);
  margin: 0 0 1px;
}

h6 {
  font-size: 0.9em;
  line-height: calc(var(--baseline) * 3);
  margin: 0 0 1px;
}

h5+p,
h6+p {
  margin-top: 0;
}

h5+ul {
  margin-top: -1px;
}


/* Numérotation des chapitres */
main {
  counter-reset: chapter;
}

.chapter {
  counter-increment: chapter;
}

.chapter h2 {
  string-set: section-title content(text);
}

hr {
  break-before: page;
}

.chapter hr:has(+ *) {
  display: none;
}

/* =========================================================
   Proposition de page de garde élégante
   ========================================================= */

@page cover {
  size: A4;
  margin: 0;
}

#cover {
  page: cover;
  position: relative;
  display: flex;
  min-height: 297mm;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 28mm 24mm 20mm 31mm;
  border-left: 9mm solid var(--navy);
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #ffffff 68%,
      var(--light-blue) 68%,
      var(--light-blue) 100%
    );
  color: var(--ink);
  break-after: page;
}

#cover::before {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 42mm;
  height: 42mm;
  border-bottom: 3px solid var(--orange);
  border-left: 3px solid var(--orange);
  content: "";
}

#cover::after {
  position: absolute;
  right: 24mm;
  bottom: 24mm;
  width: 28mm;
  height: 2px;
  background: var(--orange);
  content: "";
}

#cover header {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  background: transparent;
}

#cover .eyebrow {
  margin-bottom: 18mm;
  color: var(--blue);
  font-family: var(--sans-serif);
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#cover h1 {
  max-width: 150mm;
  margin: 0 0 9mm;
  color: var(--navy);
  font-family: var(--sans-serif);
  font-size: 37pt;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

#cover h2 {
  max-width: 125mm;
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--medium-grey);
  font-family: var(--sans-serif);
  font-size: 15pt;
  font-weight: 400;
  line-height: 1.4;
}

#cover h2::before {
  display: none;
}

#cover .metadata {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 24mm;
  border-top: 1px solid var(--line);
  padding-top: 5mm;
  font-family: var(--sans-serif)
  font-size: 8pt;
}

#cover .metadata strong {
  display: block;
  margin-bottom: 1.5mm;
  color: var(--blue);
  font-size: 7pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#cover .metadata span {
  color: var(--ink);
}

#cover footer {
  position: relative;
  z-index: 1;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 4mm;
  color: var(--medium-grey);
  font-family: var(--sans-serif);
  font-size: 14pt;
}

#cover footer p {
  margin: 0 0 12pt;
}


/* ---------------------------------------------------------
   Introduction et résumé
   --------------------------------------------------------- */

.lead,
.introduction {
  max-width: 160mm;
  color: var(--navy);
  font-size: 14pt;
  line-height: 1.4;
}

.summary {
  margin: 9mm 0;
  border-top: 4px solid var(--orange);
  border-bottom: 1px solid var(--line);
  background: var(--light-grey);
  padding: 7mm 8mm;
  break-inside: avoid;
}

/* ---------------------------------------------------------
   Blocs de données clés
   --------------------------------------------------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4mm;
  margin: 9mm 0;
  break-inside: avoid;
}

.metric {
  min-height: 26mm;
  border-top: 3px solid var(--blue);
  background: var(--light-grey);
  padding: 5mm;
}

.metric strong {
  display: block;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 20pt;
  line-height: 1.05;
}

.metric span {
  display: block;
  margin-top: 2mm;
  color: var(--medium-grey);
  font-family: var(--sans);
  font-size: 8pt;
  line-height: 1.25;
}

/* ---------------------------------------------------------
   Encadrés
   --------------------------------------------------------- */

aside {
  margin: 7mm 0;
  border-top: 2px solid var(--blue);
  border-bottom: 1px solid var(--line);
  background: var(--light-blue);
  padding: 5mm 6mm;
  font-family: var(--sans);
  font-size: 9pt;
  break-inside: avoid;
}

aside h4 {
  margin-top: 0;
  margin-bottom: 3mm;
  color: var(--navy);
}

aside p:last-child {
  margin-bottom: 0;
}

.question {
  border-top-color: var(--orange);
  background: var(--light-blue);
}

.question::before {
  display: block;
  margin-bottom: 2mm;
  color: var(--orange);
  content: "QUESTION DE CONSULTATION";
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* ---------------------------------------------------------
   Citations importantes
   --------------------------------------------------------- */

blockquote {
  margin: 9mm 0;
  border-left: 6px solid var(--orange);
  background: var(--light-blue);
  padding: 6mm 8mm;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 14pt;
  font-weight: 600;
  line-height: 1.35;
  break-inside: avoid;
}

blockquote p {
  margin: 0;
}

/* ---------------------------------------------------------
   Listes
   --------------------------------------------------------- */

ul,
ol {
  margin: 3mm 0 5mm;
  padding-left: 7mm;
}

li {
  margin-bottom: 2mm;
}

ul {
  list-style: none;
}

ul li {
  position: relative;
}

ul li::before {
  position: absolute;
  left: -5mm;
  color: var(--orange);
  content: "—";
  font-family: var(--sans);
  font-weight: 700;
}

/* ---------------------------------------------------------
   Tableaux
   --------------------------------------------------------- */

table {
  width: 100%;
  margin: 7mm 0;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 8.5pt;
  break-inside: avoid;
}

th,
td {
  border: 1px solid var(--line);
  padding: 3mm 3mm;
  vertical-align: top;
  text-align: left;
}

th {
  background: var(--navy);
  color: white;
  font-weight: 700;
}

tr:nth-child(even) td {
  background: #fafbfb;
}

/* ---------------------------------------------------------
   Figures
   --------------------------------------------------------- */

figure {
  margin: 8mm 0;
  break-inside: avoid;
}

img,
figure img {
  display: block;
  margin: 1em 0 2em;
  width: 100%;
  max-height: 150mm;
  object-fit: contain;
}

figcaption,
caption {
  margin-top: 3mm;
  color: var(--medium-grey);
  font-family: var(--sans);
  font-size: 7.5pt;
  font-style: italic;
  text-align: left;
}

/* ---------------------------------------------------------
   Table des matières
   --------------------------------------------------------- */

#toc ul {
  font-family: var(serif);
}

#toc {
  break-inside: auto;
  page-break-inside: auto;
  break-after: page;
}

#toc-list {
  break-inside: auto;
  page-break-inside: auto;
}

#toc,
#toc-list {
  break-inside: auto;
}

#toc,
#toc-list,
#toc-list ul,
#toc-list img {
  height: auto;
  max-height: none;
  overflow: visible;
}

#toc li {
  break-inside: avoid;
  page-break-inside: avoid;
}

#toc li {
  position: relative;
  padding-left: 0;
  padding-right: 2.5rem;
}

#toc li::before {
  content: "";
}

/* hide Colophon */
#toc li:last-child {
  // display: none;
}

#toc li a {
  max-width: 85%;
}

#toc li a::after {
  content: target-counter(attr(href), page);
  float: right;
  position: absolute;
  right: 0;
}

/* set the style for the list numbering to none */
#list-toc-generated {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
}

#list-toc-generated a {
  color: var(--repogo-ink);
  text-decoration: none;
}

#list-toc-generated .toc-element-level-1 {
  margin-top: 16px;
  font-weight: bold;
}

#list-toc-generated .toc-element-level-2 {
  font-size: var(--text-sm);
}

#list-toc-generated .toc-element-level-1:before {
  font-size: var(--text-sm);
  font-weight: normal;
  position: relative;
}

/* counters */
#list-toc-generated {
  counter-reset: counterTocLevel1;
}

#list-toc-generated .toc-element-level-1 {
  counter-increment: counterTocLevel1;
  counter-reset: counterTocLevel2;
}

/*
#list-toc-generated .toc-element-level-1::before {
    content: counter(counterTocLevel1) ". ";
    padding-right: 5px;
}
#list-toc-generated .toc-element-level-2 {
    counter-increment: counterTocLevel2;
}
#list-toc-generated .toc-element-level-2::before {
    content: counter(counterTocLevel1) ". " counter(counterTocLevel2) ". ";
    padding-right: 5px;
}*/
/* hack for leaders */
#list-toc-generated {
  overflow-x: hidden;
}

#list-toc-generated .toc-element {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--baseline);
  line-height: calc(var(--baseline) * 3);
}

#list-toc-generated .toc-element span {
  display: none;
}

[data-id="list-toc-generated"] .toc-element a span {
  background: #fff;
  padding-left: 3pt;
  position: absolute;
  right: 0;
}

/* ---------------------------------------------------------
   Sauts de page
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
figure,
table,
aside,
blockquote {
  break-inside: avoid;
}

.chapter {
  break-before: auto;
}

.page-break {
  break-before: page;
}

/* ---------------------------------------------------------
   Impression
   --------------------------------------------------------- */

@media print {
  body {
    background: white;
  }

  .no-print {
    display: none !important;
  }
}