/* TiKamp — refonte graphique 2026-10 : SOCLE COMMUN (lot 1).
   ------------------------------------------------------------------
   Chargée UNIQUEMENT quand la refonte est allumée (src/services/refonte.js),
   et toute règle est portée par le repère html[data-refonte] : une page
   d'origine ne peut pas être touchée.

   Contenu : couleurs, typographie, focus, boutons, cartes, fenêtres,
   en-tête, menu, pied de page. Ce qui est propre à une famille de pages
   va dans SA feuille (tk-refonte-public.css, puis -campeur, -gestion),
   chargée après celle-ci.

   Après toute modification : changer VERSION dans src/services/refonte.js.

   Palette : NOMS de l'application. Correspondance avec la maquette :
     --forest → --primary-hover   --mint → --primary-soft   --sand → --bg
     --sand2  → --bg-2            --gold → --accent         --warm → --accent-soft
     --muted  → --ink-3
   Deux teintes sont celles de la maquette (plus contrastées), ici seulement :
     --ink-3  #536259 (application : #6B7670)
     --border #DDE2DA (application : #E8EBE6)
   ------------------------------------------------------------------ */

@font-face { font-family:'Oswald'; src:url('/vendor/fonts/oswald-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Oswald'; src:url('/vendor/fonts/oswald-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ── Repères de couleur, d'espace et de forme ────────────────────── */
html[data-refonte] {
  --bg:#FAFAF7; --bg-2:#F0F2ED; --surface:#FFFFFF;
  --ink:#0A0F0A; --ink-2:#3A453F; --ink-3:#536259;
  --border:#DDE2DA; --border-fort:#A5B3A8;
  --primary:#0F7C3C; --primary-hover:#0A5F2D;
  --primary-soft:#E6F4EB; --primary-soft-border:#CBE3D1;
  --accent:#F3A724; --accent-soft:#FFF4DF; --accent-ink:#74510D;
  --danger:#A8311C;
  --r-sm:8px; --r-md:12px; --r-lg:20px;
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px;
  --gouttiere:32px;
  --police-texte:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --police-signal:'Oswald', 'Arial Narrow', sans-serif;
  --transition:160ms ease;
  color-scheme:light;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

/* ── Base ────────────────────────────────────────────────────────── */
html[data-refonte] *,
html[data-refonte] *::before,
html[data-refonte] *::after { box-sizing:border-box; }

html[data-refonte] body {
  margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
  font:400 1rem/1.55 var(--police-texte);
  -webkit-font-smoothing:antialiased;
}
html[data-refonte] body > main { flex:1 0 auto; width:100%; min-width:0; }
html[data-refonte] [hidden] { display:none !important; }

html[data-refonte] h1,
html[data-refonte] h2,
html[data-refonte] h3,
html[data-refonte] p { margin:0; }
html[data-refonte] h1 { font-size:clamp(2.375rem, 4.5vw, 4.25rem); line-height:1.04; letter-spacing:-.055em; font-weight:600; }
html[data-refonte] h2 { font-size:clamp(1.6875rem, 3vw, 2.4375rem); line-height:1.14; letter-spacing:-.035em; font-weight:600; }
html[data-refonte] h3 { font-size:1.3125rem; line-height:1.3; letter-spacing:-.025em; font-weight:600; }

html[data-refonte] a { color:inherit; text-underline-offset:4px; }
html[data-refonte] a,
html[data-refonte] button { touch-action:manipulation; }
html[data-refonte] button,
html[data-refonte] input,
html[data-refonte] select,
html[data-refonte] textarea { font:inherit; font-size:1rem; }
html[data-refonte] button { cursor:pointer; }
html[data-refonte] summary { cursor:pointer; }

/* Focus clavier : anneau à deux tons (sombre + ambre), lisible sur fond clair
   comme sur fond vert. L'ambre seul de la maquette ne fait que 2:1 sur le fond. */
html[data-refonte] :focus-visible {
  outline:3px solid var(--accent); outline-offset:2px;
  box-shadow:0 0 0 2px var(--ink);
  border-radius:var(--r-sm);
}
html[data-refonte] .btn:focus-visible { border-radius:var(--r-md); }

html[data-refonte] .sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;
}
html[data-refonte] .skip-link {
  position:absolute; top:-100px; left:var(--e-3); z-index:90;
  padding:var(--e-3) var(--e-4); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); font-weight:600;
}
html[data-refonte] .skip-link:focus { top:var(--e-3); }

/* ── Mise en page ────────────────────────────────────────────────── */
html[data-refonte] .wrap { max-width:1240px; margin-inline:auto; padding-inline:var(--gouttiere); }
html[data-refonte] .section { padding-block:var(--e-8); }
html[data-refonte] section[id],
html[data-refonte] main[id] { scroll-margin-top:var(--e-5); }

/* ── Textes d'appoint ────────────────────────────────────────────── */
html[data-refonte] .muted { color:var(--ink-3); }
html[data-refonte] .eyebrow {
  display:block; color:var(--primary-hover);
  font:500 .9375rem/1.2 var(--police-signal); letter-spacing:.11em; text-transform:uppercase;
}
html[data-refonte] .status {
  display:inline-block; padding:6px var(--e-3); border:1px solid var(--primary-soft-border); border-radius:999px;
  background:var(--primary-soft); color:var(--primary-hover);
  font-size:.75rem; font-weight:600; white-space:nowrap;
}
html[data-refonte] .status::before {
  content:''; display:inline-block; width:6px; height:6px; margin-right:var(--e-2);
  border-radius:50%; background:var(--primary); vertical-align:middle;
}
html[data-refonte] .pill { padding:var(--e-1) var(--e-3); border:1px solid var(--border); border-radius:var(--r-sm); }
html[data-refonte] .inline-link,
html[data-refonte] .text-action,
html[data-refonte] .back-link {
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  font-size:.875rem; font-weight:600; line-height:1.5;
}
html[data-refonte] button.text-action {
  padding:0; border:0; background:none; color:var(--primary-hover);
  text-decoration:underline; text-underline-offset:4px;
}

/* ── Boutons ─────────────────────────────────────────────────────── */
html[data-refonte] .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e-3);
  min-height:48px; padding:var(--e-3) 20px;
  border:1px solid transparent; border-radius:var(--r-md);
  font-size:1rem; font-weight:600; line-height:1.35; text-align:center; text-decoration:none;
  transition:background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
html[data-refonte] .btn svg { width:18px; height:18px; flex:none; }
html[data-refonte] .btn:active { transform:translateY(1px); }
html[data-refonte] .btn-primary { background:var(--primary); color:#fff; }
html[data-refonte] .btn-primary:hover { background:var(--primary-hover); }
html[data-refonte] .btn-dark { background:var(--primary-hover); color:#fff; }
html[data-refonte] .btn-dark:hover { background:#07481F; }
html[data-refonte] .btn-light { background:var(--surface); border-color:var(--border); color:var(--ink); }
html[data-refonte] .btn-light:hover { background:var(--bg-2); border-color:var(--border-fort); }
html[data-refonte] .btn-ghost { background:transparent; border-color:var(--border); color:var(--ink); }
html[data-refonte] .btn-ghost:hover { background:var(--bg-2); }
html[data-refonte] .btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
html[data-refonte] .btn-danger:hover { background:#8A2713; border-color:#8A2713; }
html[data-refonte] .btn:disabled,
html[data-refonte] .btn[aria-disabled="true"] {
  background:#E2E7E1; border-color:#C8D0C7; color:var(--ink-3);
  cursor:not-allowed; transform:none;
}

/* ── Carte ───────────────────────────────────────────────────────── */
html[data-refonte] .card {
  padding:var(--e-5); border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface);
}

/* ── Fenêtre (dialog natif : focus retenu, Échap, retour du focus) ── */
html[data-refonte] .modal {
  width:calc(100% - 40px); max-width:480px; padding:var(--e-6);
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); color:var(--ink); font:400 .9375rem/1.55 var(--police-texte);
}
html[data-refonte] .modal::backdrop,
html[data-refonte] .site-menu::backdrop { background:rgba(7, 25, 15, .72); }
html[data-refonte] .modal h2 { margin-bottom:var(--e-3); font-size:1.5625rem; }
html[data-refonte] .modal p { margin:var(--e-3) 0; color:var(--ink-3); }
html[data-refonte] .modal .btn { margin-top:var(--e-4); }
/* La page ne défile pas derrière une fenêtre ouverte. */
html[data-refonte]:has(dialog[open]) { overflow:hidden; }

/* ── En-tête commun ──────────────────────────────────────────────── */
html[data-refonte] .site-header { border-bottom:1px solid var(--border); background:var(--bg); }
html[data-refonte] .header-inner {
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-4);
  min-height:88px;
}
html[data-refonte] .site-header .tk-logo { flex:none; }
html[data-refonte] .nav { display:flex; align-items:center; gap:var(--e-3); min-width:0; }
html[data-refonte] .nav-lien {
  display:inline-flex; align-items:center; min-height:44px; padding-inline:6px;
  border-radius:var(--r-sm);
  font-size:.9375rem; font-weight:500; text-decoration:none; white-space:nowrap;
}
html[data-refonte] .nav-lien:hover { text-decoration:underline; }
html[data-refonte] .nav-lien[aria-current="page"] { color:var(--primary-hover); font-weight:600; }
html[data-refonte] .header-scan { white-space:nowrap; }
html[data-refonte] .header-person { white-space:nowrap; }
html[data-refonte] .menu-toggle { display:none; }

/* ── Menu (téléphone et tablette) ────────────────────────────────── */
html[data-refonte] .site-menu {
  width:min(520px, calc(100% - 32px)); max-height:calc(100% - 32px); padding:var(--e-5);
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--bg); color:var(--ink); overflow:auto;
}
html[data-refonte] .site-menu[open] { animation:tk-refonte-menu 180ms ease; }
html[data-refonte] .menu-heading {
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-4);
  margin-bottom:var(--e-4);
}
html[data-refonte] .menu-heading h2 { font-size:1.5625rem; letter-spacing:-.03em; }
html[data-refonte] .menu-close { flex:none; white-space:nowrap; }
html[data-refonte] .site-menu nav { display:grid; }
html[data-refonte] .site-menu nav a {
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-4);
  min-height:56px; padding:var(--e-3) var(--e-2);
  border-top:1px solid var(--border);
  font-size:1rem; font-weight:600; text-decoration:none;
  transition:color var(--transition);
}
html[data-refonte] .site-menu nav a:hover { color:var(--primary-hover); }
html[data-refonte] .site-menu-fleche { color:var(--primary-hover); transition:transform var(--transition); }
html[data-refonte] .site-menu nav a:hover .site-menu-fleche { transform:translateX(4px); }
html[data-refonte] .site-menu nav a[aria-current="page"] {
  padding-inline:var(--e-4); border-radius:var(--r-sm);
  background:var(--primary-soft); color:var(--primary-hover);
}
@keyframes tk-refonte-menu {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:none; }
}

