/* PAV Protec — pages applicatives app.pavprotec.fr
   Polices systeme : aucune requete vers un service de polices externe.
   Palette et typographie reprises des DÉCISIONS FIGÉES du projet Site Internet
   (STATE V2 / DETAIL ancre SEC_DECISIONS_FIGEES). Aucune refonte. */

:root {
  --encre:    #1D2E39;
  --turquoise:#58B4B5;
  --cyan:     #90FAFA;
  --gris:     #CAD6D9;
  --blanc:    #FFFFFF;
  --max:      760px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: 2.1rem; margin: 0 0 .4em; }
h2 { font-size: 1.35rem; margin: 2.4em 0 .6em; }
h3 { font-size: 1.05rem; margin: 1.8em 0 .4em; }

a { color: var(--turquoise); }
a:hover { color: var(--encre); }

header.bandeau {
  background: var(--encre);
  color: var(--blanc);
  padding: 22px 0;
}

header.bandeau .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
}

.marque {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
}

.marque span { color: var(--cyan); }

nav.bandeau-nav a {
  color: var(--gris);
  text-decoration: none;
  font-size: .9rem;
  margin-left: 18px;
}

nav.bandeau-nav a:first-child { margin-left: 0; }
nav.bandeau-nav a:hover { color: var(--cyan); text-decoration: underline; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

main { padding: 48px 0 72px; }

.chapeau {
  font-weight: 300;
  font-size: 1.15rem;
  color: #41545f;
  margin-bottom: 2.2em;
}

.encadre {
  border-left: 3px solid var(--turquoise);
  background: #f4f8f9;
  padding: 16px 20px;
  margin: 1.8em 0;
  font-size: .97rem;
}

.liens-legaux {
  margin: 2.6em 0 0;
  padding: 20px;
  border: 1px solid var(--gris);
  border-radius: 6px;
}

.liens-legaux p { margin: 0 0 .6em; font-weight: 600; }
.liens-legaux ul { margin: 0; padding-left: 20px; }
.liens-legaux li { margin-bottom: .3em; }

/* Marqueur de champ non renseigné. Visible à dessein :
   aucune page ne doit partir en production avec un de ces blocs. */
.todo {
  background: #ffe8c2;
  border: 1px dashed #b4761a;
  color: #6b4406;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  font-weight: 600;
}

/* Garde de brouillon. Styles utilisés uniquement par le bandeau
   GARDE DE BROUILLON présent en tête de chaque page, retiré à la
   publication en même temps que lui. */
.brouillon {
  background: #8c1d1d;
  color: var(--blanc);
  padding: 14px 0;
  font-size: .92rem;
}

.brouillon strong {
  display: block;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: 3px;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: #f0f5f6;
  padding: 1px 5px;
  border-radius: 3px;
  word-break: break-all;
}

table.donnees {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: .95rem;
}

table.donnees th,
table.donnees td {
  border: 1px solid var(--gris);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

table.donnees th {
  background: #f4f8f9;
  font-weight: 600;
}

footer {
  border-top: 1px solid var(--gris);
  padding: 26px 0 40px;
  font-size: .87rem;
  color: #5c6e78;
}

footer a { color: #5c6e78; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  h1 { font-size: 1.65rem; }
  nav.bandeau-nav a { margin-left: 0; margin-right: 16px; }
}