/* ==========================================================================
   The Cozy Nest Company — Feuille de styles partagée (global)
   --------------------------------------------------------------------------
   Chargée par les 6 pages publiques. Contient :
     1. Tokens (:root)              — union des tokens des 6 fichiers source
     2. Reset
     3. Base                        (html, body, img, a, button, ul, container)
     4. Utilities                   (.u-*, .brass-divider)
     5. Composants partagés         (.reveal, .surtitle, .section-title,
                                     .section-subtitle, .link-cta)
     6. Buttons                     (.btn-primary*, .btn-secondary*)
     7. Header                      (.header*, incl. body.page-light overrides)
     8. Mobile menu                 (.mobile-menu*)
     9. Footer                      (.footer*)
    10. CTA Final (structure)       (.cta-final*) — l'image de fond est
                                     surchargée inline par chaque page
    11. Media queries communes      (1023, 767, prefers-reduced-motion)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS (:root)
   --------------------------------------------------------------------------
   Union des tokens des 6 fichiers HTML source. Les tokens marqués comme
   "fichiers logements uniquement" dans DESIGN.md §2 sont également inclus
   ici pour avoir une source unique de vérité (ils sont inoffensifs s'ils
   ne sont pas utilisés sur une page). Cf. DESIGN.md §8.3.
   ========================================================================== */
:root {
  /* --- Colors — Marque --- */
  --color-primary: #415d4b;
  --color-brass: #b8985a;
  --color-brass-soft: rgba(184, 152, 90, 0.25);

  /* --- Colors — Neutres --- */
  --color-cream: #f8f7f2;
  --color-white: #ffffff;
  --color-black: #1a1a1a;
  --color-gray-600: #6b6b6b;
  --color-gray-400: #8a8a8a;
  --color-gray-200: #e5e5e3;

  /* --- Alphas --- */
  --alpha-white-10: rgba(255, 255, 255, 0.10);
  --alpha-white-12: rgba(255, 255, 255, 0.12);
  --alpha-white-15: rgba(255, 255, 255, 0.15);
  --alpha-white-30: rgba(255, 255, 255, 0.30);
  --alpha-cream-50: rgba(248, 247, 242, 0.50);
  --alpha-cream-60: rgba(248, 247, 242, 0.60);
  --alpha-cream-70: rgba(248, 247, 242, 0.70);
  --alpha-cream-80: rgba(248, 247, 242, 0.80);
  --alpha-cream-85: rgba(248, 247, 242, 0.85);
  --alpha-black-30: rgba(0, 0, 0, 0.30);
  --alpha-black-45: rgba(0, 0, 0, 0.45);
  --alpha-black-50: rgba(0, 0, 0, 0.50);
  --alpha-black-55: rgba(26, 26, 26, 0.55);

  /* --- Spacing (échelle "t-shirt", pas de --spacing-9) --- */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 48px;
  --spacing-8: 64px;
  --spacing-10: 96px;

  /* --- Layout --- */
  --container-default: 1200px;
  --radius-md: 2px;
  --radius-pill: 9999px;
  --sticky-offset: 110px;

  /* --- Shadows & dividers --- */
  --shadow-photo: 0 12px 24px -8px rgba(26, 26, 26, 0.2);
  --shadow-photo-soft: 0 6px 16px -6px rgba(26, 26, 26, 0.12);
  --shadow-focus: 0 0 0 3px rgba(65, 93, 75, 0.3);
  --divider-fine: 1px solid rgba(65, 93, 75, 0.2);
  --hairline-brass: 1px solid var(--color-brass-soft);
  --hairline-gray: 1px solid var(--color-gray-200);

  /* --- Transitions --- */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Typography --- */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Poppins', system-ui, sans-serif;
  --font-script: 'Dancing Script', cursive;
}


/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ==========================================================================
   3. BASE
   ========================================================================== */

/* Verrouillage strict du défilement horizontal pour mobile */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--color-black);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--duration-fast) var(--easing);
}

button {
  border: none;
  cursor: pointer;
  font-family: inherit;
  background: none;
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--spacing-5);
}

a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}


/* ==========================================================================
   4. UTILITIES
   ========================================================================== */
