/* ============================================================
   PUBLIC.CSS — site vitrine public (ambiance « Terre patrimoine »)
   Feuille STANDALONE, isolée du back-office : n'importe NI les
   tokens fulgore NI components.css. Port fidèle du design system
   validé (design-systems/base.css + terre-patrimoine/theme.css),
   sous-ensemble « home ». 100 % piloté par variables.
   Polices self-hébergées (RGPD, zéro appel réseau) servies par
   Propshaft depuis app/assets/fonts/.
   ============================================================ */

/* ── FONTS (Cormorant Garamond display + DM Sans corps) ─────── */
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/cormorant-garamond-normal-400-600-latin-ext-978b5ddd.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/cormorant-garamond-normal-400-600-latin-a7e1075e.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/cormorant-garamond-italic-400-600-latin-ext-dbd1535f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/cormorant-garamond-italic-400-600-latin-68caabcf.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/dm-sans-normal-400-700-latin-ext-bad22e9b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/dm-sans-normal-400-700-latin-97b33bb4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── THEME — TERRE PATRIMOINE (terracotta chaud, mode clair) ── */
:root {
  color-scheme: light;

  --color-bg:#FBF6EF; --color-surface:#F5EAD9; --color-surface-alt:#EEDCC2;
  --color-text:#2E2116; --color-text-soft:#5C4A38; --color-text-muted:#8F7B62;
  --color-accent:#B75A34; --color-accent-hover:#9B4A29; --color-on-accent:#FBF6EF;
  --color-secondary:#5F7052; --color-secondary-dark:#485840;
  --color-border:#E6D5BB; --color-border-strong:#D4BB93;
  --color-header-bg:rgba(251,246,239,0.88);

  --radius-sm:3px; --radius-md:8px; --radius-lg:12px;

  --shadow-sm:0 1px 3px rgba(46,33,22,0.08);
  --shadow-md:0 10px 26px rgba(46,33,22,0.12);
  --shadow-lg:0 22px 54px rgba(46,33,22,0.17);

  --scene-hero:radial-gradient(90% 70% at 82% 10%, rgba(183,90,52,0.10), transparent 55%), radial-gradient(70% 60% at 8% 95%, rgba(95,112,82,0.08), transparent 60%), linear-gradient(170deg,#FBF6EF 0%,#F6ECDC 55%,#EFDFC5 100%);

  --tile-hero:linear-gradient(155deg,#E9D2B4,#CBA173);
  --hero-visual-overlay:radial-gradient(55% 45% at 70% 25%, rgba(255,255,255,0.14), transparent 60%);
  --tile-portrait:linear-gradient(155deg,#E2C6A2,#BE9269);
  --tile-1:linear-gradient(155deg,#EAD4B7,#CDA679);
  --tile-2:linear-gradient(155deg,#DEE1C9,#BFC59F);
  --tile-3:linear-gradient(155deg,#E7DCC9,#CBB98F);
  --tile-4:linear-gradient(155deg,#E3CBAE,#C09E76);
}

/* ── ÉCHELLE PARTAGÉE (typo + espace + mouvement) ─────────── */
:root {
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem;
  --text-5xl:3rem; --text-6xl:3.75rem; --text-7xl:4.5rem;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem;
  --gutter:clamp(1rem,6vw,4rem); --section-gap:clamp(3rem,8vw,7rem);
  --ease:cubic-bezier(0.4,0,0.2,1); --duration-fast:160ms; --duration-base:300ms;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif;
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 1rem; line-height: 1.65;
  color: var(--color-text); background-color: var(--color-bg);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
address { font-style: normal; }
button { font: inherit; }

/* ── UTILITAIRES DE LAYOUT ────────────────────────────────── */
.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { width: 100%; max-width: 860px; margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:var(--space-4); top:-100px; z-index:200; background:var(--color-accent); color:var(--color-on-accent,#fff); padding:var(--space-3) var(--space-5); border-radius:var(--radius-sm); transition:top var(--duration-fast) var(--ease); }
.skip-link:focus { top:var(--space-4); }
:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }

.eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--color-secondary); margin-bottom:var(--space-3); }
.section-title { font-family:var(--font-display); font-size: clamp(var(--text-3xl),4.5vw,var(--text-5xl)); font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); line-height:1.1; }
.section-lead { font-size:var(--text-lg); color:var(--color-text-soft); max-width:56ch; margin-top:var(--space-4); line-height:1.6; }
.section-head { margin-bottom: var(--space-10); }
@media (min-width:768px){ .section-head{ margin-bottom: var(--space-12); } }

/* ── BOUTONS ──────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:600; letter-spacing:.02em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  border-radius:999px; padding:var(--space-3) var(--space-6); min-height:44px;
  border:1px solid transparent; transition:background-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), transform var(--duration-fast) var(--ease);
}
.btn-primary { background:var(--color-accent); color:var(--color-on-accent); }
.btn-primary:hover, .btn-primary:focus-visible { background:var(--color-accent-hover); transform:translateY(-1px); }
.btn-secondary { background:transparent; color:var(--color-text); border-color:var(--color-border-strong); }
.btn-secondary:hover, .btn-secondary:focus-visible { border-color:var(--color-accent); color:var(--color-accent); }
.btn-ghost { background:transparent; color:var(--color-accent); padding-inline:0; min-height:auto; }
.btn-ghost::after { content:'→'; margin-left:var(--space-1); transition:transform var(--duration-base) var(--ease); display:inline-block; }
.btn-ghost:hover::after { transform:translateX(4px); }
.btn-sm { font-size:var(--text-xs); padding:var(--space-2) var(--space-4); min-height:36px; }
.btn-lg { font-size:var(--text-base); padding:var(--space-4) var(--space-8); }
.btn-block { width:100%; }

/* ── HEADER ───────────────────────────────────────────────── */
.site-header { position:sticky; top:0; z-index:100; background-color:var(--color-header-bg); border-bottom:1px solid var(--color-border); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.header-inner { display:flex; align-items:center; gap:var(--space-4); min-height:72px; padding-block:var(--space-2); }
.logo { display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; }
.logo-mark { width:44px; height:44px; flex-shrink:0; }
.logo-name { font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; color:var(--color-text); letter-spacing:.01em; white-space:nowrap; line-height:1.15; }
.logo-name small { display:block; font-family:var(--font-body); font-size:.6rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-muted); margin-top:2px; }
.site-nav { flex:1; min-width:0; display:none; }
.nav-list { display:flex; align-items:center; gap:var(--space-1); flex-wrap:wrap; }
.nav-link { font-size:var(--text-sm); font-weight:500; color:var(--color-text-soft); padding:var(--space-2) var(--space-4); border-radius:999px; transition:color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); white-space:nowrap; }
.nav-link:hover, .nav-link:focus-visible { color:var(--color-text); background-color:var(--color-surface-alt); }
.nav-cta { flex-shrink:0; margin-left:auto; }
.nav-toggle { display:flex; align-items:center; justify-content:center; font-size:var(--text-xl); background:none; border:1px solid var(--color-border-strong); border-radius:999px; color:var(--color-text); cursor:pointer; min-width:44px; min-height:44px; }
@media (min-width:960px){ .nav-toggle{display:none;} .site-nav{display:block;} .nav-cta{margin-left:0;} }
@media (max-width:959px){ .header-inner{gap:var(--space-3);} .nav-cta{display:none;} }

/* ── HERO (home) ──────────────────────────────────────────── */
.hero { position:relative; padding-block: clamp(3rem,10vw,6rem) var(--section-gap); overflow:hidden; background:var(--scene-hero); border-bottom:1px solid var(--color-border); }
.hero-inner { display:grid; grid-template-columns:1fr; gap:var(--space-10); align-items:center; }
@media (min-width:900px){ .hero-inner{ grid-template-columns: 1.1fr .9fr; gap:var(--space-12); } }
.hero-title { font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,7vw,4.5rem); line-height:1.04; letter-spacing:-0.01em; color:var(--color-text); margin-bottom:var(--space-5); }
.hero-title em { font-style:italic; color:var(--color-accent); font-weight:500; }
.hero-sub { font-size:clamp(var(--text-base),1.6vw,var(--text-lg)); color:var(--color-text-soft); max-width:52ch; line-height:1.65; margin-bottom:var(--space-8); }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); }
.hero-stats { display:flex; gap:var(--space-8); margin-top:var(--space-10); flex-wrap:wrap; }
.hero-stat-num { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:600; color:var(--color-accent); line-height:1; }
.hero-stat-label { font-size:var(--text-xs); color:var(--color-text-muted); letter-spacing:.08em; text-transform:uppercase; margin-top:var(--space-1); }
.hero-visual { position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; background:var(--tile-hero); border:1px solid var(--color-border); }
.hero-visual::after { content:''; position:absolute; inset:0; background:var(--hero-visual-overlay,none); }
.hero-visual-badge { position:absolute; left:var(--space-5); bottom:var(--space-5); background:var(--color-surface); border:1px solid var(--color-border); border-radius:999px; padding:var(--space-2) var(--space-4); font-size:var(--text-xs); font-weight:600; color:var(--color-text); display:flex; align-items:center; gap:var(--space-2); box-shadow:var(--shadow-md); }
.hero-visual-badge .dot { width:8px; height:8px; border-radius:999px; background:var(--color-accent); }

/* ── GRILLE DE BIENS ──────────────────────────────────────── */
.properties-section { padding-block: var(--section-gap); }
.properties-grid { display:grid; grid-template-columns:1fr; gap:var(--space-6); }
@media (min-width:640px){ .properties-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .properties-grid{ grid-template-columns:repeat(3,1fr); gap:var(--space-8); } }

.property-card { display:flex; flex-direction:column; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
.property-card:hover { border-color:var(--color-border-strong); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.property-media { position:relative; aspect-ratio:4/3; background:var(--tile-1); overflow:hidden; }
.property-media img { width:100%; height:100%; object-fit:cover; }
.property-card:nth-child(3n+2) .property-media { background:var(--tile-2); }
.property-card:nth-child(3n+3) .property-media { background:var(--tile-3); }
.property-status { position:absolute; top:var(--space-3); left:var(--space-3); font-size:var(--text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:var(--space-1) var(--space-3); border-radius:999px; background:var(--color-accent); color:var(--color-on-accent); }
.property-status--sold { background:var(--color-text-muted); }
.property-category { position:absolute; top:var(--space-3); right:var(--space-3); font-size:var(--text-xs); font-weight:600; padding:var(--space-1) var(--space-3); border-radius:999px; background:color-mix(in srgb, var(--color-bg) 82%, transparent); color:var(--color-text); border:1px solid var(--color-border); backdrop-filter:blur(6px); }
.property-body { padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.property-type { font-size:var(--text-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--color-secondary); }
.property-title { font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; color:var(--color-text); line-height:1.2; }
.property-location { font-size:var(--text-sm); color:var(--color-text-soft); display:flex; align-items:center; gap:var(--space-1); }
.property-meta { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:var(--space-3); border-top:1px solid var(--color-border); }
.property-price { font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; color:var(--color-accent); }
.property-facts { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-xs); color:var(--color-text-muted); }
.property-dpe { display:inline-flex; align-items:center; justify-content:center; width:24px; height:20px; border-radius:4px; font-size:.65rem; font-weight:700; color:#fff; }

/* Couleurs officielles DPE (grille A→G, vert → rouge) réutilisées pour badges compacts */
.dpe-a { background:#319834; } .dpe-b { background:#33cc31; }
.dpe-c { background:#cbfc34; color:#1a1a1a; } .dpe-d { background:#fbfe06; color:#1a1a1a; }
.dpe-e { background:#fbcc05; color:#1a1a1a; } .dpe-f { background:#fc9935; } .dpe-g { background:#fc1a10; }

/* ── PHILOSOPHIE / PITCH ──────────────────────────────────── */
.philosophy-section { padding-block: var(--section-gap); background:var(--color-surface); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.philosophy-inner { display:grid; grid-template-columns:1fr; gap:var(--space-10); align-items:center; }
@media (min-width:900px){ .philosophy-inner{ grid-template-columns:.9fr 1.1fr; gap:var(--space-16); } }
.philosophy-portrait { aspect-ratio:1; border-radius:var(--radius-lg); background:var(--tile-portrait); border:1px solid var(--color-border); }
.philosophy-quote { font-family:var(--font-display); font-style:italic; font-size:clamp(var(--text-2xl),3.4vw,var(--text-4xl)); line-height:1.3; color:var(--color-text); }
.philosophy-quote em { color:var(--color-accent); font-style:italic; }
.philosophy-signature { margin-top:var(--space-6); font-size:var(--text-sm); color:var(--color-text-soft); }
.philosophy-signature strong { color:var(--color-text); font-weight:600; }

/* ── FACTS / PARTENAIRES ──────────────────────────────────── */
.facts-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); margin:var(--space-8) 0; }
@media (min-width:520px){ .facts-grid{ grid-template-columns:repeat(4,1fr); } }
.fact-item { padding:var(--space-4); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); text-align:center; }
.fact-num { font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; color:var(--color-text); }
.fact-label { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:var(--space-1); text-transform:uppercase; letter-spacing:.06em; }

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer { background:var(--color-bg); border-top:1px solid var(--color-border); padding-block:var(--space-12); }
.footer-inner { display:grid; grid-template-columns:1fr; gap:var(--space-8); }
@media (min-width:768px){ .footer-inner{ grid-template-columns:1.2fr 1fr 1fr; } }
.footer-brand-name { font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; color:var(--color-text); margin-bottom:var(--space-3); }
.footer-tagline { font-size:var(--text-sm); color:var(--color-text-soft); max-width:32ch; line-height:1.6; }
.footer-heading { font-size:var(--text-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:var(--space-4); }
.footer-nav { display:flex; flex-direction:column; gap:var(--space-2); }
.footer-link { font-size:var(--text-sm); color:var(--color-text-soft); transition:color var(--duration-fast) var(--ease); }
.footer-link:hover { color:var(--color-accent); }
.footer-contact { font-size:var(--text-sm); color:var(--color-text-soft); line-height:1.8; }
.footer-contact a { color:var(--color-accent); }
.footer-bottom { margin-top:var(--space-10); padding-top:var(--space-6); border-top:1px solid var(--color-border); display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; font-size:var(--text-xs); color:var(--color-text-muted); }
.footer-mentions { max-width:70ch; line-height:1.6; opacity:.85; }

/* ── NAV MOBILE (hamburger fonctionnel — contrôleur Stimulus « mobile-nav ») ──
   Le prototype statique laissait le hamburger décoratif ; ici le contrôleur
   bascule `.is-open` sur `.site-nav`, affiché en panneau déroulant sous le header. */
@media (max-width:959px){
  .site-nav {
    position:absolute; top:100%; left:0; right:0;
    display:none;
    background:var(--color-header-bg);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--color-border);
    box-shadow:var(--shadow-md);
    padding:var(--space-4) var(--gutter);
  }
  .site-nav.is-open { display:block; }
  .site-nav.is-open .nav-list { flex-direction:column; align-items:stretch; gap:var(--space-1); }
  .site-nav.is-open .nav-link { padding-block:var(--space-3); }
}

/* Partenaires : 2 colonnes fixes (2 items) plutôt que la grille facts 4-col */
.facts-grid--pairs { grid-template-columns:repeat(2,1fr); }