/* Pavillon Kilo : jetons, polices, grille de douze colonnes, guidon, plaques, focus. */
@font-face {
  font-family: "Mattone";
  src: url("../fonts/mattone-900.woff2?v=3") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-Variable.woff2?v=3") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --vert: #3cc8b4;
  --vert-pale: #b1e9e1;
  --rouge: #c9301c;
  --encre: #0c1b22;
  --blanc: #fff;
  --sur-vert: #12433c;
  --sur-encre: #a9c4c0;
  --sur-blanc: #56636a;
  --marge: clamp(16px, 3.4vw, 72px);
  --gout: clamp(16px, 1.25vw, 24px);
  --entete-h: 60px;
  --bb-h: 0px;
  --titre: "Mattone", "Arial Black", sans-serif;
  --texte: "Supreme", "Segoe UI", system-ui, sans-serif;
  --courbe: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 768px) { :root { --entete-h: 64px; } }
@media (min-width: 1100px) { :root { --entete-h: 72px; } }
@media (max-width: 1099px) { :root { --bb-h: calc(64px + env(safe-area-inset-bottom)); } }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--vert);
  color: var(--encre);
  scroll-padding-top: calc(var(--entete-h) + 16px);
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--vert);
  font: 500 16px/1.5 var(--texte);
  font-synthesis: none;
  overflow-x: clip;
}
@media (min-width: 1100px) { body { font-size: 17px; } }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.titre {
  font-family: var(--titre);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.01em;
}

/* Grille de la page : douze colonnes entre les marges, sans largeur maximale. */
.grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gout);
  padding-inline: max(var(--marge), env(safe-area-inset-left)) max(var(--marge), env(safe-area-inset-right));
}

/* Le guidon : action principale, pavillon à queue d'aronde. Le fond porte la découpe pour que le focus reste entier. */
.guidon {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 48px;
  padding: 0 34px 0 20px;
  border: 0;
  background: none;
  color: #fff;
  font: 700 16px/1 var(--texte);
  text-decoration: none;
  white-space: nowrap;
  --fond: var(--encre);
}
.guidon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fond);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
  transition: transform .2s var(--courbe);
}
.guidon--grand { min-height: 56px; padding-inline: 24px 40px; font-size: 18px; }
.guidon--plein { width: 100%; justify-content: flex-start; min-height: 56px; font-size: 18px; }
@media (hover: hover) { .guidon:hover::before { transform: translateX(3px); } }
.guidon:active::before { transform: scale(.98); }
.guidon:disabled { opacity: .4; cursor: not-allowed; }

.lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* La plaque : un panneau blanc qui mord la photo. */
.plaque { background: #fff; color: var(--encre); }

:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
[data-teinte="encre"] :focus-visible, [data-teinte="rouge"] :focus-visible { outline-color: #fff; }
.plaque :focus-visible, .carre :focus-visible { outline-color: var(--encre); }

.evitement {
  position: fixed;
  z-index: 100;
  top: calc(var(--demobar-offset, 0px) + 8px);
  left: max(8px, env(safe-area-inset-left));
  min-height: 44px;
  padding: 12px 18px;
  background: var(--encre);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - 60px));
}
.evitement:focus { transform: none; outline: 2px solid #fff; outline-offset: -4px; }
main:focus { outline: none; }

/* État du ponton : toujours tourné vers l'ouverture. */
.etat { font-weight: 600; }

/* Mât de bois verni : fût, pomme, drisse blanche, cabillots, taquet. */
.mat { position: absolute; }
.mat::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 0;
  left: 0;
  width: var(--fut, 8px);
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #6b3d1c 0%, #b9773e 35%, #e3a764 50%, #a8642f 75%, #5b3216 100%);
  box-shadow: 2px 0 4px rgb(12 27 34 / .25);
}
.mat__pomme {
  position: absolute;
  top: 0;
  left: calc(var(--fut, 8px) / 2 - 7px);
  width: 14px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f0c08a, #a8642f 60%, #6b3d1c);
}
.mat__taquet {
  position: absolute;
  bottom: 18%;
  left: calc(var(--fut, 8px) - 2px);
  width: 22px;
  height: 7px;
  border-radius: 4px;
  background: #8a8f91;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .25);
}
.mat::after {
  /* la drisse blanche, de la pomme au taquet */
  content: "";
  position: absolute;
  top: 10px;
  bottom: calc(18% + 4px);
  left: calc(var(--fut, 8px) + 1px);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 .5px rgb(12 27 34 / .25);
}
.mat__drisse { position: absolute; z-index: 1; left: calc(var(--fut, 8px) + 3px); top: var(--tete, 24px); }
.mat__rang { position: relative; }
.mat__rang + .mat__rang::before {
  /* cabillot entre deux pavillons */
  content: "";
  position: absolute;
  left: -3px;
  top: calc(var(--ecart) / -2 - 4px);
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #b9773e;
}

/* Pavillons en toile : la boîte a le rapport 3:2, le canvas déborde pour la vague et l'ombre. */
.pav { position: relative; display: block; width: var(--pav-w); aspect-ratio: 3 / 2; }
.pav canvas { position: absolute; left: 0; top: -25%; width: 135%; height: 175%; pointer-events: none; max-width: none; }
.lisere { stroke: var(--lisere, transparent); stroke-width: 1px; }