/* Affiliation-Dating — site8 — feuille de style separee du generateur.
   RESKIN THEME 6 (2026-08-31) : bascule complete vers la palette theme6 (blanc + accent
   orange aplat + texte noir), remplace le creme/rose poudre herite de theme5 (voir
   style.css.bak-theme5-2026-08-31 pour l'ancienne version). Voir
   dierection-artistic/theme6/CLAUDE.md pour la doctrine complete (tokens, decisions actees
   avec Jerome le 2026-08-31). Structure/mise en page inchangee (grid, spacing), seuls les
   tokens de couleur/typo retravailles + les couleurs en dur corrigees individuellement (hero,
   site-header, bio-funnel, sticky-cta, section-dark, city-pill.active, promo-cta). CTA/
   bio-funnel/sticky-cta en aplat bleu plein (PAS de gradient, demande explicite Jerome
   2026-08-31), texte noir dessus (PAS de blanc, demande explicite Jerome 2026-08-31). */

:root {
  --c-bg: #FFFFFF;           /* fond page, blanc */
  --c-panel: #FFFFFF;        /* 1re nuance de panneau (sections alternees), blanc pur */
  --c-panel-alt: #E8F2FF;    /* 2e nuance, tint bleu pastel (alternance blanc/tint demandee) */
  --c-card: #ffffff;         /* fond des cards/blocs, blanc */
  --c-border: rgba(17, 17, 17, 0.12);  /* liseret noir translucide, discret sur fond clair */
  --c-text: #111111;         /* texte courant, noir */
  --c-text-strong: #000000;  /* titres / emphase forte, noir soutenu */
  --c-text-muted: #5C5952;   /* texte secondaire / meta, gris chaud */
  --c-accent: #2F8FFF;       /* bleu, accent general (liens, city-pill actif) */
  --c-accent-light: #6BB3FF; /* bleu plus clair, variante */
  --c-accent-gradient: #2F8FFF; /* aplat bleu plein — CTA/bio-funnel/sticky-cta, PAS de gradient */
  --c-chip-bg: rgba(47, 143, 255, 0.14); /* fond de pastille/chip, bleu translucide */
  --c-header: #FFFFFF;       /* fond du header, full white (demande Jerome 2026-09-11, site15 -
                                 remplace le noir herite de site14, ne pas recopier ce token sur
                                 un autre site sans decision explicite pour CE site) */
  --c-header-text: #111111;  /* texte du header, noir (fond desormais blanc plein) */
  /* Paire dediee texte-sur-carte : --c-card est blanc, garder une paire noir distincte des
     tokens generaux (utile si --c-text venait a evoluer independamment). Voir .geo-card,
     .profile-card, .sub-intention, .photo-chip, .photo-quote (heritage theme4, corrige
     globalement le 2026-08-21, tokens repris ici en version theme6). */
  --c-card-text: #111111;        /* texte courant sur fond --c-card (blanc), noir */
  --c-card-text-muted: #5C5952;  /* texte secondaire sur fond --c-card, gris chaud */
  --c-card-accent: #145DBA;      /* variante foncee de --c-accent (bleu), lisible sur fond --c-card */
  --c-hero-bg: #ffffff;      /* fond du hero, blanc */
  --c-hero-text: #111111;    /* texte du hero, noir */
  --font-heading: 'Poppins', Arial, Helvetica, sans-serif;
  --font-body: 'Poppins', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 18px;      /* Theme 2 : 18px (etait 17px sous Theme 1) */
  line-height: 1.6;
}

/* Filet de securite global : tout lien non stylise explicitement ailleurs retombe ici,
   jamais sur le bleu par defaut du navigateur (demande Jerome 2026-08-13). Les selecteurs
   plus specifiques (.seo-intro a, .breadcrumb a, .footer-col a, etc.) restent prioritaires. */
a {
  color: var(--c-accent-light);
  text-decoration: none;
}

.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px 80px;
}

/* --- en-tete / logo --- */

.site-header {
  background: var(--c-header);
  margin-bottom: 24px;
  border-bottom: 1px solid var(--c-border);  /* separation visible, header blanc sur fond page blanc (2026-09-07) */
}

/* le header reste clair meme si --c-text-strong global est devenu blanc (fond sature) —
   forcer le texte en noir ici, theme4 2026-08-17 */
.site-header, .site-header a, .site-header nav.categories a {
  color: var(--c-header-text);
}

.site-header-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding: 14px 16px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .site-header-inner {
    justify-content: center;
  }
}

.brand {
  display: flex;
  align-items: center;
}

.logo-link {
  display: block;
  line-height: 0;
}

.site-logo {
  height: 48px;  /* logo sexdejtinggratis.com theme5, fond transparent (2026-08-28) */
  width: auto;
  display: block;
}

/* --- navigation categories --- */

nav.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

nav.categories a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-text-strong);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

nav.categories a:hover {
  border-bottom-color: var(--c-accent);
}

