/* HABITAT CONFORT — charte « Ardoise & Galet » v1.0
   Ordre de chargement : main.css → components.css → responsive.css (cascade d'origine conservée). */
/* Polices auto-hébergées (SIL Open Font License) */
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/fraunces-500.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; }
@font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/instrument-sans-400.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; }
@font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/instrument-sans-500.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; }
@font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/instrument-sans-600.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; }

/* Tokens, base, typographie, grille, boutons, en-tête, menu */
/* =========================================================
   DESIGN TOKENS — charte « Ardoise & Galet » v1.0
   ========================================================= */
:root{
  color-scheme: light;
  /* Couleurs (charte, p.07) */
  --ardoise:#26343C; --ardoise-claire:#3B4D57;
  --ocre:#A8552A; --ocre-clair:#C9773F;
  --chaux:#F8F6F1; --galet:#EFEAE1; --pierre:#D9D1C3; --chene:#8A6A4A;
  --encre:#1E272D; --encre-douce:#55606A; --gris-galet:#8C949A; /* décoratif uniquement */
  --blanc:#FFFFFF;
  --succes:#3E7A4F; --erreur:#B3261E; --alerte:#9A6A00; --info:#2F6286;
  /* Typographie (charte, p.09–10) */
  --f-titre:"Fraunces", Georgia, "Times New Roman", serif;
  --f-texte:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-display:clamp(46px, 8.4vw, 132px);
  --fs-h1:clamp(38px, 1.9vw + 27px, 64px);
  --fs-h2:clamp(30px, 1.05vw + 26px, 44px);
  --fs-h3:clamp(22px, .45vw + 20px, 28px);
  --fs-h4:clamp(18px, .2vw + 17px, 20px);
  --fs-chapo:clamp(18px, .2vw + 17px, 20px);
  --fs-body:clamp(16px, .1vw + 15.6px, 17px);
  --fs-small:14px; --fs-label:clamp(12px, .1vw + 11.6px, 13px);
  --track-titre:-.01em; --track-label:.08em; --track-logo:.18em;
  /* Espacements base 8 (charte, p.13) */
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-24:24px; --s-32:32px;
  --s-48:48px; --s-64:64px; --s-72:72px; --s-120:120px;
  --section:clamp(72px, 6vw + 40px, 120px);
  /* Rayons, bordures, ombres */
  --r-ctrl:4px; --r-card:6px; --r-photo:0;
  --b-fin:1px solid var(--pierre); --b-fort:1.5px solid var(--ardoise); --b-actif:2px solid var(--ocre);
  --sh-sm:0 1px 2px rgba(38,52,60,.06); --sh-md:0 8px 24px -8px rgba(38,52,60,.14); --sh-lg:0 24px 48px -16px rgba(38,52,60,.20);
  /* Mise en page */
  --container:1240px; --texte-long:760px;
  --pad:clamp(20px, 2.5vw + 10px, 40px); --gutter:clamp(20px, 1vw + 16px, 32px);
  --header-h:80px;
  /* Mouvement */
  --ease:cubic-bezier(0.2, 0.7, 0.2, 1); --t-fast:250ms; --t-scene:900ms;
  /* Mise à l'abri des barres système (mobile) */
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: light; --chaux:#F8F6F1; --encre:#1E272D; } }
:root[data-theme="dark"]{ --chaux:#F8F6F1; --encre:#1E272D; }
html{ scroll-padding-top:calc(env(safe-area-inset-top, 0px) + 80px); -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--chaux); color:var(--encre);
  font-family:var(--f-texte); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--ocre); outline-offset:2px; }
.on-dark :focus-visible{ outline-color:var(--ocre-clair); }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; left:16px; top:-80px; z-index:200; background:var(--ardoise); color:var(--chaux); padding:12px 18px; border-radius:var(--r-ctrl); text-decoration:none; font-weight:600; }
.skip:focus{ top:calc(env(safe-area-inset-top,0px) + 12px); }

