/* TiKamp — charte graphique « Collage & plein air » (kit v1.0 du 13/10/2026, v1.1 et v1.2 du 15/10/2026).
   ------------------------------------------------------------------
   Charte RETENUE le 15/10/2026 (une seule ; les anciennes propositions A et C sont retirées).
   NON ACTIVE par défaut : chargée derrière le socle refonte seulement si la variable
   d'environnement UI_CHARTE est posée (toute valeur sauf « off », voir src/services/refonte.js),
   qui pose html[data-charte]. Vitrine et parcours campeur : palette, Barlow, titres au pinceau,
   collages, découpes ; gestion : palette et logo seulement (police du socle).
   Contrastes calculés (WCAG) : forêt/papier 9,04 · encre/papier 13,61 · blanc/forêt 10,0 ·
   encre/soleil 7,63 · muted/papier 5,38 · rose/blanc 6,05. Le soleil ne sert JAMAIS de couleur de texte
   sur fond clair (1,78) ; il est fond (texte encre) ou filet décoratif.
   Après toute modification : changer VERSION_CHARTE dans src/services/refonte.js.
   ------------------------------------------------------------------ */

@font-face { font-family:'Barlow'; src:url('/fonts/charte/Barlow-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('/fonts/charte/Barlow-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('/fonts/charte/Barlow-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Permanent Marker'; src:url('/fonts/charte/PermanentMarker-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

/* ═══ 1. Palette (partout, gestion comprise) ═══════════════════════════ */
html[data-refonte][data-charte] {
  --bg:#F7F3EB; --bg-2:#EFE9DB; --surface:#FFFFFF;
  --ink:#1D2923; --ink-2:#34423A; --ink-3:#59675F;
  --border:#DAD3C2; --border-fort:#7E8D83; --border-strong:#7E8D83;
  --primary:#174B38; --primary-hover:#103A2B;
  --primary-soft:#E4ECE6; --primary-soft-border:#BFD0C4;
  --accent:#E9AF2B; --accent-soft:#FBF0D2; --accent-ink:#6B4A06; --accent-border:#E6CD8A;
  --danger:#A93832; --danger-soft:#F8E8E6;
  --tk-sun:#E9AF2B; --tk-forest:#174B38; --tk-paper:#F7F3EB; --tk-rose:#B82463;
  --g-menu-fond:#174B38; --g-menu-trait:#E9AF2B; --g-menu-doux:#D6E4DA;
  --tk-logo-ink:#174B38;
}
/* Page séjour : feuille propre, mêmes teintes. */
html[data-refonte][data-charte][data-ecran="s"], html[data-refonte][data-charte][data-ecran="camping"], html[data-refonte][data-charte][data-ecran="portail"], html[data-refonte][data-charte][data-ecran="reserver"] {
  --paper:#F7F3EB; --surface-2:#EFE9DB; --border-strong:#7E8D83;
  --vert:#174B38; --vert-d:#103A2B; --vert-l:#E4ECE6; --txt:#1D2923;
  --foret:#174B38; --terre:#174B38; --terre-d:#103A2B; --o-sand:#F7F3EB; --o-gold:#E9AF2B;
}
html[data-refonte][data-charte] body { background:var(--bg); --paper:#F7F3EB; --surface-2:#EFE9DB; --vert:#174B38; --vert-d:#103A2B; --vert-l:#E4ECE6; --foret:#174B38; --terre:#174B38; --terre-d:#103A2B; --txt:#1D2923; }

/* ═══ 2. Barlow (hors gestion) ═══════════════════════════════════════ */
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) {
  --police-texte:'Barlow', Arial, sans-serif;
  --police-signal:'Barlow', Arial, sans-serif;
  --police-marqueur:'Permanent Marker', 'Barlow', Arial, sans-serif;
  font-size:106.25%; /* Barlow a un oeil plus petit qu'Inter : 17 px ≈ 16 px Inter */
}
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) body { font-family:var(--police-texte); }
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) h1, html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) h2, html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) h3 { letter-spacing:-.005em; font-weight:700; }
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) h1 { line-height:1.08; }
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) .eyebrow {
  font-family:var(--police-texte); font-weight:700; font-size:.8125rem; letter-spacing:.12em;
  color:var(--ink-3);
}
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) .g-menu-marque .eyebrow, html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) .host-band .eyebrow { color:var(--g-menu-doux, #D6E4DA); }
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) button, html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) input, html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) select, html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) textarea { font-family:var(--police-texte); }
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) .btn { font-weight:600; border-radius:6px; }
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) .btn-primary { background:var(--primary); color:#fff; }
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) .btn-primary:hover { background:var(--primary-hover); }
/* Boutons secondaires d'appel : soleil + encre (7,63) */
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) .site-header .btn-light.header-person,
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) .page-accueil .arrival-actions .btn-light,
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) .btn-soleil { background:var(--tk-sun); border-color:var(--tk-sun); color:var(--ink); }
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) .site-header .btn-light.header-person:hover,
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) .page-accueil .arrival-actions .btn-light:hover,
html[data-refonte][data-charte]:not([data-refonte-famille="gestion"]) .btn-soleil:hover { background:#DDA220; border-color:#DDA220; }

/* ═══ 3. Logo dessiné (jamais recomposé en police) ═══════════════════ */
html[data-refonte][data-charte] .tk-logo {
  display:block; flex:none; width:var(--tk-logo-w, 160px); height:calc(var(--tk-logo-w, 160px) * .3667);
  min-height:44px; background:url('/assets/charte/logo-compact.svg') left center / contain no-repeat;
}
html[data-refonte][data-charte] .tk-logo__badge { display:none; }
html[data-refonte][data-charte] .tk-logo__text {
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
html[data-refonte][data-charte] .site-header .header-inner { min-height:84px; }
html[data-refonte][data-charte] .g-admin .g-entete .tk-logo { --tk-logo-w:128px; min-height:44px; }
html[data-refonte][data-charte] .g-admin .g-entete .tk-logo__text { display:block; }
@media (max-width:760px) {
  html[data-refonte][data-charte] .tk-logo { --tk-logo-w:145px; }
  html[data-refonte][data-charte] .g-admin .g-entete .tk-logo { --tk-logo-w:96px; }
  html[data-refonte][data-charte] .site-header .header-inner { min-height:72px; }
}

/* ═══ 3 bis. Logo PRINCIPAL (tente, soleil, sapins + mot + accroche) ══
   Fichier dessiné posé par refonte.js (<img class="tk-logo-principal">, alt « TiKamp — Le plein air,
   simplement »). Montré au pied de page de toutes les pages publiques (la gestion n'a pas de pied)
   et DANS LA BARRE DU HAUT, à la place du logo compact, sur l'accueil seulement (.tk-logo--principal ;
   v1.2 : l'arrivée du campeur et la page séjour suivent la règle des autres pages). Un seul « TiKamp »
   en tête d'écran. Ailleurs (autres pages publiques, gestion) : logo compact en barre. */
html[data-refonte] .tk-logo-principal { display:none; max-width:100%; height:auto; }
html[data-refonte][data-charte] .site-footer-marque { display:inline-block; flex:none; width:128px; line-height:0; }
html[data-refonte][data-charte] .tk-logo-principal--pied { display:block; width:100%; }
/* Barre du haut : 88 px de haut sur ordinateur (≈ 114 px de large), 72 px sur téléphone (≈ 94 px). */
html[data-refonte][data-charte] .site-header .tk-logo--principal {
  width:auto; height:auto; min-height:0; background:none; line-height:0;
}
html[data-refonte][data-charte] .site-header .tk-logo--principal .tk-logo__text { display:none; }
html[data-refonte][data-charte] .tk-logo-principal--entete { display:block; width:auto; height:88px; }
html[data-refonte][data-charte] .site-header:has(.tk-logo--principal) .header-inner { padding-block:8px; }
/* Accueil : l'accroche « Le plein air, simplement. » reste écrite en texte (v1.2) : dans le logo de la
   barre (72–88 px de haut), le slogan est trop petit pour compter comme texte lisible (retour du graphiste). */
@media (max-width:760px) {
  html[data-refonte][data-charte] .tk-logo-principal--entete { height:72px; }
  html[data-refonte][data-charte] .site-header:has(.tk-logo--principal) .header-inner { padding-block:6px; }
  html[data-refonte][data-charte] .site-footer-marque { width:112px; }
}

/* ═══ 4. Titres expressifs de la vitrine (famille public) ═══════════ */
html[data-refonte][data-refonte-famille="public"][data-charte] h1 {
  font-family:var(--police-marqueur); font-weight:400; letter-spacing:0; line-height:1.14;
  color:var(--primary); text-wrap:balance;
}
html[data-refonte][data-refonte-famille="public"][data-charte] .page-accueil .hero-copy h1 { font-size:clamp(2.75rem, 5.6vw, 4.75rem); }
html[data-refonte][data-refonte-famille="public"][data-charte] .page-accueil .hero-copy h1 { max-width:11ch; }
/* Découpe jaune : le mot choisi (marqué <span class="tk-decoupe"> à l'injection) */
html[data-refonte][data-refonte-famille="public"][data-charte] .tk-decoupe { display:inline-block; position:relative; isolation:isolate; padding:0 .12em; color:var(--primary); }
/* Découpe papier jaune */
html[data-refonte][data-refonte-famille="public"][data-charte] .tk-decoupe::before {
  content:''; position:absolute; z-index:-1; inset:14% -5% 0 -5%; background:var(--tk-sun);
  clip-path:polygon(1% 13%,13% 5%,26% 10%,42% 0,61% 9%,78% 2%,99% 13%,96% 84%,80% 94%,60% 87%,41% 100%,20% 89%,0 97%);
  transform:rotate(-1.5deg);
}

/* ═══ 5. Collage et papier déchiré (vitrine et parcours campeur) ═══ */
/* Accueil : le collage « voyage » remplace la photo dans le document (refonte.js, poserCollageAccueil).
   v1.3 (retour de Patrice, 15/10) : plus d'effet de petite carte blanche. Le fond blanc du collage est
   fondu dans le crème (brightness ramène le fond 253-254 du WebP à 255, puis multiply : un blanc pur
   prend la couleur du fond, le reste de l'illustration ne bouge presque pas) ; les bords déchirés
   restent. Le cadre 2,5:1 ne retire que des marges blanches vides du fichier (contenu utile : y 144→726
   sur 800) : aucun recadrage de l'illustration, aucune déformation. Mobile : l'image reste après les
   actions (ordre du socle). Ordinateur et tablette : le paysage occupe ~55 % de la largeur. */
html[data-refonte][data-charte] .page-accueil .hero-photo.tk-collage {
  height:auto; min-width:0; width:100%; padding:0; border-radius:0; overflow:hidden; background:transparent;
  aspect-ratio:1600 / 640;
}
html[data-refonte][data-charte] .page-accueil .hero-photo.tk-collage img {
  height:100%; object-fit:cover; object-position:50% 72%; mix-blend-mode:multiply;
}
html[data-refonte][data-charte] .page-accueil .hero { align-items:center; }
@media (min-width:651px) {
  html[data-refonte][data-charte] .page-accueil .hero {
    grid-template-columns:minmax(0, 45fr) minmax(0, 55fr); gap:var(--e-6);
  }
}
html[data-refonte][data-charte] .page-accueil .host-band {
  border-radius:0; padding-block:calc(var(--e-7) + 8px);
  background:var(--primary); clip-path:polygon(0.0% 8px,3.8% 9px,7.7% 4px,11.5% 5px,15.4% 8px,19.2% 9px,23.1% 3px,26.9% 13px,30.8% 10px,34.6% 7px,38.5% 6px,42.3% 12px,46.2% 11px,50.0% 3px,53.8% 8px,57.7% 5px,61.5% 11px,65.4% 4px,69.2% 9px,73.1% 8px,76.9% 4px,80.8% 3px,84.6% 14px,88.5% 15px,92.3% 4px,96.2% 8px,100.0% 14px,100.0% calc(100% - 4px),96.2% calc(100% - 7px),92.3% calc(100% - 9px),88.5% calc(100% - 11px),84.6% calc(100% - 6px),80.8% calc(100% - 4px),76.9% calc(100% - 15px),73.1% calc(100% - 8px),69.2% calc(100% - 5px),65.4% calc(100% - 9px),61.5% calc(100% - 6px),57.7% calc(100% - 4px),53.8% calc(100% - 12px),50.0% calc(100% - 7px),46.2% calc(100% - 7px),42.3% calc(100% - 3px),38.5% calc(100% - 14px),34.6% calc(100% - 5px),30.8% calc(100% - 13px),26.9% calc(100% - 8px),23.1% calc(100% - 5px),19.2% calc(100% - 10px),15.4% calc(100% - 7px),11.5% calc(100% - 12px),7.7% calc(100% - 10px),3.8% calc(100% - 4px),0.0% calc(100% - 5px));
}
html[data-refonte][data-charte] .page-accueil .host-band .eyebrow { color:#F0D58B; }
html[data-refonte][data-charte] .page-accueil .host-band-texte p, html[data-refonte][data-charte] .page-accueil .host-steps span { color:#E4EDE7; }
html[data-refonte][data-charte] .page-accueil .host-band .btn { background:var(--tk-sun); color:var(--ink); }
html[data-refonte][data-charte] .page-accueil .host-band .btn:hover { background:#F4C14E; }
/* Coup de pinceau sous les titres de section de l'accueil */
html[data-refonte][data-charte] .page-accueil .section-head h2::after,
html[data-refonte][data-charte] .page-vitrine .section-head h2::after {
  content:''; display:block; width:min(220px, 55%); height:14px; margin-top:10px;
  background:url('/assets/charte/coup-de-pinceau.svg') left center / 100% 100% no-repeat;
}
html[data-refonte][data-charte] .page-accueil .path-card { border-radius:12px; }
html[data-refonte][data-charte] .page-accueil .search { border-radius:8px; border:2px solid var(--primary); box-shadow:4px 4px 0 var(--tk-sun); }
html[data-refonte][data-charte] .page-accueil .search-champ input { font-size:1.0625rem; }
html[data-refonte][data-charte] .site-footer { background:var(--bg-2); border-top:0; position:relative; }
html[data-refonte][data-charte] .site-footer::before {
  content:''; position:absolute; left:0; right:0; top:-12px; height:14px; background:var(--bg-2);
  clip-path:polygon(0 100%,0 40%,4% 20%,9% 55%,14% 15%,20% 50%,27% 10%,33% 45%,40% 0,47% 40%,54% 12%,61% 52%,68% 8%,75% 44%,82% 14%,89% 48%,95% 18%,100% 40%,100% 100%);
}

/* Octobre Rose : accent rose de la charte (6,05 sur blanc), logo inchangé */
html[data-refonte][data-charte] .tk-or-pill { border-color:var(--tk-rose); color:#8F1B4B; background:#FBEAF1; }
html[data-refonte][data-charte] .tk-or-pill svg { color:var(--tk-rose); }

/* ═══ 6. Pages de service sobres (carte, tarifs, séjour) ════════════ */
html[data-refonte][data-charte] .page-vitrine h1 { font-size:clamp(2.25rem, 4.6vw, 3.75rem); }
/* Séjour (v1.2) : écran fonctionnel → plus de liseré en dents de scie sous l'en-tête (le filet discret du
   socle revient) ; le nom du camping est écrit en Barlow gras, pas au pinceau (réservé aux accroches) :
   un nom long se lit d'un coup d'œil, sans grandes variations de hauteur. */
html[data-refonte][data-charte][data-ecran="s"] h1 {
  font-family:var(--police-texte); font-weight:700; letter-spacing:-.01em; line-height:1.15; color:var(--primary);
}
html[data-refonte][data-charte][data-ecran="s"] .card, html[data-refonte][data-charte][data-ecran="s"] .panel { border-radius:12px; }

/* ═══ 7. Charte v1.1 (15/10/2026) : collages de pages et signe TK ═══
   Collages (contact, devenir hôte, aide, communes), posés par refonte.js (.tk-collage-entete) :
   fond blanc opaque → bande BLANCHE pleine largeur, jamais le crème ; image width:100% /
   height:auto, ratio conservé, aucun recadrage ; ordinateur (≥ 960 px) : à côté du titre, le texte
   reste aligné sur la colonne de la page et le collage s'étend vers la droite ; mobile : sous le titre.
   La bande déborde en largeur par border-image (dessin seulement : aucun défilement horizontal). */
html[data-refonte][data-charte] main.origine.tk-collage-page { padding-top:0; }
html[data-refonte][data-charte] .tk-collage { margin:0; background:#fff; }
/* Le fond des WebP livrés vaut 253-254 et non 255 : un rectangle à peine gris se devinait sur la
   bande blanche. +1,2 % de luminosité ramène ce fond à 255 sans changer l'illustration à l'œil. */
html[data-refonte][data-charte] .tk-collage img { display:block; width:100%; height:auto; filter:brightness(1.012); }
html[data-refonte][data-charte] .tk-collage-entete:not(.hero-inner) {
  /* Largeur utile de la barre du haut (.wrap : 1240 px moins ses gouttières) : le collage s'arrête
     au même bord droit que le bouton « Devenez hôte ». */
  --tk-bande:calc(min(1240px, 100vw) - 2 * var(--gouttiere));
  margin:0 0 var(--e-6); padding:var(--e-6) 0;
  background:#fff; border-image:linear-gradient(#fff 0 0) fill 0 / 0 / 0 100vw;
}
html[data-refonte][data-charte] .tk-collage-texte > :last-child { margin-bottom:0; }
html[data-refonte][data-charte] .tk-collage-entete:not(.hero-inner) .tk-collage { margin-top:var(--e-5); }
/* En-tête « Accueil TiKamp » : sur la bande, pas de second fond ni de filet. */
html[data-refonte][data-charte] .tk-collage-texte > .o-entete.top { padding:0; border:0; background:none; }
@media (min-width:960px) {
  html[data-refonte][data-charte] .tk-collage-entete:not(.hero-inner) {
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); gap:var(--e-7); align-items:center;
    margin-right:calc((100% - var(--tk-bande)) / 2); padding-block:var(--e-7);
  }
  html[data-refonte][data-charte] .tk-collage-entete:not(.hero-inner) .tk-collage { margin-top:0; }
}
/* Communes : le bandeau photo devient une bande blanche, collage dans la colonne de droite. */
html[data-refonte][data-charte] .page-communes main.origine.tk-collage-page .hero { background:#fff; color:var(--ink); }
html[data-refonte][data-charte] .page-communes main.origine.tk-collage-page .hero .eyebrow { color:var(--primary); }
html[data-refonte][data-charte] .page-communes main.origine.tk-collage-page .hero .eyebrow::before { background:var(--tk-sun); }
html[data-refonte][data-charte] .page-communes main.origine.tk-collage-page .hero h1 { text-shadow:none; }
html[data-refonte][data-charte] .page-communes main.origine.tk-collage-page .hero .deck { color:var(--ink-2); text-shadow:none; }
html[data-refonte][data-charte] .page-communes main.origine.tk-collage-page .hero .link-quiet { color:var(--primary); }
html[data-refonte][data-charte] .page-communes main.origine.tk-collage-page .hero .link-quiet:hover { color:var(--primary-hover); }
html[data-refonte][data-charte] .page-communes main.origine.tk-collage-page .hero .essai-note { color:var(--ink-3); }
html[data-refonte][data-charte] .page-communes main.origine.tk-collage-page .hero .info { color:var(--ink); }
html[data-refonte][data-charte] .page-communes .hero .tk-collage { margin-top:var(--e-6); }
@media (min-width:960px) {
  html[data-refonte][data-charte] .page-communes .hero .tk-collage-entete {
    display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:var(--e-7); align-items:center;
    max-width:calc(1240px - 2 * var(--gouttiere)); /* mêmes bords que la barre du haut */
  }
  html[data-refonte][data-charte] .page-communes .hero .tk-collage { margin-top:0; }
  /* Titre sur deux lignes à côté du collage (sur quatre, il écrasait la colonne). */
  html[data-refonte][data-refonte-famille="public"][data-charte] .page-communes main.origine.tk-collage-page .hero h1 { font-size:clamp(2.375rem, 3.7vw, 3.5rem); }
}

/* ═══ 8. Signe TK (signe SECONDAIRE de la charte v1.1, p. 12) ═══════════════════════════
   Règles : ≥ 32 px en interface (16/24 px réservés au favicon) ; marge libre ≥ 10 % (celle du
   fichier : 9 % de chaque côté, plus l'espace autour de l'image) ; ni contour, ni ombre, ni
   déformation (largeur = hauteur, fichier carré) ; nom « TiKamp » accessible et présent à côté.
   Le logo principal reste celui qui présente la marque : le TK n'est jamais posé là où il est
   (barre de l'accueil, pied de page). Masqué par défaut. */
html[data-refonte] .tk-signe { display:none; }

/* 8a. En-tête de gestion, mobile seulement (le mot dessiné serrait le nom du camping) : signe TK 36 px
   et, dessous, le nom « TiKamp » écrit en petit (texte réel : le .tk-logo__text du lien, rendu visible) ;
   le lien garde son nom accessible « TiKamp — accueil ». Le nom du camping reste prioritaire : la marque
   ne prend que 44 px de large. Ordinateur : mot dessiné. */
@media (max-width:650px) {
  html[data-refonte][data-refonte-famille="gestion"][data-charte] .g-admin .g-entete .tk-logo:has(.tk-signe) {
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    width:44px; height:auto; min-height:44px; background:none;
  }
  html[data-refonte][data-refonte-famille="gestion"][data-charte] .g-admin .g-entete .tk-signe { display:block; width:36px; height:36px; }
  html[data-refonte][data-refonte-famille="gestion"][data-charte] .g-admin .g-entete .tk-logo:has(.tk-signe) .tk-logo__text {
    position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:nowrap;
    font-size:.6875rem; font-weight:700; line-height:1; letter-spacing:.01em; color:var(--tk-forest);
  }
}

/* 8b. En-tête des pages publiques et du parcours campeur (hors accueil), mobile seulement : signe TK 40 px
   + le mot « TiKamp » écrit à côté (texte réel : le .tk-logo__text du lien, rendu visible), Barlow
   semi-gras vert forêt. Le mot dessiné, large, laissait peu de place au bouton « Devenez hôte » et
   au menu. Ordinateur (> 650 px) : mot dessiné, inchangé. Cible tactile : 44 px de haut. */
@media (max-width:650px) {
  html[data-refonte][data-charte] .site-header .tk-logo:has(.tk-signe--entete) {
    display:inline-flex; align-items:center; gap:8px; width:auto; height:44px; min-height:44px; background:none;
  }
  html[data-refonte][data-charte] .site-header .tk-signe--entete { display:block; flex:none; width:40px; height:40px; }
  html[data-refonte][data-charte] .site-header .tk-logo:has(.tk-signe--entete) .tk-logo__text {
    position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:nowrap;
    font-family:'Barlow', Arial, sans-serif; font-weight:600; font-size:1.375rem; line-height:1; letter-spacing:0;
    color:var(--tk-forest); padding-top:6px; /* centre optique : le lettrage du TK est sous son soleil */
  }
}

/* ═══ 9. Charte v1.2 : visuels d'état (page introuvable, sans résultat, message envoyé) ═══
   Vignettes posées par refonte.js (et tk-refonte-charte.js pour la carte). Fond blanc opaque : toujours
   sur une zone blanche (carte, fenêtre, ou la vignette elle-même, arrondie, sur le crème) ; jamais
   recadrées (object-fit:contain, ratio 3:2 conservé) ; 200–280 px, 320 px au plus sur ordinateur. */
html[data-refonte][data-charte] .tk-etat-visuel {
  display:block; width:min(100%, 280px); height:auto; aspect-ratio:3 / 2; object-fit:contain;
  background:#fff; border-radius:12px; filter:brightness(1.012);
}
html[data-refonte][data-charte] .tk-etat-titre { margin:0; font-weight:700; font-size:1.125rem; line-height:1.3; color:var(--ink); }

/* 9a. Page introuvable : vignette au-dessus du message (ensemble compact) ; ordinateur : à droite. */
html[data-refonte][data-charte] .page-annuaire .introuvable.tk-etat .tk-etat-visuel--page-introuvable { width:min(100%, 220px); margin:0 0 var(--e-5); }
@media (min-width:760px) {
  html[data-refonte][data-charte] .page-annuaire .introuvable.tk-etat {
    display:grid; grid-template-columns:minmax(0, 1fr) 320px; column-gap:var(--e-7); align-items:center;
  }
  html[data-refonte][data-charte] .page-annuaire .introuvable.tk-etat > * { grid-column:1; }
  html[data-refonte][data-charte] .page-annuaire .introuvable.tk-etat .tk-etat-visuel--page-introuvable {
    grid-column:2; grid-row:1 / span 4; width:320px; margin:0;
  }
}

/* 9b. Sans résultat (annuaire, carte) : carte blanche centrée, vignette, titre, action principale. */
html[data-refonte][data-charte] .page-annuaire .nores.tk-etat {
  display:flex; flex-direction:column; align-items:center; gap:var(--e-3); text-align:center;
  margin:var(--e-5) 0; padding:var(--e-6) var(--e-5); background:#fff; border:1px solid var(--border); border-radius:12px;
}
html[data-refonte][data-charte] .page-annuaire .nores.tk-etat p { margin:0; max-width:52ch; color:var(--ink-2); }
html[data-refonte][data-charte] .page-annuaire .nores.tk-etat .tk-etat-visuel { width:min(100%, 240px); }
html[data-refonte][data-charte] .results .empty.tk-etat .tk-etat-visuel { width:min(100%, 200px); margin-top:var(--e-3); }
html[data-refonte][data-charte] .page-annuaire .nores.tk-etat .btn { min-height:44px; margin-top:var(--e-2); }
html[data-refonte][data-charte] .results .empty.tk-etat {
  display:flex; flex-direction:column; align-items:center; gap:var(--e-3); text-align:center; padding:var(--e-5) var(--e-3) var(--e-6);
}
html[data-refonte][data-charte] .results .empty.tk-etat .tk-etat-titre { display:block; }
html[data-refonte][data-charte] .results .empty.tk-etat .btn {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 var(--e-5); margin-top:var(--e-2);
  border:0; border-radius:6px; background:var(--primary); color:#fff; font:inherit; font-weight:600; cursor:pointer;
}
html[data-refonte][data-charte] .results .empty.tk-etat .btn:hover { background:var(--primary-hover); }
html[data-refonte][data-charte] .results .empty.tk-etat .btn:focus-visible { outline:3px solid var(--tk-sun); outline-offset:2px; }

/* 9c. Message envoyé : vignette en tête de la confirmation (contact) ou de la fenêtre (communes, associations). */
html[data-refonte][data-charte] .page-contact .envoye.tk-etat .tk-etat-visuel,
html[data-refonte][data-charte] .modal.tk-etat .tk-etat-visuel { width:min(100%, 240px); margin:0 auto var(--e-4); }
html[data-refonte][data-charte] .modal.tk-etat .tk-etat-visuel { width:min(100%, 200px); }

/* ═══ 10. Charte v1.2 : l'action avant la décoration sur mobile (≤ 650 px) ═══
   Aide et contact : le collage passe APRÈS les commandes (recherche et profils ; formulaire), dans sa
   propre bande blanche ; l'introduction reste en tête. L'en-tête enveloppant (texte + collage) est
   « défait » (display:contents) et <main> range ses enfants en colonne : seul l'ordre visuel change,
   l'ordre de lecture reste celui du document (le collage est décoratif, alt=""). Ordinateur : inchangé. */
@media (max-width:650px) {
  html[data-refonte][data-charte] main.tk-collage-page:has(> .tk-collage-entete--aide),
  html[data-refonte][data-charte] main.tk-collage-page:has(> .tk-collage-entete--contact) { display:flex; flex-direction:column; padding-top:var(--e-5); }
  html[data-refonte][data-charte] main.tk-collage-page > .tk-collage-entete--aide,
  html[data-refonte][data-charte] main.tk-collage-page > .tk-collage-entete--contact { display:contents; }
  html[data-refonte][data-charte] .tk-collage-entete--aide > .tk-collage-texte,
  html[data-refonte][data-charte] .tk-collage-entete--contact > .tk-collage-texte { margin-bottom:var(--e-5); }
  html[data-refonte][data-charte] .tk-collage-entete--aide > .tk-collage,
  html[data-refonte][data-charte] .tk-collage-entete--contact > .tk-collage {
    order:1; margin:var(--e-6) 0; padding-block:var(--e-5);
    border-image:linear-gradient(#fff 0 0) fill 0 / 0 / 0 100vw;
  }
  html[data-refonte][data-charte] main.tk-collage-page > .tk-collage-entete--contact ~ .autres { order:2; }
  /* Aide : le collage ferme la page (marge du bas de <main> suffit avant le pied). */
  html[data-refonte][data-charte] .tk-collage-entete--aide > .tk-collage { margin-bottom:0; }
}

/* Communes, mobile : le bouton d'essai reste avant le collage, sans grand vide entre la note d'essai et
   le collage ; titre en deux phrases (« Le camping tourne. » / « Vous gardez la main. »), chacune sur
   une ligne quand la largeur le permet : taille calée sur la largeur d'écran, jamais de débordement. */
@media (max-width:650px) {
  html[data-refonte][data-refonte-famille="public"][data-charte] .page-communes main.origine.tk-collage-page .hero h1 {
    font-size:clamp(1.75rem, 9.4vw, 2.5rem); text-wrap:wrap; overflow-wrap:break-word;
  }
  html[data-refonte][data-charte] .page-communes main.origine.tk-collage-page .hero { padding-bottom:var(--e-5); }
  html[data-refonte][data-charte] .page-communes main.origine.tk-collage-page .hero .info:empty { margin:0; min-height:0; padding:0; }
  html[data-refonte][data-charte] .page-communes .hero .tk-collage { margin-top:var(--e-4); }
}

/* ═══ 11. Charte v1.2 : pinceau réservé aux accroches ═══
   Fiches d'annuaire (camping, aire, hôte du réseau) : le titre est le NOM du lieu → Barlow gras. */
html[data-refonte][data-refonte-famille="public"][data-charte] .page-annuaire h1:has(~ .badges) {
  font-family:var(--police-texte); font-weight:700; letter-spacing:-.01em; line-height:1.12;
  font-size:clamp(1.875rem, 4vw, 2.75rem);
}

/* ═══ 12. Charte v1.2 : un rôle constant pour les boutons ═══
   Action principale = vert forêt ; jaune = accent ou action secondaire choisie. Pages Communes et
   Associations : leur feuille posait --forest:#0F7C3C (vert vif d'avant la charte) → vert forêt. */
html[data-refonte][data-charte] body.page-offre { --forest:#174B38; --forest-d:#103A2B; --forest-soft:#E4ECE6; }
/* Page séjour : « Créer mon compte ou me connecter » est écrit par son script avec un style en ligne au
   vert vif d'avant la charte (#0F7C3C) → vert forêt, comme toute action principale (!important : seul
   moyen de passer devant un style en ligne sans toucher au script, partagé avec la charte éteinte). */
html[data-refonte][data-charte] .pill-btn[style*="#0F7C3C"] { background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; }
html[data-refonte][data-charte] .pill-btn[style*="#0F7C3C"]:hover { background:var(--primary-hover) !important; }

@media (prefers-reduced-motion:reduce) { html[data-refonte][data-charte] * { transition:none !important; } }