.silo-title {
  margin-top: 36px;
  opacity: 0.6;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-h1 {
  font-family: var(--font-heading);
  color: var(--c-text-strong);
  font-size: 1.85rem;
  margin: 24px 0 16px;
}

/* --- hero pages categorie (5 silos) ---
   Seule zone claire du theme4 (le reste du site est en fond bleu sature/texte blanc) : le
   hero est passe au blanc avec texte bleu vif le 2026-08-17 (inverse de l'ancien hero sombre
   theme3), d'ou les surcharges locales de couleur ci-dessous (h1/subtitle/breadcrumb) qui ne
   suivent pas --c-text-strong/--c-text-muted (blancs sur le reste du site). */
.hero {
  background: var(--c-hero-bg);
  border-bottom: 1px solid rgba(43, 33, 23, 0.15);
  padding: 22px clamp(20px, 5vw, 64px) 34px;
  margin: 0 0 24px;
  font-family: var(--font-body);
}

.hero-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.hero .breadcrumb {
  color: rgba(43, 33, 23, 0.65);
  font-size: 12.5px;
  font-weight: 500;
  margin: 0 0 16px;
}

.hero .breadcrumb a {
  color: rgba(43, 33, 23, 0.65);
}

.hero .breadcrumb span[aria-current="page"] {
  color: var(--c-hero-text);
  font-weight: 600;
}

.hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--c-hero-text);  /* override local : le reste du site est en --c-text-strong blanc, le hero reste clair */
  font-size: clamp(14px, 2.6vw, 36px);  /* shrink agressif (pas de max-width/wrap, voir white-space) */
  line-height: 1.2;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 10px;
}

.hero .cta {
  flex-shrink: 0;
  white-space: nowrap;
}

.hero .hero-subtitle {
  color: rgba(43, 33, 23, 0.82);  /* override local, idem .hero h1 */
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.55;
  max-width: 640px;
  margin: 0;
}

.seo-intro {
  margin: 0 0 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-border);
}

.seo-intro p {
  margin: 0 0 14px;
  opacity: 0.85;
  font-size: 1.02rem;
}

.seo-intro h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin: 24px 0 10px;
  color: var(--c-accent);
}

.seo-intro h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin: 16px 0 6px;
  opacity: 0.9;
}

.seo-intro a {
  color: var(--c-accent);
  text-decoration: none;
  font-weight: 600;
}

.seo-intro a:hover {
  text-decoration: underline;
}

.city-immersive-h2 {
  font-family: var(--font-heading);
  color: var(--c-text-strong);
  font-size: 1.5rem;
  margin: 24px 0 10px;
}

.city-immersive-text {
  margin: 0 0 14px;
  opacity: 0.85;
  font-size: 1.02rem;
}

.category-seo-block {
  margin: 0 0 40px;
}

.category-seo-block p {
  margin: 0 0 14px;
  opacity: 0.85;
  font-size: 1.02rem;
}

.category-seo-block h2 {
  font-family: var(--font-heading);
  color: var(--c-accent);
  font-size: 1.6rem;
  margin: 28px 0 10px;
}

.silo-intro {
  opacity: 0.75;
  font-size: 1rem;
  margin: 4px 0 0;
}

/* --- pages piliers (silo mere) : blocs editoriaux haut/bas --- */

.category-editorial-top,
.category-editorial-bottom {
  margin: 0 0 40px;
}

.category-editorial-top p,
.category-editorial-bottom p {
  margin: 0 0 14px;
  opacity: 0.85;
  font-size: 1.02rem;
}

.category-editorial-top h2,
.category-editorial-bottom h2 {
  font-family: var(--font-heading);
  color: var(--c-accent);
  font-size: 1.6rem;
  margin: 28px 0 10px;
}

.editorial-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.editorial-links li {
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: 14px;
  background: var(--c-chip-bg);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}

.sub-intentions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 12px 0 20px;
}

.sub-intention {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--c-card);
  border: 1px solid rgba(22, 34, 61, 0.15);
  color: var(--c-card-text-muted);
}

.sub-intention h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  color: var(--c-card-text);
}

.sub-intention .semantic-field {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0;
}

.keyword-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 8px;
}

.keyword-pill {
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--c-chip-bg);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}

.faq-intro {
  margin: 8px 0 0;
  opacity: 0.85;
}

.faq-outro {
  margin: 16px 0 0;
  opacity: 0.85;
}

.faq-list {
  margin-top: 12px;
}

.faq-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--c-border);
}

.faq-item h3 {
  font-size: 1.02rem;
  margin: 0 0 6px;
  color: var(--c-text);
}

.faq-item p {
  margin: 0;
  opacity: 0.85;
}

.editorial-cta {
  font-weight: 600;
  color: var(--c-accent);
}

/* --- pages niveau 2 (silo x scenario) : intro + liens transversaux --- */

.scenario-intro {
  margin: 0 0 24px;
  opacity: 0.85;
  font-size: 1.02rem;
  max-width: 70ch;
}

.sibling-links {
  margin: 40px 0 0;
}

.sibling-links h2 {
  font-family: var(--font-heading);
  color: var(--c-accent);
  font-size: 1.4rem;
  margin: 0 0 12px;
}

.sibling-links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sibling-link {
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 14px;
  background: var(--c-chip-bg);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  text-decoration: none;
}

/* --- filtre ville par silo --- */

.city-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.city-pill {
  display: inline-block;
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: 14px;
  background: var(--c-chip-bg);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.city-pill:hover {
  border-color: var(--c-accent);
}

.city-pill.active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #111111;  /* pastille bleue aplat, texte noir (theme6, 2026-08-31) */
}

/* Liste "villes/kommuner/fylker proches" (.nearby-cities-grid, 2026-09-15, demande Jerome) :
   puces propres (disc) + lien classique souligne, au lieu du texte brut sans style qui
   s'affichait avant (aucune regle dediee n'existait). Garde la couleur accent du site (jamais
   le bleu par defaut du navigateur, regle du 2026-08-13) - seul le soulignement est ajoute. */
.nearby-cities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  padding-left: 1.4em;
}
@media (max-width: 700px) {
  .nearby-cities-grid {
    grid-template-columns: 1fr;
  }
}
/* Puce sur le conteneur de chaque ligne (.nearby-city-item), pas sur le lien lui-meme, pour
   que la distance (hors lien, 2026-09-15 demande Jerome) reste groupee sous la meme puce. */