.u-center {
  text-align: center;
}

.u-mb-6 {
  margin-bottom: var(--spacing-6);
}

.u-mb-8 {
  margin-bottom: var(--spacing-8);
}

.u-mt-8 {
  margin-top: var(--spacing-8);
}

.u-pt-10 {
  padding-top: var(--spacing-10);
}

.brass-divider {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-brass-soft);
  margin: 0 auto var(--spacing-4);
  border: 0;
}


/* ==========================================================================
   5. COMPOSANTS PARTAGÉS
   ========================================================================== */

/* --- Reveal au scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-normal) var(--easing), transform var(--duration-normal) var(--easing);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Désactivation sur mobile : évite le flash blanc et les zones vides au scroll */
@media (max-width: 768px) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Fallback accessibilité : respect du réglage système prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Surtitle --- */
.surtitle {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary);
  margin-bottom: var(--spacing-3);
}

.surtitle--light {
  color: var(--color-cream);
  opacity: .7;
}

.surtitle--center {
  text-align: center;
}

/* --- Section title --- */
.section-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  color: var(--color-black);
  margin-bottom: var(--spacing-5);
}

.section-title--center {
  text-align: center;
}

.section-title--light {
  color: var(--color-white);
}

/* --- Section subtitle --- */
.section-subtitle {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-600);
  line-height: 1.7;
  max-width: 560px;
  text-align: center;
  margin: 0 auto var(--spacing-7);
}

.section-subtitle--light {
  color: var(--alpha-cream-80);
}

/* --- Link CTA --- */
.link-cta {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
  display: inline-block;
  transition: all var(--duration-fast) var(--easing);
}

.link-cta:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.link-cta--small {
  font-size: 12px;
}

.link-cta--light {
  color: var(--color-cream);
}

.link-cta--light:hover {
  color: var(--color-white);
}


/* ==========================================================================
   6. BUTTONS
   --------------------------------------------------------------------------
   Famille de boutons documentée DESIGN.md §4.8. Les variantes --on-light /
   --on-dark sont aujourd'hui utilisées uniquement par les pages logement,
   mais documentées comme variantes officielles → remontées ici par cohérence.
   ========================================================================== */
.btn-primary {
  display: inline-block;
  padding: 16px 32px;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 2px;
  transition: filter var(--duration-fast) var(--easing);
}

.btn-primary:hover {
  filter: brightness(0.95);
}