/* ── Pied de page commun ─────────────────────────────────────────── */
html[data-refonte] .site-footer {
  margin-top:auto; padding:var(--e-5) 0 var(--e-4);
  border-top:1px solid var(--border);
  color:var(--ink-3); font-size:.875rem;
}
html[data-refonte] .site-footer .wrap {
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-3) var(--e-5);
}
html[data-refonte] .site-footer nav { display:flex; flex-wrap:wrap; gap:0 var(--e-5); }
html[data-refonte] .site-footer a,
html[data-refonte] .site-footer .current-page-label { display:inline-flex; align-items:center; min-width:44px; min-height:44px; }
html[data-refonte] .site-footer a:hover { color:var(--ink); }
html[data-refonte] .site-footer-marque { font-weight:600; color:var(--ink-2); }
html[data-refonte] .current-page-label { color:var(--ink); font-weight:600; cursor:default; }

/* ── Tablette (651 à 1050 px) : liens de texte dans le menu ──────── */
@media (max-width:1050px) {
  html[data-refonte] .nav .desktop { display:none; }
  html[data-refonte] .menu-toggle { display:inline-flex; }
  html[data-refonte] .header-inner { min-height:80px; }
  html[data-refonte] .site-footer .wrap { flex-wrap:wrap; align-items:flex-start; }
  html[data-refonte] .site-footer nav { flex-basis:100%; }
}