.nearby-cities-grid .nearby-city-item {
  display: list-item;
  list-style-type: disc;
  margin-bottom: 6px;
}
.nearby-cities-grid .nearby-city {
  color: var(--c-accent);
  text-decoration: underline;
}
.nearby-cities-grid .nearby-distance {
  text-decoration: none;
  color: var(--c-text-muted);
}

/* --- bloc "20 plus grandes villes de Suede" (fiches profil, sous .nearby-cities, 2026-08-28) --- */
.top-cities {
  padding: 40px clamp(20px, 5vw, 64px) 60px;
  max-width: 1400px;
  margin: 0 auto;
}

.top-cities h2 {
  font-family: var(--font-heading);
  color: var(--c-text-strong);
  font-size: 26px;
  margin: 0 0 18px;
}

.top-cities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4x5 exact, 20 villes */
  gap: 10px;
}

.top-city-pill {
  /* lien texte seul, pas de carte - zone cliquable = le texte uniquement (2026-08-28).
     justify-self: start empeche le lien de s'etirer sur toute la cellule de la grille (les
     elements enfants directs d'un display:grid sont "blockifies" par le navigateur meme avec
     display:inline, sans ce reglage la zone cliquable resterait toute la largeur de colonne). */
  justify-self: start;
  font-size: 0.88rem;
  color: var(--c-text-muted);
  text-decoration: underline;
}

.top-city-pill:hover {
  color: var(--c-accent);
}

/* --- cards Lan / top villes (home, 2026-08-17) : titre + accroche, pas de photo --- */

.geo-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.geo-card {
  /* 2026-08-21 : n'est plus un <a> (le lien entourait toute la carte) - reste une simple boite
     visuelle, seul .geo-card-title porte desormais un <a> texte (demande Jerome : ancre
     exact-match KW, pas toute la carte cliquable). */
  display: block;
  background: var(--c-card);
  border-radius: 8px;
  border: 1px solid rgba(22, 34, 61, 0.15);
  padding: 14px 16px;
  transition: border-color .15s;
}

.geo-card:hover {
  border-color: var(--c-accent);
}

.geo-card-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.geo-card-title a {
  color: var(--c-card-accent);
  text-decoration: none;
}

.geo-card-title a:hover {
  text-decoration: underline;
}

.geo-card-hook {
  font-size: 0.85rem;
  color: var(--c-card-text-muted);
  line-height: 1.4;
}

/* --- accordeon Kommuner (home + pages lan/kommun), ajoute 2026-08-21 -----------------------
   <details>/<summary> natif HTML : pas de JS requis, contenu present dans le DOM des le chargement
   (les <a href> des 290 kommuner sont crawlables sans interaction). --- */

.kommun-accordion {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kommun-accordion-group {
  border: 1px solid rgba(22, 34, 61, 0.15);
  border-radius: 8px;
  background: var(--c-card);
  padding: 4px 0;
}

.kommun-accordion-group summary {
  cursor: pointer;
  padding: 10px 16px;
  font-weight: 600;
  list-style: none;
  color: var(--c-card-text);
}

.kommun-accordion-group summary::-webkit-details-marker {
  display: none;
}

.kommun-count {
  font-weight: 400;
  color: var(--c-card-text-muted);
  font-size: 0.85rem;
}

.kommun-accordion-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 16px 12px;
}

.kommun-accordion-links a {
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: 14px;
  background: rgba(22, 34, 61, 0.06);
  color: var(--c-card-text-muted);
  border: 1px solid rgba(22, 34, 61, 0.15);
  text-decoration: none;
}

.kommun-accordion-links a:hover {
  border-color: var(--c-accent);
}

/* --- lien de retour kommun/lan (pages stad/kommun) --- */

.geo-context-links {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  margin: 4px 0 12px;
}

.geo-context-links a {
  color: var(--c-text-muted);
}

/* --- carte "Fakta om {plats}" (pages stad/kommun), ajoutee 2026-08-21 - inspiree de la
   section #agmw6fhcyav73im3ps de seksitreffitori.fi/keski-pohjanmaa/veteli/ (reference fournie
   par Jerome). Fond clair (--c-card) comme les autres cartes -> texte en --c-card-text/-muted,
   jamais --c-text (blanc, illisible sur ce fond - meme correctif que le 21/08 sur les autres
   cartes). --- */

.geo-fact-card {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--c-card);
  border: 1px solid rgba(22, 34, 61, 0.15);
}

.geo-fact-card h2 {
  color: var(--c-card-text);
  font-size: 1.1rem;
  margin: 0 0 10px;
}

/* 2026-08-21 : facts + carte cote a cote dans le meme rectangle (retour Jerome : "carte a
   droite, presente propre") - avant, la carte etait empilee sous la liste, ce qui donnait
   l'impression de deux blocs disjoints plutot qu'une seule fiche compacte. */
.geo-fact-body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.geo-fact-list {
  margin: 0;
  flex: 1 1 260px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  align-content: start;
}

.geo-fact-row {
  display: contents;
}

.geo-fact-row dt {
  color: var(--c-card-text-muted);
  font-weight: 600;
}

.geo-fact-row dd {
  margin: 0;
  color: var(--c-card-text);
}

.geo-fact-row dd a {
  color: var(--c-card-accent);
  text-decoration: none;
}

.geo-fact-row dd a:hover {
  text-decoration: underline;
}

.geo-map-embed {
  flex: 1 1 320px;
  min-width: 260px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(22, 34, 61, 0.15);
}

.geo-map-embed iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
}

/* --- grille de profils (home), 6 colonnes x 4 rangees visibles --- */

.profile-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.profile-card {
  text-decoration: none;
  color: var(--c-card-text);
  display: block;
  background: var(--c-card);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(22, 34, 61, 0.15);
  transition: border-color .15s;
}