/* ---------- Typographie ---------- */
.display,.h1,.h2,.h3{ font-family:var(--f-titre); font-weight:500; letter-spacing:var(--track-titre); margin:0; font-variation-settings:"SOFT" 0, "WONK" 0; }
.display{ font-size:var(--fs-display); line-height:.98; letter-spacing:-.018em; }
.h1{ font-size:var(--fs-h1); line-height:1.05; }
.h2{ font-size:var(--fs-h2); line-height:1.1; }
.h3{ font-size:var(--fs-h3); line-height:1.2; }
.h4{ font-family:var(--f-texte); font-weight:600; font-size:var(--fs-h4); line-height:1.3; margin:0; }
.chapo{ font-size:var(--fs-chapo); line-height:1.55; margin:0; }
.small{ font-size:var(--fs-small); line-height:1.5; }
.label{ font-family:var(--f-texte); font-weight:600; font-size:var(--fs-label); line-height:1.3; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--chene); margin:0; }
.on-dark .label{ color:var(--pierre); }
.measure{ max-width:var(--texte-long); }
p{ margin:0 0 1em; }

/* ---------- Grille ---------- */
.container{ width:100%; max-width:calc(var(--container) + 2*var(--pad)); margin-inline:auto; padding-inline:var(--pad); }
.grid{ display:grid; grid-template-columns:repeat(4, 1fr); column-gap:var(--gutter); }
@media (min-width:768px){ .grid{ grid-template-columns:repeat(8, 1fr); } }
@media (min-width:1024px){ .grid{ grid-template-columns:repeat(12, 1fr); } }

.scene{ position:relative; padding-block:var(--section); }
.scene--galet{ background:var(--galet); }
.scene--ardoise{ background:var(--ardoise); color:var(--chaux); }
.kicker{ display:flex; align-items:baseline; gap:14px; margin:0 0 var(--s-32); }
.kicker__n{ font-family:var(--f-titre); font-size:15px; color:var(--ocre); font-variant-numeric:tabular-nums; }
.on-dark .kicker__n{ color:var(--ocre-clair); }
.kicker::after{ content:""; flex:0 0 48px; height:1px; background:currentColor; opacity:.35; align-self:center; order:3; }

/* ---------- Boutons (charte p.12–13) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 28px; border-radius:var(--r-ctrl);
  font-family:var(--f-texte); font-weight:600; font-size:16px; line-height:1;
  text-decoration:none; cursor:pointer; border:1.5px solid transparent; white-space:nowrap;
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn .arr{ display:inline-block; transition:transform var(--t-fast) var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--ocre); color:var(--blanc); }
.btn--primary:hover{ background:var(--ocre-clair); color:var(--encre); }
.btn--ghost{ background:transparent; border-color:var(--ardoise); color:var(--ardoise); }
.btn--ghost:hover{ background:var(--ardoise); color:var(--chaux); }
.on-dark .btn--ghost{ border-color:var(--chaux); color:var(--chaux); }
.on-dark .btn--ghost:hover{ background:var(--chaux); color:var(--ardoise); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn.is-loading{ pointer-events:none; opacity:.8; }
.link{ color:var(--ocre); font-weight:600; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat; transition:background-size var(--t-fast) var(--ease); padding-bottom:2px; }
.link:hover{ background-size:100% 1.5px; }
.on-dark .link{ color:var(--ocre-clair); }

/* Motif d'assises (charte p.11) — en bande, jamais derrière un texte */
.assises{ height:56px; background-color:var(--galet);
  background-image:
    linear-gradient(var(--pierre) 1px, transparent 1px),
    linear-gradient(90deg, var(--pierre) 1px, transparent 1px),
    linear-gradient(90deg, var(--pierre) 1px, transparent 1px);
  background-size:100% 14px, 44px 28px, 44px 28px;
  background-position:0 0, 0 0, 22px 14px;
}
.assises--sombre{ background-color:var(--ardoise);
  background-image:
    linear-gradient(var(--ardoise-claire) 1px, transparent 1px),
    linear-gradient(90deg, var(--ardoise-claire) 1px, transparent 1px),
    linear-gradient(90deg, var(--ardoise-claire) 1px, transparent 1px);
}