/* ── Téléphone (650 px et moins) ─────────────────────────────────── */
@media (max-width:650px) {
  html[data-refonte] { --gouttiere:16px; }
  html[data-refonte] .section { padding-block:40px; }
  html[data-refonte] .eyebrow { font-size:.8125rem; }
  html[data-refonte] .btn { font-size:.9375rem; }
  html[data-refonte] .card { padding:20px; border-radius:var(--e-4); }

  html[data-refonte] .header-inner { min-height:0; gap:var(--e-2); padding-block:10px; }
  html[data-refonte] .nav { flex:1; justify-content:flex-end; gap:var(--e-2); }
  html[data-refonte] .site-header .tk-logo { gap:6px; font-size:1.4375rem; }
  html[data-refonte] .header-person { display:none; }
  html[data-refonte] .header-scan,
  html[data-refonte] .menu-toggle { min-height:44px; padding:10px var(--e-2); font-size:.8125rem; }
  html[data-refonte] .header-scan { flex:1; min-width:0; max-width:200px; white-space:normal; }

  html[data-refonte] .site-menu { padding:20px; }
  html[data-refonte] .menu-heading h2 { font-size:1.3125rem; }

  html[data-refonte] .site-footer .wrap { flex-direction:column; align-items:stretch; }
  /* Liens sur deux colonnes ; un libellé plus large qu'une demi-colonne (« Qui peut déposer une
     offre ») prend sa propre ligne au lieu de passer sur deux lignes et de décaler son voisin.
     Réglé par la largeur du texte, pas par le rang : le pied réduit des pages d'un camping
     n'a pas les mêmes liens. */
  html[data-refonte] .site-footer nav { display:flex; flex-wrap:wrap; gap:0 var(--e-4); }
  html[data-refonte] .site-footer nav > * { flex:1 1 calc(50% - var(--e-2)); min-width:max-content; white-space:nowrap; }
}

/* ── Très petit téléphone (moins de 360 px) ──────────────────────── */
/* Le logo se réduit à sa pastille (le nom reste lu par les lecteurs d'écran) : le bouton
   « Scanner le QR code » tient alors sur une ligne. La pastille garde 44 px de large. */
@media (max-width:359px) {
  html[data-refonte] .site-header .tk-logo { min-width:44px; min-height:44px; }
  html[data-refonte] .site-header .tk-logo__text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; }
  html[data-refonte] .site-header .header-scan { max-width:none; white-space:nowrap; }
}

@media (prefers-reduced-motion:reduce) {
  html[data-refonte] { scroll-behavior:auto; }
  html[data-refonte] .btn,
  html[data-refonte] .site-menu nav a,
  html[data-refonte] .site-menu-fleche { transition:none; }
  html[data-refonte] .btn:active { transform:none; }
  html[data-refonte] .site-menu[open] { animation:none; }
}