.profile-card:hover {
  border-color: var(--c-accent);
}

.profile-card img,
.card-noimg {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: var(--c-chip-bg);
  display: block;
}

.card-body {
  padding: 8px 10px 10px;
}

.card-name {
  color: var(--c-card-accent);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-bio {
  font-size: 0.8rem;
  color: var(--c-card-text-muted);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.card-tag {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--c-chip-bg);
  color: var(--c-text-muted);
  white-space: nowrap;
}

.card-readmore {
  display: block;
  font-size: 0.75rem;
  color: var(--c-accent);
  font-weight: 600;
  margin-top: 6px;
}

@media (max-width: 900px) {
  .profile-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
  .profile-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- teaser (page index) --- */

.teaser {
  border-top: 1px solid var(--c-border);
  padding: 18px 0;
  display: flex;
  gap: 14px;
}

.teaser:first-of-type {
  border-top: none;
}

.teaser img {
  width: 100px;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--c-chip-bg);
}

.teaser .col {
  flex: 1;
  min-width: 0;
}

.teaser h3 {
  font-family: var(--font-heading);
  color: var(--c-text-strong);
  margin: 0 0 6px;
  font-size: 1.3rem;
}

.teaser p {
  margin: 0 0 8px;
  font-size: 1rem;
  opacity: 0.85;
}

.teaser a.readmore {
  font-size: 0.92rem;
  color: var(--c-accent);
  text-decoration: none;
  font-weight: 600;
}

.teaser a.readmore:hover {
  text-decoration: underline;
}

/* --- fiche individuelle --- */

/* rythme de sections : nuances de noir (Theme 2), .section-light et .section-dark gardent
   leurs noms historiques (utilises par le generateur) mais sont maintenant deux nuances de
   noir plutot qu'une alternance clair/sombre. */
.section-light {
  background: var(--c-panel);
  padding: 40px clamp(20px, 5vw, 64px);
}

.bio-grid {
  display: grid;
  grid-template-columns: 365px 1fr 220px;  /* photo-col +15% puis +20% puis +20% (2026-08-28, demande Jerome) */
  gap: 28px;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
}

/* Ordre visuel force via CSS Grid `order` (2026-08-27) - le HTML source place desormais
   .bio-text/.long-desc en premier enfant de .bio-grid (remonte le texte le plus haut possible
   dans le code, poids SEO/crawlers), mais l'affichage visuel reste identique : photo a gauche,
   texte au milieu, bandeau a droite - aucun changement pour le visiteur. */
.bio-grid > .photo-col { order: 1; }
.bio-grid > .bio-text { order: 2; }
.bio-grid > .side-banner { order: 3; }

/* Meme principe applique aux pages ville (stad/*.html, 2026-09-13, demande Jerome) : le bloc
   .city-text-block (pre-FAQ + FAQ, le texte le plus riche/unique de la page) est remonte au
   plus tot dans le HTML source (juste apres l'intro editoriale eventuelle), devant profile-grid/
   nearby-cities/geo-fact-card qui sont plus "template"/repetitifs. Scope a `.wrap-stad`
   uniquement - ne pas toucher `.wrap` seul, reutilise par les pages lan/kommun/home qui ont une
   structure differente et ne doivent PAS heriter de ces valeurs d'order. */
.wrap-stad {
  display: flex;
  flex-direction: column;
}
.wrap-stad > .profile-grid { order: 1; }
.wrap-stad > .nearby-cities { order: 2; }
.wrap-stad > .geo-fact-card { order: 3; }
.wrap-stad > .city-text-block { order: 4; }

/* Meme principe applique aux pages lan/kommun (2026-09-14, demande Jerome). Les fragments
   sample_section/siblings_section/kommuner_section n'etaient pas emballes dans un conteneur
   dedie (juste un h2 + un div profile-grid/geo-card-grid en freres) - ajout d'un wrapper div
   au point d'insertion (voir build_preview.py) pour que `order` deplace le titre ET son
   contenu ensemble, sans casser le regroupement visuel. */
.wrap-lan {
  display: flex;
  flex-direction: column;
}
.wrap-lan > .lan-sample-section { order: 1; }
.wrap-lan > .lan-editorial-sections { order: 2; }
.wrap-lan > .lan-kommuner-section { order: 3; }
.wrap-lan > .nearby-cities { order: 4; }
.wrap-lan > .lan-text-block { order: 5; }

.wrap-kommun {
  display: flex;
  flex-direction: column;
}
.wrap-kommun > .kommun-sample-section { order: 1; }
.wrap-kommun > .kommun-siblings-section { order: 2; }
.wrap-kommun > .nearby-cities { order: 3; }
.wrap-kommun > .geo-fact-card { order: 4; }
.wrap-kommun > .kommun-text-block { order: 5; }

/* Meme principe applique a la home (2026-09-15, demande Jerome) : .home-text-block (meme texte
   verbatim que city/lan/kommun-text-block, {variable}="Norge") remonte au plus tot dans le HTML
   source (avant le rotator/cartes lan/villes), mais reste affiche visuellement APRES ce contenu
   - aucun changement pour le visiteur. Scope a `.wrap-home` uniquement, meme discipline que
   wrap-stad/wrap-lan/wrap-kommun (ne jamais toucher `.wrap` seul). */
.wrap-home {
  display: flex;
  flex-direction: column;
}
.wrap-home > .home-body { order: 1; }
.wrap-home > .home-text-block { order: 2; }

@media (max-width: 900px) {
  .bio-grid {
    grid-template-columns: 1fr;
  }
  /* demande Jerome 2026-09-07 puis 2026-09-08 : padding du haut de .section-light reduit a
     5px sur mobile - photo-col doit etre quasi au ras du haut. */
  .section-light {
    padding-top: 5px;
  }
  /* demande Jerome 2026-09-08 : plus de bordure blanche a GAUCHE de la photo profil en mobile -
     .section-light garde son padding lateral (clamp 20-64px) pour le reste du contenu, mais
     .profile-photo l'annule a gauche via marge negative pour toucher le bord de l'ecran.
     Cote droit : padding conserve tel quel, car .profile-photo est dans .photo-row (flex) a
     cote de .blur-thumbs-stack (mini-vignettes) - une marge negative a droite ferait deborder
     la grande photo par-dessus les vignettes. */
  .profile-photo {
    margin-left: calc(-1 * clamp(20px, 5vw, 64px));
    border-radius: 0 8px 8px 0;
  }
  /* demande Jerome 2026-09-08 : bio-funnel quasi pleine largeur en mobile, sans toucher aux
     3 mini-vignettes (blur-thumbs-stack) - le funnel est sous la photo, plus bas que la
     colonne de vignettes (qui reste alignee en haut avec .profile-photo), donc une marge
     negative a droite recupere la largeur de la colonne vignettes (72px) + le gap du
     .photo-row (8px) sans jamais recouvrir les vignettes elles-memes. */
  .bio-funnel {
    margin-right: calc(-1 * (72px + 8px));
  }
}

.photo-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-photo {
  position: relative;
  overflow: visible;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

.photo-facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.photo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.photo-chip {
  display: inline-block;
  font-size: 0.78rem;
  padding: 5px 11px;
  border-radius: 14px;
  background: var(--c-card);
  color: var(--c-card-text-muted);
  border: 1px solid rgba(22, 34, 61, 0.15);
  font-weight: 600;
}

.photo-quote {
  background: var(--c-card);
  border-left: 3px solid var(--c-accent);
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.photo-quote .pq-label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-card-text-muted);
  font-weight: 700;
  margin-bottom: 4px;
}

.photo-quote p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--c-card-text);
  font-style: italic;
}

