/* ═══════════════════════════════════════════════════════
   TAKEYS V4 — DA claire (validée par Charly le 01/11/2026)
   Couche chargée EN DERNIER sur toutes les pages qui utilisent v2/v3.
   Fond crème, texte encre, titres Bricolage, accents olive / sauge.
   Palette = brand guide officiel (crème #FFFFF5, sauge #A1B2AF,
   olive #4F523D, terre #605446, pierre #C4BEB4, encre #2B2727).
   Retour arrière : retirer le <link> takeys-v4.css (ou vider ce fichier).
   ═══════════════════════════════════════════════════════ */

@font-face {
  font-family: "Bricolage";
  src: url("/assets/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

/* ── Jetons : on inverse le sens clair / foncé ──
   v2 nomme --ink/--charcoal les fonds et --bone le texte. On garde les noms,
   on change les valeurs : tout ce qui était « fond sombre / texte clair »
   devient « fond crème / texte encre », et les couples inversés
   (bouton plein, étiquette) restent contrastés. */
:root, body, body[class] {
  --ink: #fffff5;
  --charcoal: #fffff5;
  --charcoal-2: #f3f0e7;
  --charcoal-3: #ebe6da;
  --bone: #2b2727;
  --bone-2: #44312b;
  --bone-soft: rgba(43, 39, 39, 0.78);
  --bone-dim: rgba(43, 39, 39, 0.70);
  --bone-line: rgba(43, 39, 39, 0.18);
  --bone-line-2: rgba(43, 39, 39, 0.11);

  --earth: #605446;
  --stone: #c4beb4;
  --sage-deco: #a1b2af;
  --dark: #2b2727;
  --cream: #fffff5;

  --olive: #4f523d;
  --olive-deep: #3e4130;
  --copper: #8a6849;       /* cuivre lisible sur crème (5:1) */
  --copper-deep: #6f5338;
  --terracotta: #98564c;

  --f-serif: "Bricolage", "Avenir Next", system-ui, sans-serif;
  --f-mono: "Bricolage", "Avenir Next", system-ui, sans-serif;
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Accent texte : le sauge (#A1B2AF) ne passe pas l'accessibilité en texte sur
   crème (2,2:1). Les textes d'accent passent en olive (8:1) ; le sauge reste
   pour les carrés, puces et barres. Toulouse garde son cuivre (toulouse.css). */
:root, body.accent-beige, body.accent-copper {
  --sauge: #4f523d;
  --sauge-deep: #3e4130;
}

body {
  background: var(--cream);
  color: var(--dark);
  font-weight: 400;
}
::selection { background: var(--sage-deco); color: var(--dark); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--sage-deco); outline-offset: 3px;
}

/* ── Libellés (ex-mono) : capitales lisibles, plus de chasse fixe ── */
.mono { font-weight: 700; letter-spacing: 0.13em; }
.section-label, .hero-label, .nav-links, .lang-toggle, .footer-cols h5,
.tls-label, .tls-surtitle, .tls-crumb, .tls-card-tag, .tls-cell-num, .tls-proof-lbl,
.mk-label, .mk-surtitle, .mk-crumb, .mk-card-tag, .mk-cell-num, .mk-proof-lbl,
.jcard-cta, .btn-ghost, .equipe-role, .sbi-lbl { font-weight: 700; }

.section-label { color: var(--earth); letter-spacing: 0.15em; }
.section-label::before {
  width: 9px; height: 9px; background: var(--sage-deco);
}

/* ── Titres : Bricolage gras, interlignage serré, « em » en léger ── */
.section-title, .hero-tagline, .footer-slogan, .tls-h1, .mk-h1, .art-title,
.stat-num, .agg-score, .ometric-num, .sbi-num, .map-preview-name, .marquee-item {
  font-weight: 800;
  letter-spacing: -0.055em;
}
.section-title { line-height: 0.95; }
.tls-h2, .mk-h2 { font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.val-name, .lstep-body h3, .jcard-title, .bif-title, .equipe-name,
.tls-cell h3, .mk-cell h3, .tls-card h3, .mk-card h3, .tls-prose h3, .mk-prose h3,
.art-body h2, .art-cta-title, .hcta-title, .rappel-form h2, .pv-tag,
.map-label-name, .tls-proof-num, .mk-proof-num, .art-stat-num, .lstep-num {
  font-weight: 700;
  letter-spacing: -0.03em;
}
.tl-italic,
.section-title em, .hero-tagline em, .footer-slogan em,
.tls-h1 em, .tls-h2 em, .mk-h1 em, .mk-h2 em, .art-title em, .bif-title em, .pv-tag em,
.stat-num em, .agg-score em, .ometric-num em, .sbi-num em {
  font-style: normal;
  font-weight: 300;
  color: var(--earth);
}
/* Corps éditoriaux (ex-italique Cormorant) : droits et lisibles */
.hero-sub, .values-lead, .contact-intro, .intro-body p.intro-sig, .stat-lbl,
.tls-tagline, .mk-tagline, .map-label-tag, .rcard-text, .art-pullquote p, .mk-quote p {
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.lstep-num { font-style: normal; color: var(--olive); }

/* ── Navigation ── */
#nav { background: rgba(255, 255, 245, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--bone-line-2); }
#nav.scrolled { background: rgba(255, 255, 245, 0.94); }
.nav-logo { filter: brightness(0); }
.nav-links { letter-spacing: 0.1em; }
.nav-links a { opacity: 0.8; }
.lang-btn.active, .lang-btn:hover { color: var(--olive); }
.mobile-menu { background: var(--cream); }
.mobile-menu-inner a { font-weight: 700; font-size: 30px; letter-spacing: -0.03em; }

/* ── Boutons ── */
.btn-primary { font-weight: 700; }
.btn-primary:hover { background: var(--olive); color: var(--cream); }
.btn-outline { border-color: var(--dark); font-weight: 700; }
.btn-outline:hover { background: var(--dark); color: var(--cream); border-color: var(--dark); }
.btn-ghost { border-bottom-color: rgba(79, 82, 61, 0.4); }
.btn-ghost:hover { color: var(--dark); border-color: var(--dark); }

/* ── Accueil : hero clair, photo en bloc arrondi sous le texte ── */
#hero {
  min-height: 0 !important;
  justify-content: flex-start !important;
  padding: clamp(120px, 15vh, 170px) var(--gutter) clamp(40px, 6vw, 72px) !important;
  background: var(--cream);
}
#hero .hero-inner { order: 1; }
#hero .hero-media {
  order: 2;
  position: relative; inset: auto;
  height: clamp(240px, 44vw, 560px);
  margin-top: clamp(36px, 5vw, 64px);
  border-radius: 24px;
  overflow: hidden;
  transform: none !important;
}
#hero .hero-bg { filter: none; }
#hero .hero-veil, #hero .hero-meta-top, #hero .hero-watermark { display: none !important; }
.hero-label { color: var(--earth); font-weight: 700; letter-spacing: 0.15em; }
.hero-label-dot { width: 9px; height: 9px; background: var(--sage-deco); }
.hero-tagline { line-height: 0.9 !important; letter-spacing: -0.065em; }
.hero-sub { color: var(--earth); font-family: var(--f-serif); }

.hero-cta-pair { max-width: 780px; }
.hcta-title { font-size: clamp(18px, 1.7vw, 21px); }
.hcta {
  border: 1px solid var(--dark);
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 18px;
}
.hcta-tag { color: var(--earth); opacity: 1; }
.hcta-title { color: var(--dark); }
.hcta-arrow { color: var(--dark); font-family: var(--f-sans); }
.hcta:hover { background: var(--charcoal-2); border-color: var(--dark); }
.hcta:hover .hcta-arrow { color: var(--dark); }
.hcta-trav { border-left: 1px solid var(--dark); }
.hcta-own { background: var(--dark); border-color: var(--dark); }
.hcta-own .hcta-tag { color: var(--stone); opacity: 1; }
.hcta-own .hcta-title, .hcta-own .hcta-arrow { color: var(--cream); }
.hcta-own:hover { background: var(--olive); border-color: var(--olive); }
.hero-cities { border-top-color: var(--bone-line-2); }

/* ── Bandeau chiffres : bande sombre, comme la propal ── */
.stat-band {
  --bone: #fffff5; --bone-dim: rgba(255, 255, 245, 0.72); --bone-line-2: rgba(255, 255, 245, 0.14);
  --sauge: #a1b2af;
  background: var(--dark); color: var(--cream);
}
.sbi-num { color: var(--cream); }
.sbi-num em { color: var(--sage-deco); }

/* ── Blocs et cartes ── */
.pv-tag { background: var(--dark); color: var(--cream); box-shadow: 0 24px 60px rgba(68, 49, 43, 0.18); border-radius: 16px; }
.pv-tag em { color: var(--stone); }
.pv-card { background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(68, 49, 43, 0.12); }
/* Photos arrondies : on coupe le zoom de parallaxe (scale 1.15), qui faisait
   déborder l'image sur le libellé placé dessous. */
.pv-photo, .jcard-photo { border-radius: 20px; transform: none !important; }
.rcard-stars { color: var(--olive); }
.equipe-card { border-radius: 20px; background: rgba(255, 255, 255, 0.55); }
.equipe-card:hover { border-color: var(--bone-line); }
.map-preview { background: rgba(255, 255, 245, 0.95); }
.mstrip-btn:hover, .mstrip-btn.active { color: var(--cream); }
.tls-card, .mk-card { border-radius: 20px; background: rgba(255, 255, 255, 0.55); }
.tls-btn-primary, .mk-btn-primary { color: var(--cream); }
.tls-btn-primary:hover, .mk-btn-primary:hover { color: var(--dark); }

/* Formulaire sur-mesure (champs pensés pour fond sombre) */
.sm-form { background: rgba(255, 255, 255, 0.6) !important; border-color: var(--bone-line) !important; }
.sm-field input, .sm-field textarea, .sm-field select, .sm-chip {
  background: #fff !important; border-color: var(--bone-line) !important; color: var(--dark) !important;
}
.sm-field input::placeholder, .sm-field textarea::placeholder { color: rgba(43, 39, 39, 0.5) !important; }
.sm-field select option { background: #fff !important; color: var(--dark) !important; }
.sm-chip.on { background: var(--dark) !important; border-color: var(--dark) !important; color: var(--cream) !important; }
.sm-submit { background: var(--dark) !important; color: var(--cream) !important; }
.sm-submit:hover { background: var(--olive) !important; }

/* Fenêtre « Être rappelé » */
.rappel-dlg { border-radius: 20px; background: var(--cream); }
.rappel-form input:not([type=checkbox]) { background: #fff; border-radius: 10px; }
.rappel-send { background: var(--dark); color: var(--cream); border-radius: 999px; font-weight: 700; }
.rappel-form h2 { font-style: normal; }
.rappel-link { font-family: var(--f-sans); font-weight: 500; letter-spacing: 0; }

/* ── Pied de page : îlot sombre ── */
footer {
  --ink: #2b2727; --charcoal: #2b2727;
  --bone: #fffff5; --bone-soft: rgba(255, 255, 245, 0.8); --bone-dim: rgba(255, 255, 245, 0.68);
  --bone-line: rgba(255, 255, 245, 0.18); --bone-line-2: rgba(255, 255, 245, 0.12);
  --sauge: #a1b2af;
  background: var(--dark) !important;
  color: var(--cream);
}
.footer-slogan em { color: var(--stone); }
.footer-logo { height: 46px !important; }

@media (max-width: 720px) {
  #hero { padding: 100px var(--gutter) 36px !important; }
  .hero-tagline { font-size: clamp(42px, 13vw, 64px) !important; }
  .hero-sub { font-size: 17px !important; }
  #hero .hero-media { height: 240px; border-radius: 18px; }
  .hcta { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-band::before { animation: none; }
}

/* ── Titres de pages à style intégré (logements, sur-mesure, Bible, fiche) ── */
h1 { font-weight: 800; letter-spacing: -0.05em; }
h1 em, h2 em { font-style: normal; font-weight: 300; color: var(--earth); }
.city-header-name { font-weight: 800; letter-spacing: -0.045em; }
.prop-name { font-weight: 700; letter-spacing: -0.02em; }

/* Catalogue : couleurs de ville prises dans la palette (au lieu de violet/orange/vert) */
.dot-tls, .badge-tls { background: #8a6849 !important; }
.dot-kch, .badge-kch { background: #98564c !important; }
.dot-ess, .badge-ess { background: #4f523d !important; }
.prop-city-badge { color: #fffff5; }
.city-tab.tls.active { border-color: #8a6849 !important; color: #8a6849 !important; background: rgba(138, 104, 73, 0.08) !important; }
.city-tab.kch.active { border-color: #98564c !important; color: #98564c !important; background: rgba(152, 86, 76, 0.08) !important; }
.city-tab.ess.active { border-color: #4f523d !important; color: #4f523d !important; background: rgba(79, 82, 61, 0.08) !important; }

/* ── Pages qui forçaient « Cormorant Garamond » en dur ou un titre en 300 ── */
.legal-page h1, .sm-hero h1, .sm-aside h2 { font-family: var(--f-serif) !important; }
.legal-page h1, .sm-hero h1, .bible-hero h1, .detail-title { font-weight: 800 !important; letter-spacing: -0.05em; line-height: 1; }
.sm-aside h2, .bible-modules-title, .toolkit-title, .newsletter-title, .detail-info h2 { font-weight: 700 !important; letter-spacing: -0.03em; }
.booking-price-amount { font-weight: 800; letter-spacing: -0.04em; }
.sm-hero h1 em, .sm-aside h2 em, .bible-hero h1 em { font-style: normal; font-weight: 300; color: var(--earth); }
.badge-toulouse { color: #8a6849 !important; border-color: rgba(138, 104, 73, 0.35) !important; }
.badge-marrakech { color: #98564c !important; border-color: rgba(152, 86, 76, 0.35) !important; }
.badge-essaouira { color: #4f523d !important; border-color: rgba(79, 82, 61, 0.35) !important; }

/* ── Menu unique (même liens sur tout le site) ── */
.nav-links { gap: clamp(18px, 2.2vw, 36px); }
.nav-links a { padding: 14px 0; }                       /* zone de clic ~44 px */
.nav-links a::after { bottom: 8px; }
.nav-links a.active { opacity: 1; }
.nav-links a.active::after { transform: scaleX(1); }
.mobile-menu-inner a.active { color: var(--earth); }
.lang-btn { min-width: 32px; min-height: 44px; padding: 0 4px; }
.nav-burger { width: 44px; height: 44px; }
/* 8 liens : on passe au menu burger avant que ça se tasse */
@media (max-width: 1200px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}