/* Sur Place — feuille de style commune */
:root {
  --papier: #E8EADB;
  --papier-2: #DDE0CC;
  --encre: #000000;
  --encre-2: #3B3F36;
  --foret: #1F4A2E;
  --foret-2: #2E6A42;
  --vert: #2F8F4E;
  --pousse: #C9E86A;
  --blanc: #FFFFFF;
  --rouge: #B3261E;
  --trait: 2px solid var(--encre);
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --gouttiere: clamp(16px, 4vw, 56px);
  --max: 1240px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-variation-settings: 'wdth' 100;
  background: var(--papier);
  color: var(--encre);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--foret-2); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Titres : la typo condensée est l'identité */
.titre, h1, h2, h3 {
  font-stretch: 68%;
  font-variation-settings: 'wdth' 68;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.92;
}
h1 { font-size: clamp(56px, 11vw, 148px); }
h2 { font-size: clamp(40px, 6.4vw, 84px); }
h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1; }

.surligne {
  background: linear-gradient(transparent 12%, var(--pousse) 12%, var(--pousse) 92%, transparent 92%);
  padding: 0 .15em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.conteneur { max-width: var(--max); margin: 0 auto; padding: 0 var(--gouttiere); }

/* ── En-tête ───────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 1000;
  background: var(--papier);
  border-bottom: var(--trait);
}
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marque img { height: 54px; width: auto; display: block; }
.menu { display: flex; gap: 4px; align-items: center; }
.menu a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 14px; border-radius: 999px; }
.menu a:hover { background: var(--papier-2); }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu .bouton { margin-left: 6px; }
@media (max-width: 640px) { .menu a:not(.bouton) { display: none; } }

/* ── Boutons ───────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 16px;
  background: var(--encre); color: var(--blanc);
  border: var(--trait); border-radius: 999px;
  padding: 12px 22px; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.bouton:hover { transform: translateY(-1px); background: var(--foret); }
.bouton.clair { background: var(--blanc); color: var(--encre); }
.bouton.clair:hover { background: var(--pousse); }
.bouton.vert { background: var(--foret); }
.bouton.vert:hover { background: var(--encre); }

/* ── Pied de page ──────────────────────────────────────── */
.pied { border-top: var(--trait); padding: 36px 0 44px; font-size: 14px; }
.pied .conteneur { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-start; }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied a { font-weight: 600; }
.pied p { color: var(--encre-2); max-width: 46ch; }

/* ── Trait de stylo de la charte (boucle du logo, soulignés, surlignages) ── */
:root { --boucle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M169.8 24.5C168.3 23.8 164.0 21.6 160.9 20.2C157.8 18.8 154.7 17.5 151.2 16.3C147.7 15.1 144.1 13.8 139.8 12.9C135.5 12.0 130.9 11.1 125.5 10.7C120.1 10.3 114.4 10.1 107.4 10.2C100.3 10.4 90.2 11.0 83.3 11.6C76.4 12.2 71.4 13.0 66.1 13.9C60.7 14.7 55.9 15.7 51.3 16.9C46.7 18.1 42.4 19.4 38.6 20.9C34.8 22.5 31.3 24.2 28.5 26.2C25.7 28.1 23.5 30.2 21.7 32.4C20.0 34.7 18.9 37.0 17.9 39.5C17.0 42.0 16.4 44.2 15.9 47.3C15.4 50.4 14.9 54.7 14.7 58.0C14.5 61.2 14.2 64.1 14.6 66.8C15.0 69.5 15.7 72.1 17.2 74.4C18.8 76.7 21.0 78.9 23.9 80.7C26.8 82.5 30.5 84.1 34.5 85.3C38.5 86.6 43.1 87.5 47.8 88.3C52.5 89.1 57.4 89.6 62.7 90.1C67.9 90.5 73.0 90.9 79.4 91.0C85.7 91.2 93.3 91.1 100.7 90.8C108.1 90.5 117.1 89.9 123.7 89.2C130.3 88.4 135.3 87.5 140.4 86.4C145.6 85.4 150.2 84.1 154.6 82.7C159.1 81.4 163.3 80.0 167.3 78.4C171.4 76.8 175.4 75.2 178.9 73.3C182.4 71.3 185.9 69.3 188.5 66.9C191.0 64.6 193.2 62.0 194.4 59.1C195.5 56.3 195.8 53.2 195.4 49.7C195.1 46.2 193.6 41.3 192.2 38.0C190.8 34.7 188.8 32.5 186.8 30.1C184.9 27.7 182.8 25.6 180.5 23.5C178.2 21.4 175.9 19.4 173.0 17.5C170.2 15.7 167.0 13.9 163.3 12.4C159.5 10.9 152.5 9.2 150.4 8.6' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); --souligne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5 C60 8.6 130 7.9 197 7' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.entoure { position: relative; display: inline-block; isolation: isolate; }
.entoure::after {
  content: ''; position: absolute; inset: -24% -11% -20% -9%; pointer-events: none;
  background: var(--stylo, var(--foret));
  -webkit-mask: var(--boucle) center / 100% 100% no-repeat; mask: var(--boucle) center / 100% 100% no-repeat;
}
.entoure.large { margin: 0 .12em; }
.entoure.large::after { inset: -30% -15% -24% -13%; }
.souligne { position: relative; display: inline-block; }
.souligne::after {
  content: ''; position: absolute; left: -2%; right: -2%; bottom: -0.18em; height: 0.32em; pointer-events: none;
  background: var(--stylo, var(--foret));
  -webkit-mask: var(--souligne) center / 100% 100% no-repeat; mask: var(--souligne) center / 100% 100% no-repeat;
}
.surligne-blanc { background: linear-gradient(transparent 12%, var(--blanc) 12%, var(--blanc) 92%, transparent 92%); padding: 0 .15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* « Sur Place » écrit comme le logo, dans le texte */
.sp { font-weight: 800; font-variation-settings: 'wdth' 62; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; font-size: 1.08em; }
.sp .entoure { margin: 0 .3em 0 .12em; }
.sp .entoure::after { inset: -26% -20% -20% -17%; }