.profile-photo img {
  width: 100%;
  height: 463px;  /* +15% puis +20% puis +20% (2026-08-28, demande Jerome), suit la largeur de .photo-col */
  object-fit: cover;
  object-position: center 15%;
  display: block;
  cursor: pointer;
}

.status-badge {
  position: absolute;
  top: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 20px;
  display: none;
}

.profile-photo .status-badge {
  left: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 10px;
}

.card-photo-wrap .status-badge,
.fiche-photo-wrap .status-badge {
  right: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.status-badge:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.status-badge.badge-online {
  background: rgba(61, 220, 126, 0.15);
  color: #3ddc7e;
}

.profile-photo .status-badge.badge-online {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

.status-badge.badge-online::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc7e;
}

.status-badge.badge-new {
  background: rgba(125, 151, 224, 0.18);
  color: #7d97e0;
}

.profile-photo .status-badge.badge-new,
.profile-photo .status-badge.badge-chatted {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

.status-badge.badge-chatted {
  background: rgba(184, 127, 130, 0.15);
  color: var(--c-accent);
}

.card-photo-wrap {
  position: relative;
}

.bio-text {
  color: var(--c-text);
}

/* Tag thematique scenario_family (test 2026-09-06) - couleur distincte du bio-meta (gris muet)
   pour bien le detacher visuellement, meme famille de gradient que le CTA (.cta) du site. */
.theme-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5f6d, #d92e6b);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.bio-meta {
  color: var(--c-text-muted);
  font-size: 14px;
  margin-bottom: 12px;
  font-weight: 500;
  text-align: center;
}

.bio-preference {
  font-weight: 700;
  text-align: center;
}

.bio-cta-inline {
  text-align: center;
  margin-top: 32px;
}

.bio-cta-inline .cta {
  padding: 17px 40px;
  font-size: 16px;
  margin-top: 0;
}

.bio-text p {
  margin: 0 0 14px;
  line-height: 1.65;
  font-size: 14.5px;
}

.bio-text a:not(.cta) {
  color: var(--c-accent);
  font-weight: 600;
}

/* bandeau pub (rotator par silo) - 3e colonne, meme largeur que la photo (220px). */
.side-banner {
  display: block;
  width: 220px;
  flex-shrink: 0;
  background: var(--c-panel);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
}

@media (max-width: 900px) {
  .side-banner {
    width: 100%;
    max-width: 320px;
  }
}

.side-banner img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

/* --- bandeau vertical "tall" (texte EXTERIEUR a la photo, aplats au-dessus/en dessous,
   pas d'overlay sur l'image - se melangeait visuellement avec la photo de fiche adjacente,
   retour Jerome 2026-08-13). RESKIN THEME 3 (2026-08-15, voir SILO_TALL_BANNERS dans
   build_preview.py et dierection-artistic/theme3/components/banner-verticaux/preview-
   banners.html pour la preview validee) : degrade rose en haut (headline), fond blanc en
   bas avec une 2e phrase en texte rose gras - PAS de pill/bouton CTA, toute la carte est
   deja cliquable (c'est un <a>). Remplace l'ancien bleu #2f6fed (variante discret_affar
   Theme 2, plus utilisee par les silos reels de site5). min-height totale 450px. --- */
/* .side-banner-tall (2026-08-28) : le bandeau entier (headline + photo + CTA) est desormais
   une SEULE image aplatie (Playwright, dierection-artistic/theme5/components/banner-verticaux/),
   plus de sb-text-top/sb-headline/sb-text-bottom/sb-sub HTML par-dessus - regle absolue image
   aplatie du pole. L'ancienne regle "height: 300px + object-fit: cover" coupait le bas du
   visuel (CTA invisible) car pensee pour une simple photo, pas un visuel deja compose. Classes
   sb-* laissees dans la feuille (code mort, pas supprime a l'aveugle) au cas ou un futur
   bandeau tall reviendrait a un montage HTML+photo separes. */
.side-banner.side-banner-tall {
  display: block;
}

.side-banner-tall img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- bandeau grille par silo (image aplatie, 2026-08-15) --- */

.silo-grid-banner-wrap {
  display: block;
  padding: 40px clamp(20px, 5vw, 64px);
  text-align: center;
}

.silo-grid-banner-wrap img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: inline-block;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(184, 127, 130, 0.18);
}

