/* ==========================================================================
   MAAC — feuille de style des documents imprimables.

   Elle sert deux fois : à l'écran, pour lire la plaquette dans le navigateur,
   et à l'impression, pour produire le PDF téléchargeable (outils/documents.py
   passe par Chrome sans interface).

   Elle ne dépend pas de maac.css : un document doit pouvoir s'imprimer même
   si la feuille du site change. Les couleurs et les polices y sont donc
   redéclarées — c'est la seule duplication acceptée du projet, et elle est
   volontaire.
   ========================================================================== */

@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url("../fonts/manrope-var.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("../fonts/inter-var.woff2") format("woff2-variations");
}

:root {
  --bleu: #214B63;
  --foret: #2F5D50;
  --terra: #A05035;
  --lin: #F4F0EA;
  --sauge: #A9B9A5;
  --ardoise: #4B5563;
  --trait: #DDD5C7;
}

* { box-sizing: border-box; }

html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

body {
  margin: 0;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 10.5pt; line-height: 1.5; color: var(--ardoise);
  background: #E8E3DA;
}

h1, h2, h3, h4 { font-family: "Manrope", ui-sans-serif, sans-serif; color: var(--bleu); margin: 0; }
p { margin: 0 0 .65em; }
strong { color: var(--bleu); }
a { color: var(--terra); }

/* ------------------------------------------------------------- la page --
   Une <section class="feuille"> = une page A4. À l'écran, elles sont
   empilées avec une ombre ; à l'impression, chacune commence sur une
   nouvelle page. */

/* La hauteur est FIXE, pas minimale : `min-height` laissait une feuille trop
   pleine déborder en silence sur une page supplémentaire, à moitié vide. Ici
   le dépassement se voit à l'écran, et outils/documents.py refuse de publier
   un document dont le nombre de pages a changé. */
.feuille {
  position: relative;
  width: 210mm; height: 297mm;
  margin: 8mm auto; padding: 15mm 18mm 18mm;
  background: #fff;
  box-shadow: 0 2px 24px rgb(33 75 99 / .18);
}
.feuille + .feuille { page-break-before: always; break-before: page; }

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

@media print {
  body { background: #fff; }
  .feuille { margin: 0; box-shadow: none; width: auto; height: 297mm; }
  .ecran-seulement { display: none !important; }
}

/* ------------------------------------------------------------ couverture -- */

.couverture { background: var(--lin); }
.couverture-logo { width: 62mm; height: auto; display: block; margin-bottom: 14mm; }
.couverture h1 { font-size: 26pt; line-height: 1.12; max-width: 15cm; margin-bottom: 6mm; }
.couverture .accroche { font-size: 13pt; color: var(--foret); font-weight: 600; max-width: 14cm; }
.couverture .devise {
  margin-top: 12mm; padding-top: 6mm; border-top: 2px solid var(--sauge);
  font-family: "Manrope", sans-serif; font-size: 13pt; color: var(--bleu);
}

/* ----------------------------------------------------------------- titres -- */

.surtitre {
  display: block; margin-bottom: 2mm;
  font-family: "Manrope", sans-serif; font-size: 8pt; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--terra);
}
h2 { font-size: 17pt; line-height: 1.18; margin-bottom: 4mm; }
h3 { font-size: 12pt; margin-bottom: 1.5mm; }
.bloc { margin-bottom: 6mm; }
.bloc:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ grille -- */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm; }

.carte {
  padding: 5mm; border: 1px solid var(--trait); border-radius: 3mm;
  background: #FCFBF9;
}
.carte h3 { margin-bottom: 2mm; }
.carte p:last-child { margin-bottom: 0; }

.prix {
  font-family: "Manrope", sans-serif; font-weight: 800; font-size: 15pt;
  color: var(--bleu); margin: 2mm 0 1mm;
}
.prix small { display: block; font-size: 8.5pt; font-weight: 500; color: var(--ardoise); }
.par-salarie { font-weight: 700; color: var(--terra); font-size: 9.5pt; margin: 0; }

/* ------------------------------------------------------------------ listes -- */

ul.puces { margin: 0 0 .65em; padding-left: 4mm; }
ul.puces li { margin-bottom: 1mm; }

.jetons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2mm; }
.jetons li {
  padding: 1.2mm 3mm; font-size: 8.5pt; color: var(--bleu);
  border: 1px solid var(--trait); border-radius: 99px;
}

/* ------------------------------------------------------------------ chiffre -- */

.chiffre {
  padding: 7mm; border-radius: 3mm; background: var(--bleu); color: #FBFAF8;
}
.chiffre h2, .chiffre strong { color: #FBFAF8; }
.chiffre .grand {
  font-family: "Manrope", sans-serif; font-weight: 800; font-size: 30pt;
  line-height: 1; color: #DDAB9A; margin: 0 0 2mm;
}
.chiffre p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- cas -- */

.cas { border-left: 3px solid var(--sauge); padding-left: 5mm; margin-bottom: 4mm; }
.cas h3 { margin-bottom: 1mm; }
.cas .meta { font-size: 8.5pt; color: var(--terra); font-weight: 700; margin-bottom: 1.5mm; }
.cas blockquote { margin: 2mm 0 0; font-style: italic; color: var(--bleu); }

.contact {
  padding: 5mm 6mm; border-radius: 3mm;
  background: var(--lin); border: 1px solid var(--trait);
}

/* ------------------------------------------------------------------- pied -- */

.pied-doc {
  position: absolute; left: 18mm; right: 18mm; bottom: 10mm;
  padding-top: 3mm; border-top: 1px solid var(--trait);
  font-size: 8pt; color: var(--ardoise);
  display: flex; justify-content: space-between; gap: 4mm;
}

/* La barre d'action, à l'écran seulement. */
.barre-doc {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: 3mm; align-items: center; flex-wrap: wrap;
  padding: 3mm 5mm; background: var(--bleu); color: #FBFAF8;
  font-size: 10pt;
}
.barre-doc a, .barre-doc button {
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  padding: 2mm 4mm; border-radius: 99px;
  background: #FBFAF8; color: var(--bleu); border: 0;
}
.barre-doc .retour { background: transparent; color: #DDAB9A; padding-left: 0; }

/* Le « HT » des prix, en petit — même intention que sur le site (demande de la
   cliente du 07/09/2026). En PDF, le rapport de taille doit être un peu moins
   marqué qu'à l'écran : sous 6 pt, l'impression laser le noie. */
.ht {
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gris, #6b7280);
  vertical-align: 0.3em;
}