/* __DESIGN_SITE__ */
/* socle filtres (ajouté par design_site.py) */
html:not(#_) .ds-hide{ display: none !important; }
html:not(#_) body[data-ds-filtres="aucun"] .filters{ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-genre"] .filters .filter-btn[data-filter="type"]{ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-age"] .filters .filter-btn[data-filter="age"]{ display: none !important; }
html:not(#_) body[data-ds-filtres="ligne"] .filters{ display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
html:not(#_) body[data-ds-filtres="ligne"] .filters::-webkit-scrollbar{ display: none; }
html:not(#_) body[data-ds-filtres="ligne"] .filters .filter-btn{ flex: 0 0 auto; white-space: nowrap; }
html:not(#_) .filters select.ds-fsel{ appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; padding-right: 2.1em; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='currentColor' stroke-width='2'/></svg>"); background-repeat: no-repeat; background-position: right .7em center; background-size: 12px 8px; }
html:not(#_) .filters .ds-fgroup{ display: contents; }
/* Next : barre React (div.shadow-sm > div.scrollbar-hide > .form-group > select ×2 + bouton Recherche) */
html:not(#_) body[data-ds-filtres="aucun"] div.rounded-lg.shadow-sm:has(> div.scrollbar-hide > div.form-group > select){ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-genre"] div.scrollbar-hide > div.form-group:first-child:has(> select){ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-tri"] div.scrollbar-hide > div.form-group:nth-child(2):has(> select){ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-recherche"] div.scrollbar-hide > div.relative.flex-shrink-0:has(> button){ display: none !important; }
/* Next `chips` : pastilles d'âge construites par design_filtres.js (le select natif est caché) */
html:not(#_) .ds-fnext{ display: flex; gap: 8px; flex-wrap: nowrap; }
html:not(#_) .ds-fnext .ds-fchip{ flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--secondary-color, #999); background: transparent; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap; }
html:not(#_) .ds-fnext .ds-fchip.active{ background: var(--secondary-color, #18181b); color: #fff; border-color: transparent; }

/* socle menu mobile Astro (ajouté par design_site.py) */
/* 19/09 : la croix du tiroir (label x injecte dans .sidebar-inner) n'etait cachee QUE sous 768 px -> visible en haut
   de la sidebar desktop (3 agents du lot 22 l'ont masquee a la main). Cachee hors tiroir, toutes largeurs. */
html:not(#_) .ds-menu-close{ display: none; }
@media (max-width: 768px) {
  html:not(#_) .ds-burger{ display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 34px; padding: 0 9px; margin-right: 8px; cursor: pointer; border-radius: 8px; color: inherit; flex-shrink: 0; }
  html:not(#_) .ds-burger span{ display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
  html:not(#_) body:has(#ds-menu:checked) .ds-burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  html:not(#_) body:has(#ds-menu:checked) .ds-burger span:nth-child(2){ opacity: 0; }
  html:not(#_) body:has(#ds-menu:checked) .ds-burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
  html:not(#_) .ds-menu-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1290; }
  html:not(#_) body:has(#ds-menu:checked) .ds-menu-overlay{ display: block; }
  html:not(#_) .ds-menu-close{ display: none; }
  html:not(#_) body:has(#ds-menu:checked) aside.sidebar{ display: block !important; position: fixed !important; top: 0 !important; left: 0; bottom: 0; height: auto !important; width: min(86vw, 340px) !important; max-width: none; margin: 0 !important; padding: 12px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 1300; overflow-y: auto !important; max-height: 100vh; max-height: 100dvh; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 0; box-shadow: 8px 0 30px rgba(0,0,0,.35); }
  html:not(#_) body:has(#ds-menu:checked) .ds-menu-close{ display: flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
  html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sidebar-inner{ height: auto; min-height: 100%; }
  html:not(#_) body:has(#ds-menu:checked){ overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { html:not(#_) .ds-burger span{ transition: none; } }

/* ==================
   cougar-monaco.com — registre « CUIVRE & CRÈME »  (lot Monaco, 22/09)
   Accent unique : #bf360c (couleur du favicon) — déclinaisons cuivre.
   Neutre chaud  : crème #fbf5ec / sable #f4e9da / lin #f7efe2.
   Encre         : #2a1c14 (brun très sombre), atténuée #6b5346.
   Formes signature : ARCHE (bord droit de la barre latérale, haut des photos,
   dôme du CTA, haut du pied de page) · CARTOUCHE (filet cuivre sous chaque
   titre, cadre du logo, bandeau du copyright) · MÉDAILLON (pastille du logo,
   chevron de FAQ, cadenas des photos, icône active de la barre basse).
   Composition propre au site : barre latérale crème avec le LOGO EN BAS et la
   navigation EN HAUT · cartes profil LARGES (3 colonnes) avec badge d'âge
   cuivre en bas de la photo · CTA en carte centrée sous arche · FAQ en pilules.
   ================== */

/* ------ a) variables */
html:not(#_){
  --cu: #bf360c;            /* cuivre — l'accent du favicon */
  --cu-d: #8f2708;          /* cuivre foncé (petits textes, 7,9:1 sur crème) */
  --cu-x: #6d1d05;          /* cuivre brûlé */
  --cu-l: #e0703c;          /* cuivre clair */
  --cu-p: #f6d8c2;          /* cuivre pâle (halos) */
  --cr: #fbf5ec;            /* crème — fond des cartes */
  --cr2: #f4e9da;           /* sable */
  --cr3: #ecdcc5;           /* sable soutenu */
  --enc: #2a1c14;           /* encre */
  --enc2: #6b5346;          /* encre atténuée (6,6:1 sur crème) */
  --om: 0 10px 26px rgba(143, 39, 8, .13);
  --om-s: 0 2px 10px rgba(124, 58, 20, .08);

  /* variables du gabarit redéfinies : tout fond devient chaud, tout texte reste lisible */
  --bg: #f7efe2;
  --bg-alt: #f2e6d4;
  --bg-card: #fbf5ec;
  --text: #2a1c14;
  --text-muted: #6b5346;
  --border: #e2cfb4;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 2px 10px rgba(124, 58, 20, .08);
  --shadow-lg: 0 14px 34px rgba(124, 58, 20, .10);
  --card-radius: 18px;
  --card-border-w: 1px;
  --card-border-c: #e7d6bd;
}

/* le gabarit pose --secondary: #9c27b0 EN INLINE sur <body> (violet) : il sert aux
   dégradés de héros, au bouton de la fiche profil et à la méta de la pop-up →
   ramené dans le cuivre (!important obligatoire face au style inline). */
html:not(#_) body{ --secondary: #8f2708 !important; background: #f7efe2; color: var(--enc); }

/* ------ b) barre latérale
   Composition : le logo descend EN BAS (order 3, poussé par .sb-spacer), la
   navigation remonte en tête. Le panneau est crème, son bord droit forme une arche. */
html:not(#_) .sidebar{ width: 252px; }
html:not(#_) .sidebar-inner{ background: linear-gradient(180deg, #fdf8f0 0%, #f6ebd9 100%); border: 1px solid var(--cr3); border-left: none; border-radius: 0 26px 26px 0; box-shadow: 14px 0 32px rgba(143, 39, 8, .07); padding: 16px 12px 14px; scrollbar-width: thin; scrollbar-color: rgba(191, 54, 12, .35) transparent; }
html:not(#_) .sidebar-inner::-webkit-scrollbar{ width: 8px; }
html:not(#_) .sidebar-inner::-webkit-scrollbar-thumb{ background: rgba(191, 54, 12, .32); border-radius: 8px; }

/* nav en haut, logo en bas */
html:not(#_) .sb-nav{ order: 0; display: flex; flex-direction: column; gap: 3px; }
html:not(#_) .sb-section{ order: 1; border-top: 1px solid rgba(191, 54, 12, .16); padding-top: 10px; margin-bottom: 10px; }
html:not(#_) .sb-spacer{ order: 2; }
html:not(#_) .sb-logo{ order: 3; margin: 12px 2px 0; padding: 12px 12px; gap: 12px; background: linear-gradient(135deg, var(--cu) 0%, var(--cu-x) 100%); border-radius: 18px 18px 6px 18px; /* cartouche du logo */ box-shadow: 0 8px 20px rgba(143, 39, 8, .26); }
html:not(#_) .sb-logo-dot{ width: 34px; height: 34px; border-radius: 999px; /* médaillon */ background: var(--cr); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
html:not(#_) .sb-logo-dot svg{ color: var(--cu); }
html:not(#_) .sb-logo-text{ color: #fdf6ec; font-size: .95rem; letter-spacing: .02em; }

/* liens de navigation : pilules larges, filet cuivre qui glisse au survol */
html:not(#_) .sb-link{ position: relative; color: var(--enc2); font-size: .87rem; font-weight: 600; padding: 10px 12px 10px 14px; border-radius: 12px; overflow: visible; }
html:not(#_) .sb-link::before{ content: ''; position: absolute; left: 2px; top: 50%; width: 3px; height: 0; transform: translateY(-50%); background: var(--cu); border-radius: 3px; transition: height .18s ease; }
html:not(#_) .sb-link:hover{ background: rgba(191, 54, 12, .07); color: var(--enc); }
html:not(#_) .sb-link:hover::before{ height: 18px; }
html:not(#_) .sb-link.active{ background: linear-gradient(100deg, var(--cu), var(--cu-x)); color: #fdf6ec; font-weight: 700; box-shadow: 0 6px 16px rgba(143, 39, 8, .22); }
html:not(#_) .sb-link.active::before{ height: 0; }
html:not(#_) .sb-link.active .sb-ico{ color: #fdf6ec; }

html:not(#_) .sb-section-title{ color: var(--cu-d); font-size: .7rem; letter-spacing: .1em; padding: 4px 10px 6px; }
html:not(#_) .sb-map-quick-link{ color: var(--cu-d); background: var(--cu-p); border-radius: 999px; padding: 7px 14px; margin-bottom: 8px; font-size: .8rem; }
html:not(#_) .sb-map-quick-link:hover{ background: #f0c6a9; }
html:not(#_) .sb-silo-region{ color: var(--enc); font-weight: 700; font-size: .84rem; border-radius: 10px; }
html:not(#_) .sb-silo-region:hover{ background: rgba(191, 54, 12, .08); color: var(--cu-d); }
html:not(#_) .sb-silo-ville, html:not(#_) .sb-top-item{ color: var(--enc2); font-size: .8rem; border-radius: 8px; }
html:not(#_) .sb-silo-ville:hover, html:not(#_) .sb-top-item:hover{ background: rgba(191, 54, 12, .08); color: var(--cu-d); }
html:not(#_) .sb-silo-villes{ border-left: 1px dotted rgba(191, 54, 12, .3); margin-left: 8px; padding-left: 10px; }
html:not(#_) .sb-chevron{ color: var(--cu); }

/* ------ barre mobile haute
   Registre clair : crème + encre, le bouton d'inscription reste pleine largeur.
   (jamais de position/display touchés : la barre est fixe par le gabarit) */
html:not(#_) .mobile-guest-top{ background: linear-gradient(180deg, #fdf8f0, #f4e7d4); color: var(--enc); border-bottom: 2px solid var(--cu); box-shadow: 0 6px 18px rgba(143, 39, 8, .16); }
html:not(#_) .mobile-guest-head{ border-bottom: 1px solid rgba(191, 54, 12, .16); }
html:not(#_) .mobile-guest-brand{ color: var(--cu-x) !important; letter-spacing: .01em; }
html:not(#_) .mobile-guest-login{ color: var(--enc2) !important; text-decoration: underline !important; text-underline-offset: 3px; }
html:not(#_) .mobile-guest-cta{ padding: .5rem .85rem .55rem; }
html:not(#_) .mobile-guest-cta-row{ margin-bottom: .45rem; }
html:not(#_) .mobile-guest-cta-offer{ color: var(--cu-d); }
html:not(#_) .mobile-guest-cta-kw{ color: var(--enc); }
html:not(#_) .mobile-guest-timer-label{ color: var(--enc2); }
html:not(#_) .mobile-guest-timer{ color: var(--cu-x); }
html:not(#_) .mobile-guest-cta-btn{ min-height: 44px; display: flex; align-items: center; justify-content: center; background: linear-gradient(100deg, var(--cu), var(--cu-x)); border-radius: 999px; /* pilule */ font-size: .88rem; letter-spacing: .01em; box-shadow: 0 6px 18px rgba(143, 39, 8, .3); }
@media (max-width: 768px) {
  /* le bouton gagne 10 px : on rend l'espace réservé en tête de page */
  html:not(#_) body.has-mobile-guest-top{ padding-top: calc(150px + env(safe-area-inset-top, 0px)); }
}

/* ------ barre basse mobile */
html:not(#_) .bottom-bar{ background: linear-gradient(180deg, #fdf8f0, #f5ead8); border-top: 1px solid var(--cr3); box-shadow: 0 -4px 18px rgba(143, 39, 8, .10); }
html:not(#_) .btab{ color: #8a6a55; }
html:not(#_) .btab-lbl{ font-size: .62rem; font-weight: 600; }
html:not(#_) .btab:hover, html:not(#_) .btab.active{ color: var(--cu-d); }
html:not(#_) .btab.active .btab-ico{ background: rgba(191, 54, 12, .14); border-radius: 999px; }

/* ------ pied de page
   Encre chaude, arche en haut, colonnes séparées par un filet cuivre,
   copyright dans un cartouche. */
html:not(#_) .footer-v1{ background: radial-gradient(1200px 300px at 20% 0%, #45291d 0%, #32211a 55%, #2a1c14 100%); color: #ead9c2; border-radius: 48px 48px 0 0; box-shadow: inset 0 3px 0 var(--cu); padding: 3rem 0 1.5rem; }
html:not(#_) .footer-col h4{ color: #f3ac7c; font-size: .95rem; letter-spacing: .03em; padding-bottom: 8px; position: relative; }
html:not(#_) .footer-col h4::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--cu); border-radius: 3px; }
html:not(#_) .footer-col p{ color: #d8c4aa; }
html:not(#_) .footer-col a{ color: #ead9c2; text-decoration: none; }
html:not(#_) .footer-col a:hover{ color: #f3ac7c; text-decoration: underline; text-underline-offset: 3px; }
html:not(#_) .footer-bottom{ border-top: 1px solid rgba(243, 172, 124, .22); }
html:not(#_) .footer-bottom p{ display: inline-block; margin: 0; padding: 7px 20px; border-radius: 999px; background: rgba(243, 172, 124, .10); color: #d8c4aa; }
@media (min-width: 769px) {
  html:not(#_) .footer-grid{ gap: 2.25rem; }
  /* filets entre les colonnes PLEINES seulement (la 4e colonne du gabarit est vide) */
  html:not(#_) .footer-grid .footer-col:nth-child(2), html:not(#_) .footer-grid .footer-col:nth-child(3){ border-left: 1px solid rgba(243, 172, 124, .18); padding-left: 1.75rem; }
}

/* ==================
   c) recette de mise en page — Astro · cta-faq (copiée de app/design_recettes_v3.css)
   ================== */

/* Astro · cta-faq (pages ville : CTA + FAQ côte à côte ; la carte passe sous la FAQ). */
@media (min-width: 992px) {
  html:not(#_) body.design-v-cta-faq div.container.ds-cf{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; }
  html:not(#_) body.design-v-cta-faq div.container.ds-cf > *{ grid-column: 1 / -1; }
  html:not(#_) body.design-v-cta-faq div.container > section.cta-section, html:not(#_) body.design-v-cta-faq div.container > section.section.ds-faq{ grid-column: auto; align-self: stretch; }
  html:not(#_) body.design-v-cta-faq div.container > section.cta-section{ display: flex; flex-direction: column; justify-content: center; align-self: center; margin-top: 2.5rem; margin-bottom: 2.5rem; }
  html:not(#_) body.design-v-cta-faq div.container > section.section > .info-duo{ grid-template-columns: minmax(0, 1fr); }
}

/* Astro · cta-faq, page ville en ONGLETS (villeVariant = 2 — c'est le cas ici) :
   la FAQ reste affichée en permanence à côté du CTA ≥ 992 px, son onglet est masqué. */
@media (min-width: 992px) {
  html:not(#_) body.design-v-cta-faq div.container.ds-ct{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; }
  html:not(#_) body.design-v-cta-faq div.container.ds-ct > *{ grid-column: 1 / -1; }
  html:not(#_) body.design-v-cta-faq div.container > .tabs .tab[data-tab="faq"]{ display: none; }
  html:not(#_) body.design-v-cta-faq div.container > #tab-faq{ display: block; grid-column: auto; align-self: stretch; }
  html:not(#_) body.design-v-cta-faq div.container > section.cta-section{ grid-column: auto; align-self: center; margin-top: 2.5rem; margin-bottom: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
}

/* ==================
   d) thème des zones — le site se reconnaît partout à ses formes
   ================== */

/* fond de page et sections */
html:not(#_) .bg-gradient{ background: linear-gradient(180deg, #f2e6d4 0%, #f9f2e6 45%, #f7efe2 100%); }
html:not(#_) .section{ background: var(--cr); border: 1px solid var(--cr3); border-radius: 20px; box-shadow: var(--om-s); }
html:not(#_) .section h2{ color: var(--enc); position: relative; padding-bottom: 12px; }
html:not(#_) .section h2::after{ /* cartouche cuivre sous les titres */ content: ''; position: absolute; left: 0; bottom: 0; width: 52px; height: 4px; background: linear-gradient(90deg, var(--cu), var(--cu-l)); border-radius: 4px; transform-origin: left center; animation: mc24-cartouche .5s ease both; }
@keyframes mc24-cartouche { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* titre de page : cartouche centré */
html:not(#_) .page-header h1{ color: var(--enc); letter-spacing: -.01em; }
html:not(#_) .page-header p{ color: var(--enc2); }
html:not(#_) .page-header{ position: relative; padding: 44px 0 30px; }
html:not(#_) .page-header::after{ content: ''; position: absolute; left: 50%; bottom: 14px; width: 92px; height: 4px; transform: translateX(-50%); background: linear-gradient(90deg, var(--cu-l), var(--cu), var(--cu-l)); border-radius: 4px; }
html:not(#_) .breadcrumb, html:not(#_) .breadcrumb a{ color: var(--enc2); }
html:not(#_) .breadcrumb a:hover{ color: var(--cu-d); }
html:not(#_) .seo-content h2{ color: var(--enc); }
html:not(#_) .seo-content p{ color: #4a382c; }

/* recherche de ville */
html:not(#_) .search-input{ background: #fffaf2; border: 1px solid var(--cr3); border-radius: 999px; color: var(--enc); }
html:not(#_) .search-input::placeholder{ color: #927761; }
html:not(#_) .search-input:focus{ border-color: var(--cu); box-shadow: 0 0 0 3px rgba(191, 54, 12, .14); }
html:not(#_) .search-icon{ color: var(--cu); }

/* listes de villes : pilules crème à filet cuivre (et plus de chevauchement du code postal) */
html:not(#_) .link-tag{ background: #fffaf2; border: 1px solid var(--cr3); border-radius: 999px; color: var(--enc); font-weight: 600; flex-wrap: wrap; min-width: 0; gap: 4px; line-height: 1.3; padding: 10px 16px; }
html:not(#_) .link-tag:hover{ border-color: var(--cu); background: var(--cu-p); color: var(--cu-x); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(143, 39, 8, .14); }
html:not(#_) .links-grid-collapsed::after{ background: linear-gradient(to bottom, rgba(251, 245, 236, 0), var(--cr)); }
html:not(#_) .btn-voir-plus{ background: var(--cr2); border: 1px solid var(--cu-p); color: var(--cu-d); border-radius: 999px; min-height: 40px; }
html:not(#_) .btn-voir-plus:hover{ background: var(--cu-p); }
@media (max-width: 768px) {
  /* « Fontvieille (98000) » passe à la ligne sur 2 colonnes : la liste repliée doit laisser voir la pilule entière */
  html:not(#_) .link-tag{ padding: 8px 12px; font-size: .82rem; }
  html:not(#_) .links-grid-collapsed{ max-height: 66px; }
}

/* bande de villes (bas de l'accueil) */
html:not(#_) .regional-cities-strip{ background: var(--cr2); border-top: 1px solid var(--cr3); border-bottom: 1px solid var(--cr3); }
html:not(#_) .rcs-title{ color: var(--enc); }
html:not(#_) .rcs-chip{ background: #fffaf2; border: 1px solid var(--cr3); color: var(--enc2); border-radius: 999px; }
html:not(#_) .rcs-chip:hover{ color: var(--cu-x); border-color: var(--cu); background: var(--cu-p); }
html:not(#_) .rcs-fade-left{ background: linear-gradient(to right, #f4e9da, rgba(244, 233, 218, 0)); }
html:not(#_) .rcs-fade-right{ background: linear-gradient(to left, #f4e9da, rgba(244, 233, 218, 0)); }

/* ------ cartes profil LARGES (3 colonnes) */
@media (min-width: 640px) { html:not(#_) .profile-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { html:not(#_) .profile-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
html:not(#_) .profile-card{ display: flex; flex-direction: column; background: var(--cr); border: 1px solid var(--cr3); border-radius: 20px; box-shadow: var(--om-s); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
html:not(#_) .profile-card:hover{ transform: translateY(-4px); border-color: rgba(191, 54, 12, .45); box-shadow: 0 18px 34px rgba(143, 39, 8, .18); }
html:not(#_) .profile-photo{ aspect-ratio: 5 / 4; /* cartes larges */ border-radius: 19px 19px 0 0; /* arche douce */ background: var(--cr3); }
html:not(#_) .profile-photo img{ transition: transform .5s ease; }
html:not(#_) .profile-card:hover .profile-photo img{ transform: scale(1.05); }
html:not(#_) .profile-card:hover .profile-photo.blurred img{ transform: scale(1.1); }
/* badge d'âge : pilule cuivre EN BAS À GAUCHE (le cadenas garde le coin haut droit) */
html:not(#_) .profile-age{ top: auto; right: auto; bottom: 10px; left: 10px; background: linear-gradient(100deg, var(--cu), var(--cu-x)); color: #fff; border-radius: 999px; padding: .28rem .7rem; font-size: .74rem; font-weight: 700; letter-spacing: .01em; box-shadow: 0 4px 12px rgba(143, 39, 8, .34); }
html:not(#_) .profile-lock{ width: 26px; height: 26px; background: rgba(42, 28, 20, .72); box-shadow: 0 0 0 2px rgba(251, 245, 236, .5); }
html:not(#_) .profile-info{ padding: .85rem .9rem .5rem; }
html:not(#_) .profile-title{ color: var(--cu-d); font-size: .9rem; }
html:not(#_) .profile-name{ color: var(--enc); font-size: 1.06rem; }
html:not(#_) .profile-ville{ color: var(--enc2); font-size: .8rem; }
html:not(#_) .profile-bio{ color: #4a382c; }
/* planche 1 : les « Voir le profil » d'une même rangée n'étaient pas alignés */
html:not(#_) .profile-footer{ margin-top: auto; border-top: 1px dashed rgba(191, 54, 12, .22); padding: .6rem .9rem .8rem; }
html:not(#_) .profile-cta{ background: #fffaf2; border: 1px solid var(--cu); color: var(--cu-d); border-radius: 999px; padding: .55rem .8rem; font-weight: 700; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
html:not(#_) .profile-card:hover .profile-cta{ background: linear-gradient(100deg, var(--cu), var(--cu-x)); color: #fff; box-shadow: 0 6px 16px rgba(143, 39, 8, .28); }

/* ------ filtres (mode « chips ») */
html:not(#_) .filters{ gap: 10px; }
html:not(#_) .filter-btn{ background: #fffaf2; border: 1px solid var(--cr3); color: var(--enc); border-radius: 999px; padding: 9px 18px; min-height: 40px; font-size: .86rem; font-weight: 600; transition: all .18s ease; }
html:not(#_) .filter-btn:hover{ border-color: var(--cu); background: var(--cu-p); color: var(--cu-x); }
html:not(#_) .filter-btn.active{ border-color: transparent; background: linear-gradient(100deg, var(--cu), var(--cu-x)); color: #fff; box-shadow: 0 6px 16px rgba(143, 39, 8, .24); }
html:not(#_) .filters select.ds-fsel{ background-color: #fffaf2; color: var(--enc); }
html:not(#_) .ds-fnext .ds-fchip{ background: #fffaf2; border: 1px solid var(--cr3); color: var(--enc); border-radius: 999px; min-height: 40px; font-weight: 600; }
html:not(#_) .ds-fnext .ds-fchip.active{ background: var(--cu); border-color: transparent; color: #fff; }

/* ------ pagination : pilules cuivre */
html:not(#_) .pagination-link{ background: #fffaf2; border: 1px solid var(--cr3); color: var(--cu-d) !important; font-weight: 700; }
html:not(#_) .pagination-link:hover{ background: var(--cu-p); border-color: var(--cu); }
html:not(#_) .pagination-current{ background: linear-gradient(140deg, var(--cu), var(--cu-x)); color: #fff !important; box-shadow: 0 6px 16px rgba(143, 39, 8, .28); }
html:not(#_) .pagination-ellipsis{ color: var(--enc2); }
html:not(#_) .pagination-arrow{ color: var(--cu-d) !important; }

/* ------ onglets de la page ville : pilules */
html:not(#_) .tabs{ border-bottom: none; gap: 10px; margin-bottom: 1.5rem; }
html:not(#_) .tab{ color: var(--enc2); background: #fffaf2; border: 1px solid var(--cr3); border-bottom: 1px solid var(--cr3); border-radius: 999px; margin-bottom: 0; padding: .6rem 1.4rem; min-height: 42px; }
html:not(#_) .tab:hover{ color: var(--cu-x); border-color: var(--cu); background: var(--cu-p); }
html:not(#_) .tab.active{ color: #fff; border-color: transparent; border-bottom-color: transparent; background: linear-gradient(100deg, var(--cu), var(--cu-x)); box-shadow: 0 6px 16px rgba(143, 39, 8, .24); }

/* ------ CTA : carte centrée sous arche */
html:not(#_) .cta-section{ max-width: 640px; margin-left: auto; margin-right: auto; background: radial-gradient(120% 70% at 50% 0%, rgba(191, 54, 12, .12) 0%, rgba(191, 54, 12, 0) 62%), linear-gradient(180deg, #fffaf2 0%, #f6ead7 100%); border: 1px solid var(--cu-p); border-radius: 130px 130px 24px 24px; /* arche */ box-shadow: 0 18px 40px rgba(143, 39, 8, .14); padding: 3rem 2rem 2.4rem; color: var(--enc); }
html:not(#_) .cta-section h2{ color: var(--enc); font-size: 1.7rem; }
html:not(#_) .cta-section p{ color: var(--enc2); font-size: 1rem; }
html:not(#_) .cta-section .btn-primary, html:not(#_) .cta-section a.btn{ align-self: center; min-width: min(280px, 100%); background: linear-gradient(100deg, var(--cu), var(--cu-x)); color: #fff; border-radius: 999px; min-height: 52px; padding: 14px 38px; font-weight: 700; box-shadow: 0 10px 26px rgba(143, 39, 8, .3); transition: transform .2s ease, box-shadow .2s ease; }
html:not(#_) .cta-section .btn-primary:hover, html:not(#_) .cta-section a.btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(143, 39, 8, .38); filter: none; }
@media (max-width: 768px) {
  html:not(#_) .cta-section{ border-radius: 78px 78px 20px 20px; padding: 2.2rem 1.1rem 1.8rem; }
  html:not(#_) .cta-section h2{ font-size: 1.3rem; }
}

/* ------ FAQ en pilules (colonne de droite ≥ 992 px) */
html:not(#_) .accordion{ display: flex; flex-direction: column; gap: 10px; }
html:not(#_) .accordion-item{ background: #fffaf2; border: 1px solid var(--cr3); border-bottom: 1px solid var(--cr3); border-radius: 16px; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
html:not(#_) .accordion-item:last-child{ border-bottom: 1px solid var(--cr3); }
html:not(#_) .accordion-item[open]{ border-color: rgba(191, 54, 12, .4); box-shadow: 0 8px 20px rgba(143, 39, 8, .1); }
html:not(#_) .accordion-header{ color: var(--cu-d); font-size: .92rem; padding: 14px 16px; }
html:not(#_) .accordion-header:hover{ background: var(--cu-p); }
html:not(#_) .accordion-header::after{ /* chevron en médaillon cuivre */ width: 22px; height: 22px; margin-top: 0; border: none; border-radius: 999px; background: var(--cu-p) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%238f2708' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat center; transform: none; }
html:not(#_) .accordion-item[open] > .accordion-header::after{ transform: rotate(180deg); }
html:not(#_) .accordion-body{ color: #4a382c; padding: 0 16px 14px; }
html:not(#_) .accordion-badge{ background: var(--cu); }
html:not(#_) .info-duo-col{ background: var(--cr); border-color: var(--cr3); border-radius: 18px; }
html:not(#_) .info-duo-title{ background: var(--cr2); border-bottom: 1px solid var(--cr3); color: var(--enc); }

/* carte de la ville (dans l'onglet FAQ) : elle n'avait aucun style — conteneur sans hauteur */
html:not(#_) .ville-map-card{ background: var(--cr); border: 1px solid var(--cr3); border-radius: 18px; padding: 14px; margin-bottom: 14px; box-shadow: var(--om-s); }
html:not(#_) .ville-map-header{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
html:not(#_) .ville-map-header h3{ color: var(--enc); font-size: 1.05rem; margin: 0; }
html:not(#_) .ville-map-badge{ background: var(--cu-p); color: var(--cu-x); border-radius: 999px; padding: 4px 12px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
html:not(#_) .ville-map-container{ height: 300px; border-radius: 14px; overflow: hidden; background: var(--cr2); }
html:not(#_) .ville-map-loading{ color: var(--enc2); }
html:not(#_) .ville-map-spinner{ border-color: var(--cu-p); border-top-color: var(--cu); }
/* repli « carte indisponible » : le script l'écrit avec un fond blanc EN INLINE */
html:not(#_) .ville-map-fallback{ background: #fffaf2 !important; border-color: var(--cr3) !important; }

/* ------ carte locale (accueil) */
html:not(#_) .regional-map-section{ background: var(--cr); border: 1px solid var(--cr3); border-radius: 20px; }
html:not(#_) .regional-map-head h2{ color: var(--enc); }
html:not(#_) .regional-map-head p{ color: var(--enc2); }
html:not(#_) .regional-map-canvas, html:not(#_) .regional-map-stage{ border-radius: 16px; }
html:not(#_) .regional-map-overlay{ background: rgba(42, 28, 20, .42); }
html:not(#_) .regional-map-cta .btn{ background: linear-gradient(100deg, var(--cu), var(--cu-x)); color: #fff; min-height: 48px; box-shadow: 0 10px 24px rgba(143, 39, 8, .34); }
html:not(#_) .regional-popup-item span{ color: var(--enc); }

/* ------ boutons génériques */
html:not(#_) .btn-primary{ background: linear-gradient(100deg, var(--cu), var(--cu-x)); color: #fff; border-radius: 999px; }
html:not(#_) .btn-primary:hover{ filter: brightness(1.06); }
html:not(#_) .btn-outline{ border-color: var(--cu); color: var(--cu-d); border-radius: 999px; }
html:not(#_) .btn-outline:hover{ background: var(--cu); color: #fff; }
html:not(#_) .btn-secondary{ background: var(--cr2); color: var(--enc); border-radius: 999px; }

/* ------ retour en haut : médaillon cuivre */
html:not(#_) .back-to-top{ background: linear-gradient(140deg, var(--cu), var(--cu-x)); color: #fff; border: 2px solid rgba(251, 245, 236, .75); box-shadow: 0 10px 24px rgba(143, 39, 8, .34); }

/* ------ pop-ups (couleurs / rayons seulement) */
html:not(#_) #profileModal .modal-content{ /* fond crème : les variables de texte du gabarit sont redéfinies ICI, sur le conteneur, pour que rien n'hérite d'un gris clair (règle du parc). */ --bg-alt: #f4e9da; --bg-card: #fffaf2; --text: #2a1c14; --text-muted: #6b5346; --border: #e2cfb4; background: linear-gradient(180deg, #fffaf2, #f6ead7); color: var(--enc); border-radius: 22px; border: 1px solid var(--cu-p); }
html:not(#_) #profileModal .modal-body h3{ color: var(--enc); }
html:not(#_) #profileModal .modal-body .modal-bio{ color: #4a382c; }
html:not(#_) #profileModal .modal-body .modal-meta{ color: var(--cu-d); }
html:not(#_) #profileModal .modal-body .modal-tag{ background: var(--cr2); color: var(--enc); border: 1px solid var(--cr3); }
html:not(#_) #profileModal .modal-carousel{ border-radius: 21px 21px 0 0; }
html:not(#_) #profileModal .modal-close{ background: rgba(42, 28, 20, .72); color: #fdf6ec; }
html:not(#_) #profileModal .modal-cta-overlay{ background: rgba(42, 28, 20, .42); }
html:not(#_) #profileModal .btn-cta-overlay{ background: linear-gradient(100deg, var(--cu-l), var(--cu)) !important; border-radius: 999px; box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
html:not(#_) #profileModal .modal-action-primary, html:not(#_) #profileModal .modal-contact-btn{ background: linear-gradient(100deg, var(--cu-l), var(--cu)); color: #fff; border-radius: 999px; min-height: 48px; }
html:not(#_) #profileModal .modal-dot.active{ background: var(--cu-l); }
/* planche 1 : .modal-actions-sticky est un bandeau BLANC (gabarit) sur la fiche crème */
html:not(#_) #profileModal .modal-actions-sticky{ background: #f6ead7; border-top: 1px solid rgba(191, 54, 12, .16); box-shadow: 0 -14px 18px -14px rgba(143, 39, 8, .22); }
html:not(#_) #profileModal .modal-favori{ color: #c9ae95; }
html:not(#_) #profileModal .modal-favori:hover{ color: var(--cu); }

html:not(#_) .popup-card{ background: linear-gradient(180deg, #fffaf2, #f6ead7); border-radius: 24px; border: 1px solid var(--cu-p); }
html:not(#_) .popup-title{ color: var(--enc); }
html:not(#_) .popup-icon{ background: linear-gradient(135deg, var(--cu-p), #f0bd9b); border-radius: 999px; }
html:not(#_) .popup-icon svg{ color: var(--cu-x); }
html:not(#_) .popup-close{ background: var(--cr2); color: var(--cu-d); }
html:not(#_) .popup-close:hover{ background: var(--cu-p); color: var(--cu-x); }
html:not(#_) .popup-btn{ background: linear-gradient(100deg, var(--cu), var(--cu-x)); border-radius: 999px; min-height: 48px; box-shadow: 0 8px 20px rgba(143, 39, 8, .26); }
html:not(#_) .popup-btn-ghost{ color: var(--enc2); }
html:not(#_) .popup-btn-ghost:hover{ color: var(--cu-x); background: rgba(191, 54, 12, .08); }
html:not(#_) .popup-footer{ border-top: 1px solid var(--cr3); color: var(--enc2); }
html:not(#_) .popup-footer a{ color: var(--cu-d); }
/* pop-up d'inscription : le gabarit y met des gris froids (#9ca3af, #cbd5e1, #374151) */
html:not(#_) .popup-desc{ color: var(--enc2); }
html:not(#_) .popup-field label{ color: var(--enc); }
html:not(#_) .popup-field input{ background: #fffdf8; border-color: var(--cr3); color: var(--enc); border-radius: 12px; }
html:not(#_) .popup-field input::placeholder{ color: #a98d76; }
html:not(#_) .popup-dot{ background: var(--cr3); }

html:not(#_) .age-gate-modal{ background: linear-gradient(180deg, #fffaf2, #f4e7d4); border-radius: 24px; border: 1px solid var(--cu-p); }
html:not(#_) .age-gate-modal h2{ color: var(--cu-x); }
html:not(#_) .age-gate-lead{ color: var(--enc); }
html:not(#_) .age-gate-body, html:not(#_) .age-gate-actions{ color: #4a382c; }
html:not(#_) .age-gate-footnote{ color: var(--enc2); }
html:not(#_) .age-gate-modal .btn-primary{ min-height: 48px; }

/* ==================
   e) menu mobile (le socle ouvre la barre latérale en tiroir — on ne l'habille)
   ================== */
html:not(#_) .ds-burger{ color: var(--cu); background: rgba(191, 54, 12, .10); border: 1px solid rgba(191, 54, 12, .28); }
html:not(#_) .ds-menu-close{ background: var(--cu-p); color: var(--cu-x); border: 1px solid rgba(191, 54, 12, .25); }
html:not(#_) .ds-menu-overlay{ background: rgba(42, 28, 20, .5); }
@media (max-width: 768px) {
  /* le tiroir reprend la barre latérale : la croix ne doit pas couvrir le 1er lien */
  html:not(#_) body:has(#ds-menu:checked) .sidebar-inner{ padding-top: 46px; border-radius: 0; border: none; }
  html:not(#_) body:has(#ds-menu:checked) .sb-link{ font-size: .95rem; padding: 12px 14px; }
  html:not(#_) body:has(#ds-menu:checked) .sb-silo-ville, html:not(#_) body:has(#ds-menu:checked) .sb-top-item{ font-size: .88rem; padding: 8px 10px; }
  html:not(#_) body:has(#ds-menu:checked) .sb-section-title{ font-size: .74rem; }
  html:not(#_) body:has(#ds-menu:checked) .sb-logo{ margin-bottom: 8px; }
}

/* ==================
   f) mouvement réduit
   ================== */
@media (prefers-reduced-motion: reduce) {
  html:not(#_) .section h2::after{ animation: none; }
  html:not(#_) .profile-card, html:not(#_) .profile-photo img, html:not(#_) .profile-cta, html:not(#_) .link-tag, html:not(#_) .filter-btn, html:not(#_) .tab, html:not(#_) .cta-section .btn-primary, html:not(#_) .cta-section a.btn, html:not(#_) .sb-link::before, html:not(#_) .accordion-item{ transition: none !important; animation: none !important; }
  html:not(#_) .profile-card:hover{ transform: none; }
  html:not(#_) .profile-card:hover .profile-photo img{ transform: none; }
  html:not(#_) .link-tag:hover{ transform: none; }
  html:not(#_) .cta-section .btn-primary:hover, html:not(#_) .cta-section a.btn:hover{ transform: none; }
}

@media (prefers-reduced-motion: reduce){html:not(#_) .sidebar-inner{animation:none !important;transition:none !important;}}
/* __END_DESIGN_SITE__ */