/* --- section likes/dislikes --- */

/* pale/claire, pas une nuance de bleu comme .section-light — c'est ce qui a ete valide en
   atelier (theme4/components/theme4.css, .section-cyan) pour le bloc "Vad X gillar", corrige
   le 2026-08-17 (etait passe par erreur en bleu sature comme .section-light lors de
   l'integration, alors que l'atelier validait un fond clair). */
.section-dark {
  background: #E8F2FF;
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  padding: 44px clamp(20px, 5vw, 64px);
  color: #111111;
}
.section-dark .prefs-title,
.section-dark .pref-head span {
  color: #111111;
}
.section-dark .pref-list li {
  color: #5C5952;
}

.prefs-title {
  font-family: var(--font-heading);
  color: var(--c-text-strong);
  font-size: 26px;
  margin: 0 auto 22px;
  text-align: center;
  max-width: 1400px;
}

.prefs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .prefs-grid {
    grid-template-columns: 1fr;
  }
}

/* carte blanche pleine sur fond pale — l'ancien rgba(255,255,255,.03) presque invisible etait
   pense pour un fond sombre (heritage theme2), disparaissait sur le nouveau fond clair
   #F3EBDC de .section-dark. Corrige le 2026-08-17. */
.pref-card {
  background: #ffffff;
  border: 1px solid rgba(43, 33, 23, 0.1);
  border-radius: 6px;
  padding: 22px 24px;
}

.pref-card.likes {
  border-left: 3px solid #3ddc7e;
}

.pref-card.dislikes {
  border-left: 3px solid #ff5f6d;
}

.pref-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.pref-head .ico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #171114;  /* noir fixe (pas var(--c-bg), qui est rose pale ici et illisible sur fond vert/corail) */
}