.btn-primary--on-light {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-primary--on-light:hover {
  filter: brightness(1.1);
}

.btn-secondary {
  display: inline-block;
  padding: 16px 32px;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background var(--duration-fast) var(--easing);
}

.btn-secondary:hover {
  background: var(--alpha-white-10);
}

/* --on-dark : alias sémantique (équivalent de .btn-secondary par défaut) */
.btn-secondary--on-dark {
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn-secondary--on-dark:hover {
  background: var(--alpha-white-10);
  color: var(--color-white);
}

.btn-secondary--on-light {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transition: background var(--duration-fast) var(--easing), color var(--duration-fast) var(--easing);
}

.btn-secondary--on-light:hover {
  background: var(--color-primary);
  color: var(--color-white);
}


/* ==========================================================================
   7. HEADER
   --------------------------------------------------------------------------
   Le bloc body.page-light .header... permet de surcharger le rendu par
   défaut (texte blanc) pour les pages à hero clair. Cf. DESIGN.md §8.1.
   Inoffensif sur les pages qui n'ont pas la classe sur <body>.
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 220;
  height: 80px;
  transition: background var(--duration-normal) var(--easing), border-color var(--duration-normal) var(--easing);
  border-bottom: 1px solid transparent;
}

.header__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  display: flex;
  align-items: center;
  position: relative;
}

.header__logo picture,
.header__logo img {
  display: block;
  height: 31px;
  width: auto;
  transition: opacity var(--duration-normal) var(--easing), transform var(--duration-normal) var(--easing), filter var(--duration-fast) var(--easing);
}

.header__logo-text {
  position: absolute;
  left: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  color: var(--color-primary);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--easing), transform var(--duration-normal) var(--easing);
}

/* --- Header non-scrolled (défaut : sombre, pour hero vidéo/photo sombre) --- */
.header:not(.scrolled) .header__logo img {
  filter: brightness(0) invert(1);
}

.header:not(.scrolled) .header__nav a {
  color: var(--color-white);
}

.header:not(.scrolled) .header__cta {
  background: var(--color-primary);
  color: var(--color-white);
}

/* --- Override pages claires (body.page-light) --- */
/*
   Pour les pages dont le hero s'ouvre sur fond clair (cream).
   La nav doit être noire dès le chargement, sans attendre le scroll.
   Le mécanisme .scrolled reste intact (white bg + bordure verte au scroll).
*/
body.page-light .header:not(.scrolled) .header__logo img {
  filter: none;
}

body.page-light .header:not(.scrolled) .header__nav a {
  color: var(--color-black);
}

body.page-light .header:not(.scrolled) .header__hamburger span {
  background: var(--color-black);
}

/* --- Header scrolled (blanc opaque + bordure verte) --- */
.header.scrolled {
  background: var(--color-white);
  border-bottom-color: var(--color-primary);
}

.header.scrolled .header__logo img {
  filter: none;
}

.header.scrolled .header__nav a {
  color: var(--color-black);
}

/* --- Nav --- */
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.header__nav a {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: color var(--duration-fast) var(--easing);
}

.header__nav a:hover {
  color: var(--color-primary);
}

/* Indication subtile de la page courante (a11y + visuel) */
.header__nav a[aria-current="page"] {
  color: var(--color-primary);
}

.header.scrolled .header__nav a[aria-current="page"] {
  color: var(--color-primary);
}

/* --- CTA --- */
.header__cta {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 12px 24px;
  border-radius: 2px;
  background: var(--color-primary);
  color: var(--color-white);
  transition: filter var(--duration-fast) var(--easing);
}

.header .header__cta:hover {
  filter: brightness(0.9);
}

/* --- Hamburger --- */
.header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 28px;
  height: 28px;
  position: relative;
  z-index: 220;
}

.header__hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-white);
  transition: all var(--duration-normal) var(--easing);
  transform-origin: center;
}

.header.scrolled .header__hamburger span {
  background: var(--color-black);
}

.header__hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5.5px, 5.5px);
}

.header__hamburger.open span:nth-child(2) {
  opacity: 0;
}

.header__hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5.5px, -5.5px);
}


/* ==========================================================================
   8. MOBILE MENU
   ========================================================================== */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 210;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s var(--duration-normal);
}

.mobile-menu.open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: var(--alpha-black-45);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing);
  z-index: 205;
}

.mobile-menu.open .mobile-menu__backdrop {
  opacity: 1;
}

.mobile-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  max-width: 380px;
  height: 100%;
  background: var(--color-primary);
  transform: translateX(-100%);
  transition: transform var(--duration-normal) var(--easing);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-6);
  padding: 100px var(--spacing-6) var(--spacing-7);
  z-index: 211;
}

.mobile-menu.open .mobile-menu__panel {
  transform: translateX(0);
}

.mobile-menu__panel a {
  font-family: var(--font-serif);
  font-size: 28px;
  font-style: italic;
  color: var(--color-white);
  transition: opacity var(--duration-fast);
}

.mobile-menu__panel a:hover {
  opacity: .7;
}

/* Indication de la page courante dans le menu mobile (cohérence avec
   .header__nav a[aria-current="page"] sur desktop). */
.mobile-menu__panel a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

.mobile-menu .mobile-menu__cta {
  margin-top: var(--spacing-5);
  padding: 14px 32px;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 2px;
  transition: background var(--duration-fast) var(--easing);
}

.mobile-menu .mobile-menu__cta:hover {
  background: var(--alpha-white-10);
}


/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.footer {
  background: var(--color-primary);
  padding: var(--spacing-10) 0 var(--spacing-6);
  color: var(--color-cream);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--spacing-7);
}

.footer__brand-desc {
  font-size: 14px;
  color: var(--color-cream);
  opacity: .7;
  line-height: 1.7;
  max-width: 280px;
  margin-top: var(--spacing-4);
}