/* ---------- Apparitions (charte : fondu + 8 px, 250 ms) ---------- */
.rv{ opacity:0; transform:translateY(8px); transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.rv.in{ opacity:1; transform:none; }
.lines .ln{ display:block; overflow:hidden; padding-bottom:.06em; }
@media (min-width:768px){ .promesse__display .ln:nth-child(2){ padding-left:16.6%; } .promesse__display .ln:nth-child(3){ padding-left:8.3%; } }
.lines .ln > span{ display:block; transform:translateY(105%); transition:transform var(--t-scene) var(--ease); }
.lines.in .ln > span{ transform:none; }
.lines.in .ln:nth-child(2) > span{ transition-delay:90ms; }
.lines.in .ln:nth-child(3) > span{ transition-delay:180ms; }
html:not(.js) .rv,html:not(.js) .lines .ln > span{ opacity:1; transform:none; }

/* =========================================================
   HEADER
   ========================================================= */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; pointer-events:none; }
.progress span{ display:block; height:100%; background:var(--ocre); transform-origin:0 50%; transform:scaleX(0); }
.header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding-top:env(safe-area-inset-top, 0px);
  color:var(--chaux); transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  border-bottom:1px solid transparent;
}
.header__in{ height:var(--header-h); display:flex; align-items:center; gap:var(--s-24); transition:height var(--t-fast) var(--ease); }
.header.is-solid{ background:var(--chaux); color:var(--ardoise); border-bottom-color:var(--pierre); }
.header.is-solid .header__in{ height:64px; }
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; flex:0 0 auto; }
.logo svg{ width:34px; height:auto; flex:0 0 auto; }
.logo .bar{ fill:currentColor; }
.logo .top{ fill:var(--ocre-clair); }
.header.is-solid .logo .top,.logo--light .top{ fill:var(--ocre); }
.logo__txt{ display:flex; flex-direction:column; line-height:1; }
.logo__name{ font-family:var(--f-titre); font-weight:500; font-size:21px; letter-spacing:.04em; text-transform:uppercase; }
.logo__sig{ font-family:var(--f-texte); font-weight:600; text-align: center; font-size:8.4px; letter-spacing:var(--track-logo); text-transform:uppercase; margin-top:5px; }
.nav{ margin-left:auto; display:none; align-items:center; gap:var(--s-32); }
.nav a,.nav button{ font-weight:500; font-size:15px; text-decoration:none; background:none; border:0; padding:8px 0; cursor:pointer; position:relative; }
.nav > a::after,.nav__sub > button::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:0 50%; transition:transform var(--t-fast) var(--ease); }
.nav > a:hover::after,.nav__sub > button:hover::after,.nav__sub > button[aria-expanded="true"]::after{ transform:scaleX(1); }
.nav__sub{ position:relative; }
.nav__sub > button svg{ width:10px; margin-left:6px; transition:transform var(--t-fast) var(--ease); }
.nav__sub > button[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mega{ position:absolute; top:calc(100% + 14px); left:-24px; width:min(560px, 80vw); background:var(--chaux); color:var(--encre); border:var(--b-fin); border-radius:var(--r-card); box-shadow:var(--sh-lg); padding:var(--s-24); display:grid; grid-template-columns:1fr 1fr; gap:4px var(--s-24); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast); }
.mega.is-open{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.mega a{ display:block; padding:12px 0; border-bottom:var(--b-fin); font-weight:500; }
.mega a:hover{ color:var(--ocre); }
.mega a::after{ display:none; }
.header__tel{ display:none; font-weight:600; font-size:15px; text-decoration:none; font-variant-numeric:tabular-nums; }
.header__cta{ display:none; height:44px; padding:0 20px; font-size:15px; }
.burger{ margin-left:auto; width:48px; height:48px; display:grid; place-items:center; background:none; border:0; cursor:pointer; }
.burger span{ display:block; width:24px; height:1.5px; background:currentColor; position:relative; transition:background var(--t-fast); }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:24px; height:1.5px; background:currentColor; transition:transform var(--t-fast) var(--ease); }
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }
.tel-icon{ width:48px; height:48px; display:grid; place-items:center; margin-left:auto; color:inherit; }
.tel-icon + .burger{ margin-left:0; }
.tel-icon svg{ width:22px; }
@media (min-width:1024px){
  .nav{ display:flex; } .header__tel{ display:inline; } .header__cta{ display:inline-flex; }
  .burger,.tel-icon{ display:none; }
}
.menu{ position:fixed; inset:0; z-index:90; background:var(--ardoise); color:var(--chaux); padding:calc(env(safe-area-inset-top,0px) + 96px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 32px); display:flex; flex-direction:column; gap:var(--s-32); overflow:auto; clip-path:inset(0 0 100% 0); visibility:hidden; transition:clip-path 500ms var(--ease), visibility 0s linear 500ms; }
.menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition-delay:0s; }
.menu nav{ display:flex; flex-direction:column; }
.menu nav a{ font-family:var(--f-titre); font-size:34px; line-height:1.15; text-decoration:none; padding:10px 0; border-bottom:1px solid var(--ardoise-claire); }
.menu__services{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; }
.menu__services a{ font-size:15px; text-decoration:none; padding:8px 0; color:var(--pierre); }
.header.menu-open{ background:transparent; color:var(--chaux); border-bottom-color:transparent; }
.header.menu-open .logo .top{ fill:var(--ocre-clair); }