.likes .ico { background: #3ddc7e; }
.dislikes .ico { background: #ff5f6d; }

.pref-head span {
  color: var(--c-text-strong);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.3px;
}

.pref-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pref-list li {
  color: var(--c-text-muted);
  font-size: 13.5px;
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
  margin-bottom: 12px;
}

.likes .pref-list li::before,
.dislikes .pref-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.likes .pref-list li::before { background: #3ddc7e; }
.dislikes .pref-list li::before { background: #ff5f6d; }

.cta-strip {
  text-align: center;
  margin-top: 32px;
}

.cta-strip .cta {
  padding: 17px 40px;
  font-size: 16px;
  margin-top: 0;
}

.breadcrumb {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 16px;
}

.breadcrumb a {
  color: var(--c-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb .crumb-sep {
  margin: 0 6px;
  opacity: 0.5;
}

.breadcrumb span[aria-current="page"] {
  color: var(--c-text-strong);
  font-weight: 600;
}

.back-link {
  font-size: 0.88rem;
  opacity: 0.6;
  text-decoration: none;
  color: var(--c-text-muted);
}

.back-link:hover {
  opacity: 1;
}

.long-desc p {
  margin: 0 0 12px;
}

/* --- bandeau promo pleine page --- */
.promo-bandeau {
  background: var(--c-panel-alt);
  margin: 0 0 24px;
}

/* bandeau image unique deja aplatie (grille 20 photos + headline, silo discret_affar) -
   full-bleed edge-to-edge, marges verticales resserrees (demande Jerome 2026-08-13). */
.kategori-flat-banner {
  margin: 8px 0;
}

.kategori-flat-banner a {
  display: block;
}

.kategori-flat-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.promo-bandeau-link {
  display: block;
  text-decoration: none;
}

.promo-bandeau-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(18px, 2.2vw, 28px) clamp(14px, 1.8vw, 26px) clamp(14px, 1.6vw, 20px);
}

.promo-headline {
  text-align: center;
  color: var(--c-text-strong);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: 0.1px;
  margin-bottom: clamp(12px, 1.6vw, 18px);
}

.promo-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(4px, 0.6vw, 8px);
  margin: 0 auto clamp(10px, 1.2vw, 14px);
  max-width: 70%;
}

.promo-photo {
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.promo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.promo-cta-wrap {
  text-align: center;
  margin-top: clamp(10px, 1.4vw, 16px);
}

.promo-cta {
  display: inline-block;
  color: #111111;  /* bouton en aplat bleu plein, texte noir (theme6, 2026-08-31) */
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.3px;
  background: var(--c-accent-gradient);
  padding: clamp(10px, 1.2vw, 14px) clamp(24px, 2.8vw, 38px);
  border-radius: 8px;  /* rectangle, heritage theme5 — pas retranche pour theme6 */
  box-shadow: 0 10px 24px rgba(28, 116, 224, 0.35), 0 0 0 1px rgba(17,17,17,0.08) inset;
}

@media (max-width: 900px) {
  .promo-grid { grid-template-columns: repeat(5, 1fr); max-width: 100%; }
}

@media (max-width: 560px) {
  .promo-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- CTA unique --- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  background: var(--c-accent-gradient);
  color: #111111;  /* bouton en aplat bleu plein, texte noir (theme6, 2026-08-31) */
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.3px;
  padding: 16px 30px;
  border-radius: 8px;  /* rectangle, heritage theme5 — pas retranche pour theme6 */
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(28, 116, 224, 0.35), 0 0 0 1px rgba(17, 17, 17, 0.08) inset;
}

/* --- profils similaires (related-grid) --- */

.similar {
  background: var(--c-panel);
  padding: 40px clamp(20px, 5vw, 64px);
}

.similar > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.similar h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-text-muted);
  opacity: 1;
  margin-bottom: 18px;
}

.similar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

@media (max-width: 900px) {
  .similar-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .similar-grid { grid-template-columns: repeat(2, 1fr); }
}

.similar-grid a {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.similar-grid img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.similar-grid .sname {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 24px 10px 8px;
  background: linear-gradient(0deg, rgba(6, 8, 14, 0.9), rgba(6, 8, 14, 0));
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.similar-grid .status-badge {
  right: 8px;
}

/* --- pied de page --- */

footer.site {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
  font-size: 0.82rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  opacity: 0.85;
  margin-bottom: 20px;
}

.footer-col .footer-cat {
  display: block;
  color: var(--c-text-strong);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  margin-bottom: 8px;
}

.footer-col .footer-cat:hover {
  color: var(--c-accent);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 5px;
}

.footer-col a {
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: 0.82rem;
}

.footer-col a:hover {
  color: var(--c-accent);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

.footer-legal {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-border, rgba(255,255,255,0.1));
  text-align: center;
}

.footer-legal a {
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: 0.78rem;
}

.footer-legal a:hover {
  color: var(--c-accent);
  text-decoration: underline;
}

/* --- age-gate (overlay JS, 2026-09-07) --- */

.age-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.age-gate.open {
  display: flex;
}

.age-gate-card {
  background: var(--c-panel);
  border-radius: 12px;
  padding: 32px 28px;
  max-width: 420px;
  text-align: center;
}

.age-gate-text {
  margin: 0 0 12px;
}

.age-gate-question {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 20px;
}

.age-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.age-gate-no {
  color: var(--c-text-muted);
  font-size: 0.85rem;
  text-decoration: underline;
}

/* --- formulaire de contact (page kontakt.html, 2026-09-07) --- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
}

.contact-form label {
  font-weight: 600;
  margin-top: 8px;
}

.contact-form input,
.contact-form textarea {
  padding: 10px 12px;
  border: 1px solid var(--c-border, rgba(255,255,255,0.15));
  border-radius: 6px;
  background: var(--c-panel);
  color: inherit;
  font: inherit;
}

.contact-form button {
  margin-top: 12px;
  align-self: flex-start;
}

/* --- lightbox (clic photo) --- */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lightbox.open {
  display: flex;
}

.lightbox-inner {
  max-width: 440px;
  width: 100%;
  text-align: center;
}

.lightbox-inner img {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  border-radius: 10px;
}

.lightbox-inner .lb-text {
  margin: 16px 0;
  font-size: 1.02rem;
  opacity: 0.9;
  color: var(--c-text-strong);
}

.lightbox-inner .cta {
  margin-top: 0;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: white;
  font-size: 1.9rem;
  cursor: pointer;
  line-height: 1;
}

/* barre CTA sticky bas de page (fiches profil), full-wide mobile + desktop. */
body:has(.sticky-cta) {
  padding-bottom: 76px;
}

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 90;
  background: var(--c-accent-gradient);  /* aplat bleu, meme traitement que .bio-funnel */
  border-top: none;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
}

.sticky-cta-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  text-decoration: none;
  background: var(--c-accent-gradient);
  transition: filter .15s;
}

.sticky-cta-link:hover {
  filter: brightness(0.92);
}

.sticky-cta-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(17,17,17,0.5);
}

.sticky-cta-text {
  color: #111111;  /* barre en aplat bleu, texte noir (theme6, 2026-08-31) */
  font-weight: 800;
  font-size: 1.02rem;
  flex: 1;
  text-align: center;
}

@media (min-width: 900px) {
  .sticky-cta-link {
    justify-content: center;
    padding: 12px 16px;
  }
  .sticky-cta-text {
    flex: none;
  }
}

/* --- funnel bio (variante B validee 2026-08-15) : remplace le premier .cta inline sous la bio,
   par 2 questions oui/non style "message recu", bascule sur un CTA final. Nouveau composant
   ajoute a cote de l'existant, aucune regle ci-dessus modifiee. --- */
/* carte rose (2026-08-17, demande explicite "fait une carte rose") — avant, carte blanche
   qui ne ressortait plus assez une fois le fond de page passe en bleu sature. */
.bio-funnel {
  background: var(--c-accent-gradient);
  border: none;
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 10px 26px rgba(28, 116, 224, 0.35);
  margin-top: 18px;
  color: #111111;
}
.bio-funnel-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.bio-funnel-progress span {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: rgba(17, 17, 17, 0.2);
}
.bio-funnel-progress span.done {
  background: #111111;
}
.bio-funnel-step {
  display: none;
}
.bio-funnel-step.active {
  display: block;
}
.bio-funnel-question-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.bio-funnel-question {
  margin: 0;
  font-size: 1.35rem;  /* agrandi (2026-08-28, demande Jerome) */
  font-weight: 600;
  color: #111111;
}
.bio-funnel-answers {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.bio-funnel-answers button {
  flex: 1;
  min-width: 120px;
  border: 1.5px solid rgba(17, 17, 17, 0.5);
  background: transparent;
  color: #111111;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 16px;
  border-radius: 9px;
  cursor: pointer;
  transition: all .15s ease;
  font-family: var(--font-body);
}
.bio-funnel-answers button:hover,
.bio-funnel-answers button.primary {
  background: #111111;
  color: #ffffff;
  border-color: transparent;
}
.bio-funnel-final p {
  font-size: 14px;
  color: rgba(17, 17, 17, 0.85);
  margin: 0 0 12px;
}
.bio-funnel-final .cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0;
}

/* --- fil d'ariane masque sur mobile (demande Jerome 2026-09-06) --- */
@media (max-width: 900px) {
  .hero .breadcrumb {
    display: none;
  }
}

/* ============================================================================
   Refonte direction artistique theme6 (2026-09-06, portee depuis site4/5/6/7) : icones sur
   les vignettes/photo principale, mini-photos floutees empilees, accordeon "Las mer om mig",
   remplace le systeme contact_icons/prelanding_shell (dynamique par-fiche, 2026-08-31/09-01)
   par le systeme statique identique aux 5 autres sites deja redesignes. Layouts distincts par
   breakpoint (desktop/mobile) des le depart - voir skills dating-desktop-layout-profil /
   dating-mobile-layout-profil.
   ============================================================================ */

/* --- icones mini-actions (grilles home/similar) --- */
.mini-actions {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  display: flex;
  gap: 6px;
  z-index: 4;
}

.similar-grid .mini-action-icon,
.card-photo-wrap .mini-action-icon {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}

.card-photo-wrap {
  position: relative;
  overflow: visible;
}

.profile-card {
  overflow: visible;
}

.similar-grid a {
  position: relative;
  overflow: visible;
}

/* --- photo principale : icones + mini-photos floutees a cote --- */
.photo-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.profile-photo-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* Theme12 (2026-09-14) : colonne carree uniforme a cote de la photo = 1 mini-photo floutee
   + 3 logos de contact (WhatsApp/Telegram/Aro), plus d'icones flottantes sur la photo. */
.profile-actions {
  display: contents;
}

.profile-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.profile-action-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.profile-action-icon:hover {
  transform: scale(1.05);
}

.blur-thumbs-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 72px;
  flex-shrink: 0;
}

.blur-thumb {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.blur-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(9px) saturate(1.05);
  transform: scale(1.15);
  display: block;
}

/* Badge "+N" sur la mini-photo floutee (2026-09-15, site21 uniquement) - suggere N photos
   supplementaires derriere le lien affilie, centre sur la vignette. */
.blur-thumb-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Layouts distincts par breakpoint (desktop garde la hauteur fixe historique du site, jamais
   eu de bug d'ecrasement ; mobile passe en ratio proportionnel car .bio-grid s'effondre en 1
   colonne pleine largeur sous 900px). */
@media (min-width: 901px) {
  .profile-photo img {
    height: 463px;
    aspect-ratio: auto;
  }
}

@media (max-width: 900px) {
  .profile-photo img {
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

/* --- accordeon "en savoir plus" --- */
.bio-more {
  margin-top: 16px;
}

.bio-more summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 24px;
  border: 1.5px solid var(--c-accent);
  color: var(--c-accent);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

.bio-more summary::-webkit-details-marker {
  display: none;
}

.bio-more summary::after {
  content: "\25BC";
  font-size: 10px;
  transition: transform 0.2s ease;
}

.bio-more[open] summary::after {
  transform: rotate(180deg);
}

.bio-more p {
  margin: 14px 0 0;
}

/* --- accordeon "en savoir plus" du bloc SEO geo (villes/kommuner/lan/home) - meme trick CSS
   (details/summary natif, pas de JS, texte deja dans le DOM au chargement) que .bio-more
   ci-dessus, adapte pour un bloc multi-h3/p au lieu d'un simple paragraphe de bio. --- */
.geo-more {
  margin-top: 16px;
}

.geo-more summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 24px;
  border: 1.5px solid var(--c-accent);
  color: var(--c-accent);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

.geo-more summary::-webkit-details-marker {
  display: none;
}

.geo-more summary::after {
  content: "\25BC";
  font-size: 10px;
  transition: transform 0.2s ease;
}

.geo-more[open] summary::after {
  transform: rotate(180deg);
}

.geo-more h3 {
  margin: 20px 0 8px;
}

.geo-more h3:first-of-type {
  margin-top: 16px;
}

.geo-more p {
  margin: 0 0 12px;
}

/* --- hero : padding reduit (desktop) + reduction mobile maximale --- */
.hero {
  padding-top: 8px;
}

@media (max-width: 900px) {
  .hero {
    padding-top: 4px;
    padding-bottom: 14px;
    margin-bottom: 5px;
  }
  .hero-title-row h1,
  .hero h1 {
    margin: 0;
  }
}

/* --- menu hamburger mobile --- */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  color: inherit;
}

@media (max-width: 900px) {
  .site-header-inner {
    justify-content: space-between;
  }
  .menu-toggle {
    display: block;
    order: 2;
  }
  nav.categories {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    order: 3;
    padding-top: 8px;
  }
  nav.categories.open {
    display: flex;
  }
}

/* --- prelanding "bli medlem gratis" (remplace l'ancienne prelanding dynamique par-fiche) --- */
.prelanding-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 16px 60px;
}

.prelanding-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 28px 22px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  text-align: center;
  color: #1a1a1a;
}

.prelanding-blur-bg {
  height: 90px;
  border-radius: 12px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, var(--c-accent), #1a1a1a);
  filter: blur(2px);
  opacity: 0.85;
}

.prelanding-card h1 {
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 800;
  margin: 0 0 8px;
  color: #1a1a1a;
}

.prelanding-sub {
  color: #5a5a5a;
  font-size: 15px;
  margin: 0 0 20px;
}

.prelanding-features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prelanding-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}

.prelanding-feature-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.prelanding-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px;
  font-size: 16px;
  margin-bottom: 12px;
}

.prelanding-note {
  font-size: 12.5px;
  color: #5a5a5a;
  margin: 0;
}