.footer__brand-logo img {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.footer__col a {
  font-size: 14px;
  color: var(--color-cream);
  opacity: .7;
  transition: opacity var(--duration-fast) var(--easing);
}

.footer__col a:hover {
  opacity: 1;
  color: var(--color-white);
}

.footer__col p {
  font-size: 14px;
  color: var(--color-cream);
  opacity: .7;
  line-height: 1.7;
}

.footer__col .surtitle {
  margin-bottom: var(--spacing-5);
}

.footer__bottom {
  border-top: 1px solid var(--alpha-white-10);
  margin-top: var(--spacing-7);
  padding-top: var(--spacing-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.footer__copy {
  font-size: 12px;
  color: var(--color-cream);
  opacity: .75;
}

.footer__copy a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__socials {
  display: flex;
  gap: var(--spacing-4);
}

.footer__socials a {
  display: flex;
  opacity: .6;
  transition: opacity var(--duration-fast), transform var(--duration-fast);
}

.footer__socials a:hover {
  opacity: 1;
  transform: scale(1.05);
}

.footer__socials svg {
  width: 20px;
  height: 20px;
  fill: var(--color-cream);
}


/* ==========================================================================
   10. CTA FINAL — structure (version home)
   --------------------------------------------------------------------------
   Bloc utilisé sur 5 des 6 pages (home + 4 pages logement). L'image de fond
   est différente par page → chaque page surcharge la propriété
   `background-image` dans son <style> inline. Les autres propriétés
   (position, attachment, overlay, etc.) restent communes.

   Note : les pages logement ajoutent en plus `min-width: 240px` sur les
   boutons internes — cet enrichissement vit dans `listing.css`.
   ========================================================================== */
.cta-final {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('https://ma-reference-ia.fr/ressources/logement_2.jpeg') center/cover no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

.cta-final__overlay {
  position: absolute;
  inset: 0;
  background: var(--alpha-black-55);
  z-index: 1;
}

.cta-final__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--spacing-10) var(--spacing-5);
  max-width: 700px;
}

.cta-final__ornament {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--spacing-3);
}

.cta-final__ornament-line {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--color-brass);
  opacity: .75;
  margin-bottom: var(--spacing-3);
}

.cta-final__ornament-mark {
  font-size: 14px;
  color: var(--color-brass);
  line-height: 1;
}

.cta-final__title {
  font-family: var(--font-serif);
  font-size: 44px;
  font-style: italic;
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: var(--spacing-4);
}

.cta-final__subtitle {
  font-size: 16px;
  color: var(--color-white);
  opacity: .85;
  max-width: 560px;
  margin: 0 auto var(--spacing-6);
  line-height: 1.7;
}

.cta-final__buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}


/* ==========================================================================
   11. MEDIA QUERIES — responsive global
   ========================================================================== */

/* --- ≤ 1023px (tablette + mobile) --- */
@media (max-width: 1023px) {

  /* Header — bascule en mode hamburger */
  .header {
    height: 64px;
  }

  .header__nav,
  .header__cta {
    display: none;
  }

  .header__hamburger {
    display: flex;
  }

  .header__logo picture,
  .header__logo img {
    height: 25px;
  }

  /* Mobile : transformation du logo au scroll (image → texte) */
  .header.scrolled .header__logo picture,
  .header.scrolled .header__logo img {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .header.scrolled .header__logo-text {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Footer — passage en 2 colonnes */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- ≤ 767px (mobile) --- */
@media (max-width: 767px) {

  /* Section title : 44px → 32px */
  .section-title {
    font-size: 32px;
  }

  /* Footer — passage en 1 colonne */
  .footer__grid {
    grid-template-columns: 1fr;
  }

  /* CTA Final — adaptation mobile */
  .cta-final {
    background-attachment: scroll;
  }

  .cta-final__title {
    font-size: 32px;
  }

  .cta-final__buttons {
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 var(--spacing-5);
  }

  .cta-final__buttons .btn-primary,
  .cta-final__buttons .btn-secondary {
    width: 100%;
    text-align: center;
  }
}

/* --- Touch devices (parallaxe désactivée) --- */
@media (hover: none) and (pointer: coarse) {
  .cta-final {
    background-attachment: scroll;
  }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}