/* legal.css — charte documentaire Mooday transposée au web.
   Feuille de style PARTAGÉE des pages légales statiques (politique de
   confidentialité, et à venir CGV, mentions légales). Jetons de couleur
   repris à l'identique de docs/tpl.py (gabarit des PDF de référence) :
   un changement d'identité = un seul fichier à modifier.
   CSS vanilla, aucune dépendance. */

:root {
  --orange: #E8823C;   /* accent, filet d'en-tête, h3, bord des callouts */
  --text: #333333;     /* corps de texte */
  --grey: #8a8a8a;     /* en-tête (titre doc + date + baseline) */
  --lightgrey: #aaaaaa;/* pied de page */
  --beige: #FAF3E7;    /* fond des callouts */
  --codebg: #F1EFEA;   /* fond des blocs de code */
  --dark: #1c1c1c;     /* titres h1/h2, en-tête de tableau */
  --green: #2E9E5D;    /* accent positif */
  --red: #D23F3F;      /* accent négatif */
  --rule: #e5e0d8;     /* filet du pied de page */
  --grid: #cccccc;     /* bordures de tableau */
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Conteneur centré, largeur de lecture confortable */
.legal-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 32px 48px;
  background: #ffffff;
}

/* Lien de retour discret, tout en haut */
.legal-back {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--grey);
  text-decoration: none;
}
.legal-back:hover { color: var(--orange); text-decoration: underline; }

/* En-tête : logo à gauche, méta à droite, filet orange dessous */
.legal-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--orange);
}
.legal-header__logo { height: 32px; width: auto; display: block; }
.legal-header__meta {
  text-align: right;
  font-size: 10.7px;   /* ~8 pt, comme les PDF */
  line-height: 1.5;
  color: var(--grey);
}
.legal-header__meta strong { font-weight: 600; color: var(--grey); }

/* Titres */
h1 {
  color: var(--dark);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 28px 0 6px;
}
h2 {
  color: var(--dark);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 30px 0 8px;
}
h3 {
  color: var(--orange);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  margin: 20px 0 6px;
}

/* Corps de texte justifié, comme les PDF */
p { margin: 0 0 12px; text-align: justify; }
.legal-container ul,
.legal-container ol { margin: 0 0 12px; padding-left: 22px; }
.legal-container li { margin: 0 0 5px; text-align: justify; }
a { color: var(--orange); }

strong { font-weight: 700; }

/* Petit texte gris, non justifié. Deux emplois : sous-titre ou date de mise à
   jour juste sous le h1 (pages légales), et renvoi discret en fin de page
   (« Le serment »). Même traitement dans les deux cas — c'est ce qui le rend
   discret : plus petit et plus clair que le corps, jamais étiré. */
.legal-lead {
  color: var(--grey);
  font-size: 13px;
  margin: 0 0 8px;
  text-align: left;
}

/* Signature d'un texte signé (page « Pourquoi Mooday ? »). Non justifiée :
   une ligne courte alignée à gauche, en accent, détachée du dernier paragraphe. */
.legal-signature {
  margin-top: 22px;
  text-align: left;
  color: var(--orange);
  font-weight: 700;
}

/* Callout : « L'essentiel en quelques lignes », etc. */
.callout {
  background: var(--beige);
  border-left: 3px solid var(--orange);
  padding: 14px;
  margin: 0 0 16px;
  border-radius: 0 4px 4px 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout p { text-align: left; }

/* Bloc de code / mono, filet orange à gauche (cohérent PDF) */
code {
  background: var(--codebg);
  font-family: "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: 4px;
}
pre {
  background: var(--codebg);
  border-left: 3px solid var(--orange);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0 0 16px;
  border-radius: 0 4px 4px 0;
}
pre code { background: none; padding: 0; }

/* Tableau (ex. sous-traitants) — enveloppé pour scroll horizontal mobile */
.legal-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 16px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td {
  border: 1px solid var(--grid);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
thead th {
  background: var(--dark);
  color: #ffffff;
  font-weight: 700;
}

/* --- Page « Le serment » : citation et grille des affiches ---------------- */
/* Le serment intégral. Traitement de CITATION, délibérément distinct du
   .callout : le fond beige + filet reste le vocabulaire des encadrés
   d'information, et un serment n'est pas une note de bas de page. Ici, pas de
   fond du tout — un filet orange plus épais, un corps plus grand, de l'air.
   text-align: left neutralise EXPLICITEMENT la règle globale
   p { text-align: justify } : un texte que l'on prend à son compte se lit au
   fil des lignes, il ne se répartit pas au bord du bloc. */
.serment-texte {
  margin: 0 0 16px;
  padding: 2px 0 2px 18px;
  border-left: 4px solid var(--orange);
  font-size: 17px;
  line-height: 1.7;
  color: var(--dark);
  text-align: left;
}

/* Les deux affiches, côte à côte. L'empilement ≤ 640 px est dans la media
   query en fin de fichier, avec le reste du responsive. */
.affiches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 0 0 16px;
}

/* Un bloc = une vignette + son lien de téléchargement. min-width: 0 est le
   compagnon du max-width: 100% ci-dessous : un élément de grille refuse par
   défaut de descendre sous la largeur de son contenu, et la colonne déborderait
   malgré l'image contrainte. */
.affiche { min-width: 0; }

/* La vignette (420 px) est un lien vers l'aperçu (900 px).
   max-width: 100% n'est pas décoratif : sans lui, une vignette de 420 px
   déborde du conteneur dès que la fenêtre passe sous cette largeur — la page
   gagnerait un défilement horizontal. */
.affiche__vignette { display: block; }
.affiche__vignette img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* Lien de téléchargement, sous sa vignette. C'est un <a>, pas un <p> : la règle
   globale de justification ne l'atteint pas. Le centrage, lui, doit être posé —
   et il le reste si ce lien se retrouvait un jour enveloppé dans un paragraphe. */
.affiche__dl {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.affiche__dl:hover { text-decoration: underline; }

/* Pied de page */
.legal-footer {
  margin-top: 36px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--lightgrey);
}

/* Responsive : padding latéral réduit, en-tête compacté */
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .legal-container { padding: 20px 18px 40px; }
  h1 { font-size: 24px; }
  h2 { font-size: 18px; }
  .legal-header { gap: 10px; }
  .legal-header__meta { font-size: 10px; }

  /* « Le serment » : les deux affiches passent l'une sous l'autre, et la
     citation se resserre à la mesure du corps de texte réduit. */
  .affiches { grid-template-columns: 1fr; gap: 18px; }
  .serment-texte { font-size: 16px; padding-left: 14px; }

  /* Pied de page empilé : « Pourquoi Mooday ? », puis « Le serment » (18/08),
     puis le bloc légal groupé — une ligne chacun. Les « · » qui les séparent
     portent leurs propres espaces et disparaissent avec eux : aucun séparateur
     orphelin en début ou fin de ligne, quel que soit le nombre de liens
     éditoriaux (la règle vise les classes, pas des positions).
     Hors de ce breakpoint, ces spans restent inline : desktop inchangé. */
  .footer-story,
  .footer-legal { display: block; }
  .footer-sep { display: none; }
}