/* ---------- Utilitaires : remplacent les anciens styles en ligne, avec la même priorité (!important) ---------- */
.u-muted{ color:var(--encre-douce) !important; } .u-ink{ color:var(--encre) !important; }
.u-mt0{ margin-top:0 !important; } .u-mt8{ margin-top:8px !important; } .u-mt16{ margin-top:16px !important; } .u-mt24{ margin-top:24px !important; } .u-mt32{ margin-top:32px !important; } .u-mt48{ margin-top:48px !important; }
.u-mb16{ margin-bottom:16px !important; } .u-mb20{ margin-bottom:20px !important; } .u-mb24{ margin-bottom:24px !important; } .u-mb48{ margin-bottom:48px !important; } .u-my32{ margin-top:32px !important; margin-bottom:32px !important; }
.u-full{ grid-column:1 / -1 !important; } .u-maxw16{ max-width:16em !important; }
.u-links{ display:flex !important; flex-wrap:wrap !important; gap:12px 28px !important; }
.input--file{ padding-top:13px !important; }
.display--contact{ font-size:clamp(44px, 5vw + 16px, 96px) !important; }
.d-0{ --i:0; } .d-1{ --i:1; } .d-2{ --i:2; } .d-3{ --i:3; } .d-4{ --i:4; } .d-5{ --i:5; }
.ar-4-3{ --ar:4/3; } .ar-3-4{ --ar:3/4; } .ar-3-2{ --ar:3/2; } .ar-1-1{ --ar:1/1; }

/* ---------- Sans JavaScript : tout le contenu reste visible et utilisable ---------- */
html:not(.js) .js-only{ display:none!important; }
html:not(.js) .hero{ height:auto; }
html:not(.js) .hero__stick{ position:relative; height:auto; min-height:100vh; min-height:100svh; }
html:not(.js) .hero__fallback{ display:block; }
html:not(.js) .hero__canvas,html:not(.js) .hero__hud,html:not(.js) .hero__scroll{ display:none; }
html:not(.js) .hero__copy{ height:auto; min-height:100vh; min-height:100svh; }
html:not(.js) .burger{ display:none; }
html:not(.js) .nav__sub:hover .mega,html:not(.js) .nav__sub:focus-within .mega{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
html:not(.js) .header{ background:var(--ardoise); }